前段時間一直在做運營類設計，banner在其中占了較大比重，為此就想寫一篇階段性總結。其中部分觀點參考了相關視頻教程和文章，設計新手一枚，如有不足還請大家海涵。
banner由以下五部分組成：版式，字體，顏色，背景，點綴。我就針對這幾點做些具體分析。
關于版式
大家發現沒有，大體上banner版式可分為兩種：1、圖文左右排版 2、文字居中
在工作中我接觸圖文左右排版的機會較多，因此今天著重分析下。
圖文左右排版
當banner中需要包含具體的素材，如某位大咖，某件產品時，一般會選擇左右排版。并且圖文比例約為6：4（接近0.618的黃金比例）。
關于為何文字部分要大于圖片部分，我做了如下分析：如果banner中只有某位大咖、某件產品，而沒有文字襯托，用戶就不會知道banner想表達的什么。
如下圖，banner中只有一位拉大提琴的中年外國男子，人們會猜測這男子的個人專輯發布了？他是誰？所以，通過圖片用戶只能對信息有個大致了解。
相反，如果把banner中圖片部分遮去，而只保留文字部分。人們能夠獲取的關鍵詞有：5首電影歌曲、回憶過往的。因此即使沒有配圖，文字也能將信息精準地帶給用戶，文字所占比例應當比圖片多些。這也就解釋了為何大部分左右排版的banner都是文字占比大于圖片。
banner中有些文字放左邊，有些放右邊，這有什么區別呢？
下圖中第一個banner是關于歐美電影歌曲的，右側可布局拉琴的男子，也可配電影片段，還可放正在播音的留聲機。第二張banner同樣如此。
下面兩圖均是圖左字右的banner，第一張《首席醫官》，特指這本書。
第二章奧運冠軍陳一冰求婚——除了他沒別人了。
說了這么多，總結出圖右字左和圖左字右的區別了嗎？圖片在右，配圖內容比較模糊；圖片在左，配圖內容比較清晰。由于人們習慣的閱讀順序是從左到右，左邊放什么意味著用戶會先看到什么。當圖片信息清晰時圖片放左，先用特定配圖吸引用戶目光，再加以具體的文字闡述就更正常不過了。而如果把含義不清的配圖放左左邊，用戶得看到右邊的文字部分才能獲得banner想傳遞的內容，這會導致用戶接收信息時間增加。
2、文字居中
在工作中我沒怎么接觸過文字居中的排版方式，因此很抱歉沒法做太多的剖析。印象中電商比較喜歡此類排版，也許是文字放在正中的位子，底下可以放許多產品？
版式中大小標題的比例
發現沒？大小標題比例約為2：1。其實這和一級標題，二級標題是同個道理，我們在設計banner時總希望用戶能把banner上的文字看全，但又不希望大小標題混在一起主次不清，因此在排版合理，用戶能看清字的綜合考慮下，大小標題比例約為2：1。（其實小標題太小運營們也會懟的）
關于字體
banner中常用的字體有三種：襯線體（serif）、非襯線體（sans-serif）、書法體（cursive）
都說字體有各自的性格，襯線體筆畫有粗細之分，它模仿的是中國古代字體和古代碑文上的字體，因此襯線體能給人古典，文藝的感覺，適合用于文藝氣息或與女子的相關設計。
非襯線體筆畫簡潔，筆畫較粗，體現現代，簡約的特性，適合用于蒼勁有力，與男子相關的設計。
書法體源自中國古代，能體現中國文化和揮灑墨水的豪氣，適用于文藝主題和金戈鐵馬般的豪邁主題。
ps：商用字體需要注意版權?。。∵@點很重要
關于顏色
在生活中，色彩心理學對人們對顏色的認知有很大的影響。
黑色：黑色是一種代表品質、權威、穩重、時尚的色彩，同時也含有冷漠、悲傷、防御的消極情感。
白色：傳遞一種簡單、純真、高雅、精致、信任、開放、干凈、暢快、樸素的情感。
灰色：代表睿智、老實、執著、嚴肅、壓抑的色彩。
紅色：傳遞喜慶、自信、斗志、權威、性感的情感。
綠色：是自然界中最常見的顏色，代表生命力、青春、希望、寧靜、和平、舒適、安全的情感。
藍色：是三原色中的一種，代表永恒、靈性、清新、自由、放松、舒適、寧靜、商務。
紫色：是一種代表優雅、浪漫、高貴、時尚、神秘、夢幻、靈性、創造性的顏色。
黃色：代表陽光、青春、活力、時尚、尊貴、年輕輕快、輝煌、希望的顏色。
因此在設計中選擇主色調也要遵從如上:point_up_2:。
例如活潑年輕的內容可選擇純度較高的藍綠色、綠色等作為主色調。
文藝類內容則適合飽和度不高，偏向白色這類能讓人平靜的色彩。
關于顏色的搭配，我一般會在花瓣上找些主題相近的banner作參考。
此外推薦幾個配色網站：
https://coolors.co/browser/latest/1
https://color.adobe.com
https://uigradients.com
關于點綴
大約有3種。橢圓點綴，圓角矩形點綴，實物點綴。圓形圓角矩形點綴可適當加些漸變和陰影。
為了不讓實物點綴太過搶眼，可以適當做些弱化，比如降低透明度或是做些模糊處理。
關于背景
大約有3種。
純色背景，實物背景，材質背景。根據畫面的需要可以選擇合適的底圖。
作者： 夜夜yue
轉載請注明：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、
UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
總結：看了這么多手癢癢了嗎？此時此刻，打開ps做個banner練練手唄~~~~
如果你想設計出卓越，高效和流暢的用戶界面，就請參考Ben Shneiderman的“界面設計的八大黃金法則” 。蘋果，谷歌和微軟設計的產品都反映了Shneiderman的法則，這些行業巨頭制定的用戶界面指南都包含Shneiderman黃金法則中的特征，而這些公司的熱門界面設計則是法則的視覺體現。本文將告訴你如何整合8大黃金法則來改進你的工作。
界面設計的八大黃金法則
Ben Shneiderman（生于1947年8月21日）是美國馬里蘭大學人機交互實驗室的計算機科學家和教授。他的工作可以媲美Don Norman和Jakob Nielsen。Shneiderman在其熱門書“設計用戶界面：有效的人機交互策略（Designing the User Interface: Strategies for Effective Human-Computer Interaction）”中介紹了界面設計的八個黃金法則：
一致性
當你在設計類似的功能和操作時，可以利用熟悉的圖標，顏色，菜單的層次結構，行為召喚，用戶流程圖來實現一致性。規范信息表現的方式可以減少用戶認知負擔，用戶體驗易懂流暢。一致性通過幫助用戶快速熟悉產品的數字化環境從而更輕松地實現其目標。
常用用戶使用快捷操作
隨著使用次數的增加，用戶需要有更快的完成任務的方法。例如，Windows和Mac為用戶提供了用于復制和粘貼的鍵盤快捷方式，隨著用戶更有經驗，他們可以更快速，輕松地瀏覽和操作用戶界面。
提供有用信息的反饋
用戶每完成一個操作，需要系統給出反饋，然后用戶才能感知并進入下一步操作。反饋有很多類型，例如聲音提示，觸摸感，語言提示，以及各種類型的組合。對于用戶的每一個動作，應該在合理的時間內提供適當的，人性化的反饋。如設計多頁問卷時應該告訴用戶進行到哪個步驟，要保證讓用戶在盡量少受干擾的情況下得到最有價值的信息。
作者/版權持有人：Google，Inc. 版權條款和許可：合理使用
Windows Media Player設計師應該牢記Ben Shneiderman的第三個黃金法則：提供有用信息的反饋。體驗不佳的錯誤消息通常會只顯示錯誤代碼，對用戶來說這毫無意義。作為一名好的設計師，你應該始終給用戶以可讀和有意義的反饋。
設計流程需要設計一個完結
不要讓你的用戶猜來猜去，告訴他們其操作會引導他們到哪個步驟。例如，用戶在完成在線購買后看到“謝謝購買”消息提示和支付憑證后會感到滿足和安心。
提供簡潔的錯誤操作的解決方案
用戶不喜歡被告知其操作錯誤。設計時應該盡量考慮如何減少用戶犯錯誤的機會，但如果用戶操作時發生不可避免的錯誤，不能只報錯而不提供解決方案，請確保為用戶提供簡單，直觀的分步說明，以引導他們輕松快速地解決問題。例如，用戶在填寫在線表單時忘記填寫某個輸入框時，可以標記這個輸入框以提醒用戶。
允許撤銷操作
設計人員應為用戶提供明顯的方式來讓用戶恢復之前的操作，無論是單次動作，數據輸入還是整個動作序列后都應允許進行返回操作，正如Shneiderman在他的書中所說：
“這個功能減輕了焦慮，因為用戶知道即便操作失誤，之前的操作也可以被撤銷，鼓勵用戶去大膽放手探索。”
給用戶掌控感
設計時應考慮如何讓用戶主動去使用，而不是被動接受，要讓用戶感覺他們對數字空間中一系列操作了如指掌，在設計時按照他們預期的方式來獲得他們的信任。
減少短時記憶負擔
人的記憶力是有限的，我們的短時記憶每次最多只能記住五個東西。因此，界面設計應當盡可能簡潔，保持適當的信息層次結構，讓用戶去再認信息而不是去回憶。再認信息總是比回憶更容易，因為再認通過感知線索讓相關信息重現。例如，我們經常發現選擇題比簡答題更容易，因為選擇題只需要我們對正確答案再認，而不是從我們的記憶中提取。被彭博商業周刊稱為“世界上最具影響力的設計師之一”的Jakob Nielsen發明了幾種可用性研究方法，包括啟發式評估。信息再認而非回憶就是Nielsen界面設計10種可用性啟發式原則之一。
了解蘋果的設計如何整合Shneiderman的8大黃金法則
蘋果整合Shneiderman的八項黃金法設計出成功的產品，他們從Mac到移動設備設計都取得了巨大的成功，他們以產品設計的一致性，直觀而美麗為榮。蘋果的iOS人機界面指南也告訴我們他們的設計團隊如何應用Shneiderman的設計原則。
1. 一致性
“一致性”和“感知的穩定性”在Mac OS的設計中體現得淋漓盡致。不管是80年代的版本，還是現在的版本，Mac OS菜單欄設計都包含一致的圖形元素。
作者/版權持有人：StockSnap.io 版權條款和許可：CC0
作者/版權持有人：StockSnap.io 版權條款和許可證：CC0
隨著時間的推移，Mac OS的外觀有很大變化，Mac OS菜單欄設計都保持一致。
2. 快捷操作
如前所述，Mac允許用戶使用各種鍵盤快捷鍵，使用頻率高的包括復制和粘貼（Command-X和Command-V）以及截圖（Command-Shift-3）。
作者/版權持有人：StockSnap.io 版權條款和許可證：CC0
Mac允許用戶鍵盤快捷方式操作實現通常需要鼠標、觸控板或其他輸入設備才能完成的操作。
3. 有用信息反饋
當用戶點擊Mac桌面上的文件時，該文件會“突出顯示”，這是視覺反饋的一個很好的示例。另外，當用戶拖動桌面上的文件夾時，他們可以看到在按住鼠標時，文件夾顯示被移動的狀態。
作者/版權持有人：Euphemia Wong 版權條款和許可：合理使用
作者/版權持有人：Euphemia Wong 版權條款和許可：合理使用
4. 操作流程的設計
當用戶將軟件安裝到Mac OS時，提示信息的屏幕顯示用戶當前的安裝步驟。
作者/版權持有人：Google，Inc. 版權條款和許可：合理使用
5. 錯誤操作的解決方案
在軟件安裝過程中，如果發生錯誤，用戶將收到友好的提示信息。提供復雜的解決方案，或用戶難以理解的解決方案，或只報錯不提供解決方案，都是極大影響用戶體驗，使用戶沮喪的關鍵原因。根據錯誤操作的嚴重程度，區分何時使用小的，不會影響用戶操作的提醒，以及何時使用大的，侵入式提醒。但當錯誤操作發生時，請謹慎選擇正確的語氣和正確的語言提醒用戶操作錯誤。
作者/版權持有人：Google，Inc. 版權條款和許可：合理使用
Mac OS通過顯示一個溫和的提示消息向用戶解釋出現了什么錯誤操作及其原因。另外，解釋這是由于自己的安全偏好選擇，進一步向用戶保證，告訴他們一切在掌控范圍內。
作者/版權持有人：Manutencaonet Blogspot 版權條款和許可：CC BY 3.0
Windows系統中這個非常不友好的提示信息使用“fatal（后果嚴重的）”和“terminated（被終止）”字樣。這樣的負面的，不友好的言語肯定會嚇倒大多數用戶！
6. 允許撤銷操作
當用戶在安裝過程中提供信息時發生錯誤，允許他們重新回到上一步，而不必重新開始。
作者/版權持有人：Euphemia Wong 版權條款和許可：合理使用
7. 給用戶掌控感
讓用戶有權選擇是繼續運行程序還是退出程序，Mac的活動監視器允許用戶在程序意外崩潰時“強制退出”。
作者/版權持有人：Euphemia Wong 版權條款和許可：合理使用
8. 減少短時記憶負荷
由于人類短時記憶每次只能記住5個東西，所以蘋果iPhone屏幕底部的主菜單區域中只能放置4個及以下的應用程序圖標，這個設計不僅涉及對記憶負荷的考慮，還考慮了不同版本一致性問題。
作者/版權持有人：Brian Voo 版權條款和許可：合理使用
作者/版權持有人：Pixabay 版權條款和許可證：CC0
工作表：如何將Shneiderman的8項黃金法則應用于你的界面設計
作為設計師，你的工作是創建直觀，精美和流暢的用戶界面設計，讓用戶感到輕松和滿意。下面這個工作表可以幫你把上述這些規則應用于你的設計中。
工作表的PDF格式下載鏈接: https://pan.baidu.com/s/1nvp1EKp 密碼: mjq7
從Mac和PC到移動設備甚至是虛擬現實，以及將來可能出現的任何互動科技，只要你的設計涉及到人與界面之間的交互，這八大規則在設計過程中至關重要，不容忽視，現在就用這個工作表學習如何將它應用到你的設計中吧。
作者： oftodesign
轉載請注明：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、
UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
UI設計中，除了界面整體的布局，還有一些圖標、插畫的設計，大部分都是素材的填充，而這么重要的部分往往被設計師所忽略。
對于素材的隨意挑選，殊不知選圖的技巧和方法有很多，眾多素材中如何找到我們心儀的配圖呢？這就是今天要和大家分享的主題，用科學合理的方法找到最合適的素材。
一、選擇配圖的常見錯誤
在為產品尋找配圖素材時，是一個長久過程。所以素材的運用即能幫你提升界面的效果，也能拉低界面的效果，很多設計師不在意選材的重要性，往往因為配圖后界面效果還不如原型圖看起來規范好看。下面我總結出三個方法可以提升配圖的效果。
1、素材與用戶預期：
不真正調研產品的用戶群里和心里。搭配的素材必然達不到用戶預期。每款產品的使用人群是不同的，我們的素材配圖要符合產品使用人群的預期。
如下圖：是一款有關于售車的界面效果，此項目的用戶的目標已經確定，主為高端用戶，我們來看看左右配圖的區別。
左圖中我們在找配圖時如果不能保證對高端車的認知，必然會有低端車的產品圖的出現，由于不符合產品的使用人群，給用戶造成心理落差；而右圖則是我們了解高端車后的選圖，內容是符合用戶心理預期的，同時通過配圖再次提升產品的逼格。
PS：我上面說到圖片內容的心理預期與用戶不符，其實在關于選圖上，也是存在這個問題的，例如左側是通過百度找到的素材，不夠精致，無法提高界面的整體效果，而右側則是在站酷海洛找到的素材：
只要進行裁剪，縮放比例即可使用，界面整體檔次也提升很多。
2、素材與主視覺：
說到主視覺，就先要說說有關顏色的歸類，顏色主要分為暖色系，冷色系和中性色系三種，在界面中不同的顏色可以帶來不一樣的感受，如果不理解主視覺所要表達的感受，便找不到合適的配圖，無法提升界面效果。所以我們在選擇配圖時一定要追尋界面的主色系所以傳達的情感。
如下圖：左側是以冷色為主的直播界面，右側是以暖色為主的產品詳情頁。
左圖由于忽略了主視覺的關系，配圖為顏色過多，頁面整體表達出來的情感不夠直觀，無法產生共鳴。
右圖中我們通過控件可知主色為暖色系，選擇同色系的素材進行搭配，通過素材和主視覺的完美搭配才能明確傳達產品想要給用戶的感受。
3、素材與素材：
這是最容易出現的錯誤，我們通常只關注于素材的整體感覺，反而忽略同類素材之間的差異，不是所有的同類素材都可以放到一起來用的，我們還要注意素材與素材內容的差異化。
如下圖：左圖為一款外賣食品列表的效果圖，右圖為商品列表的效果圖，大家可以分別感受一下左右兩側的哪個更舒服些。
左圖中列表的素材與素材的內容是不同的，雖然都是食物圖，但有的是實物，有的是適量圖，給人的感覺是不同的，這也是大家總是覺得哪里不對，卻又說不出來的問題。
再看右圖中的列表，配圖元素統一，同為國外真人模特，符合素材與素材之間風格的統一。
PS：我們平時在做概念稿時，找同類型的產品圖消耗的時間也是很大的，不是圖片少，而是同質量的素材太少了。
所以一定要在專業的素材平臺找查找，因為專業的素材平臺會根據設計師的需要提供方便快捷的素材集合。
例如上圖，我在站酷海洛中的搜索水果，便的到各個角度和不同風格的同質量圖片，可以有更多的選擇去搭配。
二、運用配圖的常見錯誤
上面我們說的是如何選擇素材，而下面一部分主要是讓大家了解到沒有量身定做的素材，不是什么素材都可以拿來直接用的，理想是豐滿的，現實是骨感的。
辛辛苦苦找到的素材，就差一步便可以提升作品的效果，卻因為嫌修改麻煩而失之交臂，我們來看看下面三種方法是如何將素材進行優化的。
1、統一素材比例：
在設計界面時，素材被拉伸變形，填充不滿等低級問題出現的已經越來越少了，所以這里要說的不是基礎的尺寸問題，而且是素材內容的占比比例。要保證素材中的內容與背景的占比是一致的，才能提升界面規范性。
如下圖：兩張運動類產品的界面列表，我們來分別單獨預覽兩個界面，有沒有發現同樣的界面同樣的產品，但預覽產品的順序是不同的，這是什么原因導致的呢？我們往下看。
左圖中的產品展示內容與背景的占比不統一，可能是按現實中的比例進行擺放的，有大有小，界面顯亂，干擾用戶的閱讀順序。
右圖通過更改圖片比例后，統一了圖片內容與背景的比例，不會干擾用戶閱讀界面的順序。
2、統一素材角度：
素材因為角度不一，給人的感受也是不同的，在一個界面中的素材如果角度各式各樣，會影響到用戶的點擊欲望。所以在挑選素材時應該注意參考圖的角度，統一的拍攝角度可以讓界面變得更有秩序。
如下圖：左右兩張界面的產品展示部分。
左側界面中產品配圖角度各異，有正視拍攝，有俯視拍攝的界面毫無秩序感。而右側則對配圖進行了規范，都為正視圖，讓界面看起來更統一規矩。
3、統一顏色：
很多素材的構圖和內容都很棒，但放到界面中卻顯得格格不入，主要原因在于顏色之間的差異。選用素材后，如果對差異較大的顏色不做改變，便會造成顏色混亂，弱化了主視覺的顏色，用戶對其產品的認識便會漸弱。
如下圖：播放器界面中唱片封面的顏色差異。
左圖我們為播放器尋找到了合適的素材封面，但素材的顏色是橙色的，素材與整體的顏色調性是不融洽的，破壞了界面的統一性，并不適合。
所以我們可以將封面改變其顏色變為符合我們界面中按鈕以及播放時長的進度條的藍色即可。
三、線上運營用圖
前面說到的都是關于概念稿選擇素材用到的一些技巧，可能大家看了會覺得這是概念稿，在實際的線上是沒辦法控制的，這個觀點我并不同，實際線上的配圖就真的沒辦法提升了嗎？還是我們選擇性忽略了呢？也許我們最初的選擇就是美麗的謊言。
1.確保真實用圖：
在設計初期我們就應該使用真實的運營圖片進行設計，防止上線后才發現圖片與設計風格不符的情況，為時已晚。
如下圖：兩組圖為圖書展示模塊區域。
左圖為設計時擺放的封面，都是精心挑選的優質素材，美化了模塊的效果。
而右側為線上效果，無法保證封面設計的統一性，所以切勿使用與實際上線不符的圖片，會影響產品最終效果的判斷。
2.不可重復用圖：
很多設計師在做設計稿時，通篇只用一張素材圖，交給開發，其實這樣做出的設計，和原型無太大差異。
但是我們的設計稿是為了給運營提供參考的基礎模版，為了能和線上效果保持一致，所以設計稿中的素材不可在一個界面中出現兩次。
如下圖：視頻App中的頻道頁，左側為復用素材設計，右側為選擇不同素材設計。
左側的復用設計其實和原型區別不大，無法根據界面中的素材選擇運營圖，可利用性不大。而右側更貼近線上效果，可以給運營提供找素材圖的方向，避免返工。
3.圖片的清晰度：
模糊的圖片會使用戶的視覺體驗變得糟糕，現在的用戶對于圖片的瀏覽量每天都是不計其數的，如果想要在配圖上得到用戶的親睞，就必須要清晰且看著舒服的圖片。
如下圖：兩張同樣的界面展示，分別用了模糊的素材和清晰的素材。
左圖中圖片清晰度不夠，影響用戶的瀏覽，同時也會給用戶造成未加載完成的錯覺。
右圖中的素材則清晰可見，增加界面的美觀度。所以我們在用圖時，不可以用小尺寸的圖片強行拉伸，會導致圖片模糊不清，請選擇高清大尺寸的配圖。
4.圖片比例：
同一張圖片可能需要在多個界面中進行展示，而展示的尺寸也有可能存在差別，所以我們需要統一制定界面中運營圖的尺寸規則，也可以做好安全區，避免界面因比例不對造成的圖片拉伸或者顯示不全等情況。
如下圖：下面的圖片是原圖素材，接下來要將原圖分別放入不同的區域內，他們的尺寸也不同。
在左側界面中，如果任由系統自動適配比例就會出現前兩種的錯誤，留白或變形，所以我們應該把較大的圖片制作規范，畫出安全區。
如右圖banner通過上面等比例縮放到剛好填充滿即可，下面的素材也是等比縮放大填滿整個擺放區域后在進行裁剪。
5.元素太多不使用：
很多運營的用圖元素過多，一心想把能放的都放進去，最后圖片內容中沒有重點，用戶看的也是一頭霧水，元素少，突出重點的圖來使用。
如下圖：同為視頻App中熱播模塊，同樣的美劇和字段，只是素材有所不同。
左側素材中元素過多，影響用戶對圖片閱讀，無重點，沒有點擊欲望。
而右側的配圖簡單清晰一目了然，不會給用戶帶來閱讀負擔，更是挑選影片中簡單清晰的畫面作為封面使用，增加用戶點擊欲望。所以我們要選擇元素少的運營圖作為配圖。
6.格式太大：
圖片格式過大是一件很嚴重的問題，用戶預覽時加載速度過慢影響用戶體驗的流暢性，圖片過大也會增加用戶流量的使用費用。所以我們在導出運營用圖時，一定要記得壓縮圖片，對于壓縮到什么程度，要看圖片本身的大小，只要保證壓縮完依然清晰就可以。
如下圖：兩張同樣的素材圖，他們的清晰度是一樣的，可大小卻有區別。
左側為原圖大小，右側為壓縮后的圖片大小，我們可以看到壓縮后的圖片明顯占用的內存更小了。
7.不要使用白色背景：
目前線上產品中白色背景的產品占比還是很高，所以我們在選用素材時，要避開白色背景的素材，當界面背景也為白色時，會造成無邊緣感。
如下圖：兩個模塊中選擇用了不同背景底色的素材圖。
左側素材中用了大量的白色背景的素材，無法判斷圖片與圖片之間的距離，同時也會造成圖片大小不一的錯覺。
右圖中使用有背景色的素材，可以清晰的區分每一個模塊的間距，整齊規范。
總結
我們在做概念稿時都知道需要精心選擇配圖，為什么在做線上稿時，圖片的質量就變得那么差，是一件需要思考的事情，難道沒有好的素材，我們就放棄了產品的美觀度嗎？
我們不應該把美化調整運營圖變成日常的流程中嗎？這樣才能保證產品的最終質量。好看的素材不是找出來的，而是通過我們優化出來的。
作者：海邊來的設計師
轉載請注明：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、
UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
情感化設計在我們的決策過程中起著至關重要的作用，因為加入情感化的設計可以改變與產品交互的人的整體現實。
人類是一種情緒驅動的物種，我們選擇某些產品并不是因為它們有意義，而是因為我們認為它們會讓我們感受到不一樣的感覺。也正因如此，在未來的界面將在產品設計的基礎上使用情感的概念，人們使用的經驗將基于智商（IQ）和情商（EQ）。
本文試圖展望未來，看看我們將在未來十年內設計哪些接口。我們將仔細研究三種情感化界面設計的互動：
語音
增強現實（AR）
虛擬現實（VR）
未來情感化界面的實際例子
界面如何？即使我們還沒有回答這個問題，我們也可以討論接口可能具有哪些特性。在我看來，我確信我們最終將擺脫充滿菜單，面板，按鈕的接口，并轉向更“自然的界面”，也就是情感化的界面。未來的界面不會被鎖定在物理屏幕上，而是會集合五種感官的力量。因此，他們需要較少的學習曲線，理想情況下，根本沒有學習曲線。
情商情緒在商業中的重要性
除了使體驗更自然并減少學習曲線之外，為情感設計還為產品創造者帶來了另一個好處：它提高了用戶對產品的采用率。可以利用人類對情緒的行動能力來創造更好的用戶參與度。
真實的語音界面
使用語音作為主要界面的產品正變得越來越流行。我們中的許多人使用Amazon Echo和Apple Siri進行日?；顒?，例如設置鬧鐘或預約。但是，目前市場上可用的大多數語音交互系統仍然具有自然的局限性：它們不會考慮用戶的情緒。因此，當用戶與Google Now等產品進行互動時，他們對與機器進行通信具有強烈的溝通感 - 而不是真正的人。系統可預測地響應，并且他們的響應是腳本化的，與這樣的系統進行有意義的對話是不可能的。
但是目前市場上有一些完全不同的系統，其中一個是Xiaoice，一個社交聊天機器人應用程序。這個應用程序的核心是情感計算框架，該應用程序的基礎是，首先與用戶建立情感聯系。Xiaoice可以動態識別情緒，并在與相關響應的長時間對話中吸引用戶。結果，當用戶與Xiaoice交互時，就像是與真人交談一樣。
Xiaoice的局限在于它是一個基于文本的聊天應用程序。很明顯，你可以通過基于語音的交互來實現更強大的效果（人聲具有不同的特征，例如可以傳達強大的情感譜的音調）。
我們中的許多人已經在電影“她”（2013）中看到了基于語音的互動的力量。Theodore愛上了Samantha（一個復雜的操作系統）。這也使我們相信，未來基于語音的系統的主要目的之一將是用戶的虛擬伴侶。這部電影最有趣的事情是西奧多沒有薩曼莎的視覺形象，他只有她的聲音。要建立這種親密關系，必須產生反映一致性格的回應。這將使系統既可預測又值得信賴。
技術離Samantha這樣的系統還有很長的路要走，但我相信語音優先的多模式接口將是語音接口發展的下一章。這樣的接口將使用語音作為主要交互方式，并在創建和建立連接感的上下文中提供附加信息。
為Brain.ai設計的語音界面示例（圖片來源：Gleb Kuznetsov）
AR體驗的演變
增強現實（AR）被定義為現實世界之上的數字覆蓋，并將我們周圍的對象轉換為交互式數字體驗。我們的環境變得更加“智能”，用戶對手指尖上的“有形”物體產生幻覺，從而在用戶和產品（或內容）之間建立了更深層次的聯系。
使用AR重新構想現有概念
AR的獨特之處在于它為我們提供了與數字內容進行物理交互的非凡能力。它允許我們看到以前無法看到的東西，這有助于我們更多地了解我們周圍的環境。此AR屬性可幫助設計人員使用熟悉的概念創建新的關卡體驗。
例如，通過使用移動AR，可以創建新級別的飛行體驗，允許乘客查看有關其班級或當前航班進度的詳細信息：
AR在空中客車A380的飛行體驗中。（圖片來源：Gleb Kuznetsov）
AR幫助我們找到通過空間的方式，并一目了然地獲得所需的信息。例如，AR可用于為您當前的位置創建豐富的上下文提示。被稱為技術SLAM（小號 imultaneous 大號 ocalization 甲 ND 中號 apping）非常適合此。SLAM允許實時映射環境，并且還可以將多媒體內容放入環境中。
為用戶提供價值的機會很多。例如，用戶可以將他們的設備指向建筑物，并在其屏幕上了解更多信息。它可以顯著減少工作量，并通過允許導航和訪問實現輕松的情感體驗。
在上下文中提供其他信息（圖片來源：Gleb Kuznetsov）
我們周圍的環境（例如墻壁或地板）可以成為交互場景，過去僅限于我們的智能手機和計算機。
你在下面看到的概念正是如此; 它使用物理對象（白墻）作為通常使用數字設備傳送的內容的畫布：
交互式墻的概念 - 在現實世界之上的數字覆蓋。（圖片來源：Gleb Kuznetsov）
避免信息過載
我們中的許多人都看到了名為“超現實”的視頻。在這段視頻中，物理和數字世界已合并，用戶被大量信息所淹沒。
技術允許我們同時顯示幾個不同的對象。當它被誤用時，很容易造成過載。
信息過載是一個嚴重的問題，對用戶體驗產生負面影響，避免它將成為AR設計的目標之一。精心設計的應用程序將使用AI的強大功能過濾掉與用戶無關的元素。
高級個性化
當系統實時地根據用戶的需求和期望來管理內容或功能時，就會發生數字體驗的個性化。許多現代移動應用程序和網站使用個性化概念來提供相關內容。例如，當您訪問Netflix時，您看到的電影列表會根據您的興趣進行個性化。
AR眼鏡允許創建新的個性化水平，即“高級”個性化水平。由于系統“看到”用戶看到的內容，因此可以利用此信息提出相關建議或在上下文中提供其他信息。想象一下，你很快就會戴上AR眼鏡，轉移到你視網膜的信息將根據你的需要量身定制。
從增強現實走向虛擬現實，創造沉浸式體驗
AR體驗具有自然的局限性。作為用戶，我們在內容和內容之間有明確的界限; 這條線將一個世界（AR）與另一個世界（現實世界）分開。這條線引起了AR世界顯然不真實的感覺。
您當然可能知道如何解決這個限制，即使用虛擬現實（VR）。VR并不是一種新的媒介，但只是在過去的幾年里，技術已經達到了允許設計師創造身臨其境體驗的程度。
沉浸式VR體驗消除了現實世界與數字之間的障礙。當你戴上VR耳機時，你的大腦很難處理你收到的信息是否真實。關于VR體驗如何在最近的將來看起來的想法在電影“Ready Player One”中有很好的解釋：
以下是設計人員在創建沉浸式虛擬環境時需要記住的內容：
1.寫一個故事
有意義的VR有一個強大的故事的核心。這就是為什么在你開始設計VR環境之前，你需要為用戶旅程寫一個敘述。一個稱為“故事板”的強大工具可以幫助您。使用故事板，可以創建故事并檢查所有可能的結果。當您檢查故事時，您將看到何時以及如何使用視覺和音頻提示來創建身臨其境的體驗。
2.與角色建立更深層次的連接
為了讓用戶相信VR中的所有內容都是真實的，我們需要創建與用戶所扮演的角色的連接。最明顯的解決方案之一是在虛擬場景中包含用戶手的表示。這種表示應該是實際的手 - 而不僅僅是一個操縱的復制品?？紤]不同的因素（如性別或膚色）至關重要，因為它會使交互更加真實。
用戶可以看到他或她的手，看他們看起來像一個角色。（來源：leapmotion）
也可以將現實生活中的一些對象帶到VR環境中以創建此連接。例如，一面鏡子。當用戶查看鏡像并在反射中看到他們的角色時，它可以在用戶和虛擬角色之間實現更真實的交互。
虛擬現實用戶會查看虛擬鏡像，并將自己視為VR環境中的角色。致謝：businesswire。
3.使用手勢代替菜單
在設計沉浸式VR體驗時，我們不能依賴傳統的菜單和按鈕。為什么？因為通過顯示菜單來打破沉浸感相對容易。用戶會知道他們周圍的一切都不真實。設計師不需要使用傳統菜單，而是需要依賴手勢。設計界仍然在定義使用手勢的通用語言，參與這項活動是有趣和令人興奮的運動。棘手的部分是讓用戶熟悉并可預測手勢。
Hovercast VR菜單試圖將現有的交互概念重用于VR體驗。不幸的是，這個概念可以打破沉浸感。新媒體需要新的互動模式。
4.與VR環境中的元素交互
要創建一個感覺真實的環境，我們需要讓用戶能夠與該現實中的對象進行交互。理想情況下，環境中的所有對象都可以以允許用戶觸摸和檢查它們的方式進行設計。這些物體將充當刺激，并將幫助您創造更加身臨其境的體驗。觸摸對于探索環境非常重要; 嬰兒在頭幾天獲得的最重要信息是通過觸摸獲得的。
5.VR
VR中分享情感有一個真正的機會，成為一個新的社會體驗水平。但為了實現它，我們需要解決一個重要問題，即將非語言線索帶入交互中。
當我們與其他人互動時，我們獲得的信息的重要部分來自肢體語言。驚喜，厭惡，憤怒 - 所有這些情緒都在我們的面部表情中，在面對面的互動中，我們從眼睛區域推斷信息。當人們在VR環境中進行交互以創建更真實的交互時，提供此信息非常重要。
好消息是頭戴式設備（HMD）將很快涵蓋情感識別。幾乎任何人與人之間的互動都將受益于VR中的面部表情。
在VR空間分享情感（來源：MITReview的 Rachel Metz ）
6.為VR環境設計聲音和音樂適合
音頻是沉浸式體驗的重要組成部分。如果不為環境設計聲音，就不可能創造出真正身臨其境的體驗。聲音既可以用作背景元素（即風的環境聲音），也可以用作方向性的。在后一種情況下，聲音可以用作提示 - 通過播放方向性（聲音來自哪里）和距離（可以將用戶的注意力集中在特定元素上）。
在為VR設計音頻時，制作聲音3D至關重要。2D聲音不能很好地用于VR，因為它使一切都太平。3D聲音是您可以在周圍的各個方向聽到的聲音 - 前方，后方，上方和下方 - 遍布整個地方。您不需要專門的耳機來體驗3D聲音; 可以使用HMD的標準立體聲揚聲器來創建它。
頭部跟蹤是良好聲音設計的另一個重要方面。讓聲音以逼真的方式表現至關重要。這就是為什么當用戶移動他的頭部時，聲音應該根據頭部運動而改變。
7.預防暈車
動是VR的主要痛點之一，這是一種在視覺感知運動和前庭系統的運動感之間存在分歧的情況，而讓用戶在體驗VR時保持舒適至關重要。
有兩種流行的理論導致VR中的暈動病：
“感覺沖突”理論：根據這一理論，暈動病的發生是由于預期的運動和實際經歷的運動之間的感覺上的不一致。
“眼動”理論：在“ VR書：虛擬現實的以人為本設計 ”一書中，杰森杰拉德提到暈動病的發生是因為保持場景圖像在視網膜上穩定所需的不自然的眼球運動。
以下是一些提示，可以幫助您防止用戶接觸到病箱：
身體運動應與視覺運動相匹配。有時即使是小的視覺抖動也會對體驗產生巨大的負面影響。
讓用戶在移動場景之間休息（這在VR體驗非常動態時尤為重要）。
減少虛擬旋轉。
結論
當我們考慮產品設計的現代狀態時，很明顯我們只是處于冰山一角，因為我們僅限于平面屏幕。
我們正在目睹人機交互（HCI）的根本轉變 - 重新思考數字體驗的整體概念。在接下來的十年中，設計師將打破玻璃（我們今天所知的移動設備時代）并轉向未來的接口 - 復雜的語音接口，先進的AR和真正的沉浸式VR。當談到創造一種新的體驗時，必須要明白我們唯一的邊界是我們的大腦告訴我們它必須始終如一。
一個個看起來精致的頁面也是由這些UI設計細節組成的。對于頁面細節的處理也往往可以體現UI設計師的專業和嚴謹度，本文分享的這些設計細節，不僅新人設計師常常會忽略，就連有經驗的設計師也時常會在這些細節上處理不當。
文字細節
A．文字行距
在做段落文本時，我們很少直接使用默認的文本行距，為了保證閱讀的可讀性和舒適性，必須設置比默認值更大的數值的行距。
具體的數值可以設置在字號的1.3～1.8倍之間，一般情況下，字號越小，需要的閱讀空間會略大一些，特別是在設計一些閱讀類需要閱讀大段文本的產品頁面時，一定要加大行距來提高文本的可讀性和閱讀舒適性。
B．文字對比度
在界面設計中，應該要保證任何文字的可閱讀性，它應該有足夠的對比度，即使是提示性文字也要保證在任何類型的顯示器上都可見易讀。
間距和邊距
A．去掉多余的邊框和分割線
用大量而明顯的分割線和邊框將模塊分開，是UI設計新手常常犯的錯誤，但在設計的同時，可以停下來好好思考：用分割線分開一定是最好的方法嗎？有必要嗎？
有時用1px的邊框和分割線確實是合理的，但也有其他的方法來進行信息的歸類和分割，比如利用陰影和更大的間距。
B．避免不均勻的邊距
在進行卡片式設計時要注意內容與卡片邊緣的邊距。如果你是以常用的從左上角到右下角的方式來布局內容，那就讓頂部的邊距比左側的邊距稍大一點，看起來會比四邊都相等的邊距更加舒適美觀。
投影
在物理現實中，物體的投影絕對不會是黑色的，物體的投影顏色始終會受到其所處在的環境的影響。
應用在界面設計中，物體或是卡片的投影顏色應考慮其背景和環境顏色來進行結合設計，即不應選擇純灰色，而是選擇帶有背景色彩傾向的灰色，同時設置適當的透明度和模糊值，來營造自然舒適的投影效果。
內容填充
重復和隨意的示例文本和圖片放在設計圖中看起來會很不專業，應該避免交付這樣的設計稿，它會讓人覺得你對自己的設計是不專業不用心不愿意花時間的，同時也反應了你對與自己的設計產出的重視程度。
此外，也已經有一部分插件可以自己自動選擇填充內容，為設計師節省了這些素材的填充時間，所以在交付設計稿時，讓自己的設計稿盡量完整專業，哪怕是為了演示效果，也應該放上相應的不同的內容標題、文本、圖片，讓整個設計看起來更加專業和完整。
以上提到的每一條規則都要結合具體的產品來進行具體分析和設計，但是可以適用在在大多數情況下，設計從來沒有一個標準答案，對于設計新手要訓練的是，如何找到那個最合適當前產品的設計方式，希望這篇分享能對你有幫助，感謝閱讀。
當我們拿到網頁設計需求時，首先要確定是不是要單獨開發移動版本。因為響應式布局兼顧了手機端適配問題，但是受加載速度、手機瀏覽器、柵格化系統的限制設計發揮的自由度、等的影響很大。
柵格化設計：是針對網頁設計師。主要是為了提高網頁的規范性。
柵格設計系統：（網格設計系統，標準尺寸系統、程序版面設計）是一種屏幕設計的方法和風格，運動固定的格子設計版面布局，其風格工整、整潔。
柵格化布局：針對前端開發人員，指前端攻城獅使用的css框架，來實現頁面的響應式布局。
設計師使用縱向的柵格（列）讓頁面元素垂直方向上對齊，使用橫向的柵格（排）讓元素水平方向上對齊。設計師結合基準網格（8pt）和縱向柵格（12欄 16pt）進行設計。
基于設備的邏輯像素進行UI設計——設計開始前UI設計師要根據桌面和平板手機分辨率大小，考慮最大最小響應的屏幕，給出響應的策略設置斷點和次斷點。
斷點：(breakpoint)是頁面改變布局的臨界點，一個響應式網頁可能會有一個或者多個斷點。有時候網頁也會設置次斷點。
次斷點：(minor breakpoint)并未對頁面布局做很大的改動 只是對細節做了一些微調。
媒體查詢：（media queries）是實現斷點的一種方法，它提供了簡單的邏輯方法來根據不同的設備特征（寬度 高度 像素比）應用不同樣式，最常用的媒體查詢變量是min-width和max-width。）
設計師根據網頁的內容找到合適的斷點。設置多少個斷點由網站的內容決定，設置幾個斷點就需要設計幾套UI設計圖。設法避免列間空白太寬或太窄的情況。常見的設計尺寸1920PX（大屏電腦）、1440PX/1280PX（小屏電腦）、1024PX（橫屏Ipad）、768PX（手機和豎屏Ipad）。（這些是根據市場常見的機型分辨率來的。再根據網頁內容多少進行合理的增減。）
用chrome瀏覽器打開一個響應式網站，檢查元素，右上角會顯示視窗當前的分辨率，慢慢縮小視窗的寬度，找到頁面布局的變化點，就是我們上面說到的斷點或者次斷點。）
這個當然不是了。這個視網站中每個頁面的內容而定，甚至同一個頁面的不同內容模塊布局斷點設置也不盡相同。在我的實踐過程中，很多頁面只需要設計三套，當然比較復雜的頁面，在這五個分辨率上，都需要對布局做一些修改或者自動隱藏部分內容。
在UI設計中，很多設計師都苦惱于自己的界面設計“沒有設計感”，感覺看起來“不高級”，到底是為什么呢？其實就是在一些細節的處理上略缺火候，掌握下面這15個小技巧，能讓你的UI界面質感翻倍！
1、雙重陰影，突出立體感
設計師在設計時，為了突出里按鈕的立體感，往往會使用陰影效果。但其實在陰影效果上再疊加一層精細的邊框，可以讓陰影效果顯得更清晰，而不會與原本的按鈕混為一體。
2、只用一種字體，保持視覺一致性
為了讓設計更美觀，許多設計師會在一個界面使用多種字體，但實際上，一個界面里只使用一種字體更為美觀，可以幫助界面產生統一的設計效果。
3、一種字體，不同字重
如果選擇一種字體進行設計會稍顯單調，那可以根據內容的輕重優先級，來選擇不同的字重來做以區分。
4、適當留白
當內容豐富時，更需要適當的留白，才能讓設計具有呼吸感，更加舒適。
5、提高文本與背景的對比度
很多過深或過淺的背景圖上添加文本，總會讓人閱讀有困難，可以采取加粗、添加漸變等方式來處理文本，讓字體更清晰。
6、交互按鈕需要著重突出
為了增加用戶選擇交互按鈕的可能性，應該使用顏色對比、尺寸或標簽，來確保該按鈕突出。
7、字號越小，行距應該越寬
字號越小，閱讀起來障礙更明顯，增加行高留出空隙會讓它更易讀。
8、下載頁顯示進度提醒
如果下載頁的軟件或其他安裝包有一定的下載等待時間，建議給出進度提示，讓用戶可以隨時了解下載進度，不會中途取消下載。
9、同個界面，文本長度盡量一致
基于人的閱讀習慣，研究總結出，單列頁面里，45到75個字符是被廣泛認可的長度。
10、元素陰影不要太重
舒服的投影會增加你的設計的質感，和透氣感。太重的投影會顯得你畫面比較臟。
11、使用遞進分類加強對比度
加強對比度，可以明確突出所選元素。
12、標題的行高不要太高
與長格式正文文本（需要足夠的行高以提高可讀性）不同，標題通常要短得多，因此可以稍微縮小間距。標題的建議行高通常是文本大小的1到1.3倍。
13、大寫標題，提高字間距
當標題全部為大寫字母時，增加字母間距可以提高可讀性，同時又增強了一絲設計感。
14、增添頁面動態
可以在加載中添加一些提醒讓用戶理解當前運行狀態，例如添加“緩沖”符號。
15、不要在下拉列表放置重要操作
用戶需要采取的基本操作（例如，注冊或登錄），應該直接放在醒目位置，而非隱藏在菜單欄中。
一個個看起來精致的頁面也是由這些UI設計細節組成的。對于頁面細節的處理也往往可以體現UI設計師的專業和嚴謹度，本文分享的這些設計細節，不僅新人設計師常常會忽略，就連有經驗的設計師也時常會在這些細節上處理不當。
文字細節
A．文字行距
在做段落文本時，我們很少直接使用默認的文本行距，為了保證閱讀的可讀性和舒適性，必須設置比默認值更大的數值的行距。
具體的數值可以設置在字號的1.3～1.8倍之間，一般情況下，字號越小，需要的閱讀空間會略大一些，特別是在設計一些閱讀類需要閱讀大段文本的產品頁面時，一定要加大行距來提高文本的可讀性和閱讀舒適性。
B．文字對比度
在界面設計中，應該要保證任何文字的可閱讀性，它應該有足夠的對比度，即使是提示性文字也要保證在任何類型的顯示器上都可見易讀。
間距和邊距
A．去掉多余的邊框和分割線
用大量而明顯的分割線和邊框將模塊分開，是UI設計新手常常犯的錯誤，但在設計的同時，可以停下來好好思考：用分割線分開一定是最好的方法嗎？有必要嗎？
有時用1px的邊框和分割線確實是合理的，但也有其他的方法來進行信息的歸類和分割，比如利用陰影和更大的間距。
B．避免不均勻的邊距
在進行卡片式設計時要注意內容與卡片邊緣的邊距。如果你是以常用的從左上角到右下角的方式來布局內容，那就讓頂部的邊距比左側的邊距稍大一點，看起來會比四邊都相等的邊距更加舒適美觀。
投影
在物理現實中，物體的投影絕對不會是黑色的，物體的投影顏色始終會受到其所處在的環境的影響。
應用在界面設計中，物體或是卡片的投影顏色應考慮其背景和環境顏色來進行結合設計，即不應選擇純灰色，而是選擇帶有背景色彩傾向的灰色，同時設置適當的透明度和模糊值，來營造自然舒適的投影效果。
內容填充
重復和隨意的示例文本和圖片放在設計圖中看起來會很不專業，應該避免交付這樣的設計稿，它會讓人覺得你對自己的設計是不專業不用心不愿意花時間的，同時也反應了你對與自己的設計產出的重視程度。
此外，也已經有一部分插件可以自己自動選擇填充內容，為設計師節省了這些素材的填充時間，所以在交付設計稿時，讓自己的設計稿盡量完整專業，哪怕是為了演示效果，也應該放上相應的不同的內容標題、文本、圖片，讓整個設計看起來更加專業和完整。
以上提到的每一條規則都要結合具體的產品來進行具體分析和設計，但是可以適用在在大多數情況下，設計從來沒有一個標準答案，對于設計新手要訓練的是，如何找到那個最合適當前產品的設計方式，希望這篇分享能對你有幫助，感謝閱讀。
界面作為用戶與APP交互的唯一接口，對用戶的情緒和工作效率起著舉足輕重的作用。因此需對用戶界面設計一般原則進行探討。
2、富有吸引力。
用戶界面是由若干界面元素組成的，不是所有元素都一樣重要，要確保重要的元素盡快顯現給用戶。重要的或頻繁訪問的元素應當放在顯著的位置上，而不太重要的或使用頻率小的放到不太顯著的位置上。
一致的外觀可以在系統中創造一種和諧。如果界面元素缺乏一致性，很可能使界面看起來雜亂無章、沒有條理，甚至可能引起用戶對系統可靠性的懷疑，失去對系統應用的信心。
當然此處的“白”并非指白色，而是指界面中沒有被界面元素占用的空白區域。恰當地“留白”有助于突出界面元素和改善可用性，引導用戶在不知不覺中進入系統的思維框架，從而順利地、正確地應用這個系統。
6、保持界面簡單明了。
界面設計中最重要的原則就是使復雜的問題簡單化。如果用戶覺得界面很復雜，則可能會認為系統本身也很難，而望而卻步，所以與大而全的界面設計方案比較起來，簡單明快的界面設計往往更可取。
7、慎重使用顏色。
列表框類元素有一個共同的特點，都可以設置滾動條。使在一個小“框”中閱讀大文件成為可能。但也產生一個問題：如果閱讀一個行列均很多的文件，用戶就會反復拉動水平或垂直滾動條，給閱讀帶來諸多不便。設計時最好只使用一個方向的滾動條，即要么橫向夠寬，要么縱向夠長。
11、控件隱藏。
時我們傾向于將我們的設計視為藝術品。但如果我們用這種方式來思考它們，就意味著它們不會準備好面對“現實世界”的不確定條件。但是，設計一個可以隨時改變的界面也很美 - 而且，讓我們承認它，接口確實一直在變化。我最喜歡設計移動應用程序的一個方面是，從最初的概念到你對所有界面細節進行微調和拋光的時候，這是一個包含許多步驟的過程。
我們是視覺思考者，擁有訓練有素的眼睛。這就是為什么在開始一個新項目時有時會直接跳到可視化UI設計階段的原因，這也是我們可能對其他任務感到厭倦的原因之一。
這也意味著我們經常推遲工作流程的其他重要部分：定義用戶需求和目標，草擬任務流程，處理信息的所有細節和交互設計等。這些是同樣重要的是，它們更抽象，更難以讓人想象它們將如何成為最終產品的有形部分。
當我們正在進行視覺設計時，所謂的像素完美哲學可能是一個陷阱，使我們花費更多的時間來制作細節，直到最小的細節處于界面的“完美”位置。這導致一代設計師使用Dribbble和Behance主要顯示應用程序和網站的精美屏幕，并且更關注外觀而不是設計實際工作方式。在現實世界中，事情往往不如我們期望的那樣好。
就個人而言，我認為最好的設計（當談到用戶界面設計時）不僅外觀和感覺良好，而且還可以優雅地響應變化的條件甚至不可預測的情況。
在構建產品的漫長道路上，設計師需要更多的協作，而不是專注于視覺設計。這正是我為了這篇文章專注的地方。在接下來的幾段中，我將向你提供一些提示和技巧，說明如何將你正在進行的應用程序設計用于測試，并了解它是否已準備好發布到市場。
在不完美中尋找美
當我在大學學習平面設計時，他們教會了我們平衡，對齊，比例和張力的美感，以及如何在空間中定位元素，使它們和諧悅目。憑借這些知識，我的生活發生了變化，我開始以不同的眼光看世界。后來，我開始設計界面，我試圖將相同的原則付諸實踐，屏幕上的所有信息都應該形成一個非常令人滿意的視覺構圖。
如果你將這些原則應用于移動應用程序設計，那么我們發現必須顯示適量的信息。例如，如果一個屏幕必須列出人們的姓名，設計師通常會選擇一些短而普通的名字，并將它們完美地排列在一起，沒有留下任何可能破壞設計或使其在以后崩潰的意外長名稱的空間。
這種方法基于這樣的假設：在混亂和不完美中沒有美，盡管這兩個方面在現實世界中經常出現。但是視覺界面并不是一件值得欣賞的靜態藝術品; 它們是動態的，功能性的空間，可以改變和適應每個人使用它們。我們不應該屈服于純粹為美學設計的誘惑，因為我們永遠無法控制界面必須呈現給人們的一切。
相反，我們必須設計變革！這就是日本人所說的wabi-sabi，一個“以接受短暫和不完美為中心的世界觀”。
因此，以不同的方式思考和設計是很重要的：
● 嘗試以多種方式在你的設計中呈現數據;
● 盡可能使用真實數據。
當你嘗試以幾種方式呈現數據時，包括一些不可預測的數據，你將能夠測試界面是否已準備好處理超出設計“舒適區”的這些情況。此外，為極端情況做好準備。
如果你已經推出了該產品，這將更容易，因為你可以關注實際數據并將其用于你正在進行的設計過程中作為參考。但是如果你正在研究一些新的東西，那么你將不得不深入挖掘，做一些研究，并嘗試了解以后如何信息。你還可以與后端團隊的開發人員討論此問題，他們將能夠更好地向你解釋將存儲和呈現的數據類型。
我給你一個更具圖形的例子，我的開發者朋友稱之為“漂亮的朋友綜合癥”。當我們設計一個包含人物圖片的屏幕時，如用戶檔案，我們傾向于使用在設計中看起來很好并且很漂亮的人的照片。然而，當他看到這樣的設計時，我的朋友說：“我希望我有朋友這么帥?！?
因此，“完美”圖像的替代方案可能是使用不同膚色的人的更多隨機照片。這樣，你就可以測試重疊元素在不同背景下的外觀，讓你可以看到對比度和易讀性是否仍然完好無損。
不要過于樂觀
對于應用程序的工作方式，我們天生就是樂觀主義者。我們認為一切都會快速順利地進行，而且不會中斷，因為......為什么不呢？這就是為什么我們有時會忘記如何設計和處理用戶可能在以后遇到的一些可能不那么好的情況。
列舉幾例，如果突然互聯網連接中斷，會發生什么？或者，如果瀏覽器在執行任務時嘗試連接到API時出錯？如果連接速度太慢，是否會有加載指示器（例如微調器或進度條），或者在加載實際數據時是否會有一些占位符填充顯示塊？那么刷新應用程序的某些屏幕的可能性呢？什么時候（以及在哪種情況下）可能？
正如你所看到的，我不是在談論用戶所犯的錯誤（例如，在填寫表單時犯了錯誤），而是關于不受其控制但仍然發生的錯誤。在這種情況下，與開發人員交談，并了解不同屏幕上可能出現的問題，然后設計一種可以讓用戶輕松解決問題的方法，讓他們可以選擇稍后再試或者執行不同的操作。
無論如何，確定觸發每個錯誤的特定條件并為每個案例設計有用的錯誤消息是一個好主意。這些有用的消息將幫助用戶在每種情況下做出適當的響應，并知道下一步該做什么來解決問題。即使它有點麻煩，也不惜一切代價避免使用通用錯誤消息。
理解流程
界面包括許多元素，它們一起形成應用程序的整個布局。然而，當我們把重點放在用戶界面上的一個整體，我們往往忘記了一些元素也有較小的任務來執行的總體目標做出貢獻。
如果有一個觸發某種交互的按鈕或項目，那么請向前看并考慮下一步：在執行操作時是否會顯示加載狀態？它可以因某種原因被禁用嗎？如果用戶按住按鈕一段時間該怎么辦？會有任何反饋意見嗎？就像整個屏幕有不同的狀態一樣，同樣也適用于單個元素。
此外，請考慮產品的邏輯如何與用戶的心智模型相匹配，幫助他們準確有效地實現目標并以有意義和可預測的方式完成他們的任務。
我要做的就是解決所有這些問題，就是停止我正在做的事情，暫停，退后一步，查看整個多屏幕流程的大局，并了解一系列步驟和動作。我將尋找導致該點的多條路徑，以及遠離它的多條路徑。
你可以在使用原型時做同樣的事情，慢慢地，認真地，謹慎地執行動作。如果這對你來說太具有挑戰性，因為你之前可能已經多次這樣做了，現在它變成了一種自動化的任務，并問同事，朋友或活躍用戶看看設計或原型。看到其他人使用并與你的設計進行互動可能很有啟發性，因為我們往往過于接近并且過于熟悉它，因此可能會忽略一些事情。
為您的屏幕設計
當我在設計時，我通常會將手機放在我旁邊，以便我可以預覽我的工作并實時進行調整。
我認為這是一個很好的做法，但這種方式也很容易忘記所有其他手機與人們可能使用的手機不同。有很多不同的屏幕尺寸（特別是在Android平臺上）; 試著考慮所有可能的變化。
知道從哪里開始的一種方法是檢查你的實際用戶擁有哪種類型的設備。
在為各種屏幕尺寸和方向準備設計時，不僅僅是拉伸盒子和重新定位元素。仔細考慮如何充分利用每種情況，以及如何進行必要的調整，即使它意味著偏離原始設計。
在這些情況下，我們之前討論過的相同原則仍然適用：不可預測的情況，不同類型的內容，可變數量的信息，缺少數據等等。你必須針對各種可能的場景進行設計。不要陷入將屏幕設計為產品的單獨部分的陷阱，它們都是相互連接的。
這不僅對你有用，而且對開發人員也有幫助，他們需要了解許多可能的場景才能編寫代碼并準備界面來解決這些問題。
今天你需要什么，明天你可能需要
你可能已經注意到，本文中許多要點的目標是減少意外情況。即便如此，在很多情況下你也無法得到明確的答案。開發人員經常會問，“那么，如果我這樣做會發生什么呢？”指出你以前沒有考慮過的潛在結果。
如果發生這種情況，那么你只需要針對一個案例和一個屏幕來解決該特定問題。但總是嘗試全局思考，并考慮如何將該特定問題的答案設計為以靈活的方式工作，以便你以后可以重用它。
畢竟，這就是我們UI設計師所做的 - 我們設計和定義適應未預料到的狀態，條件和流程的靈活系統。將你的界面視為移動，更換智能部件的生動生態系統，而不是單個像素塊的集合。
在此過程的這一部分中，你需要與團隊中的開發人員密切合作，主要是為許多不同情況定義一組行為規則。但保持良好的平衡 - 盡量不要過度設計。用一點常識來設定自己的極限。你需要在功能和一致性之間取得良好的平衡。請記住，良好的設計系統是靈活的，并且在某些情況下為規則的某些例外做好準備。
另一方面，想一想你已經設計過的元素如何調整以適應新的情況。如果你創建一個設計組件庫，你將會看到更好的結果，因此，只需快速瀏覽一下庫，你就會知道是否需要從頭開始設計某些東西，或者你可以使用現成的東西。
結論
基于設計系統的優雅解決方案具有明確定義的問題將使我們工作中的視覺設計更加有趣，因為我們可以專注于界面的改進，拋光和愉悅，而無需無休止地迭代。當我們過早地跳到視覺效果時，我們必須同時解決問題并制作界面，這通常會導致沮喪和倦怠。
改變你的工作流程可能在一開始就具有挑戰性，但過了一段時間你會喜歡在限制范圍內工作。這也將改變你的思維方式，并希望幫助你擺脫對視覺細節的關注。你將成為一個更加完善和有能力的用戶體驗設計師，使用適當的可交付成果，而不僅僅是生成無窮無盡的視覺模型和組合。
藍藍設計的小編 http://www.syprn.cn