如何做好安卓界面

① 如何做好安卓應用的界面設計

android界面設計的工作在正規情況下，會和編程部分分開，屬於UI設計師的工作范疇，當然UI設計師與程序開發者必須了解相關的android的UI構建機制（介面，實現方法等等）方便協同工作。 安卓的按鈕包括系統默認的其實都是圖片，調用的圖片資源由具體的代碼控制，這些代碼的實現方法開發者必須弄懂，droiddraw也不過是生成一些預先寫好的調用默認圖片的代碼。 UI設計要涉及，點對點顯示，效果實現方式，界面人機交互原理，內存佔用優化優化等等好多原則，因此不同dpi的界面實際上不僅僅是簡單地調整一下png大小而已（如果只是簡單縮放直接用全局的代碼實現快得多）。不同的UI設計師會有自己的不同實現方法，例如我就比較喜歡用photo的動作自己做批處理腳本。

② Android設備的界面適配設計

Android設備App設計中有一個問題可能會被設計師忽略，在各種解析度各種尺寸「雜屏」的界面適配。可能產出的界面稿在常用的720*1280的解析度中是完美，但一到各個不同解析度不同尺寸的設備後

這里就談談適配，了解適配讓設計從PS、sketch到移動設備上都能完美呈現。

如此繁雜的安卓設備，採用哪個標准設計呢？

1.選擇一種尺寸一種解析度作為基準。

2.選擇2-3款主流的Android設備，制定一套適配規則。（國內主流設備、解析度可參考友盟指數）

3.部分極端效果特別注釋說明。

目前移動端設計師多採用iPhone 5與6的解析度設計，這兩個解析度也最接近Android xhdpi的720*1280，設計之後再做等比適配（不做設計元素等比適配會導致Android設備上視覺呈現較小）。

我則傾向於選取720*1280的解析度設計。優點是處於常用解析度的中間值，對小解析度大解析度調整也較容易。另外iOS@1x的320與720剛好是2.25的倍率關系，使用sketch等比輸出快捷多了。（如果時間成本允許的話可以將Android的標注單位用dp，具體的設備尺寸、解析度知識這里不詳描述，可見文章最後面的「Android基礎知識」）

案例說明：

雅虎新聞為各個dpi做了優化，圖片等比縮放，文字區域等比縮放，並且考慮到在低dpi下會被推移至第二屏，就減小圖片了高度，保持文字區域最小高度。

老司機都不會忘記的，僅提醒下新手，每個圖標記得輸出多個比例。並且記得查看各個比例下圖標的顯示效果。

案例說明：

還是拿一個雅虎新聞的例子，大家感受下。

Android設備的系統各個廠商都做了定製化，默認的字體庫可能不同，且字體占空間大小可能不同。不同設備顯示文字會出現不同效果。設計時考慮3點：

多採用流式布局，不對單行做字數限制（如「單行顯示多少個字」「文本寬度多少」），而是定義文本容器的高寬，超出則用「…」「漸隱」或者「遮擋」等方式省略。

若較長的文本需要完整顯示，設計時預留換行空間。

若文本需要在單行完整顯示（如提示類文字），盡量控制字數（建議16字內），避免小屏不夠放置。

案例說明：

圖文混排同一行顯示時，圖片等比固定在右側顯示，文字部分區域寬度會因設備不同出現較大的差異，預留文字多行高度。如下圖不同設備下文字的展示空間有差異，需要考慮小解析度下預留多行文字空間。如圖2第二條新聞標題文字溢出的醜陋展示，建議設定一個文字區域最大高度，超出部分則隱藏。

單行出現多個文字元素時，注意元素在低dpi下的顯示層級，提前說明好該情況的覆蓋或者隱藏規則。如下圖第一個用戶名稱，在低dpi下，避免各元素交錯，而省略了超出的用戶名稱。

圖片常用的方式有固定寬度dp等比縮放高度（用於非通欄圖片）；固定高度dp等比縮放寬度（用於橫向滾動圖片，如全屏相冊中的縱向圖片）；根據屏幕寬度等比縮放（橫向通欄圖片）。設計時考慮3點：

注意圖片佔用的寬高比，避免大屏設備上占據大量空間，導致內容比例不協調同時降低了屏幕利用率。

考慮到設備屏幕密度不同，輸出圖片時別忘了輸出多個解析度。

考慮圖片寬高比過大的縮略圖處理（最常見的處理方式：高度遠大於寬度時，是給出最大區域，讓圖片等寬居中填充該區域，只顯示該區域；寬度遠大於高度時，與展示區域等高居中取部分顯示。當然也可能出現特殊顯示要求，需要根據具體情況具體處理。）

案例說明：

網易游戲相冊的全屏瀏覽中，大於設備寬高比的寬圖按照最大寬度放置，小於設備寬高比的高度按照最大高度放置。

一行多張圖片要考慮圖片的在不同設備下等比縮放帶來顯示效果的差異。排列時會有兩種情況：

1.要求在一行內顯示完，根據圖片的顯示效果決定放置的數量，超過則不顯示（如下圖1第二條新聞）

2.流式布局，當圖片寬度小於設定值時自動換行（如下圖2相冊展示，低dpi低解析度設備一行顯示3張，高的顯示4-5張，且按比例撐滿屏幕寬度）。

寬高比超出設計區域時的處理，如網路貼吧中列表的小圖模式，給出了正方形區域，當圖片非正方形時，根據寬高中的短邊等比撐滿正方形區域後，截取了圖片居中的部分顯示。

在固定區域內多元素混合放置時，文字一般採取流式布局，圖片多採用等比縮放，圖標元素多採用 彈性布局，即元素內容本身規格不變，考慮水平、垂直方向的間距做相應擴展。設備屏幕越大，在擴展方向上可以顯示更多內容，發揮了大屏幕的優勢。

彈性布局需要給出哪一個元素dp不變，哪一個元素縮放的策略。

彈性布局下部分距離標注採用百分比標注。

當有兩個等比縮放元素時考慮避免重疊的情況。

案例說明：

網易游戲的新聞列表樣式，每一條新聞區域，要求圖片dp不變，而文字區域進行彈性縮放。

下圖網易游戲專區中間的幽靈按鈕圖標為確保點按效果，按照固定dp顯示，中間間隔的寬度按照設備寬度的百分比來確定

網易游戲求交往的界面，中間卡片區域大小根據設備等比縮放，如中間用戶頭像與「同喜歡2款游戲」的文字，在設計時需要考慮產品的目標設備中最小設備下的布局顯示效果，避免出現重疊的情況。而縱向的元素數量也需要如此考慮。

Android界面適配的案例說明就寫到這里啦。

設計時多考慮各個元素（圖標、文本、圖片、區域）在不同設備的情況。當然，做設計時也不是死板的按照建議來實現，特別是固定區域下的元素放置，根據實際情況來處理即可。

Android系統的UI也在不斷進化完善，隨著設計趨勢的改變，Android除了常見的卡片、列表、浮層外，可能會有更多的展示方式，而Android設備也是逐漸淘汰ldpi與mdpi，設備的解析度逐漸變大。也就要求我們需要不斷的去了解嘗試新的設計趨勢，產出最好的方案。

這不是彩蛋哈，僅僅補充安卓設備的基礎知識，老司機完全可以忽略，供新手參考閱讀。

為展示設備的多樣化，貼出Android屏幕尺寸示意圖（藍色矩形的大小代表不同尺寸，顏色深淺則代表所佔百分比的大小。）

屏幕大小以屏幕尺寸來衡量，指屏幕的對角線的長度，單位是英寸，1英寸=2.54厘米

目前的主流尺寸：5.0" ~ 5.5" (有繼續往更大尺寸發展的趨勢，但趨於穩定)

常見的設備尺寸： 4" ~ 10" 。

手機適配參考尺寸： 4" ~ 6"

手機 + 平板適配參考尺寸： 4" ~ 10」

屏幕解析度是指在橫縱向上的像素點數，單位是px，1px=1個像素點。一般以縱向像素*橫向像素，如1960*1080。

屏幕像素密度是指每英寸上的像素點數，單位是dpi，即「dot per inch」的縮寫。目前每個屏幕像素可以認為就是一個「點」。

屏幕 dpi 的計算方式:

Android 設備中 dpi 分幾個段：

•ldpi：~ 120 dpi (幾乎絕跡)

•mdpi：~ 160 dpi (罕見)

•hdpi：~ 240 dpi (逐漸減少中)

•xhdpi：~ 320 dpi

•xxhdpi：~ 480 dpi

•xxxhdpi：~ 640dpi (目前較少)

dp(與 dip 同義) 是在 160dpi 下每個像素對應的物理尺寸，可近似理解為:

•160 dp = 1 inch

•1 dp = 1 / 160 inch = 0.15875 mm

•1 dp = 1 px (160 dpi 屏幕下)

•1 dp = 2 px (320 dpi 屏幕下)

Android的屏幕適配指標都基於物理尺寸（即屏幕的物理大小），而非像素（解析度）。為什麼呢？這里根據dp與px適配出兩種效果來說明。

按 dp 適配不同屏幕的效果如下，內容的物理尺寸變化不大:

若直接按照像素適配，出現以下情況，高像素密度的設備內容顯得特別小，影響布局與可用性：

屏幕長邊和短邊的比例。

目前手持設備的 長邊 dpi 和 短邊 dpi 普遍非常接近，可認為屏幕比例和屏幕水平、垂直像素比例一致

屏幕比例目前趨於 16:9 ~ 16:10 (8:5)

因不少設備使用了虛擬按鍵，所以通常非全屏的 app 可用面積略低，屏幕比例更接近 16:10

③ 如何做好一個APP界面設計

第一步：用戶分析
通過對市場分析、競品分析、用戶分析等過程，確定APP整體族櫻的開發方案，明確用戶使用這款APP的需求什麼？如何滿足用戶這方面的需求？需要怎麼設計功能模塊等問題。

可核鉛以先從大的功能模塊入口，然後細分小的功能，再梳理業務流程、用戶體驗流程等等，對功能模塊的重要性、時序進行排序。

第二步：製作草圖
按照前期規劃的APP功能模塊、時序圖、用戶體驗流程等，通過線框的形式，製作出的APP的草稿圖。自己可以用紙畫，也可以使用辦公軟體。

第三步：製作原型圖利用專業的原型設計軟體，對草圖進行細節完善，設計出整體的APP原型圖。
第四步：風格設計

每個人都有著不同的個性，APP設計也是如此，我們需要為APP打造出獨具特色的風格。

這可改穗好以尋找同行的APP作為參考，然後設計出幾套不同風格的樣品提供選擇。

第五步：頁面設計
根據確定好的風格、原型圖，對APP的頁面進行效果圖的設計。

包括logo、啟動頁、內頁、頁面元素、填充頁、動態的產品頁、活動頁等等，完成APP界面設計。

同時也要給出切圖標准，方便後續的編程開發。

④ 安卓UI界面設計,如何布局呢

一、界面布局之線性布局（）

這種布局比較常用，也比較簡單，就是每個元素佔一行，把它按照橫向排放，也就是每個元素佔一列。在布局中都按照垂直或者水平的順序依次排列子元素，每一個子元素都位於前一個元素之後。

二、界面布局之相對布局（）

相對布局是android界面設計中比較常用和好用的一個布局方式。

三、界面布局之表格布局（TableLayout）

表格布局採用行、列的形式來管理元素組件。TableLayout的行和列不需要聲明，而是採用添加方法控制。

每次在TableLayout中添加一個TableRow，一個TableRow就代表表格中的一行，也同樣是容器，往裡面添加一個子組件就代表增加一列。在表格布局中，列的寬度由最寬的那個單元格蔽消決宏知知定，整個表格布局寬度取決於父容器的寬度

四、界面布局之絕對布局（）

特點：以坐標的方式來定位在屏幕上的位置，引起缺乏靈活性，在沒有絕對定位的情況下相比其他類型的布局更難維護

五、界面布局之幀布局（FrameLayout）

FrameLayout是五大布局中最猛戚簡單的一個布局。在幀布局中，整個界面被當成一塊空白備用區域，所有的子元素都不能被指定放置的位置，它們統統放於這塊區域的左上角，並且後面的子元素直接覆蓋在前面的子元素之上，將前面的子元素部分和全部遮擋。

⑤ 如何做好一個APP界面設計

第一點：了解你的目標客戶群的心態

1、做微任務的目標客戶群(如隨時隨地看看新聞，聽聽歌，看看電影，聊聊八卦之類)：

這類的解決方案是設計的app最好是小而准，不要大而全。越棗行彎全的功能應用，只能代表著這個應用在各方面的都很平庸

2、喜歡當工具來使用的目標客戶群：比如找地圖，看天氣，查數據等。

這類的解決方案是我們盡最大努力的去滿足用戶的情景需求。做到極致和簡單。

3、無聊的客戶群，用來打發消磨時間的：無需求，漫無目的的

這類的解決方案是盡可能展示帶慧用戶感興趣的東西，幫助客戶來打發消磨時光。

第二點：APP原型圖的製作和設計討論

這個環節是必不可少的。需要根據設計需求認認真真的來畫畫原型圖。

常用的APP原型圖工具：移動APP原型設計神器POP、axure、Foreui等

第三點：APP視覺設計與設計要點

（1）大概設計板塊有APP啟動頁面設計，APP界面設計的尺寸規范，app圖標設計等

一般來說，手機屏幕是從上往下布局的，重要的信息會放在上方。但是在操作上，大部分人都是單手拿手機，常用的操作，要放在界面的下方。

另外還有一個原則，最小的觸摸單位，一般是44個像素。如果再小，你的拇指難以觸碰，或者容易引發誤操作。同時，也不要讓界面太擁擠。

所以，設計師必須用減法設計，這個過程需要花時間思考、簡化元素。

你必須記住：（1）隱藏設計或者減法設計（2）分區或分類（3）幫用戶做決策（4）提高交互創新設計（5）讓人有爽快感和新奇感（6）在設計中浸入情感，把握用戶的心理。（談談如何進行產品設計以及產品情感化設計）

一位大師這樣說過「真正的簡約設計是：作品必須不斷的被簡化，一改再改，直到設計最終成形。」

2014年APP設計風格趨向扁平化和卡片化。卡片，扁平化都會是移動app設計的趨勢！25學堂認為卡片設計確實同時兼具了「擬物」和「極簡」2種優勢！

第四點：APP界面設計流程

（1）.設計APP界面時，學會從優秀APP界面設計作品中尋求靈感，以前的藝術大師，用少量的資源做了大量的設計。

（2）.放下工作，休息一下很有幫助。扁平和簡約設計的一切均關乎到細節的差異。因此小憩片刻後再回到工作，帶著全新的眼光工作，比長時間冥思苦想更有

（3）.並排比較各個版式同樣有幫助。哪怕花20分鍾前將一個線條下移各5個像素分別保存，對比兩個版式就能很快分清孰好孰壞。

（4）.由於實物展示的相對比例至關重要，所以要及早在不同的目標設備上測試。

（5）.整個設計過程中不斷問自己「真的需要嗎？」。支撐項目時候，找一些討巧的辦法，例如，添加一些有趣的元素、樣式會這樣會很容易也會很吸引人，但必須始終注意剔除不必要的元素，不斷精簡。甩掉你費盡心血的部分總是難以割捨，但修改過程必須挑剔。

第五點：APP界面設計測試與預覽修正我。知。道

加。我。私。聊1.市場和用戶調研

其中用戶調研尤為重要。只有全面調查、研究和了解用戶之後，才能真正了解用戶需求。以用戶需求為基礎和導向的設計，才是真正實用、高效的App設計，才會受到用戶歡迎。

2.製作原型，及時討論、測試和迭代設計

App設計並不是想當然，過過腦子就行，也需要及時將各種想法繪製成切實可看、可查以及可用的原型，及時討論、測試以及迭代優化才行。

當然，對類似原型工具感興趣的設計師，可以試試摹客原型設計工具，無論開始設計前，繪制流程圖，還是設計討論階段，製作互動式原型，以及之後討論、測試以及優化迭代，都能輕鬆快速實現。

3.及時協作和交付

設計好過程中，也需要和團隊內產品經理和開發人員及時溝通，了解各項設計的還原度和可行性，確保所有設計都是真正滿足用戶需求。

當然，這時也必然會用到能夠允許各個團隊成員及時參與進來，溝通、測試、分享以及交付的工具，例如以上介紹的在線摹客設計平台，就能輕松滿足這方面的設計需求。

3.不斷測試和改進

即使產品已經發布，為並不意味著就可就此放手。事凳悶實上，只是產品設計的開始。發布之後，也需要設計師及時關注用戶的使用情況，分析可能存在的問題，並及時改進，不斷優化各方面的設計。第一步：用戶分析

通過對市場分析、競品分析、用戶分析等過程，確定APP整體的開發方案，明確用戶使用這款APP的需求什麼？如何滿足用戶這方面的需求？需要怎麼設計功能模塊等問題。

可以先從大的功能模塊入口，然後細分小的功能，再梳理業務流程、用戶體驗流程等等，對功能模塊的重要性、時序進行排序。

第二步：製作草圖

按照前期規劃的APP功能模塊、時序圖、用戶體驗流程等，通過線框的形式，製作出的APP的草稿圖。自己可以用紙畫，也可以使用辦公軟體。

第三步：製作原型圖利用專業的原型設計軟體，對草圖進行細節完善，設計出整體的APP原型圖。

第四步：風格設計

每個人都有著不同的個性，APP設計也是如此，我們需要為APP打造出獨具特色的風格。

這可以尋找同行的APP作為參考，然後設計出幾套不同風格的樣品提供選擇。

第五步：頁面設計

根據確定好的風格、原型圖，對APP的頁面進行效果圖的設計。

包括logo、啟動頁、內頁、頁面元素、填充頁、動態的產品頁、活動頁等等，完成APP界面設計。

同時也要給出切圖標准，方便後續的編程開發。

⑥ 如何做好安卓應用的界面設計

現在的軟體應用大致可以分為安卓系統和ios的系統。而iOS系統只適用於蘋果軟體，不適用於其他的軟體。而現在大多數的電子產品，國產的基本上都是安卓系統.隨著中國市場的迅速發展。安卓系統比越來越多的人使用，但是怎麼樣才能做好安卓應用的頁面設計呢？

首先我們要想做好安卓應用的頁面設計，我們必須對安卓系統進行更深入的了解。充分理解安卓應用所使用的范圍和繼續開發，研究安卓應用的一些拓展的功能。深入的剖析安卓系統，他的優點和缺點，以及有什麼改進的地方。以及改進的方法。

總體而言，就像我們現在的社會主義道路一樣。雖然是借鑒恩格斯和馬克思他們的先進思想，但是我們還必須結合我們的毛澤東思想和鄧小平理論。走出一條屬於我們中國的特色的社會主義道路。安卓應用的頁面設計也是這樣，要結合自己本身的實際情況。設計出獨特的，吸引人的設計。

⑦ 如何做好一個APP界面設計

UI設計(或稱界面設計)是指對軟體的人機交互、操作邏輯、界面美觀的整體設計，也叫界面設計。舉州UI設計分為實體UI和虛擬UI，互晌答游聯網說的UI設計是虛擬UI,UI即UserInterface(用戶界面)的簡稱。

UI設計師的職能大體包括三方面:一是圖形設計，軟體產品的產品「外形」設計。二是交互設計，主要在於設計軟體的操作流程、樹狀結構、操作規范等。三是用戶測試/研究，這里所謂的「測試」，其目標恰在於測試交互設計的合理性及圖形設計的美觀性，主要通過以目標用戶宴銷問卷的形式衡量UI設計的合理性。

UI設計目前的前景還是很不錯的，很多企業都缺少UI設計師。而且可以看到的是，現在社會的發展，更多的智能機和智能機器人研發出現，這些都離不開UI設計師。所以說UI設計的是很有前途的，是不會失業的。而且UI設計門檻不高，要入門也不難的。

從工作內容來說，UI設計在當前的互聯網領域、科技領域可以說無處不在，

好的UI設計能夠明顯提升用戶的使用體驗,從而給產品帶來更多的附加值,所以UI設計對於互聯網產品是非常重要的。目前UT設計通常分為兩個大的工作方向，一個是交互設計,另一個是視覺設計。

總的來說，UI設計相比較於編程而言，還是非常適合大眾學的並且就業前景很廣闊。學完UI設計，能獲得一份穩定而又不失樂趣的工作，同時有利於追求更高品質的生活，在藝術領域可以獲得更多的啟迪。

⑧ 如何做好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. 適當的留白可以給人更加舒適的體驗。