超碰av在线|无码精品一区二区三区在线|伊人色色日韩一级片内射视频群批_欧美丰满少妇人妻HD高清在线_亚洲一区二区中文_亚洲无码动漫专区

資深視覺詳解APP設(shè)計中的微妙細(xì)節(jié)

2017-7-31 用心設(shè)計

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

寫在前面

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

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

資深視覺詳解APP設(shè)計中的微妙細(xì)節(jié)

01、統(tǒng)一的圖標(biāo)設(shè)計風(fēng)格

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

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

資深視覺詳解APP設(shè)計中的微妙細(xì)節(jié)

02、圖標(biāo)大小的視覺平衡

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

資深視覺詳解APP設(shè)計中的微妙細(xì)節(jié)

03、優(yōu)化你的分割線

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

資深視覺詳解APP設(shè)計中的微妙細(xì)節(jié)

04、合理的運用投影的顏色與透明度

通過對按鈕、卡片等進行投影運用可以增強立體感與層次感。我們在制作投影時，需要根據(jù)不同背景改變投影的顏色、透明度。

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

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

資深視覺詳解APP設(shè)計中的微妙細(xì)節(jié)

05、不要過度裝飾，讓界面更簡潔

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

資深視覺詳解APP設(shè)計中的微妙細(xì)節(jié)

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

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

資深視覺詳解APP設(shè)計中的微妙細(xì)節(jié)

07、控制好界面中的配色數(shù)量

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

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

資深視覺詳解APP設(shè)計中的微妙細(xì)節(jié)

08、合理的進行設(shè)計對比

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

資深視覺詳解APP設(shè)計中的微妙細(xì)節(jié)

09、提高配圖的質(zhì)量

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

信息傳達型問題

資深視覺詳解APP設(shè)計中的微妙細(xì)節(jié)

10、明確表達圖標(biāo)的含義

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

資深視覺詳解APP設(shè)計中的微妙細(xì)節(jié)

11、正確的表達按鈕屬性

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

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

資深視覺詳解APP設(shè)計中的微妙細(xì)節(jié)

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

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

資深視覺詳解APP設(shè)計中的微妙細(xì)節(jié)

13、線條與色塊分割的合理運用

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

資深視覺詳解APP設(shè)計中的微妙細(xì)節(jié)

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

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

資深視覺詳解APP設(shè)計中的微妙細(xì)節(jié)

15、運用提示符提高用戶的閱讀效率

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

資深視覺詳解APP設(shè)計中的微妙細(xì)節(jié)

16、布局層次分明，重點突出

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

資深視覺詳解APP設(shè)計中的微妙細(xì)節(jié)

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

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

概念表達型問題

資深視覺詳解APP設(shè)計中的微妙細(xì)節(jié)

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

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

資深視覺詳解APP設(shè)計中的微妙細(xì)節(jié)

19、設(shè)計元素的表達符合用戶心理

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

資深視覺詳解APP設(shè)計中的微妙細(xì)節(jié)