400-844-5354
1.信息的布局
在排列任何信息時(shí)，首先要掌握的是對齊/重復(fù)/親密/對比，貫穿設(shè)計(jì)的四大原則。
對齊不僅能建立清晰精致的外觀，而且便于實(shí)現(xiàn)開發(fā)。基于從左到右的閱讀習(xí)慣，移動(dòng)界面的內(nèi)容布局通常采用左對齊和中間對齊，表單填寫的輸入項(xiàng)采用右對齊。
設(shè)計(jì)和做其他事情一樣，也要有優(yōu)先事項(xiàng)。不要讓用戶找到重點(diǎn)/需要注意的地方，而是要讓用戶流利地接收到我們想要傳達(dá)的重要信息。重復(fù)和比較是一套組合拳，使設(shè)計(jì)中的視覺元素在整個(gè)設(shè)計(jì)中重復(fù)出現(xiàn)，既能增加組織性，又能增強(qiáng)統(tǒng)一性，降低用戶認(rèn)知難度。然后在需要突出重點(diǎn)的時(shí)候，可以使用對比技術(shù)，比如強(qiáng)調(diào)圖片大小或顏色的差異，讓用戶直觀的感受到最重要的信息。
在排列復(fù)雜信息時(shí)，如果沒有規(guī)則的排列，文本的可讀性就會降低。組織信息可以根據(jù)親密性的原則將相關(guān)信息放在一起。如果多個(gè)項(xiàng)目彼此非常親密，它們將成為視覺單元，而不是多個(gè)孤立的元素。這有助于減少混亂，為讀者提供清晰的結(jié)構(gòu)。
在設(shè)計(jì)和表達(dá)時(shí)，我們必須考慮內(nèi)容的可讀性。適當(dāng)使用圖形可以增加可讀性和設(shè)計(jì)感，對圖形的理解比文本更有效。一旦可視化的表達(dá)方式變得簡潔明了，可視化的圖形可以以更柔和的方式呈現(xiàn)生硬的內(nèi)容，如說明/標(biāo)題/數(shù)值。
2.圖片的使用
App確定頁面結(jié)構(gòu)和文本后，將開始安排圖標(biāo)/按鈕/圖片。此時(shí)，頁面將從簡單的文本中獲得“閱讀”型結(jié)構(gòu)調(diào)整為“觀看”類型結(jié)構(gòu)將對頁面的可讀性和頁面的整體效果產(chǎn)生巨大的影響。頁面中圖片的比例稱為圖片版本率，通常降低圖片版本率會給人一種安靜、優(yōu)雅、先進(jìn)的感覺。提高圖片版本率將充滿活力，使圖片具有吸引力的效果。
實(shí)際上，它也與選擇圖片的元素/色調(diào)/表達(dá)的情感有關(guān)。合適的圖片也能散發(fā)出整個(gè)應(yīng)用的氣質(zhì)，直接傳達(dá)給人“高級”，“平民化”，“友好”等待不同的感覺。
如果內(nèi)容較少但想提高布局率，可以使用一些色塊或抽象模擬真實(shí)物體，如電影票、書籍、紙張、優(yōu)惠券、筆記等，使界面更友好，減少空虛感。這樣也可以改變頁面的視覺體驗(yàn)，但這種方法最多可以改變頁面的色調(diào)/紋理，而不是改變“閱讀”要注意內(nèi)容的比例。
3.使用顏色
不同的顏色可以給用戶帶來不同的感受，這應(yīng)該是常識。在移動(dòng)終端界面中，通常需要選擇主色、標(biāo)準(zhǔn)色和晴色。移動(dòng)終端與網(wǎng)頁終端略有不同。雖然主色決定了畫面風(fēng)格的顏色，但往往不會大面積使用。通常在導(dǎo)航欄/部分按鈕/icon/當(dāng)特殊頁面和其他地方出現(xiàn)時(shí)，它們會有點(diǎn)陽光明媚。統(tǒng)一的主色調(diào)也能讓用戶找到品牌感的歸屬，如網(wǎng)易紅/騰訊藍(lán)/京東紅/阿里橙等。標(biāo)準(zhǔn)顏色是指整個(gè)移動(dòng)界面的顏色規(guī)格，以確定文本/線段/圖標(biāo)/背景等的顏色。標(biāo)題文本/按鈕/按鈕/按鈕/icon等等，通常起到強(qiáng)調(diào)和引導(dǎo)閱讀的作用。
主色可能有不止一種選擇，點(diǎn)睛之筆的顏色通常由兩三種顏色組成，標(biāo)準(zhǔn)顏色是一套由強(qiáng)到弱的標(biāo)準(zhǔn)群體，所以在點(diǎn)晴和主色、主色和主色之間有不同的選擇方法。第一種是相鄰顏色匹配（相鄰顏色），這種方法更常用，因?yàn)槿岷偷纳{(diào)過渡也非常自然。
二是同色系配色(色調(diào)一致，飽和度不同)，主色和點(diǎn)晴色都在統(tǒng)一的色調(diào)上，給用戶一種一致的感覺。
第三種是亮色配色，主色相對平靜，亮色，帶動(dòng)頁面氛圍，強(qiáng)調(diào)重點(diǎn)。
第四種是中性配色，以一些中性配色為基調(diào)，弱化干擾。這種方法是移動(dòng)終端最常見的方法。
還有一些漸變、明暗對比、多色搭配等方法在這里不一一解釋，你感覺一下。
2023-06-28
2022-12-29
2025-02-18
2024-09-18
2023-05-27
2023-10-27
2023-09-03
2023-01-10
2024-09-15
2022-04-12
返回列表
返回頂部