怎麼判斷app界面留白的合理性

❶ APP界面標注及切圖注意事項

一、App屏幕適配通用知識簡介

1. 標注時注意事項

一般情況要定位一個Icon只需給出 上/下邊距，左/右邊距

標注圖標距離只需標到可點擊范圍外

通用型顏色、字體單獨標明一份

通用型模塊只需單獨標明一份，如導航欄

手機可視區域一般為寬度固定，長度超出邊界可滑動，所以，標注物體寬度時可按比例說明

如果要標注內容上下居中，左右居中，或等比可不標注

當繪制的是一個列表時且每一條內容一樣時，只需標注一條，如果每條內容有少許不同時，只需標明差異              部分

當交付的是一張完整圖片時，不需做機型適配，只需給高清圖(1920*1080)即可，注意進行壓縮

當背景是純色時只需給出色值（iOS使用RGB色值，Android使用16進制色值）

圖標應給出可點擊區域

若圖標在不同頁面重復出現，且尺寸相差不大，直接給出最大一份切圖，並在圓形圖標明尺寸，程序會根據需求縮放

可點擊按鈕通常要給出兩種狀態：普通/點擊(選中)

按鈕如果只是矩形、圓角矩形、圓形、橢圓形，給出尺寸和色值，可程序設置

漸變效果可通過程序實現，只需給出起始和結束色值跟范圍

2. 切圖命名規范

背景：bg_xxx.png

按鈕：btn_xxx_normal.png/btn_xxx_select.png

圖片：img_xxx.png

標簽：tab_xxx.png

圖標：icon_xxx.png

照片：pht_xxx.png

導航：nav_xxx.png

圖示：tip_xxx.png

菜單：menu_xxx.png

側欄：sidebar_xxx.png

二、iOS應用屏幕適配

1. iOS究竟要是適配多少種機型，以哪款機型解析度作為設計尺寸最好

2016-3

iOS只需兼容iPhone4，完美兼容iphone5以上機型

如果按矢量圖製作設計圖按1X尺寸作圖，後期放大成2X、3X；如果按傳統的px作圖應用最大尺寸(3X)作為畫布。

以3X作為畫布(1242*2208)難記且不能整除，我們可直接以1280(640*2)作為寬度，完美縮放為1X、2X;

2X->3X以1.5來算尺寸和字型大小可得到較好效果

2. 界面尺寸

設備解析度狀態欄高度導航欄高度標簽欄高度

iPhone6 plus1242*2208px60px132px146px

iPhone6750*1334px40px88px98px

iPhone5/5s/5c640*1136px40px88px98px

iPhone4/4s640*960px40px88px98px

iPad3/4/Air/Air2/mini22048*1536px40px88px98px

iPad1/21024*768px20px44px49px

iPad mini1024*768px20px44px49px

導航欄背景圖中,如果考慮狀態欄背景,則背景圖尺寸為導航欄px+狀態欄px,如果只改變導航欄顏色則只需要導航欄px

3. 圖標尺寸

設備App Store程序應用主屏幕spotlight搜索標簽欄工具欄和導航欄

iPhone6 plus1024*1024px180*180px144*144px87*87px75*75px66*66px

iPhone61024*1024px120*120px144*144px58*58px75*75px44*44px

iPhone5/5s/5c1024*1024px120*120px144*144px58*58px75*75px44*44px

iPhone4/4s1024*1024px120*120px144*144px58*58px75*75px44*44px

iPad3/4/Air/Air2/mini21024*1024px180*180px144*144px100*100px50*50px44*44px

iPad1/21024*1024px90*90px72*72px50*50px25*25px22*22px

iPad mini1024*1024px90*90px72*72px50*50px25*25px22*22px

按鈕切圖建議以等寬高尺寸切圖,且像素必須>=88、*88px , 當本身圖片寬度或高度不足時,補充空白像素(透明像素).一般情況下,只需要普通狀態下按鈕切圖即可

(適配不建議等比放大)

4. 參考文獻

友盟設備指數

APP切圖流程和APP切圖命名規范詳細完整版

APP切圖詳細規范終極指南

iOS和Android的app界面設計規范

APP界面切圖命名和文件整理規范

三、Android應用屏幕適配

1.用px作為基礎單位的缺陷

對比上圖可以知道，ppi越低圖片顯示的越大，ppi越高圖片顯示的越小，造成不同手機上顯示圖片布局不統一！

使用dp作為單位所有機子顯示統一

2. 衡量一個屏幕清晰度單位————屏幕密度(dpi==ppi)

計算公式：屏幕dpi = √ (屏幕長^2 + 屏幕寬^2) / 屏幕尺寸

名稱密度代表解析度Android單位與像素換算

mdpi120dpi~160dpi320*4801dp=1px

hdpi160dpi~240dpi480*8001dp=1.5px

xhdpi240dpi~320dpi720*12801dp=2px

xxhdpi320dpi~480dpi720*1280/1080*19201dp=3px

xxxhdpi480dpi~640dpi2k~4k1dp=4px

屏幕大小啟動圖標操作欄圖標上下文圖標系統通知圖標(白色)最細筆畫

320*480px48*48px32*32px16*16px24*24px不小於2px

480*800px/480×854px/540×960px72*72px48*48px24*24px36*36px不小於3 px

720*1280px96*96px64*64px32*32px48*48px不小於4 px

1080*1920px144*144px96*96px48*48px72*72px不小於6 px

3.究竟要適配多少種機型

2016-3

得出結論： 只需適配高端的xxhdpi(720*1280/1080*1920)，低端的hdpi(480*800)

4. 度量單位與邊框

可觸摸控制項都是以 48dp 為單位的

為什麼是 48dp？一般情況下，48dp 在設備上的物理大小是 9mm (會有一些變化)。這剛好在觸摸控制項推薦的大小范圍 (7-10mm) 內，而且這樣的大小，用戶用手指觸摸起來也比較准確、容易。( xxhdpi標准下為144px )

邊框 注意留白 界面元素之間的留白應當是 8dp 。

例：

5. 字體排版

Roboto 是Android系統的默認字體集，字體大小單位 sp（可縮放像素數，scaleable pixels）

根據Android設計規范，推薦使用 12 、 14 、 16 、 20 和 34 號 ，字體粗細可調

spHDPIXHDPIXXHDPI

12sp18px24px36px:

14sp21px28px42px

16sp24px32px48px

18sp27px36px54px

20sp30px40px60px

34sp51px68px102px

（注意：字型大小要為雙數，且不可帶小數位）

6. 9-patch 圖製作

什麼是9-patch圖

為什麼要用9-patch格式製作圖

適應各種手機屏幕拉伸圖片需求，有效縮減圖片體積

什麼情況下使用

當發現圖片是背景時且可能拉伸被拉伸時，或圖片過大時

如何製作patch9 圖

圖片外層增加一全透明像素，在透明像素區花4條純黑色邊

1. 寬度可拉伸區域

2. 高度可拉伸區域

3. 垂直內容區域

4. 水平內容區域

8. 參考文獻

友盟設備指數

Android 設計指南簡體中文版4.x

Material Design 中文版

Android設計中的.9.png

❷ 如何做好APP界面設計

APP界面設計經驗總結
當我們打開一個APP時，從視覺層面分析，影響用戶對APP整體感官體驗的元素主要有：圖片、文字、色彩、圖標、留白等。

圖片的合理運用、清晰的信息層級、舒適的色彩搭配都將會提高整個APP的美感，從而為整個的產品體驗加分。

一個成功的產品，視覺層面只是其中的一部分，但是作為一個合格的UI設計師，我們要做的就是把這其中的一部分做到極致。

下面我們通過圖片、文字、色彩、圖標、留白這幾個維度來解剖APP設計，發現那些微妙的細節。只需要比別人多提高1px的細節，你的APP設計就會更精緻。

目錄

1、圖片，如同一個人的衣著品味；
2、文字，我只想知道重點在那裡；
3、色彩，如何成為「色」計師；
4、圖標，從會畫到畫好之間有多遠；
5、留白，我只想要足夠的空間。

正文

1、圖片，如同一個人的衣著品味

圖片在APP中是非常常見的，圖片的展現形式和圖片的質量都影響著用戶對產品的感官體驗。

圖片的定位就如同一個人的衣著品味，不同的穿衣風格會使別人對你作出不同的判斷，為你打上不同社會屬性的標簽。

下面我們一起來看看圖片在APP設計中需要注意的關鍵點，將會從圖片比例、一致性、圖片質量與真實性等方面進行分析。

1.1、圖片比例有什麼講究？

不同比例的圖片所傳達的信息主體不盡相同，根據產品屬性我們會選擇與之相符的圖片比例進行整體的框架布局。

通過體驗一些主流的APP，我們會發現一些比較常用的圖片比例，如 1:1、4:3、16:9、16:10等等；

也會發現一些打破常規比例的設計，我們需要分析它們的性格，結合自身產品的特點，才能在自己的APP設計中合理的加以運用。

1:1 強調主體的存在感

1:1的圖片比例是比較常見的一種設計比例，利用此長寬比更容易將構圖歸整得簡單，突出主體的存在感。

常用於產品展示、頭像、特寫展示等場景，在電商類APP中尤為常見。

4:3 圖像緊湊、更易構圖

4:3的圖片比例可以使圖像更緊湊，更易構圖，方便設計師發揮。由於手機屏幕容量較小，作為全屏展示時，該比例在App設計布局上面佔用空間較大。

16:9 電影場景般的效果
16:9的圖片比例可以呈現電影場景般的效果，多用於橫向構圖，是應用非常廣泛的尺寸比例之一，能給用戶一種視野開闊的體驗。

在很多影視娛樂類APP設計中運用廣泛，如騰訊視頻、網易雲音樂等。

16:10 擁抱黃金比例
黃金比例就像金字塔上的明珠，越接近她越有魅力，反之會魅力減弱，16:10的圖片比例最為接近。

設計沒有絕對的標准，我們可以遵循一些優秀的經驗規則，但是也要敢於突破規則，嘗試更多的可能性。

X:≤Y 瀑布流設計
X:≤Y代表寬度固定，高度在最大值之間自定義的瀑布流設計，在一些用於用戶沒有很明確的目的，只是喜歡獲取盡量多的信息的情況下採用這種設計方式。

X:≤Y的圖片比例要注意高度的控制，不要超出屏幕可顯示區域的范圍，如花瓣網在750x1334px的設計中高度最大值為：848 px。

以上列舉的僅為部分常用比例的分析與說明，還有更多的比例這里就不一一演示，分享的目的是讓大家養成分析的習慣，結合自身產品特點選擇適合的圖片比例。

圖片比例選擇方式：
a. 以商品展示效果為准，選擇能夠充分表現商品特點的圖片展示比例；
b. 以產品氣質為准，選擇符合產品內容氣質的圖片展示比例；
c. 結合產品特點選擇合適的常用比例；
d. 根據版面布局靈活的自定義特殊的比例值；
e. 分析→打破→創新，創造出符合某種規律或者美學概念的比例值。

1.2、圖片比例的一致性
當我們結合產品特點確定合適的圖片展示比例以後，需要針對整體的布局與圖片分布情況，規范出那些布局可以採用相同的圖片展示比例。

在保障視覺效果與交互形式的情況下，相同的主體，在不同的頁面中最好採用相同的比例呈現，這樣的好處不僅可以保持視覺表達的一致性，也能給後期運營維護帶來便利。

1.3、提高圖片的質量
越來越多的產品對圖片質量開始加以重視，比如網易嚴選對產品圖片的拍攝與處理都有嚴格的規范，目的就是為了提升產品氣質和在用戶心中的印象。

我們在設計的時候更要以最佳的圖片來烘托我們的設計稿，圖片的質量影響著整個界面的格調。

很多夥伴兒會覺得圖片都是後期運營上傳的，我設計稿做得再精美最終也是沒用的。對於這個問題我的觀點是這樣的：

a. 最佳的設計輸出是設計師專業的體現；
b. 把最好的效果呈現給決策者，增加他對你設計能力的印象；
c. 通過制定運營視覺規范來把控圖片質量，是可以嚴格把控你對圖片的視覺追求；
d. 你的態度會給你帶來好運。

1.4、圖片的真實還原

雖然前面提到圖片質量的重要性，但是我們不能為了視覺效果選擇一些與主題無關的配圖，這樣也會給決策者一種誤導。

我們可以提高配圖的質量，但是需要保證圖片的真實還原，這樣才能讓你的設計作品更加真實合理。

在一些本土的產品設計中，對於國外圖片素材的運用，需要謹慎對待。如案例中的模特形象，文案信息的傳達更加偏向於國內的場景，

如果運用一張國外的模特素材也許逼格更高，可是卻無法真實的還原產品場景，會給決策者傳達一種錯誤的認知。

2、文字，我只想知道重點在那裡

文字設計的層次感決定了信息的高效傳達，通過對文字信息的層次處理可以有效的幫助用戶獲取信息，提高用戶對產品的操作效率。

2.1、對文字信息進行層級區分
當我們拿到交互原型或者別的需求文檔時，我們需要對文字的信息層級進行有效的區分，這樣才能讓用戶快速的獲取和理解信息傳達的內容。

文字信息可以簡單劃分為重要信息、次要信息、輔助信息等。在進行文字排版時，需要明確的梳理好信息之間的層級關系，提高用戶對產品的整體體驗。

通過對字體大小、顏色、留白、層級劃分等處理，把相同屬性的信息歸類設計，讓整個信息排列主次分明，層級清晰。

設計師在對文字進行視覺表現時，為了達到整體界面的視覺平衡也需要減少對文字樣式的運用，不可為了突出文字信息而採用過多的表現樣式。

2.2、預估好信息呈現的最大值
當我們在進行界面設計時，初級設計師往往會忽略文字信息的最大值，只是按照自己的習慣進行完美的布局。

最終進入到測試環節時才發現為什麼比自己預期的字數多出這么多信息，此時就會出現返工的情況，給整體的產品開發進度帶來風險。

作為一名合格的UI設計師，我們需要預估好信息呈現的最大值，而不是取最小值或者隨意進行設計，這樣將會在執行的過程中遇到更多不可控的風險。

2.3、善於利用提示符進行設計

在一些會出現大篇幅文字信息的界面設計中，為了提高用戶對信息的獲取效率，我們會根據整體視覺效果選擇合適的提示符進行設計。

很多初級設計師會過於遵循交互原型，往往對大篇幅文字的處理過於隨意，只做著交互原型的美化，缺乏對用戶體驗的主動性。

在進行產品交互設計時，有時候產品或者交互無法站在視覺的角度進行信息的梳理和布局，我們需要利用自己的專業來優化你覺得可以更好的地方，也能為你在整個產品環節中樹立專業性。

關於提示符的設計表現形式主要有數字、字母、圖形、色塊等等，只要能有效的區分信息層級即可。

3、色彩，如何成為「色」計師

色彩給人的感受是最直觀的，不同性格的配色傳達不同的情感。關於配色有一些方法可尋，但是也存在一定的感性判斷。

作為視覺設計師，我們需要學習理性的方法技巧，也要不斷欣賞優秀的作品，提高自身的審美能力。

3.1、色彩基礎知識
色彩分為無彩色系和有彩色系，無彩色系是指白色、黑色、各種深淺不同的灰色；有彩色系是指紅、橙、黃、綠、青、藍、紫等顏色。

關於色彩的更多理論知識這里不做展開，大家自行腦補色相、純度、明度、對比、性格等等方面的理論知識。

3.2、建立色彩庫
作為初級設計師我們對配色的把控不是很穩定，為了提高工作效率，我們需要通過一些理性的方式建立大量的色彩庫，應對不同的需求。

下面列舉部分個人比較常用的方式供大家參考，色彩收集的方法有很多，我們只需要掌握幾個比較適合自己的即可，只要養成習慣並長期堅持，哪怕只運用一種方式，也是收獲頗豐的。

a. 通過各類APP採集色彩

體驗不同領域的APP，建立不同領域對APP色彩組合的選擇，為後期項目設計奠定基礎。根據主色進行分類，

如紅色系列：網易雲音樂、京東、網易嚴選、網易考拉等等；也可以根據產品氣質分類，如文藝、時尚、科技、可愛等等。

b. 通過Dribbble採集色彩
在Dribbble上面，每一幅作品右側都有該作品的配色文件，發現優秀的作品要養成這種採集配色文件的習慣。

c. 通過攝影作品採集色彩
通過優秀的攝影作品採集色彩也是常用的方法之一。

採集方式：
Photoshop打開圖片 → 存儲為Web所用格式→ 選擇GIF格式 → 顏色選擇 8 → 顏色表中雙擊色塊 → 拾色器

d. 通過馬賽克採集色彩
藉助Photoshop濾鏡將圖片進行馬賽克處理，可以得到優秀作品或者攝影圖片的配色組合，特別適合採集同色系的配色。

採集方式：
Photoshop打開圖片 → 濾鏡 → 像素化→ 馬賽克 → 設置單元格大小

e. 從電影中採集色彩
相信大家都喜歡看大片，這部片子之所以能得到大家的追捧，必定有太多值得大家學習的元素。

作為神經敏感的設計師群體，那些刺激到我們神經元的優秀影片場景總是不能錯過的。

3.3、提高審美，增強感性判斷力

配色能力雖然可以通過一些理性的方法提高，但是也存在一定的感性判斷。配色中細微的差異往往都是感性的判斷。

我們需要不斷的欣賞攝影、繪畫、設計作品等等，綜合的提高自身的審美，才能不斷增強感性的判斷力。

作為UI設計師，你不能只關注界面設計，你可以看平面作品、攝影繪畫、影視動效，體驗手工藝製作、運動娛樂、細心的體驗生活中的每一次變化。

3.4、養成分析的習慣
要想擁有良好的配色能力，積累的過程是很重要的。當我們看到優秀的作品，要分析配色之間的對比關系、顏色在色環上的位置關系、HSB數值的關系等等。

只有不斷的分析和總結才能逐步形式自己的思維方式，提高不同配色的把控能力。

分析的習慣不只是運用在色彩上面，對於版面布局、文字信息的處理、icon設計風格、間距留白等等方面都需要不斷的進行分析總結，掌握優秀作品的規則才能形成自我的標准習慣。

4、圖標，從會畫到畫好之間有多遠

圖標是APP設計中的點睛之筆，既能輔助文字信息的傳達，也能作為信息載體被高效的識別。圖標也有一定的界面裝飾作用，提高界面整體的美觀度。

很多初級設計師都會忽略圖標的重要性，也養成去素材網站下載復用的習慣，當這樣的習慣養成後便會逐步喪失自己動手的驅動力，什麼元素都希望能找到素材下載，工作數年之後很快就遇到了自己的瓶頸期。

設計師對圖標設計的態度與把控能力，將會是拉開你與其他設計師差距的因素之一。

圖標設計有下載復用 → 動手設計 → 規范設計 → 融入品牌基因等幾個階段，你現在屬於哪個階段呢？

4.1、下載復用

下載復用是很多初入行業的設計師習慣的工作方式之一，由於自身對軟體技法、設計技巧、創意能力等方面的不足，無法從創意到標准制圖完成一個合格的圖標設計。

缺點：圖標設計風格與細節處理都完全不統一，這樣的習慣一旦養成就會逐步喪失自己的動手能力。

4.2、動手設計
對於大部分有設計追求的設計師，都會意識到圖標設計的重要性，也會結合產品特點繪制統一風格的圖標。

注意事項：圖標設計風格有：線性圖標、填充圖標、面型圖標、扁平圖標、手繪風格圖標和擬物圖標等。

無論我們選擇何種表現形式，在進行設計的時候都要保持風格的統一性，由於圖標的體量不同，相同尺寸下不同體量的圖標視覺平衡不盡相同，例如相同尺寸的正方形會比圓形顯大。

因此，我們需要根據圖標的體量對其大小做出相應的調整。

4.3、規范設計
當設計師養成自己動手的習慣以後，恭喜你已經進步了，保持這樣的習慣。隨著軟體技法的成熟我們需要嚴格控制自己的隨性，運用標準的規范進行圖標設計。

在標准設計的基礎上面我們可以發揮自己的創意，也不一定要局限在標准裡面，但是總體的本質需要符合設計規范。

4.4、融入品牌基因
圖標設計的差異化逐漸變得模糊，隨著很多功能的相似性，圖標的造型設計也幾乎雷同，很多對設計比較講究的產品，也開始根據自身品牌基因，進行圖標定製化。

融入品牌基因的圖標設計具有很強的品牌識別性，不僅可以形成獨有的視覺差異化，也可以增強用戶對產品的記憶。

5、留白，我只想要足夠的空間

適當的留白可以讓你的界面更有靈性，給信息之間預留更多的空間，也能更好的表達信息之間的層次感，相比擁擠的信息布局更能給人舒適的體驗。

當設計師的留白意願被產品或運營以「希望放更多內容」拒絕時，作為設計師我們可以從不同的方向試著表達自己的觀點：

a. 設計出對比稿，把產品需要的方案和你覺得完美的方案進行對比；
b. 篩選出這樣處理的優秀案例，以成功的案例說服產品接受你的方案；
c. 進行用戶測試，選擇一些目標用戶進行體驗，從用戶心聲入手設計最佳的方案；
d. 更多溝通的方法有待你去挖掘，最終的目的都是希望做出更好的產品。

設計小結

1. 不同的圖片比例反應不同的特徵，根據產品特點合理的選擇；
2. 設計中保持相同的圖片比例，不僅使視覺表達一致，也能給後期運營維護帶來便利；
3. 通過提高圖片的質量來提高設計作品的美感度，但是也要保證圖片的真實還原；
4. 文字排版需要注意信息的層次、信息容量的最大值、巧妙的運用提示符等；
5. 養成不斷建立和豐富色彩庫的習慣；
6. 提高審美，增強感性判斷力，養成分析的習慣；
7. 圖標設計經歷的幾個環節：下載復用 → 動手設計 → 規范設計 → 融入品牌基因；
8. 適當的留白可以給人更加舒適的體驗。

❸ APP界面色彩運用原則與規范!(一)

色彩布局合理

合理的色彩布局是做好UI色彩設計的重要原則，那麼該怎樣做好布局呢?設計師可以通過區分內容的主次關系從而建立視覺層級關系。因為色彩在飽和度、對比度、明度等方面存在明顯差異對比，所以就會形成一個明顯的層級，這樣人們會不自覺先關注色彩鮮艷或者色彩偏重的事物。當然，色彩布局的合理性也會讓整個設計更有主次之分。

節奏有序變化

作為設計師，你需要有自己的設計節奏，而且這個節奏是有序變化的。秩序是色彩美構成的最基本的也是較重要的形式，那麼什麼叫秩序呢?客觀事物總是按照其自身的規律在有序狀態下，有條不紊的發展演變，這就是秩序。一般情況下，在色彩構成中我們可以採用色相、明度、純度級別差遞增、遞減的形式，這樣可使各色按照一定的秩序有規律的變化，從而具有秩序美感，這種秩序美感就會形成自己的設計節奏。

以上是環球青藤小編為考生整理的APP界面色彩運用原則與規范的相關內容，希望對大家有幫助!更多技能資訊的相關內容盡在本平台，快來看看吧!

❹ app界面設計要注意哪些細節問題

您好： 手機APP界面設計的重點無非就是兩個：一個是界面視覺設計，一個是考慮界面設計的用戶體驗。

❺ UI設計中怎麼樣讓界面變得更干凈

5個技巧讓界面更加干凈
1、減少線條
頁面上面線條太多，會讓人覺得頁面復雜，線條好了，看起來就會清爽干凈。
2、合理留白，拉開信息層級
合理的留白可以增加產品的品質，也可以讓主題更加突出，有些頁面上面有很多元素，看上去非常擁擠，如果適當留白，看上去更加清爽。
3、運用卡片整合信息
卡片式設計將信息、圖像歸類整合到一個方塊里，清晰直觀又避免頁面因為信息多而散亂。卡片的排列方式是按列或者行的方式進行對齊展示，視線沿著橫向或者縱向瀏覽能快速找到想要的信息，此外，這種固定大小的卡片方塊也有利於柵格化排版。
4、加強行間距，+4原則或黃金比例
行間距大家都知道，但是具體如何設計很多人不知道，一般常用規則是+4，比如文字大小是12PX，那麼行間距就是16，依次類推文字是14那麼行間距就是18。
5、加大字間距：0.1或者0.2勿過大
字間距同樣很重要，特別是做英文排版的時候，同樣的內容，字間距和行間距不合適，界面看起來就會相差很多，有的看著很舒服，有的看起來說不出來哪裡不對。

❻ 為什麼有的 APP 看起來很舒服UI 中的一致性怎麼做

在產品設計中我們時刻留意著關鍵元素的一致性的運用，確保產品整體體驗一致。遵循一致性的原則目的是為了減少用戶認知負荷，在UI設計中我們可以從顏色、間距、字體、圖標一致性、規則一致性、交互操作一致性去把控整個界面的一致性。

在使用顏色上需要嚴格去定義，我們從很多很多的產品中都可以得到一個公式:品牌色，提醒色（成功，錯誤，警告），具有色彩偏向的黑白灰。舉個例子：從提醒色中可以發現這些顏色在生活中同樣傳達了一樣的信息，比如綠色用於正確顏色，紅色用於錯誤顏色，藍色用於可點擊顏色，黃色用於警告色。而這就是色彩情緒！

不同的顏色代表不同的情緒，比如支付寶的藍色，金融行業的黑金色，抖音的紅、藍、紫等等都傳達了不一樣的情緒，同時也非常直觀的傳達了產品的特色。

布局遵循最小化設計原則，導航路徑清晰可見，一級導航和二級導航一定要區分清楚，二者不可混用。排版布局上盡量遵循格式塔心理學原理！適當的使用網格系統來規范界面中間距留白

格式塔原則

最後，這些原則在我們設計中不是單一存在的，他們可以相互影響並且存在一個界面中。同時格式塔原理並不僅僅局限於UI設計、包括平面設計……

在日常設計中，並不是單使用一個原則，而是多種原理組合分析使用，只有這樣我們的設計才會更加的科學、全面

操作模式，反饋機制要符合用戶心理表真，常用功能操作流程要和外部環境保持一致，比如我點擊界面藍色文字這時候就要有正確的反饋機制，而不是出現一個錯誤提示。

在UI設計時，如何可以從重復、韻律、節奏三方面去把控設計元素，讓它們保持一致性卻有不失創新。

如按鈕、卡片、列表樣式重復使用。使用參數化原則去靈活設計一些控制項。比如按鈕、卡片圓角大小、可以隨著控制項大小的改變參數化的去調整圓角大小，而不是一直不變。

在布局上制定了一些規則，讓我們更輕松的使用提高設計效率。比如卡片流的排布規則。

當然一個好的 APP 並不只有這么一些內容，而且上面的每個知識點都是有很大的可挖掘性。這些只是最基礎的一部分，每一個設計要點都不是單獨的使用，比如：用戶在戶外使用時 APP 的時候字體顏色與背景顏色的對比是否會影響識別度，使用戶造成識別困難等問題

❼ 帶你認識恐懼留白的心理效應（上篇）

最近在做app啟動頁的時候，做了2個不同的版本，一種的布局主要是在居中的位置並且所放置的信息也相對較多，另一種是頁面底部只放置一個LOGO並且大面積留白。個人比較喜歡大面積留白的方案，2種方案排版類似下圖，這里拿的是UC瀏覽器的不同版本的啟動頁做舉例。

剛開始產品問我這樣排版會不會太空了，我當時也沒有更好的回答只是說這樣比較有逼格.....後來產品自行查找了一些其他產品發現確實很多app採用這種排版形式。那麼我們接下來探索一下，有沒有什麼理論來支撐這種大面積留白的布局形式呢？並且在我們面對他人質疑的時候如何有理有據的說服對方，說明我們的設計原由呢？而不是說這樣就是好看，就是有逼格，到底誰更專業等站不住腳的解釋。

當然啟動頁的作用是為了載入整個app，為app的呈現所預留時間。大量的留白也是帶給用戶遐想和期待。當然留白的情況也並非一定適用，具體還要根據產品策略來設計。

中國清代的青花瓷

其實留白恐懼症從古至今是普遍存在的現象，最具有代表性的是清代的青花瓷的圖案紋樣。我從小就一直不能理解這樣密集的圖案有什麼美感可言，對我來說倒不如是密集恐懼。

義大利時期的繪畫代表

當然不止中國清代的青花瓷，歐洲維多利亞時期也一度出現了更為凌亂冗雜的藝術風格,甚至在平面設計領域出現了維多利亞風格。

當時義大利出生的著名文學和藝術評論家 Mario Praz 創造過一個拉丁語詞彙，Horror Vacui，意為對留白的恐懼。其實就是針對維多利時期的繪畫和設計風格的吐槽，繪畫和設計上的矯揉造作，繁瑣裝飾，每一個細小的空間都需要被填充、塞滿，推動這一「設計趨勢」的，其實就是對留白的恐懼。

雖然當然由於在長期和平繁榮發展的前途下不可避免的現象，但是也體現了物質富足的人們的精神世界對空白空間的恐懼。

那麼相反 中國寫意山水畫 為什麼偏向於那麼多留白呢？

古人看畫和現代人不同，現代人由於互聯網的普及，我們看到的畫大多是一覽眾山小。而古人是拿到的畫通常是很大的卷軸，一點點的展開細細品味瀏覽山河間的每一處景緻。走到山林密集之間，就需要一些遠山水景色交相呼應。這里的留白其實是山水的延伸，以無相表達意向，言有盡而意無窮。沒有這些「留白」就無法烘托山水的壯闊。

那麼話說回來到底什麼是留白呢？人們為什麼會恐懼留白？

留白的定義：

想像一下上面這幅畫如果整個畫面畫滿了水波紋，效果是不是大打折扣呢？

很多人理解的留白就是空白，其實留白是空間的一個負值。它並不一定非得是白色，它相對於其他元素也同屬於設計空間布局框架的一部分。留白的使用可以替代分割線將內容、文本、圖形、圖標等眾多視覺元素進行合理的分割，讓視覺更容易向內容聚焦。

那麼在移動端我們對留白的定義可以理解為：

留白是同屬於空間布局框架的一部分，小面積的留白可以起到分割、歸納信息的作用，大的留白可以使用戶更專注於內容。

關於恐懼留白：

恐俱留白這句拉丁文，指的是渴望用資訊或物品將空白處填滿。就風格而言，正好與極簡主義相反。自亞里士多德以來，雖然這個詞語在不同領域有不同的意義，但在今天，主要是用來形容不留白的藝術和設計風格。

恐俱留白越高，價值感就越低

我們可以看下上圖的不同服裝店的展示草圖設計方案，最左邊的櫥窗擺放了模特並懸掛堆疊了很多衣服。中間的櫥窗擺放了4個模特，最右邊的只放了2個。那麼相對的那家店給人感覺這家的衣服更貴呢？哪家感覺最便宜呢？顯然是擺放最密集的最貴，擺放留白最多的最貴。

在繪畫中留白，留白的主要作用是襯托主要景物以營造意境氛圍，再者就是構圖分布的需要了。那麼我們套用到移動端留白的重要性有哪些呢？

·突出核心內容，使能容更益於閱讀

·闡述視覺、信息元素間的關系

·對復雜性的信息歸納整理

·提升app的易用性，摒棄過多的視覺干擾元素

關於以上作用的理解，將在下篇結合關於留白的適用性和不適用性進行講解方便理解。並探討下如何回應客戶留白太多的疑問。

❽ UI設計中怎麼樣讓界面變得更干凈

無論是APP還是網站，干凈簡潔的設計風格都會被大多數人所接受，而那些看起來復雜、充滿大量的信息的APP或者網站卻會讓用戶不由自主的拒絕。因為簡潔干凈的頁面更讓人覺得輕松，而且也可以更加突出想要表達的信息。那麼在UI設計中怎樣讓界面變得更簡潔干凈呢？

5個技巧讓界面更加干凈

1、減少線條

頁面上面線條太多，會讓人覺得頁面復雜，線條好了，看起來就會清爽干凈。

2、合理留白，拉開信息層級

合理的留白可以增加產品的品質，也可以讓主題更加突出，有些頁面上面有很多元素，看上去非常擁擠，如果適當留白，看上去更加清爽。

3、運用卡片整合信息

卡片式設計將信息、圖像歸類整合到一個方塊里，清晰直觀又避免頁面因為信息多而散亂。卡片的排列方式是按列或者行的方式進行對齊展示，視線沿著橫向或者縱向瀏覽能快速找到想要的信息，此外，這種固定大小的卡片方塊也有利於柵格化排版。

4、加強行間距，+4原則或黃金比例

行間距大家都知道，但是具體如何設計很多人不知道，一般常用規則是+4，比如文字大小是12PX，那麼行間距就是16，依次類推文字是14那麼行間距就是18。

5、加大字間距：0.1或者0.2勿過大

字間距同樣很重要，特別是做英文排版的時候，同樣的內容，字間距和行間距不合適，界面看起來就會相差很多，有的看著很舒服，有的看起來說不出來哪裡不對。

❾ APP界面設計思路是怎樣的

注重人機交互

人在操作手機時，主要以人的意識為主體，手機起到輔助作用。設計師應考慮到人與手機的各自特點，使得兩者之間相互協調，從而使工作條件達到最優。在使用手機的過程中應盡量減少人的計算和記憶負擔，從而有效地提高對手機的使用效率。

顏色搭配方案

色彩是APP界面設計中的重中之重，這關乎是否能夠正確表現出產品氣質和定位。主色決定了手機APP界面的整體設計風格，這個主色代表了產品的文化方向，同時也向用戶傳達了產品的情感。

在設計線框圖之前，研發團隊的每個人就應明確產品的定位，提煉出最貼切產品的主色。許多手機APP界面的主色都是選擇了此款APP應用圖標的主色，在不同界面中主色的面積會發生大小變化，可能會有同色系漸變界面，也可能出現同色的系功能圖標，但主色的視覺效果依然是佔主導地位的。

界面設計原則

①保證功能性和實用性。我們在對手機APP 界面進行設計時，需要考慮APP本身的使用特點，保證大多數用戶都能獲得使用體驗，保證APP功能的合理性，這樣的界面會使得用戶操作更加方便流暢，也能相應地減少手機的運算負擔。

②內涵豐富，寓意明確。設計時應在有限的二維空間中調整圖形、文字、按鍵、符號等元素的位置關系和比例大小，增加對界面內容表達的准確性和界面操控的靈活性。

③圖形簡潔，易識別。設計師應考慮界面中的點、線、面的構成，界面既要做到簡潔並具有概括性，使用戶能更容易理解和接受;又要做到內容豐富，不讓人感覺單調乏味。

以上就是APP界面設計思路分享，與傳統PC桌面不同，手機屏幕的尺寸更加小巧操作，方式也已觸控為主，APP界面設計不但要保證APP功能的完整性和合理性，又要保證APP的功能性和實用性，在保證其擁有流暢的操作感受的同時，滿足人們的審美需求。

❿ UI設計中如何進行留白

【導讀】留白的設計可以讓我們的界面變得更有呼吸感，相比於緊湊的設計，適當的留白可以讓人在閱讀時更加具有放鬆的心理暗示，但是在有限的手機屏幕內容中，我們需要清楚哪些位置或內容可以做到適當留白?如果進行UI設計留白?

1、增加邊距留白

適當增加內容與內容之間、內容與屏幕之間的間距來優化界面的空間感，達到留白的效果，增強內容的聚焦。

2、頂部留白

在界面的頂部減少內容的呈現或加大內容與界面頂部的間距來達到留白的方式，讓使用者從一開始的就降低視覺壓迫性。例如在一些設計APP的游戲詳情頁、個人資料頁等較為常見。

3、藉助標題留白

模塊與模塊之間使用較大號的字體，通過大字體的支撐產生更加自然舒適的空間留白。例如iOS的系統界面的頂部大標題設計。

4、去線留白

通過減少線的使用以及間距的調整來達到留白的效果，強調內容的自然視覺分區，減少線對內容的信息干擾。例如在一些列表或具有明確大標題的內容模塊下可以嘗試減少線的使用。

5、減少重色

減少大面積的重顏色使用，降低視覺層次，讓整體界面的設計更加輕量化、扁平化。例如上下導航的顏色，在無需過渡強調品牌色的情況下，可以考慮使用白色或淺色來增強整體界面的呼吸感和留白效果。

設計留白也是UI設計技巧之一，總之，在手機屏幕空間相對有限的情況下，我們的視覺會更加聚焦。過於密集的設計往往更會造成視覺疲勞，因此更需要多去思考內容設計的空間感，適當的留白可以降低視覺疲勞，提高視覺聚焦和閱讀效率。