設(shè)計理念比美感更重要

2016-10-19    用心設(shè)計

如果您想訂閱本博客內(nèi)容,每天自動發(fā)到您的郵箱中, 請點這里

來源:UI中國



設(shè)計理念比美感更重要。通過7大設(shè)計理念,來展示其重要性。

Image title


設(shè)計師的水平考核不僅要看作品,更要看設(shè)計理念。因為作品只是代表了軟件的實現(xiàn)能力,而設(shè)計理念則代表了作品的思維境界。


①流程至上:

Image title


設(shè)計界面,需要優(yōu)先思考界面的整個流程,讓用戶操作界面的時候,忽略視覺的美感,沉浸在界面的流程之中,忘記時間和空間,讓用戶進入深深的流狀態(tài)。

舉例:這一點在[簡書]的界面設(shè)計上,體現(xiàn)的非常好。簡書做到了讓用戶沉浸在寫作氣氛中,在接近無視覺干擾狀態(tài)下,忘記時間的流失,思緒飛舞的書寫一篇文章。


②少就是多:

Image title


設(shè)計界面的時候,爭取用最少的文字,最短的視覺軌跡,最少的點擊次數(shù),最少的裝飾元素,最簡潔的界面風(fēng)格,從而讓用戶花最少的時間,就可以看懂界面所傳達的意思。

舉例:這一點,在支付寶C掃B支付的產(chǎn)品上,體現(xiàn)得非常好。C端用戶掃碼B端商戶的靜態(tài)二維碼,進行付款的時候,直接跳轉(zhuǎn)到輸入金額的界面,然后按上指紋,即可完成支付。整個過程:用戶只需要3步:掃碼+輸入金額+按上指紋,就可以完成支付。


③內(nèi)容為王:

Image title


在整理界面信息的時候,需要先整理界面的信息架構(gòu)圖:包括:信息的分類方式,信息的包含關(guān)系,信息的展示方式。在設(shè)計界面的時候,要注意視覺優(yōu)先級:先引導(dǎo)用戶看文字,再引導(dǎo)用戶看icon和圖片,接著引導(dǎo)用戶看背景。

舉例:這一點,在[京東金融app]的界面設(shè)計上,就體現(xiàn)的非常好。京東金融app大部分都是文字,即使有配圖,也是給它疊上一層黑色,然后在上面寫上配圖的標(biāo)題文字。


④適應(yīng)設(shè)備屏幕尺寸

Image title


為屏幕設(shè)計的界面,需要注意適應(yīng)屏幕的尺寸。

舉例:PC端網(wǎng)頁的首頁第一屏的高度[小于]760px-140px=620px,其中760px是最小pc屏幕的高度,140px是網(wǎng)頁菜單欄+地址欄+網(wǎng)頁底部信息欄的高度。考慮到windows電腦的鼠標(biāo)滑輪的敏感度以及不同瀏覽器的兼容,網(wǎng)頁第一屏的高度建議小于600px。


⑤界面留白:

Image title


界面適當(dāng)留白,從而讓視覺有休息的空間,避免了視覺疲勞。界面留白還可以傳達出一種平靜和安寧的心理感受。

舉例:這一點在iphone手機殼背面的設(shè)計上,體現(xiàn)的非常好。整個手機殼背面,只有攝像頭,蘋果logo,iPhone字樣,兩行細小文字。留白空間,占了整個界面的80%以上。


⑥模仿現(xiàn)實中的場景:

Image title


分析用戶在現(xiàn)實場景中的使用習(xí)慣,把用戶線下場景的使用習(xí)慣,遷移到需要設(shè)計的界面上。

舉例:這一點在手寫計算器app上,體現(xiàn)得非常好。用戶只需要在手寫計算器的屏幕上書寫:3+?=10。結(jié)果就會顯示?的位置被彩色的數(shù)字7代替。


⑦把生活經(jīng)歷融入設(shè)計風(fēng)格

Image title


每個設(shè)計師的設(shè)計風(fēng)格,都會處處透露出設(shè)計師的生活經(jīng)歷。因此,設(shè)計師想提高設(shè)計水平,就要不斷豐富個人的生活經(jīng)歷。

舉例:喬布斯接觸佛教之后,禪宗的修養(yǎng),讓喬布斯擁有了簡潔的人生目標(biāo)和禪宗的思想境界,后來的所有蘋果產(chǎn)品,也都體現(xiàn)出東方佛教的簡潔頓悟之美。


???本文作者:張云錢。從Ui到UED到PM。坐標(biāo):上海。微信號:944352559


藍藍設(shè)計m.sillybuy.com )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 平面設(shè)計服務(wù)

分享本文至:

日歷

鏈接

個人資料

藍藍設(shè)計的小編 http://m.sillybuy.com

存檔