手机国产精品一区二区,另类第一页,亚欧在线,日韩一国产极品99热在线播放69_国产美女久久精品香蕉欧美_亚州中文无码aⅤ在线_免费国产v片在线

24個(gè)容易忽略的APP設(shè)計(jì)細(xì)節(jié)

2017-8-2    資深UI設(shè)計(jì)者

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

隨著移動(dòng)優(yōu)先的趨勢(shì),APP的設(shè)計(jì)也越來越受到公司重視,不斷地提高APP的設(shè)計(jì)質(zhì)量是每個(gè)設(shè)計(jì)師的追求,有哪些設(shè)計(jì)中的細(xì)節(jié)被你忽略了呢?讓我們一起來看看這些細(xì)節(jié)你都把握住了嗎。

視覺表現(xiàn)型問題

1. 統(tǒng)一的圖標(biāo)設(shè)計(jì)風(fēng)格

圖標(biāo)設(shè)計(jì)在整個(gè)APP設(shè)計(jì)中是比重較大的板塊之一,圖標(biāo)設(shè)計(jì)風(fēng)格有:線性圖標(biāo)、填充圖標(biāo)、面型圖標(biāo)、扁平圖標(biāo)、手繪風(fēng)格圖標(biāo)和擬物圖標(biāo)等。無論我們選擇何種表現(xiàn)形式的圖標(biāo)都請(qǐng)保持統(tǒng)一性,相同的模塊采用一種風(fēng)格的表現(xiàn)形式,如果是線性圖標(biāo)就保持一致的描邊數(shù)值。

圖標(biāo)在配色上面也要保持有規(guī)律的統(tǒng)一,采用相同顏色是比較常用的配色方式。如果你采用不同色相的配色方式,要保持整體的配色協(xié)調(diào),不要出現(xiàn)飽和度、明度反差過大的配色而影響整體的視覺協(xié)調(diào)。

2. 圖標(biāo)大小的視覺平衡

同一個(gè)界面出現(xiàn)多個(gè)圖標(biāo)時(shí),我們需要保持整體的視覺平衡。并非是所有圖標(biāo)都采用相同的尺寸就能達(dá)到平衡,由于圖標(biāo)的體量不同,相同尺寸下不同體量的圖標(biāo)視覺平衡也不相同,例如相同尺寸的正方形會(huì)比圓形顯得大。因此,我們需要根據(jù)圖標(biāo)的體量對(duì)其大小做出相應(yīng)的調(diào)整。

3. 優(yōu)化你的分割線

界面設(shè)計(jì)中往往細(xì)節(jié)的處理最容易被忽略,根據(jù)界面配色的不同,我們?cè)诜指罹€色彩的選擇上面也要做出相應(yīng)的調(diào)整。由于分割線的作用是區(qū)分上下信息層級(jí)和界面裝飾,配色的表現(xiàn)力要低于文字信息的力度,通常我們會(huì)選擇淺色而否定深色,這樣界面會(huì)更加簡(jiǎn)潔通透。深色的分割線要慎用,除非在一些特定的產(chǎn)品場(chǎng)景下。

4. 合理的運(yùn)用投影的顏色與透明度

通過對(duì)按鈕、卡片等進(jìn)行投影運(yùn)用可以增強(qiáng)立體感與層次感。我們?cè)谥谱魍队皶r(shí),需要根據(jù)不同背景改變投影的顏色、透明度。

淺色背景下投影的顏色會(huì)選擇拾色器偏左上角的位置和透明度在10%~40%(個(gè)人經(jīng)驗(yàn))之間進(jìn)行調(diào)整。深色背景下投影的顏色會(huì)選擇拾色器偏右下角的位置和透明度在20%~40%(個(gè)人經(jīng)驗(yàn))之間進(jìn)行調(diào)整。

投影的權(quán)重要符合頁面設(shè)計(jì)的氛圍,投影的運(yùn)用是為了增強(qiáng)元素的立體感與層次感,而不是影響整個(gè)頁面的視覺平衡。

5. 不要過度裝飾,讓界面更簡(jiǎn)潔

設(shè)計(jì)需要準(zhǔn)確的把握“度”,過度的設(shè)計(jì)會(huì)干擾信息的傳達(dá)。減少不必要的設(shè)計(jì)元素,讓信息脫引而出,整個(gè)界面將會(huì)更加簡(jiǎn)潔清爽,也不會(huì)分散用戶的注意力。

6. 圖片比例&視平線的統(tǒng)一性

在人物展示的設(shè)計(jì)中,如果并列出現(xiàn)多個(gè)人物形象,為了保持視覺平衡我們需要調(diào)整并列圖片的大小比例,就像所有角色都是在相同焦距下拍攝的。在人物上下位置的調(diào)整上面我們要盡量控制視平線的方向,讓他們的眼睛處于相同的位置左右。

7. 控制好界面中的配色數(shù)量

一個(gè)界面中出現(xiàn)3種左右的配色是相對(duì)比較容易把控的,如果超過3種以上的配色,是非??简?yàn)設(shè)計(jì)師功底的,如果顏色的處理不到位就會(huì)出現(xiàn)五彩斑斕的“視覺盛宴”。

在選擇配色組合時(shí),使用相似色的配色方案可以使顏色更加協(xié)調(diào)和交融;如果希望更鮮明地突出某些元素,對(duì)比色是不錯(cuò)的選擇。無論選擇何種配色方案,都要控制好界面中的配色比重,使信息傳達(dá)不受干擾。

8. 合理的進(jìn)行設(shè)計(jì)對(duì)比

通過對(duì)比可以讓信息模塊更加獨(dú)立,界面層級(jí)關(guān)系更加豐富。案例中以不同的背景顏色區(qū)分不同的信息模塊,提升了整個(gè)界面的節(jié)奏感。顏色的選擇可以是同色系中不同明度的梯度表現(xiàn),也可以選擇不同色相的穿插搭配。

9. 提高配圖的質(zhì)量

圖片的質(zhì)量影響著整個(gè)界面的格調(diào),現(xiàn)在越來越多的產(chǎn)品都會(huì)對(duì)圖片進(jìn)行美化后再展現(xiàn)給用戶,目的就是為了提升產(chǎn)品在用戶心中的印象。我們?cè)谠O(shè)計(jì)提案的時(shí)候?qū)ε鋱D的選擇也要精挑細(xì)選,通過后期裁剪、曲線調(diào)整、色彩調(diào)整等技法使相同模塊的配圖視覺效果更加協(xié)調(diào)。

信息傳達(dá)型問題

10. 明確表達(dá)圖標(biāo)的含義

去掉圖標(biāo)文案之后界面會(huì)顯得更“逼格”,可是你確定用戶能看懂圖標(biāo)表達(dá)的含義嗎?我們?cè)谶M(jìn)行界面設(shè)計(jì)時(shí),圖標(biāo)是為了輔助說明文案所傳達(dá)的信息,如果去掉文案信息,那么需要圖標(biāo)本身帶有很強(qiáng)的信息傳達(dá)能力,確保用戶能正確的識(shí)別。

11. 正確的表達(dá)按鈕屬性

按鈕的設(shè)計(jì)必須要清晰準(zhǔn)確的傳達(dá)出當(dāng)前狀態(tài),不能為了視覺效果而帶給用戶錯(cuò)誤的判斷,例如深灰色的按鈕用戶會(huì)理解為是禁用狀態(tài)而放棄點(diǎn)擊。

通過按鈕的顏色、大小、風(fēng)格等來引導(dǎo)用戶進(jìn)行操作,需要強(qiáng)化的就要做得突出,不要整個(gè)界面都處于主次不明的狀態(tài),分散用戶的注意力,削弱了界面需要傳達(dá)的主旨。

12. 正確處理文字排版的層級(jí)關(guān)系

工作中我們拿到的需求總會(huì)出現(xiàn)大篇幅的文案,不能像概念設(shè)計(jì)那樣任性的刪減,在進(jìn)行文字排版的時(shí)候,正確的處理信息之間的層級(jí)關(guān)系將會(huì)提高用戶對(duì)信息的識(shí)別度。我們通常會(huì)通過字體大小、顏色、留白、層級(jí)分割等技巧來處理,把相同屬性的信息歸類設(shè)計(jì),通過留白的不同達(dá)到層級(jí)的區(qū)分,讓整個(gè)信息排列主次分明,層級(jí)清晰。

13. 線條與色塊分割的合理運(yùn)用

線條通常用于分割同一類別或擁有相同屬性的元素;而色塊更多的是用于分割不同類別或者區(qū)分不同屬性的元 素,以達(dá)到層次清晰,歸類明確的目的。我們?cè)谶x擇分割形式的時(shí)候要根據(jù)信息之間的關(guān)系作出明確的表達(dá),不可為了視覺效果而盲目的穿插運(yùn)用。

14. 要提前預(yù)估信息呈現(xiàn)的最大值

在進(jìn)行界面布局時(shí),明確信息呈現(xiàn)的最大值,而不是取最小值進(jìn)行設(shè)計(jì)。過于理想的長度范圍也許界面樣式更美觀,可是落地之后就會(huì)給用戶帶來非常糟糕的體驗(yàn)。

15. 運(yùn)用提示符提高用戶的閱讀效率

在大篇幅的文字信息布局中,合理的運(yùn)用提示符會(huì)提高用戶對(duì)信息的理解和快速找到需要的信息。提示符可以是數(shù)字、字母、圖形、色塊等等,只要能有效的區(qū)分信息層級(jí)即可。

16. 布局層次分明,重點(diǎn)突出

好的界面布局是為了更好的引導(dǎo)用戶閱讀和操作,界面布局要有層次和重點(diǎn),而非簡(jiǎn)單的將信息進(jìn)行羅列。通過卡片模塊的區(qū)分和大小的變化可以很好的進(jìn)行視覺引導(dǎo),大大提高用戶對(duì)界面的理解,從而提高用戶的操作效率。

17. 信息布局符合閱讀習(xí)慣

從左到右,從上到下的進(jìn)行閱讀是我們已有的習(xí)慣,如果你要打破這個(gè)習(xí)慣進(jìn)行視覺表現(xiàn),會(huì)承受挑戰(zhàn)用戶體驗(yàn)的強(qiáng)大壓力。

概念表達(dá)型問題

18. 相同界面下圓角&直角的統(tǒng)一性

在同一個(gè)界面設(shè)計(jì)中,圓角&直角的選擇要更加統(tǒng)一的出現(xiàn)在界面中,不要出現(xiàn)混合運(yùn)用造成視覺表達(dá)不一致。如果選擇圓角作為視覺語言,統(tǒng)一相同模塊下圓角的大小,不可出現(xiàn)大小不一致的情況,讓整個(gè)界面設(shè)計(jì)的視覺語言更加規(guī)范統(tǒng)一。

19. 設(shè)計(jì)元素的表達(dá)符合用戶心理

設(shè)計(jì)是為了更好的幫助用戶理解界面的操作邏輯,如果你的設(shè)計(jì)改變了用戶的心理與習(xí)慣,可能會(huì)增加用戶的學(xué)習(xí)成本或者被用戶拋棄。我們?cè)谶M(jìn)行界面設(shè)計(jì)的時(shí)候,如果要設(shè)計(jì)一些創(chuàng)新的操作規(guī)則,需要做更多的調(diào)研和測(cè)試,確保這個(gè)規(guī)則符合用戶的心理。

20. 設(shè)計(jì)表達(dá)的一致性

相同的信息模塊采用統(tǒng)一的設(shè)計(jì)表達(dá),不要為了變化而加強(qiáng)用戶的理解。前后信息設(shè)計(jì)的多樣性也許在視覺上面更加豐富,可是用戶會(huì)理解為這是兩個(gè)不同的模塊,操作會(huì)不會(huì)也不同,無形中就增加了用戶的思考時(shí)間和學(xué)習(xí)成本。

21. 別把網(wǎng)頁的習(xí)慣帶到APP設(shè)計(jì)中

網(wǎng)頁與APP的設(shè)計(jì)在本質(zhì)上面有很多不同的視覺表現(xiàn)規(guī)則,我們?cè)谠O(shè)計(jì)APP界面的時(shí)候要脫離網(wǎng)頁的一些交互習(xí)慣,回歸到移動(dòng)用戶的習(xí)慣中,讓界面的操作邏輯更加順暢。

22. 讓表單設(shè)計(jì)更簡(jiǎn)潔

表單設(shè)計(jì)在界面中隨處可見,看到一望無際的表單用戶總是望而卻步。為了緩解用戶的這種心理活動(dòng),我們?cè)O(shè)計(jì)的時(shí)候通常會(huì)通過合并歸納相同屬性的表單,采用逐步填寫來讓用戶感覺內(nèi)容很少,通過這樣的視錯(cuò)覺讓用戶完成表單的填寫。

23. 空界面中插畫的運(yùn)用

為了提高APP的情感化設(shè)計(jì),插畫的運(yùn)用也開始越來越普遍。在空界面的一些設(shè)計(jì)中也由以前的純文字轉(zhuǎn)變?yōu)橐恍?yīng)景的插畫表現(xiàn),帶給用戶更多的愉悅感。

24. 運(yùn)用真實(shí)的信息填充你的設(shè)計(jì)

經(jīng)??吹揭恍┰O(shè)計(jì)稿整個(gè)界面都是一樣的配圖,胡亂輸入的文案,看起來顯得非常的不專業(yè)。為了降低視覺落地的差值,我們?cè)谠O(shè)計(jì)的時(shí)候盡量運(yùn)用真實(shí)有效的信息去填充我們的設(shè)計(jì)稿,在提案的時(shí)候才能給決策者一個(gè)還原真實(shí)場(chǎng)景的有效方案。

總結(jié)

APP設(shè)計(jì)還有很多需要設(shè)計(jì)師注意的細(xì)節(jié),這里就不一一列舉。很多理論來源于書籍和項(xiàng)目經(jīng)驗(yàn),希望與你共勉。

設(shè)計(jì)是一條很漫長的路,沒有任何結(jié)論是一成不變的,作為互聯(lián)網(wǎng)時(shí)代下的設(shè)計(jì)師,我們要不斷的反思總結(jié),打破常規(guī)與束縛,接受更多新的元素,做出更加符合這個(gè)時(shí)代下的設(shè)計(jì)作品。

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

分享本文至:

日歷

鏈接

個(gè)人資料

存檔