隨著移動(dòng)優(yōu)先的趨勢(shì)，APP設(shè)計(jì)越來(lái)越受到公司的重視。不斷提高APP的設(shè)計(jì)質(zhì)量是每一個(gè)設(shè)計(jì)師的追求。你忽略了哪些設(shè)計(jì)細(xì)節(jié)？看看你是否掌握了所有這些細(xì)節(jié)。

　　視覺(jué)表型問(wèn)題

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

　　圖標(biāo)設(shè)計(jì)是整個(gè)APP設(shè)計(jì)中最重要的一個(gè)環(huán)節(jié)。圖標(biāo)設(shè)計(jì)樣式包括線性圖標(biāo)、填充圖標(biāo)、平面圖標(biāo)、平面圖標(biāo)、手繪樣式圖標(biāo)和模擬對(duì)象圖標(biāo)。無(wú)論我們選擇什么樣的圖標(biāo)，請(qǐng)保持統(tǒng)一。同一模塊采用一種表達(dá)方式。如果是線性圖標(biāo)，會(huì)保持一致的筆畫(huà)值。

　　圖標(biāo)在配色上要有規(guī)律的統(tǒng)一，采用同色是常見(jiàn)的配色方法。如果使用不同的色相配色方法，要保持整體的配色協(xié)調(diào)性，不要有飽和度和亮度反差過(guò)大的配色，這樣會(huì)影響整體的視覺(jué)協(xié)調(diào)性。

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

　　當(dāng)多個(gè)圖標(biāo)出現(xiàn)在同一個(gè)界面時(shí)，我們需要保持整體的視覺(jué)平衡。不是所有的圖標(biāo)都可以用同樣的尺寸達(dá)到平衡。由于圖標(biāo)的大小不同，相同大小下不同大小的圖標(biāo)視覺(jué)平衡是不同的。例如，一個(gè)相同大小的正方形會(huì)比一個(gè)圓大。因此，我們需要根據(jù)圖標(biāo)的大小來(lái)調(diào)整圖標(biāo)的大小。

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

　　在界面設(shè)計(jì)中，細(xì)節(jié)往往最容易被忽略。根據(jù)不同的界面顏色，在分割線顏色的選擇上要做相應(yīng)的調(diào)整。因?yàn)榉指罹€的作用是區(qū)分上下信息層次和界面裝飾，所以配色的表現(xiàn)力低于文字信息，所以我們通常選擇淺色而不是深色，這樣界面會(huì)更簡(jiǎn)潔透明。除非在某些特定的產(chǎn)品場(chǎng)景中，否則應(yīng)謹(jǐn)慎使用深色分界線。

　　4.合理使用投影的顏色和透明度

　　通過(guò)突出按鈕、卡片等?？梢栽鰪?qiáng)立體感和層次感。做投影的時(shí)候需要根據(jù)不同的背景改變投影的顏色和透明度。

　　燈光背景下的投影顏色將通過(guò)選擇左上角拾色器的位置和10%到40%之間的透明度(個(gè)人經(jīng)驗(yàn))來(lái)調(diào)整。深色背景下的投影顏色將通過(guò)選擇拾色器右下角的位置和20%至40%之間的透明度(個(gè)人經(jīng)驗(yàn))來(lái)調(diào)整。

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

　　5.不要過(guò)度修飾，讓界面更簡(jiǎn)潔

　　設(shè)計(jì)需要準(zhǔn)確把握“度”，過(guò)度的設(shè)計(jì)會(huì)干擾信息的傳遞。通過(guò)減少不必要的設(shè)計(jì)元素，讓信息出來(lái)，整個(gè)界面會(huì)更加簡(jiǎn)潔、清爽，不會(huì)讓用戶分心。6.畫(huà)面比例視在地平線的統(tǒng)一

　　在字符顯示的設(shè)計(jì)中，如果多個(gè)字符并排出現(xiàn)，為了保持視覺(jué)平衡，我們需要調(diào)整并排圖片的大小比例，就像所有字符都是以相同的焦距拍攝一樣。在調(diào)整人物的上下位置時(shí)，我們應(yīng)該盡量控制視在地平線的方向，使他們的眼睛處于同一位置左右。

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

　　在一個(gè)界面中控制三種顏色相對(duì)容易。如果超過(guò)三種顏色，就考驗(yàn)設(shè)計(jì)師的基本功了。如果色彩處理不到位，就會(huì)出現(xiàn)五彩繽紛的“視覺(jué)盛宴”。

　　在選擇顏色組合時(shí)，使用顏色相近的配色方案，可以使顏色更加和諧、交融；如果你想更清晰地突出一些元素，對(duì)比色是一個(gè)很好的選擇。無(wú)論選擇什么配色方案，都要控制界面中配色的比例，這樣才不會(huì)干擾信息傳遞。

　　8.合理的設(shè)計(jì)比較

　　相比之下，信息模塊可以更加獨(dú)立，界面層次更加豐富。在這種情況下，不同的信息模塊通過(guò)不同的背景顏色來(lái)區(qū)分，提高了整個(gè)界面的節(jié)奏。顏色的選擇可以是同一顏色體系中不同明度的漸變表達(dá)，也可以選擇不同色調(diào)的穿插搭配。

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

　　圖片質(zhì)量影響整個(gè)界面的風(fēng)格。如今，越來(lái)越多的產(chǎn)品將圖片美化后展示給用戶，以增強(qiáng)產(chǎn)品在用戶心目中的印象。我們?cè)谠O(shè)計(jì)方案的時(shí)候，也要精心挑選搭配圖片，通過(guò)后期裁剪、曲線調(diào)整、色彩調(diào)整等手法，讓同一個(gè)模塊的搭配圖片視覺(jué)效果更加和諧。

　　信息傳遞問(wèn)題

　　10.清楚地表達(dá)圖標(biāo)的含義

　　移除圖標(biāo)副本后，界面會(huì)更加“強(qiáng)迫”，但你確定用戶能理解圖標(biāo)所表達(dá)的意思嗎？當(dāng)我們?cè)O(shè)計(jì)界面時(shí)，圖標(biāo)是為了幫助解釋副本傳達(dá)的信息。如果刪除復(fù)制信息，圖標(biāo)本身需要有很強(qiáng)的信息傳遞能力，以保證用戶能夠正確識(shí)別。

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

　　按鈕的設(shè)計(jì)必須清晰準(zhǔn)確地傳達(dá)當(dāng)前狀態(tài)，不能給用戶帶來(lái)對(duì)視覺(jué)效果的錯(cuò)誤判斷。比如深灰色按鈕的用戶會(huì)明白自己被禁用，放棄點(diǎn)擊。

　　按鈕的顏色、大小和樣式用于指導(dǎo)用戶操作。需要加強(qiáng)的地方要做的突出，整個(gè)界面不要處于優(yōu)先級(jí)不明確的狀態(tài)，分散了用戶的注意力，削弱了界面需要傳達(dá)的主旨。

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

　　我們?cè)诠ぷ髦械玫降男枨笾锌倳?huì)有一大份，不能像概念設(shè)計(jì)那樣隨意刪減。排版時(shí)，正確處理信息之間的層次關(guān)系，會(huì)提高用戶對(duì)信息的識(shí)別度。我們通常通過(guò)字號(hào)、顏色、空格、層次分割等技術(shù)進(jìn)行處理，對(duì)屬性相同的信息進(jìn)行分類(lèi)設(shè)計(jì)，通過(guò)不同的空格實(shí)現(xiàn)層次分化，使整個(gè)信息排列的順序清晰。13.線條和顏色塊分割的合理應(yīng)用

　　線通常用于劃分相同類(lèi)別或具有相同屬性的元素；而色塊更多的是用來(lái)劃分不同的類(lèi)別或者區(qū)分不同的屬性，從而達(dá)到層次清晰、分類(lèi)清晰的目的。在選擇分割形式時(shí)，要根據(jù)信息之間的關(guān)系表達(dá)清楚，不能為了視覺(jué)效果而盲目使用。

　　14.提前估計(jì)信息呈現(xiàn)的最大價(jià)值

　　在界面布局中，應(yīng)該定義信息呈現(xiàn)的最大值，而不是取最小值進(jìn)行設(shè)計(jì)。如果長(zhǎng)度范圍太理想，界面風(fēng)格可能會(huì)更美觀，但落地后會(huì)給用戶帶來(lái)非常不好的體驗(yàn)。

　　15.使用提示提高用戶閱讀效率

　　在大文本信息的布局中，合理使用提示會(huì)提高用戶對(duì)信息的理解，快速找到需要的信息。提示可以是數(shù)字、字母、圖形、色塊等。只要他們能有效區(qū)分信息等級(jí)。

　　16.布局清晰而集中

　　好的界面布局是為了引導(dǎo)用戶更好的閱讀和操作，界面布局要有層次和重點(diǎn)，而不是簡(jiǎn)單的羅列信息。通過(guò)卡模塊的差異化和尺寸變化，可以很好地進(jìn)行視覺(jué)引導(dǎo)，大大提高了用戶對(duì)界面的理解，從而提高了用戶的操作效率。

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

　　從左到右，從上到下閱讀是我們現(xiàn)有的習(xí)慣。如果你想打破這種習(xí)慣，用視覺(jué)來(lái)表達(dá)，你將面臨巨大的挑戰(zhàn)用戶體驗(yàn)的壓力。

　　概念表達(dá)問(wèn)題

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

　　在同樣的界面設(shè)計(jì)中，圓角和直角的選擇要在界面上顯得更加均勻，視覺(jué)表達(dá)不能因?yàn)榛旌蠎?yīng)用而不一致。如果選擇圓角作為視覺(jué)語(yǔ)言，同一模塊下圓角的大小應(yīng)該統(tǒng)一，這樣整個(gè)界面設(shè)計(jì)的視覺(jué)語(yǔ)言就更加規(guī)范統(tǒng)一。

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

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

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

　　同一個(gè)信息模塊用統(tǒng)一的設(shè)計(jì)表達(dá)，不應(yīng)該為了改變而加強(qiáng)用戶的理解。前后信息設(shè)計(jì)的多樣性在視覺(jué)上可能更豐富，但用戶會(huì)明白這是兩個(gè)不同的模塊，操作會(huì)有所不同，無(wú)形中增加了用戶的思考時(shí)間和學(xué)習(xí)成本。

　　21.不要把網(wǎng)頁(yè)的習(xí)慣帶入APP設(shè)計(jì)

　　網(wǎng)頁(yè)和APP的設(shè)計(jì)本質(zhì)上有很多不同的視覺(jué)表達(dá)規(guī)則。在設(shè)計(jì)APP界面時(shí)，要脫離網(wǎng)頁(yè)的一些交互習(xí)慣，回歸移動(dòng)用戶的習(xí)慣，使界面的操作邏輯更加流暢。22.使表單設(shè)計(jì)更加簡(jiǎn)潔

　　表單設(shè)計(jì)在界面上隨處可見(jiàn)，用戶總是不愿意看到無(wú)盡的表單。為了緩解用戶的心理活動(dòng)，我們通常會(huì)對(duì)屬性相同的表單進(jìn)行組合匯總，一步一步填寫(xiě)，讓用戶覺(jué)得內(nèi)容很少。通過(guò)這種視錯(cuò)覺(jué)，用戶可以完成表單。

　　23.空界面中插圖的使用

　　為了提高APP的情感設(shè)計(jì)，插畫(huà)越來(lái)越受歡迎。在空界面的一些設(shè)計(jì)中，也從以前的純文字變成了一些插圖，給用戶帶來(lái)了更多的樂(lè)趣。

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

　　經(jīng)?？吹揭恍┰O(shè)計(jì)稿的整個(gè)界面都是一樣的有圖，隨意輸入的文案看起來(lái)很不專(zhuān)業(yè)。為了減少視覺(jué)著陸的差異，我們?cè)谠O(shè)計(jì)時(shí)試圖用真實(shí)有效的信息填充我們的設(shè)計(jì)草稿，以便在提出時(shí)給決策者一個(gè)恢復(fù)真實(shí)場(chǎng)景的有效解決方案。

　　總結(jié)

　　APP設(shè)計(jì)中有很多細(xì)節(jié)需要設(shè)計(jì)師注意，這里就不一一列舉了。很多理論來(lái)源于書(shū)本和項(xiàng)目經(jīng)驗(yàn)，希望與大家分享。

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