首頁

巧用視錯(cuò)覺 UI更有趣

用心設(shè)計(jì)

巧用視錯(cuò)覺 UI更有趣

格式塔原理解釋了人們?nèi)绾我砸曈X方式感覺物體,以及圖像的結(jié)構(gòu),視角,大小等要素是如何影響我們的視覺的。

在下面這篇文章中,我們首先會(huì)簡單介紹一下格式塔原理中的基本概念,然后再詳細(xì)探討一下如何將它們應(yīng)用于今日的UI設(shè)計(jì)中。

在設(shè)計(jì)中建立視覺層級(jí)

用心設(shè)計(jì)

在設(shè)計(jì)網(wǎng)站的時(shí)候,圖片資源會(huì)在很大程度上幫助你設(shè)置站點(diǎn),以及顏色,排版或者更多內(nèi)容的基調(diào)。如果圖片視覺元素沒有和設(shè)計(jì)正確的結(jié)合,他很可能會(huì)破壞你原本想呈現(xiàn)的感覺。

[系列]APP設(shè)計(jì)之四:注冊[登錄]

用心設(shè)計(jì)

48923-9a2cab7db4c4aa2b

按理說,沒準(zhǔn)備好就不應(yīng)該寫。但如果繼續(xù)后推,等準(zhǔn)備好再寫,覺得自己就會(huì)放棄這塊的總結(jié)。因此,在心里惶惶然的情況下,還是決定把目前自己的一些想法和總結(jié)寫出來,算是階段性的一個(gè)總結(jié)吧。

由于登錄是注冊之后的事兒,我首先來談?wù)勛浴?


移動(dòng)應(yīng)用空白情況頁面的設(shè)計(jì)

用心設(shè)計(jì)

GW模式。(G=graphic,W=words)即為圖案+文字模式。圖案經(jīng)常為一些可以表示“空白”隱
喻的圖案或者是自家應(yīng)用的吉祥物相關(guān)的圖案,抑或是可以為跟頁面引導(dǎo)相關(guān)的圖案。文字一般包含:標(biāo)題,說明。標(biāo)題通常是解釋此處空白的原因,如
“Oops,地理定位被關(guān)閉啦,無法使用該功能哦”,“網(wǎng)絡(luò)出問題啦”等,說明則解釋出現(xiàn)此狀況的原因和解決辦法等。文案的風(fēng)格經(jīng)常根據(jù)產(chǎn)品的調(diào)性去設(shè)
計(jì),有些走賣萌路線,有些走高冷路線,有些甚至走狂暴路線等等。鑒于此類型是一種最常見的類型,單純的包涵文字或單純包涵圖案的設(shè)計(jì)手法也歸納到GW模式
中。如下圖:

做一份讓工程師淚流滿面的標(biāo)注

用心設(shè)計(jì)

為什么傳統(tǒng)的標(biāo)注方法讓人難受?

沒錯(cuò),Markman 是傳說中的標(biāo)注神器,看起來也確實(shí)方便快捷,但是當(dāng)一個(gè)頁面中,要同時(shí)標(biāo)注間距、大小、顏色和字號(hào)時(shí),過多的信息一齊扔給工程師,就會(huì)讓人有些抓狂。比如這樣:

移動(dòng)應(yīng)用空白情況頁面的設(shè)計(jì)

用心設(shè)計(jì)

移動(dòng)應(yīng)用的設(shè)計(jì)中,最容易被忽視的地方就是空白或者異常情況的設(shè)計(jì)。從傳統(tǒng)PC時(shí)代web的異常頁面如404,502等頁面的設(shè)計(jì)體驗(yàn)遷移過來,移動(dòng)應(yīng)用的空頁面,網(wǎng)絡(luò)故障頁面等展示也有相似的設(shè)計(jì)模式。從以前的純文本的排版設(shè)計(jì),到后來404成為設(shè)計(jì)師
展示圖形創(chuàng)意的舞臺(tái),移動(dòng)應(yīng)用的空白情況頁面的設(shè)計(jì)也從純文本提示到后來精彩紛呈。然而在移動(dòng)應(yīng)用的設(shè)計(jì)中,空白頁面的的作用不僅僅在于給用戶以溫柔或者
精彩的提醒,安撫用戶焦急或是疑惑的情緒,更重要的是,空白情況頁面可以引導(dǎo)用戶去填補(bǔ)“空白”。人都是害怕空虛寂寞冷的,當(dāng)你面對一個(gè)空虛寂寞冷的頁面
的時(shí)候,善意的指點(diǎn)迷津的一些語言和畫面告訴你咱們還是可以有方法來填補(bǔ)你的寂寞空虛冷,這時(shí)候,用戶的操作行為就會(huì)被觸發(fā),潛移默化中指引用戶完成填補(bǔ)
空白的工作,那么,無論從用戶個(gè)體的活躍度上還是整體的留存率,活躍度上,你設(shè)計(jì)的空白頁面做到了拉升的作用,對電商產(chǎn)品和社交產(chǎn)品等來說,這些頁面可謂
是自己展示產(chǎn)品調(diào)性,曝光功能,加深引導(dǎo)的黃金地段。

用戶研究中常提到的“場景”,到底是什么?-20150704早讀課

用心設(shè)計(jì)

一個(gè)好的場景在描述簡潔的同時(shí),還需要回答下列關(guān)鍵的問題

  • 用戶是誰?人物角色可以反映出網(wǎng)站真實(shí)的、主要的用戶群體。
  • 用戶為什么來你的網(wǎng)站?如果可以的話,記下用戶到你的網(wǎng)站來的動(dòng)機(jī)和預(yù)期。
  • 用戶的目標(biāo)是什么? 通過任務(wù)分析,你可以了解用戶到你的網(wǎng)站來是想獲得什么,進(jìn)而可以知道你的網(wǎng)站需要做什么才能讓用戶滿意的離開。

iOS細(xì)節(jié)設(shè)計(jì)-交互篇-20150705早讀課

用心設(shè)計(jì)

1.很多人都知道無論是在 iOS 的系統(tǒng)還是一些第三方應(yīng)用的輸入模式下,只要左右晃動(dòng)手機(jī)即可激活「撤銷」操作,但也許你不知道是,如果再次晃動(dòng)手機(jī)則可對「撤銷」操作進(jìn)行恢復(fù)。

數(shù)據(jù)驅(qū)動(dòng)的界面設(shè)計(jì)-20150706早讀課

用心設(shè)計(jì)

1. 用戶不同,數(shù)據(jù)不同

任何時(shí)候設(shè)計(jì)一套復(fù)雜的系統(tǒng),都不可避免要為很多用戶和角色進(jìn)行設(shè)計(jì)??偛谩⒔?jīng)理和分析師是幾個(gè)常見角色,每個(gè)都有自己的工作流程和對數(shù)據(jù)的需求。

定義好角色,產(chǎn)生不同視角,這本身就是一種藝術(shù)。我就不在此詳細(xì)解釋了。如果你對此有興趣,請看Cooper的這篇有用的文章。

關(guān)于角色,重要的一點(diǎn)是預(yù)先確定好,圍繞它們來組織信息結(jié)構(gòu)與線框圖。

下面是我們?nèi)ツ曜龅囊豢罱】祱?bào)告應(yīng)用的最終成品。這套系統(tǒng)有著不同的用戶群,他們各自都需要不同的數(shù)據(jù)管理。創(chuàng)建了關(guān)鍵角色后,我們每次評審會(huì)將它們放在旁邊。

2

日歷

鏈接

個(gè)人資料

存檔