1. 前言
隨著科學技術的快速發展和人們生活水平的急速提升，手持移動設備——智能手機、平板電腦等，已經在人們的日常生活中普及起來，特別是智能手機，已經成為幾乎人手必備的產品。人們早已不局限于守著電腦來滿足某項需求，通過智能手機中的APP移動應用，人們就可以獲取或者發布信息，實現聽音樂、購物、導航等功能需求。很明顯，移動應用的內容和互動方式越來越豐富和復雜，它的普及和流行也無疑改變了人們的生活習慣，為人們提供了新的生活方式，同時也促進了APP移動應用程序的流行和發展。然而，移動應用在實際使用過程中卻顯露出許多不足，究其原因在于，早期的移動應用中通常直接將較為成熟的桌面應用直接套用與移動終端上。不可否認，這樣做可以讓桌面應用的成熟用戶較為輕松、快速的使用移動應用。但缺陷在于，沒有考慮到移動應用特有的交互方式和交互環境，導致可用性不高。很顯然，智能手機上的移動應用和PC端的應用產品相比，有其特有的使用特性。只有充分了解移動端應用的使用特性，才能為移動應用的界面設計工作打好基礎。
2. 移動應用的使用特性
2.1 使用場景
與PC端的使用不同，智能手機的使用場景較為多變，幾乎不受限制。使用場所可以是室內或戶外也可以是私人空間或公共場所，例如家、辦公大樓、餐廳或地鐵等。還可以以站著、坐著或躺著等姿態使用。正因為這樣復雜、多變的使用場景，一些問題則不得不在我們的考慮范圍之內。例如用戶在公共場所使用移動應用時，私密性的保證；用戶的使用場景發生變化時，使用的便利性和使用過程中斷的可能性等。
2.2 硬件條件
近年來，為了滿足用戶的使用需求和提升體驗感，智能手機的屏幕逐漸變大，“大屏幕”已經成為現代智能手機的一大賣點。雖然智能手機屏幕有越來越大的發展趨勢，但與電腦屏幕相比，仍是相差甚遠。同時，在復雜多變的使用場景中用戶往往使用單手操作，與電腦的操作相比，控制精度較低，出現誤操作的可能性更大。所以如何在有限的尺寸內，將內容完整且準確的呈現給用戶，尋求功能和需求之間的平衡就成了需要反復思考的問題。
2.3 網絡環境
用戶使用智能手機移動應用的網絡環境目前分為2G、3G、4G、WIFI和無網絡五種。但用戶在使用移動應用時的網絡狀況和較為穩定的PC端網絡條件不同，移動端的網絡環境并不是單一不變的，時常會因為環境的變化而變化。例如，某用戶從家中出發，乘坐地鐵要到某大型商場。其本身使用的手機為3G網絡，但因為網絡在地鐵環境中信號不穩定，偶爾手機會變成無網絡的狀態。當用戶到達大型商場，用戶連接成功商場所提供的WIFI網絡，那么用戶使用移動應用則處于WIFI網絡條件下。所以對移動應用進行設計時應考慮到各種網絡環境的變化。
2.4 使用心態
移動應用作為一種用戶貼身使用的工具，用戶使用移動應用的初衷更多的是有定向和較為明確的需求點。用戶希望打開應用、發布命令后，移動應用能立刻開始運作，完成任務。當操作中斷或不斷失敗，由于智能手機移動應用的使用特性，用戶很難有別的解決出口，大部分情況下，用戶只能是除了等待還是等待。這樣用戶就極易失去耐性，最終放棄操作。很明顯，快速、有效的體驗過程才是用戶需要的。特別是移動應用特殊多變的使用場景和網絡環境，其操作的連貫性與WEB產品相比，顯得尤為重要。
2.5 使用界面
在PC端上操作界面時，可以同時打開多層界面，界面與界面之間的切換轉變顯得較為簡單方便，且PC端的顯示信息較為豐富、充分。而在移動終端上對應用界面的操控就顯然更吃力一些了。在有限的屏幕下，信息的展示更為局限，且實施多界面操作時較為不便，例如想實現從某一界面跳回到之前的某一界面，可能要經歷多重步驟。
3. 移動應用界面設計分析
上述智能手機移動應用的使用特性正是影響和指導智能手機移動應用界面設計的重要因素，由此對智能手機移動應用界面的設計分析可得出一些設計要點，主要包括視覺層面和交互層面的設計要素。
3.1 界面的視覺設計
（1）充分考慮移動端的多分辨率
現有智能手機市場有多種系統存在，例如IOS系統、Android系統等，且不同系統的界面風格和界面交互習慣不同。同時，不同款式的智能手機持有不同的分辨率，而一款移動應用的設計是需要在其在不同系統或不同分辨率下都能適用。這就要求在進行移動應用的界面設計時，要考慮到設計畫面中要表達的信息重點是否在任意分辨率下都能完整清晰的展示出來，設計的界面視覺風格是否與相應系統風格相符合。
（2）對控件的合理安排
由于智能手機的界面展示空間較小和人們對屏幕界面進行操控的精度有限，在常規控件的設計上，應考慮界面大小和用戶的可觸碰范圍以及該控件的重要程度等因素來對控件進行設計。要做到設計出來的控件或圖形易懂且易控。
3.2界面的交互設計
（1）合理精密的界面邏輯關系
智能手機的應用界面在使用時若出現邏輯上的不清晰或錯誤，從而需要退回至之前的某一頁面是十分困難的。其次，由于展示空間的限制，在有限界面上來回尋找某項功能會讓用戶處于十分焦慮的狀態，從而降低產品的體驗感。同時，隨著界面層級的加深，用戶的流失量也會逐漸增加。所以，應用界面的布局和界面的層級有較為合理的邏輯關系，且將用戶使用過程中出現中斷、方便用戶隨時退出、讓用戶對于當下所處的位置有較清晰的認識等方面考慮其中，能使用戶在使用應用時更為順暢，有較高滿意度。
（2）提升使用連貫性
當看見菊花轉或進度條的界面時，我們就知道，界面中的內容正在被加載，我們需要等待。很顯然在這樣的加載頁面前，用戶將下意識將注意力投放到觀察進度條的推進速度上。在復雜的使用環境下，網速變慢和信號變差是經常會出現的情況。當單調、枯燥的加載界面持續時間稍長，會給用戶一種壓迫感。因為用戶沒有辦法進行別的操作，只能傻傻盯著進度條等待，最后除了取消操作，別無選擇。在用戶的潛意識中會形成這款應用本身就是很慢，使用起來感覺不好的印象。而針對這樣的現象，近來很多應用開始有了新的嘗試。從用戶的心理層面出發，在一些細節上做出改善性的設計，提升移動應用的使用連貫性。例如，預加載、框架式加載、利用緩存、使用有趣的動畫效果等達到提升應用使用連貫性的目的。
4. 總結
可見，用戶在智能手機移動應用上的使用較PC端產品相比，在諸多方面都有所不同。智能手機移動應用的使用環境更為復雜，用戶的注意力更難集中，影響操作感的因素更多多，分析、了解智能手機端上界面操作的特性對于設計出有良好體驗感的應用產品尤為重要。拋開技術因素，無論在交互還是視覺方面做出細節上設計的優化，來提升產品使用的連貫性和體驗感，讓用戶在心理層面上覺得移動產品使用起來很連貫、速度很快，這無疑是一種聰明的做法。從用戶選擇產品、發出操作命令、完成執行過程最后到接受操作結果，整個操作過程中的每個環節都值得設計師努力優化，減少甚至避免中斷的間隙從而提升體驗感。
公平等級是用戶按重要性處理信息的順序。在界面設計中，就像任何其他形式的設計一樣，此概念對于在視覺上起作用是必要的。通過正確使用層次結構，頭腦可以對元素進行分組和優先級排序，以賦予它們特定的順序，從而有助于您理解要交流的內容和用戶的成就感。
界面設計中經常遇到的問題是過多地使用了分散在屏幕上的元素或組件，如果未按正確的層次放置這些元素或組件，則會導致混亂并增加導航的工作量。對這些元素進行優先級排序對于避免此問題很重要。
在此示例中，大小，形狀和顏色資源用于將視圖定向到特定元素
一般用戶傾向于“掃描”屏幕的整個內容。因此，重點應該清楚地說明網站或應用程序的內容。
這種優先次序不僅應被視為美學問題，而且應被視為用戶體驗的重要組成部分。其中包括的許多元素（尤其是在移動設備中）將與站點導航相關。盡管圖形設計中的層次結構已經存在多年，但恒定的交互因素已添加到UI設計中。用戶與元素交互的事實使設計直觀的界面更加相關。
創建正確的層次結構必須考慮七種資源：
元素越大，越會引起注意。人們首先看到較大的物體是事實，其中包括文本和圖像。使用大小層次結構背后的想法是為開始視覺之旅提供一個焦點。
在Google Arts and Culture應用程序的此快照中，標題“ Pawtraits：我們的不斷變化的……”的大小比副標題“我們的真實感受……”大得多。通過將這些分數分開，閱讀順序可以避免任何混亂。
如果從一個文本到另一個文本的跳躍較小，例如從32pt到24pt，則當同時發送兩條消息時，閱讀順序將變得更加困難。這可能不是一個大問題，但是您應該記住，這可能會創建效率較低的層次結構。
同樣重要的元素太大也沒有必要。造成不必要的失衡可能最終使其他設計黯然失色，并使其他信息在閱讀中丟失。像設計中的所有其他內容一樣，平衡是關鍵。
明亮的色彩比柔和的色調更為突出。顏色是一種強大的視覺資源，它的正確使用可以有效地將屏幕中的元素分開，以對它們進行優先排序或降低優先級。在界面設計中，通常最強的顏色是用于交互，因為用戶需要采取措施或從系統接收反饋。
在此Cabify應用截圖中，紫色的使用是主要顏色。行程路線和“繼續”按鈕均為第一層級，其次是地圖和汽車。色調和飽和度的諧波使用將這些元素與較不飽和且重要性較低的背景分開。
飽和色比灰色更突出。灰色及其標度總是傾向于飽和度高的顏色，這甚至給用戶帶來更親近的感覺。例如，在灰色背景上使用紅色。
明亮的顏色比深色的顏色突出，反之亦然。在深色背景上使用明亮的元素會立即建立層次結構，當我們擁有白色背景和一些深色元素時，這也適用。
重要的是要知道，濫用顏色會最終使用戶感到困惑，因為這會產生一種幻覺，即一切對構圖都很重要。另一方面，等級制度的思想始于將自己定位于最相關的事物而不是最不相關的事物。
彼此靠近的元素比遠處的元素吸引更多的注意力。創建閱讀順序時，使用距離進行分組是非?？尚械馁Y源。人的視覺傾向于對元素進行分類，因此，使這種粘合基本上有助于用戶的腦力勞動。
在Netflix主頁上，第一組包含電影的標題和簡介。第二組在最下面列出了六部電影。這些組之間的距離使視圖更容易從一組傳遞到另一組而沒有視覺噪音。同樣，它們各自組中的每個元素都有其自己的填充和邊距。
因此，鄰近度是設計中對象的分組，以創建連接和關聯。當事情接近時，通常意味著它們必須相關。如果事情離得更遠，則意味著它們可能不相關。簡而言之，接近會創建這些關系，并將組織和層次結構帶入信息。
在Airbnb住宿頁面上，標題，位置和名稱主人屬于一種排列，而對公寓的描述以及肖像則屬于另一種排列。一條看不見的直線的破裂在兩個層次上創建了層次結構。
元素的對齊對于在界面設計中創建視覺連貫性非常重要，因為它可以分配與屏幕上元素的相關性，還可以確定交互式或信息性特定元素的開頭和結尾。
人類的大腦喜歡模式，這就是為什么許多最好的網站都是對稱的。這使我們有機會打破該規則，從策略上將用戶的注意力吸引到特定點。用戶將能夠根據它們的對齊或未對齊來關聯這些元素。
重復的樣式給人以元素相關的印象。這種層次結構包括在接口中重用相同或相似的元素。重復還基于視覺模式提供了一些優勢。如果重復某件事，那是因為很重要。
在Uber網站的白色菜單中，圖標和標簽的類別分別放置了8次。它以較小的尺寸平衡，將菜單放在層次結構的第二位，緊隨主標題“進入駕駛員座位……”。重要的是要知道重復對于創建第二級或第三級信息非常有用。
在界面設計中，重復會在整個體驗過程中產生統一感和一致性。例如，在此“中型”文章中，字幕（h2）用重復的樣式標記，粗體的使用和較大的字體大小為用戶提供了基于重復的方向感和層次感。我們必須知道，人性會在熟悉中找到安慰。
元素周圍的空間越多，它產生的注意力就越多。負空間是顯示空白畫布的區域，不僅可以在同一元素的周圍而且可以在同一元素之間和內部找到。它不適用于單色，而是采用背景色來營造出空間感。
在“更好的網站設計”的此示例中，數字“ 01”和標題“運動的目的”都明顯被負空間包圍。盡管插圖由于其紋理的多樣性而具有更大的層次權重，但應用良好的負空間可以實現平衡，防止其他元素貶值。
盡管有些設計師可能認為更好是更好，但視覺感受卻大不相同。具有大量封閉元素的設計會導致界面飽和，并且沒有層次結構指示哪個元素更重要，從而給用戶帶來混亂和不知所措的感覺。
這個想法是，元素越重要，周圍的負空間就越大。將一個元素與另一個元素隔離不僅是創建層次結構的一種優雅資源，而且還可以為設計提供支持結構。也就是說，它創建了必要的空間，以便視圖可以以流暢的方式從一個元素傳遞到另一個元素，而沒有視覺噪音。
多樣而復雜的紋理比平坦的紋理更引人注目。墻壁的平坦表面將比人行道表面突出。這是因為復雜性總是比簡約性吸引更多的用戶注意。紋理的使用還結合了其他重要的設計元素，例如風格和氛圍。
UI設計中的照片可能是存在的按紋理分層的最佳示例。它們的形狀，顏色和漸變總是比平面元素傳達更多的感覺。在Masterclass應用程序的情況下，毫無疑問，講師的照片是第一級的，然后是白色的名稱，菜單中的紅色表示用戶的位置。
該資源應按一定劑量使用，因為紋理的濫用最終會分散注意力，而不是告知或可能導致不必要的壓縮。紋理往往會與其他分層資源（包括大小）重疊，因此在合并紋理化元素之前，您必須考慮整個合成以及用戶在設備屏幕上看到的所有內容。同樣，平衡是關鍵。
當設計沒有清晰的視覺層次時，用戶的導航將被迫進入其他形式的閱讀，例如F和Z模式。作為設計師，我們可以加強這些模式或破壞它們，以找到更多動態的交流形式。在UI設計中，沒有什么僅僅是美感，而視覺層次結構無疑是我們擁有的指導用戶體驗，重新設計標準并提供直接接口目標的最佳武器。
《一款APP設計的從0到1》這是一篇系列文章干貨，上次U妹講的是關于APP項目立項和預估時間篇，今天U妹來說一下，APP界面設計和iPad界面設計規范。
往期回顧：
這次U妹接著上次的茬繼續，繼續之前先來看看整個目錄（滿滿的干貨）
U妹列了一個小小的目錄：
一、項目立項
二、項目預估時間
三、界面設計
四、切圖標注
五、視覺還原
六、上線準備
界面設計篇
我是一名UI設計師，所以U妹這里說的都是從設計師的角度去闡述一款APP從無到有的一個過程中，設計師應該干的事。
目前在行業里，關于APP界面設計規范也是層次不齊，很多都還停留在6的設備和ios 9的系統之上，而現在最新的是iphone 7和iOS 10了（更新換代真的很快），我這里說的是最新的iOS 界面設計規范（Android設計規范，我們下次見）
一、關于設計工具
俗話說：工欲善其事必先利其器，好的工具可以讓我們的工作效率更高，做界面設計我們用的最多的就是PS和AI了，如果你是Mac用戶，可以嘗試一下sketch，軟件的版本當然是推薦高版本，因為功能更強大，作圖的速度也就更快。
我個人剛接觸ps是從8.0開始，8.0 - CS4 - CS 5 - CS 6 - CC - CC 2014 - CC 2015，一直到現在的最新的CC 2017，深刻體會，新的版本更好用。也可以根據個人習慣，選擇自己順手的工具就好。
二、設計稿尺寸
在看設計稿尺寸之前，我們先來了解一下APP界面設計構成
界面構成由：布局層、圖文排版層和圖標層。
在iPhone 6還沒出的時候，都是用640x1136 px來做設計稿的，自從6的發布，所有的設計稿尺寸以750x1334 px來做設計稿尺寸
U妹再帶大家來看看，到目前為止所有iPhone的尺寸（1-3代就不用考慮了）：
iPhone界面設計規范：
iPhone 界面尺寸：
以750x1334px作為設計稿標準尺寸的原由：
1. 從中間尺寸向上和向下適配的時候界面調整的幅度最小，最方便適配。
2. 大屏幕時代依然以小尺寸作為設計尺寸，會限制設計師的設計視角。
3. 設計安卓版本時只需做最小的設計調整，提升設計效率。
所以做設計稿事請以750x1334px來做設計稿
在文檔建立參考線是一個很好的習慣，我希望大家也可以養成這個習慣，上下很容易設置，左右我習慣設置24 px的距離，我通過對國內外很多APP就行了對比，總結是24 px更合理，這個是我的個人習慣，所以也不要當做是明文規則，你設置為30 px，也是可以的。
然后就可以開始你的設計了
這里U妹再給大家略過一下iPad的設計規范：
三、圖標設計
iPhone 圖標尺寸：
圖標設計請用柵格化系統進行設計
設計尺寸：1024x1024px，竟可能的采用黃金比例設計
四、關于設計字體
先來看一下字體的歷史演變過程：
iOS 9：英文字體為Helvetica Neue
iOS 9：中文字體由為冬青黑
↓↓↓
iOS 10：英文字體為San Francisco
iOS 10：中文字體為蘋方
關于字體大小的問題：
頂部操作欄文字大小 34-38px
標題文字大小 28-34px
正文文字大小 26-30px
輔助性文字大小 20-24px
Tab bar文字大小 20px
文字大小只是一個范圍，這要根據設計的視覺效果來決定，不要死記硬背，但是切記，字體大小要用偶數。
關于界面設計就說到這里了，好的工作方法才能讓自己事半功倍，你覺得對自己有幫助，那可以借鑒學習我的方法，在具體工作中也要靈活應用，有不足之處或問題也可給U妹留言，下期U妹帶你一起來看看界面切圖標注，我們下期再見！
圓形元素在界面設計中被廣泛運用，從常見的圓形圖標到圓形的頭像，又或是圓形的輪廓形狀。圓形是一種特殊的形狀，它能夠在眾多幾何形狀中被我們快速地注意到。也正因為如此，在使用圓形元素設計界面時會有一些注意事項。
一、圓形頭像
放眼望去，圓形頭像已然占領了我們的手機。不妨看看下面舉的這些例子，如下圖所示。
從左到右依次是搜狗地圖、QQ、Instagram。當然，還有很多其它的例子，就不一一列舉啦。此刻，肯定有同學已經按耐不住要跳出來反駁了，微信和Facebook就不是圓形頭像，不信你看下面兩張圖。
方與圓之間，孰對孰錯，請繼續看下文分解。
1.用戶使用頭像的目的
不管是圓形頭像，還是方形頭像，其歸根結底都是頭像。用戶使用頭像的目的，主要是作為個人身份的象征。區別于其他用戶的特征有很多，例如用戶名、用戶ID、用戶頭像。在這些備選項中，頭像最便于快速識別和記憶，尤其是帥哥美女。
除此之外，還有一部分通過頭像來彰顯自己的個性，例如美女通常會使用自己的性感自拍作為頭像來表現自己的魅力，又或是使用卡通人物或形象作為頭像來表現自己的藝術氣息，再或是使用萌寵作為頭像來表現自己的愛心或是呆萌。
2.用戶使用什么照片作為頭像
隨著智能手機的越來越普及，人們拍攝照片的門檻也變得越來越低，越來越多的用戶使用自拍的照片作為頭像。照片的內容五花八門，例如人物、風景、花草、寵物。即使是正常的人物照片，背景中也會摻雜著很多其它的元素，例如下圖所示。
第一張照片中人物背景雖然虛化了，但背景仍然很凌亂，一些微弱的對比色很容易就搶奪了用戶的視線。第二張照片中人物是配角，豪車才是真正的主角，這類型的自拍照不再少數。第三張照片人物拍攝的光線陰影錯亂，故意露出一線背景內容，其用意如何昭然若揭。此外，用戶手機的好壞、拍照水平也不一致，拍攝出的照片質量也參差不齊。
使用這些照片作為頭像時，人物不但不被突出，反而被弱化了。雖然智能手機屏幕越來越大，但是當頭像集體在界面中展示的的時候，每個頭像依然較小。
3.方形頭像和圓形頭像的區別
方形頭像和圓形頭像的區別可以用兩張對比圖來說明，如下圖所示。
左圖是方形頭像，右圖是圓形頭像。通過對比，可以發現以下幾點：
a、圓形頭像能夠更好地幫助用戶聚焦到人臉。雖然左圖能夠完整地呈現人物特征，但是干擾信息較多，例如背景中的燈光、門柱、屏風。對比之下，右圖更為清晰地展示了人物的臉部特征，例如錐子臉、美瞳、假睫毛。在前面的分析中也提到，手機拍攝的照片質量參差不齊。在這種現實情況下，圓形頭像更有利于忽略照片的背景，提高頭像的識別效率。
b、嚴格意義上講左圖并不能稱之為頭像，而更應該稱之為照片。原因很簡單，頭像嘛，自然應該以展示“頭”為主，而左圖中頭像只占畫面四分之一不到的區域。從這個角度來說，顯然右圖更為合適。在選擇照片作為頭像時，如果是圓形，用戶更愿意選擇臉部的照片作為頭像；如果是方形，用戶則相對更隨意，通常是全身或是半身照。不信，你可以打開自己的微信，看看自己的好友頭像，或者往前滑滑看看前面的配圖。
c、日常生活中，我們看到的大多數相框都是方形的，圓形的相框較少，這是因為大多數照片都是方形的。因此，使用圓形的輪廓來表現頭像，能夠快速地和照片區分開來，更加突出。
當然，使用圓形的輪廓作為頭像，還有一些其它的原因，例如技術上的進步。
早期由于CSS等技術的不成熟，圓形、圓角圖形的處理非常麻煩，現在變得容易很多。
二、圓形的icon
在APP的UI設計中，我們會經常看到一排排圓形的icon，例如下圖所示。
上圖中，前面兩個分別是美團和淘寶。在設計上，都有兩行橫排的圓形圖標。最后一張圖是搜狗地圖的服務tab頁，可以發現也有縱向排列的一溜圓形圖標。
在這里，要回答兩個問題：
1.為什么要用圓形？
2.為什么要用圓形而非矩形？
第1個問題很方便回答。每個功能入口的圖標都不相同，如果去掉圓形輪廓，勢必會顯得十分凌亂。大家都知道圓形是一個封閉的形體，加上圓形之后就能夠弱化圖標的差異性，讓其變得更加規整，看起來也更加清爽，整齊劃一。同時，在功能上也表明各個圖標之間的平等地位，不會因為某個圖標形狀特殊而有所偏袒。
在回答第2個問題之前，首先回歸圓形和方形的基本特征，
圓形：動，曲線，運動，靈動，流動
方形：靜，直線，規則，嚴肅，理性
圓形和方形比起來，顯得要靈動很多，不至于那么呆板、嚴肅。如此，不難理解為什么用圓形而非矩形。
其次，圓形能夠使圖標在方形頁面中脫穎而出——不覺得這幾個圓形圖標在頁面中非常突出搶眼么？原因嘛，很簡單。我們的手機屏幕大多是方形的，界面中的大多數元素也是方形的，這時候用一點少量的圓形，自然在界面中形成焦點，這一點在后面的分析中還會見到。
除了這種形式之外，還有一些單個的圓形圖標浮于頁面底部，通常執行的是返回至頂部的操作。
圓與方就像太極中的陰與陽，相生相克，而又生生不息。巧妙地將圓形與方形進行結合，能夠讓頁面變得生動活潑的同時，也能夠更好實現功能上的引導，如下圖所示的幾個案例。
第一幅圖是谷歌手機地圖，地點右上角的出行方式圖標剛好被方形的臨時層一分為二。從功能上來講，出行方式是下一步的行為，不屬于臨時層里的內容，因此置于右上角的位置是比較合適的。從UI角度來說，圓形與方形結合，使的圓形變得更加突出顯眼；同時圓形置于右上角，頁面也不那么死板，反而讓頁面變得生動、活潑起來。
第二幅圖是宜人貸，微微鼓起的弧度讓這個理財項目變得十分突出，同時也打破了頁面沉悶的布局。
第三幅圖是kitchen stories，整個頁面保持左右居中，作者的頭像居中現實，對頁面進行了分割的同時起到了承上啟下的作用。
在頁面設計中，圓形元素通常不是獨立存在的，而是和其他元素相生相息，相互包容。尋求好的視覺效果的同時，也要弄清楚頁面元素之間的相互關系，這樣產出的設計才是真的好設計。
四、圓形的輪廓
結合現實物體，借用圓形輪廓，打造頁面點睛之筆。還是舉幾個栗子給大家看看吧，如下圖所示。
第一幅圖所示的是網易云音樂的播放界面。圓形輪廓與唱片保持一致，雖然占據了頁面的主要空間，但是使的整個頁面變得文藝簡潔。
第二幅圖所示的是搜易貸的賬戶頁面。可用余額采用瓶裝水的設計，余額較多則水漲的越高，同時會有晃動的效果，栩栩如生的同時讓頁面變得靈動起來。
第三幅圖所示的是樂動力的首頁。步數越多，則描邊進度條越多，暗色變得越暖。與現實生活中的儀表盤相對應，漸變色搭配圓形，使的頁面變得主次分明，極富視覺沖擊力。
可以發現，在使用圓形元素時要注意頁面的平衡，例如左右和上下的對齊居中。為了保證頁面的均衡和清爽，通常會在圓形元素周圍保留較多的空白。這些都是在使用圓形元素時需要注意的事項。
好久沒有發文章了，今天順叔和大家一起聊一聊卡片式設計，無論是WEB還是APP卡片式設計運用的比較多，很多UI設計師比較偏愛這樣的表現，卡片式設計會給人一種視覺上的享受，也能對于界面具有層次感。但往往在卡片設計中有一些技法還是需要了解，不能因為卡片式設計而卡片式設計，要能更好的應用到界面場景中。希望在這次分享中一些知識點能幫助到大家，之后的幾篇系列文章中，順叔會從界面中比較趨勢的設計技法進行分析，希望能幫助到一些設計的小伙伴。
教程前的引言
卡片式設計這幾年比較流行，同樣這樣的設計表達也是個趨勢，應用在APP PC界面中至今還流行著，從事UI設計的都會知道卡片式設計，具有把內容整合模塊化，從視覺，個性化體驗上進行呈現，是設計師在設計時常用的一種表現，同樣也具有獨特的創新概念。
在一些項目中，一些客戶會說這個設計的APP界面有點太白，沒有層次感怎么辦，那這時你應該和客戶說在APP設計中運用了現在比較流行的一個表現手法，卡片式設計，可以解決在畫面中有個性化 、變化、 層次感的設計。那客戶又問什么是卡片式設計呢？
一、什么是卡片
無處不在的卡片設計具有個性的美感和很好的易用性，是以文字標題，小標題， 圖形或圖片組成的模塊化，以塊狀形式規整的整合內容，讓內容更規整化，視覺上更個性化，也是操作上快捷的內容信息入口。更直觀的表達內容信息和快捷跳轉操作。成為當今在設計中一個比較流行趨勢，而卡片在設計中也占用一定的優勢，讓整體更加的有層次感，在運用起來也比較方便，從視覺、體驗、交互都具有不錯的優點
設計效果圖展示
順叔為了這個文章特意設計了兩個案例，通過這兩個案例進行一些講解。請見下圖：
二、卡片設計優勢
1.趨勢
無論是大平臺 還是小平臺的產品都會運用這樣的卡片式，跟風式設計趨勢，也讓卡片式設計成為了一個現在常用的優勢，不過卡片式設計的確有很好的效果
2. 層次感
具有一定的層次感，能在頁面版式中起到設計上的不同，個性化變化，頁面層次感區分強烈，能更好的體現提煉出內容
3. 規整化
卡片式設計以圖片、 圖標 、LOGO、 標題、 整合到一起 以塊狀的形式在界面中展示，更規整的排版呈現。雖然內容多會導致頁面亂，一個模塊包含內容之后就會規整不少，也給頁面設計上帶來了更好的視覺
4. 視覺體驗
卡片式給整個頁面會增加視覺上的體驗，特別那種大圖片卡片式更具有視覺上的沖擊力，背景襯托出前景卡片式設計。同樣對卡片式也感覺到舒適感?？ㄆ皆O計還是需要根據整個布局、 產品需求 、功能進行設計。以達到最好的用戶體驗、視覺體驗。
不要為了卡片設計而卡片設計。
5. 易用性
卡片式設計在易用性和靈活性上比較高，在響應式設計中同樣應用的也比較多一些。能更好的有序排列。
6.簡約設計
簡約設計會更顯得品質，不需要過多的進行裝飾，哪怕就是一個白色的色塊，上面點綴有色彩的圖標和標題 副標的變化，也會覺得顯得高大上，就算是一個帶有顏色的色塊卡片，也無須過多的設計 內容上的標題 、圖標、 按鈕就足以支撐起卡片
7. 交互效果
在卡片式的設計中會有一些動效交互，比如整體卡片放大、 縮小 、左滑、 右滑，可以整模塊化滑動 縮放。整體效果增加了不錯的視覺交互體驗
三、卡片正確設計知識
一般在界面設計中卡片的存在的意義和表現手法都是什么樣的呢，下面為大家舉例了幾種常用的正確的設計表達姿勢。希望小伙伴在設計的同時有所靈感和參考，把一些表現手法加入到自己的設計中，適合才最重要?？ㄆ皆O計還是要根據整個風格和整個布局而進行展示，在做進一步的對比和布局中以最好的效果為最終展示方式，總結分析幾個常見代表例子，如有不全請討論補充，下面就是一些例子
1.卡片式形式一
以色塊為主體并用現在比較流行的漸變色組成，其中四邊為圓角，同樣色塊下邊陰影襯托出主題，這個是在卡片中設計比較常見的運用手法，卡片的長高在設計中也是根據結構，內容功能而進行設定。正方形，長方形都是一個表現得手法，在色塊上面標題文字，圖標，圖形是整個卡片的布局的形式，無非就是左右布局和上下布局
應用場景：卡包、天氣、類別、入口、優惠劵，卡劵
此圖片來自于網絡
2. 卡片式形式二
這種形式共同點都是在頭部C位出現的卡片式設計，其中承載著標題，副標題，以及圖文版式，不難發現，如果圖片有顏色，那么下面是白色底，這樣在白底上面色塊的出現還是比較簡約凸顯卡片，如果背景有顏色，卡片也有顏色那么卡片的凸顯程度就不會那么強，圖二很多在會員卡設計中常用的比較多，也比較簡約，另外兩個共同特點背景有顏色，一般底部背景顏色就是整個界面的主色調，背景有色塊，上面就用白色卡片，卡片上方標題、 文字、 圖片呈現。只不過排版的方式有所不同而已，在很多APP設計中，這樣的表達也很多，通過主色調可以很融合的把上面的狀態欄，導航欄融為一體視覺上統一性，底部背景顏色延續下來，上面凸顯白色卡片，這樣更具有視覺感和層次感。白色的卡片不需要過多的修飾，更能體現的上面的文字和圖片。
應用場景：會員卡，滑動卡片，圖文標題，入口
此圖片來自于網絡
3. 卡片式形式三
這種形式上圖下文字，或者是上標題，下圖片的形式，這種形式特別在圖片素材的選擇上尤為重要，有視覺效果好的圖片通過剪切，處理，合成，攝影，插畫等等方式，出現的圖片質量上好的話可以帶動整個設計的逼格，通過有效的圖片傳達，文字傳達，讓用戶更清晰的了解。這樣的形似一般在入口或者列表的形式出現的比較多，同樣也能體現出整體化和視覺化
應用場景：滑動卡片，圖文標題，入口，列表
此圖片來自于網絡
4. 卡片式形式四
大圖卡片式，一般以攝影圖片，插畫形式，文字壓與圖片之上，這樣的效果更具有沖擊力，也能顯得出比較潮流。體驗也很不錯，放大視覺，展示內容，圖片相結合，讓瀏覽者更愿意多看一會。表達的圖片與文字內容相符，做到圖文交融的程度。一般這樣對于圖片的選擇上還是比較要求嚴格的。沒有質量的圖效果會降低。
應用場景：列表，說明，入口，天氣
此圖片來自于網絡
5.卡片式形式五
列表卡片設計，這種形式一般白色的卡片，上面標題，頭像，按鈕，扁平插畫形式體現，更多應用在一級頁面的下方內容，以及二級頁面的列表頁或者集合頁，整體弱化背景以白色為主，給予圓角及陰影承托出層次感同時，體現上面內容部分。每個模塊的單元體具有統一的視覺。
應用場景：列表，集合頁，入口
此圖片來自于網絡
6. 卡片式形式六
大卡片式設計，表現為一塊特大的卡片式，上面會有標題，按鈕等信息，同樣表現出突出層次感，個性化設計的特質。體現出內容，一般背景有顏色上面卡片為白色，如下面背景為白色，那么卡片的形式也可色塊，在對比上有個反差，才能突出卡片的作用性。
應用場景：提示，說明，優惠劵，劵，入口
此圖片來自于網絡
以上總結的幾種卡片的形式，在設計中可以根據情況而設計，卡片多樣化，布局多樣化，適合自己產品的才最重要，雖然在界面設計中常用的設計，但不要盲目的為了卡片而卡片套用設計，這樣起不到作用反而效果達不到理想程度。希望幾個卡片形式總結能給大家帶來一些靈感和啟發。
同樣在這些卡片中會有一些基本的共同的特點
共同的特點是
1. 四個角都是圓角
2. 根據潮流漸變色或白卡片
3. 色塊下的陰影，色塊下的陰影更能體現出層次
4. 卡片上面組成部分，標題，副標題，圖形，按鈕，圖片，頭像
5. 字體大小，字體顏色的變化
6. 一般卡片應用在會員，列表，說明，優惠劵，分類，類別，集合頁，歡迎頁等場景常見
三、卡片正確設計知識
為了講解文章，順叔臨時構思一個產品原型，而快速進行了簡單的設計，一個第一版，一個優化版，主要為了講解一下這個卡片設計一些問題，
以下此圖為構思的原型圖
經過分析原型圖之后開始進行設計，首先設計一個版本的，如果這樣卡片布局設計，這樣色彩搭配的情況下，會怎么樣呢，整體設計用了藍紫色為主色調，首先鋪藍紫色的色塊作為背景，然后上面放白色卡片，以至于卡片上詳細的內容，比如數字，圖形 能更好的豐富支撐卡片。同樣數據流也是比較重要的C位。也是比較重要的位置。接著根據原型圖下面有兩個卡片，通過扁平化設計，以色塊為主設計一個藍色，一個橙色的卡片，上面并有圖標，頭像，以及標題，兩個顏色的對比，更讓視覺有沖擊力，整體看這個設計并沒有什么，但有個問題在于單個模塊拿出來效果的確都不錯，但組成之后上面的卡片C位讓下面的兩個帶顏色的卡片搶了視覺，當打開這個界面的時候視覺落點在彩色卡片上，那么這個整體設計上就出現了問題，上面的數據，白色卡片其實是比較重要的，而且整個畫面都是卡片毫無設計上的變化，
那么只能在這個基礎上在進行優化，其實大家在做設計的同時也這樣，在考慮功能模塊前提下，用戶體驗，也要考慮視覺體驗，那么視覺從哪方面來，色彩、層次、版式等等方面。那么能不能在進行一下優化呢，其實還是有空間在進行優化。以下圖為第一版
設計第一版
根據上面的設計在進行優化，同樣保留白色卡片部分元素，在卡片與卡片之間放一些顏色的圖標，這樣更好的給功能上快捷入口，也能給卡片設計增添了變化。使得整個畫面更靈活
雖然白色卡片，但有一些色彩的點綴，也讓白色卡片活躍起來，把顏色的卡片改成白色卡片，從上到下的版式舒服多了，也沒有那么跳。整個風格更簡約，同時功能也更全面。
調整后
從原型圖，在到設計第一版，在到優化調整之后，證明一點，卡片不要因為卡片而套設計，反而會失去效果，考慮功能模塊，用戶體驗，視覺體驗也一定讓整體舒服。一直都說，繪畫中需要有主有次，設計中也一定要有主，有次的進行設計。這樣層級關系才能更清晰。
但這些條件一定是從，體驗、色彩、布局、版式等方面進行對比和研究的。設計不要先著急做設計，前期的進行思考，邏輯清楚了，在進行設計的時候會更加的順暢?？ㄆ皆O計，大家都在應用，希望這個文章能給大家帶來一點點知識點，那就不枉費我在熬夜寫這篇文章。
不為別的，只是一個喜歡分享的肉團子。這篇文章就寫到這里，如果喜歡請給個贊吧。如內容有沒說到的地方，各位可以進行補充，以上兩個圖你稀罕哪個呢？
隨著當今越來越多的信息需要被展示、曝光，而移動設備的屏幕空間又有限，為了減少用戶在使用應用時的跳轉，減少用戶的路徑，設計師們開辟了第三個維度——即在 z 軸上展示疊加的分層動效進行交互表達，從二維到三維，這樣更能有效利用手機屏幕上的有限空間，這也是以后界面設計的大趨勢。
這個思維方式最早是在安卓的MATERIAL DESIGN語言上體現出來的。（以下簡稱MD）
Depth（深度）：
Material Design UIs are displayed in an environment that expresses three-dimensional (3D) space using light, surfaces, and cast shadows. All elements in the Material environment move horizontally, vertically, and at varying depths along the z-axis. Depth is depicted by placing elements at various points along the positive z-axis extending towards the viewer.On the web, the UI expresses 3D space by manipulating the y-axis.
在MD的設計規范中，用Depth來說明界面設計中的深度，既而在界面設計中引入了Z軸的設計思維，將界面設計由二維設計引進了三維設計思維的地帶。MD通過抽象化紙片在物理世界中的形態，定義除了各種信息層級以及常用狀態的表達方式。
再來看看，如今iOS的最新版本iOS 12，也已經開始向這一方向進行發展。最典型的要屬以下的iOS的內置應用：股市、語音備忘錄、地圖、錢包、音樂、播客、App Store等。
三維設計法，在界面設計當中，主要分為兩個方向來運用，視覺設計和交互設計。
人們通過雙眼能夠分辨出物體遠近大小的形態，因此如果利用這樣的視覺規律，便可以在畫面中呈現出真實的效果，突出視覺的立體化。
因為使畫面產生三維的模擬真實的效果，可以畫面更具有吸引力，我們之所以能夠看清楚物體，是因為有光的存在，現實生活的影子是因光而產生的，才是一個真實立體形。如果能恰當運用光影的效果，那將會讓圖形在進行三維空間轉換時變得更加凸顯。
當今，在界面的視覺設計方面，通過層疊、卡片化和投影的設計手法來對界面的內容進行處理，可以增加界面的層次感。在如今同質化嚴重的扁平化設計下，能給人煥然一新的感覺，同時也給人一種內容呼之欲出的感覺，加強了點擊的欲望。這樣的設計手法讓界面的Z軸空間得以加強，必將是下一個新的趨勢。
例如：KEEP、潮汐、蝦米音樂
例如：Dribbble 和 Behance
圖片來源于網絡
而在交互設計方面，想同時展示多種內容時，假設對一個需求有著很強的曝光要求，或者是想讓用戶知道有這項內容的存在，但又不想讓頁面內容過長，導致被忽略或難以找到時，可以采用頁面Z軸層級覆蓋的表現形式。
采用了Z軸層級覆蓋的架構形式，用戶主要的交互操作變為上拉、下拉來閱讀信息，減少了點擊跳轉這一類的操作，減少了用戶的操作成本。且滑動手勢，是以后人機交互發展中的一個必然趨勢。
在一些APP中有所表現的有：豆瓣FM、豆瓣詳情頁等。（大家可以從這些APP上獲取設計靈感）
豆瓣FM
豆瓣（電影詳情頁）
例如：
上圖是京東（APP）的商品詳情頁，這時候我們接到的需求是將上圖的文案放進這個界面中。
要知道在寸土寸金的APP界面中，每一個位置都是十分的寶貴，一但放置不佳，就會給用戶的視覺流造成一定的影響，使得用戶體驗下降。況且，還是京東這樣流量巨大的電商APP，位置便顯得更加寶貴，而上圖中的紅色標記范圍就是我們的限制區域，下面我們先來看一個不合理的做法。
上圖我們是直接加了一個界面，將這個模塊設定為可以進行跳轉，從而達到顯示完整（文案）的需求。
這樣做，不僅增加了用戶的路徑，而且還會給來回切換的用戶造成一定的困擾，消耗了手機的資源的同時，下面的留白也顯得很浪費、空曠，視覺上就很不美觀。
那么，京東是怎么做的呢？
京東采用了一個浮層設計（Z軸），將全跳轉改為半跳轉，這便是在界面設計中的Z軸運用，這樣既可以達到文案所要求的曝光，也能最大利用讓界面的空間，實現與原場景的完美銜接。
通過在 Z 軸上進行分層設計，模擬物理世界中人與物的真實的交互模式，幫助用戶理解產品設計，將信息更好的淺層化，這樣可以給設計師們帶來更多發揮的空間。
在使用這個思維來做設計時，可以事先考慮以下幾點：
根據用戶使用體驗，來判斷是否需要使用Z軸分層交互。
這樣做是否能幫助用戶更好的理解你所做的設計？
空間感設計主要意義是能正確的引導用戶，并建立起對產品的使用邏輯。
每一個界面層級只需要表現一件事。
當你想要在界面中加入一個菜單欄但發現沒有空間？這時候可以考慮使用Z軸的設計。
謹慎使用Z軸層級交互，因為它會增加空間關系的復雜度。
多參考現實世界中的真實交互，它給你的預期和感受，在互聯網設計中的很多靈感都來自于對真實世界的理解。
總結：
我們在做設計時，可以把當前的界面可以想象成一個的三維世界——分作X軸，Y軸，與Z軸，在這三個坐標軸上，可以進行思維上拓展。
在交互設計當中，減少跳轉便是減少用戶路徑，就是使用各種方法在三維空間中，用x軸、y軸、z軸做出最合適、合理的用戶體驗設計。
前言
之前為大家分享過很多工作的案例，很多伙伴表示收獲頗多，之所以分享工作案例是為了，給大家講解設計思路，讓大家明白，為什么這樣設計，出于什么目的，要解決什么問題，這些正是UI設計的根本所在，掌握了設計思路就能應對各種問題。
接下來本期的分享，依舊會用真實案例解析從需求到設計的完整過程。
接需求與案例解析
我司的運營小姐姐@我要改個產品的UI，下午找我聊需求。
一、準備工作
提前了解產品，從視覺、交互上感受一遍，標記產品中有疑問的地方，這樣大概對產品有個概念，為接下來的溝通做好鋪墊。
二、了解業務
首先需要運營小姐姐講解一下業務邏輯，了解產品涉及到的各種角色，產品使用場景等等，期間把疑問一一了解清楚，盡可能對業務、角色、使用場景有充分的了解。
通過溝通，了解到這個產品是一個H5問卷后臺，業務上用來查看問卷統計的結果，使用的人群是公司的運營人員，產品時常會打包賣給客戶，客戶的使用場景不定，多數用戶會用手機端查看統計結果。
三、溝通需求
接下來，溝通中我會先聽她講解需求，講完后我會問她一些問題，確保我理解的正確。
需求溝通后，此產品問題為：界面太亂，很難用，需要改的好看舒服好用。
這時候就要想到她是不是用了其他體驗好的產品，如果是的話，這個產品可能是重要的設計參考，然而了解后并不是因為用了其他產品，是一直以來就不好用，沒時間改而已。
接下來的需求溝通就要落實到頁面中，需要一起探討產品，不明白的地方要了解清楚，從中總結優化的地方。
下面開始案例分享：
第一個頁面改版
上圖為“統計問卷”首頁，A、B、C處為頁面中較為突出的點，其中C處最為明顯，溝通后得知C處圖表的切換是為了截取圖表做ppt，僅此而已，所以此處UI設計上需要弱化。
其實用戶之所以覺得頁面看起來不舒服，是因為想看的元素被弱化，而不該看的卻過度設計，這樣用戶在看頁面過程就會很費神，因為獲取信息要躲開視覺上被過度設計的地方。
例如A處，用了頁面中唯一的橘黃色，當初設計者應該是為了能強化區別上下題目的分界，但也成了突出的視覺干擾項。
其實分析后，頁面中用戶要看的是兩個地方，一個是B處答題的比例數據，另一個是旁邊的“小記”數據量，而B處進度條的設計過于突出，與文字沒有良好的視覺比重。
結合以上問題進行改版：
解決A處問題
把每道題設計為卡片式，這樣能很好的區別上下題的界線，題號從突出的橘黃色改為黑色，使得頁面視覺上不那么跳躍。
解決B處問題
弱化變細進度條，與文字視覺比重相當，不會顯得突兀，排版上下排列改為左右排列，這樣能夠縮減表格的高度，頁面可以顯示更多的內容。
解決C處問題
圖表切換是個弱功能，使用頻率較低，所以放到卡片的右上角弱化設計，用切換的方式展示。
不僅僅是以上的問題，排版的細節也會大大提升產品的質感。
舊版所有元素的排版間距幾乎沒有什么規律，這也是導致用戶對產品有亂糟糟印象的原因。
改進后，用間距去表達元素之間的關系，間距設計常常會用到“黃金比例”或“五分原則”，黃金比例不必多說，五分原則就是相關的元素用周邊0.5倍的距離表達親密關系。
當設計好第一個頁面后，需要先給到需求方評審，確認沒問題后再繼續，這樣就盡可能保證了后面的設計是符合他們需要的。
上圖只是個最終的結果，過程中做過一些小改動，最初發給需求方設計的頁面，需要做簡單的設計注解，這樣才會更容易被理解，且具有說服力，最終確認沒問題再繼續其他頁面的設計。
第二個頁面改版
上圖是給做問卷的人配置紅包獎品的頁面，看完后我表示心疼我們的運營人員。
A處本可以切換項目，但現在的設計顯然是不可點擊切換的狀態。
B處是這個項目總金額統計，目前排版色彩雜亂且擁擠。
C處是給問卷配置紅包獎品的各個屬性信息，然而元素間沒有層次，依舊雜亂擁擠。
D處按鈕沒有主次關系，排版擁擠。
E處是個“增加獎品”按鈕，現在看起來沒太大問題。
改版后頁面延續了首頁的卡片風格，保持一致性。
解決A處問題
“子入口切換”用戶很難理解，因為不是確切詞，例如換成“項目切換”“問卷切換”就很容易理解，當然也是可以去掉的，因為運營人員對每個項目都很熟悉，沒必要注解。
解決B處問題
重新定義排版后，顯而易見會比之前要清晰透氣很多，動態變化的金額用顏色突出強調，未配置金額為次要信息，用灰色表示。
解決C處問題
改變排版樣式，視覺上有主有次，“配置數量”跟“個數”為重復信息，只留一個即可。
解決D處問題
按鈕“已啟動點擊禁用”拆分為“點擊下線”按鈕，和問卷狀態（進行中），“展開”按鈕放到最左邊，和“編輯”并列。
解決E處問題
“新增獎品”按鈕，如果增加配置獎品列表，就會把按鈕擠到不可視區域，這樣的設計不是特別推薦，所以設計成懸浮按鈕，舊版本已經建立用戶的按鈕功能認知，懸浮按鈕上面配加號圖標，用戶就會很容易理解。
第三個頁面改版
上圖還是第二個改版頁面，此次要改版的是，點開“展開”按鈕顯示的屬性，目前的問題是有很多重復的信息，例如時間，上面已經顯示時間，最下面又出現同樣的時間。
最嚴重的問題是，所有灰色字的注釋，不符合邏輯，不應該在展開的屬性下面提示，因為這已經是編輯好的內容，再去提示就意義不大了。
模擬一個場景，比如上圖紅圈的地方，已經設置好了獎品名稱為“幸運紅包”，展開后有個灰色字提示“用戶中獎后，用于顯示給用戶看”，如果發現理解錯了，然而在此頁面是不可以改正的，所以灰色字應該在“新增獎品”的編輯中提示，用戶在輸入信息的場景下，提示才是最合理的。
頁面改進后，去掉重復的屬性信息，去掉灰色字的提示，（去掉這些內容是提前跟需求方探討過的）最后用最少的空間展示了所有的信息，更清晰明了，其實展開后的卡片高度，完全也是可以考慮去掉“展開”“收起”的功能。
然后
第四個頁面改版
當我看到這個頁面時，不知道為什么要有A處的信息，所以再次請教需求方尋求答案，給我的答案是“子入口”“IP”是為了給開發人員提供便捷查詢，例如這個中獎者存在刷紅包行為，可以通過A處的信息進行查詢。
很顯然這并不合理，因為對用戶來說沒有用，還造成了認知負擔，如果存在不良行為，提供編號信息就可以搞定了。
B處的設計，讓頁面沒有條理，更是一個信息干擾項。
頁面改進后，依然沿用首頁卡片式的設計，去掉“子入口”“IP”“昵稱”多余屬性，去掉昵稱是因為答問卷一般不會獲取到用戶昵稱。
“中獎”和“未中獎”卡片，設計上有明顯的視覺比重差異，去掉未中獎的綠色標示，只突出中獎者。
最后一個頁面改版
上圖是做問卷用戶答案頁，頁面的彈窗偏小，使用起來很憋氣，A處不知道什么意思，詢問后可以直接去掉，B處是一個不合理的“確定”按鈕，原因是用詞錯誤，應該叫“關閉”更合適，因為這個頁面是查看信息，并沒有執行某些任務操作。
改進后加大彈窗，去掉頁面中的多余元素顏色，上下題目用留白間距隔開，去掉“確定”大按鈕，因為太占面積，改為右上角“關閉”按鈕。
最后
當我們看到一個頁面時，如果只看到美與丑，那是不客觀的，這可能是對UI設計最大的誤解，UI的美不只體現在表面上，還有內在的體驗中。
UI設計一般都會帶著一種目的進行設計，目的絕不只是設計的好看，更多的是創造一個良好的產品體驗，同時能夠助力業務，實現產品價值。
UI設計師對于業務要積極的去了解，對需求不要總被動接收，要有意識的去探討挖掘，對業務的熟知，需求的準確拿捏，是你開始設計前最好的基石。
看了一位著名設計大師Aaron Gustafson關于UI設計的演講報告，討論和剖析了幾個自適應界面，并演示了他們如何智能地變形以滿足用戶的需求。這里我有一些心得體會分享給大家。
當我開始我的職業生涯，我還是一個簡單的網頁設計師。我在網頁設計工作了一年，從小型商業網站開始，最終轉移到更大的客戶。我發現對它并不感興趣。我對分頁模式，用戶與表單交互的方式，以及感覺到的性能，比網頁的視覺設計更感興趣。我發現我愛上了交互，體驗各種的性能。
當我看科幻電影時，我會看看界面。當我玩視頻游戲時，我會觀察菜單的布局方式。如果任何這些特質聽起來很熟悉，你也可能有一顆UI設計師的心臟。
于是我退出我的之前的設計公司，開始了我自己感興趣的項目與目標。在我的LinkedIn頁面上，我試圖總結我的新職業目標：創作出不僅具有視覺，交互，體驗，還應更加智能，更加方便的大膽構想。自從我愛上了我現在這份工作以來已經有三年了，我并不是把它當作工作，而是把它當作我興趣慢慢去培養，所以我的旅程并沒有停止。我目前在一家創業公司，這里有我們共同的夢想與信念，我們想把東西做好，做全面，希望廣大用戶會喜歡，我每天逼著自己去思考，去學習，去看一些書籍資料，但是很多時候事與愿違！
在這篇文章中，我主要想描述一個UI設計師是什么樣子：
這些工作是什么構成的？
哪里是最好的學習資源？
你如何在你的技藝得上展現更好？
UI設計的工作
我會將用戶界面設計的工作分為四類。與客戶溝通，研究，設計和原型，并與開發人員溝通。下面讓我們更詳細的去接觸一下怎么去工作。
溝通
客戶溝通是關于理解客戶的問題。目標是掌握客戶的業務。項目的開始通常包括很多的談話。在工作開始時，不要太多地去了解客戶的想法- 你可以設想可能的設計解決方案時，以全新的方式展現給她們看，然后接受需求，進行分析。
要成為一個好的UI設計師，你需要能夠最終考慮你的客戶的意愿。例如，您的客戶可能在航空，為他們工作最終將使你對這個行業有很多認知。所以，你會感受到：不能明智的去選擇你的工作行業，也就不會成為這行業的專家。我們需要對自己有足夠的認知。
在項目期間，溝通不會停止。作為設計師，你將不斷地展示你的工作。產品的誕生需要有火花的碰撞，所以我們迭代好，不斷的進行溝通與討論。
研究
與客戶溝通，你會做很多研究。這可能包括實地研究，與客戶的研討會，分析競爭或定義一個策略 - 基本上，只是幫助你理解手頭的問題。
研究是什么？研究可以告訴你的設計選擇。這是你讀過的文章，或者蘋果剛剛發布的新東西。當你解釋為什么做出一個特定的設計選擇時，你的研究會幫助你。
研究可以非常廣泛。我經常測試新的設備用于研究目的; 或注冊新的網絡應用程序以研究其用戶界面。
設計和原型
作為設計師，你可能會花大部分時間做設計調整工作。UI設計項目可以以多種方式前進，從素描，詳細設計到編碼。
您使用的方法在很大程度上取決于項目的類型。你在設計什么？這是一個網站，還是應用程序，或者你寧愿稱它為一個應用程序嗎？它使用本地技術嗎？是重新設計還是從頭開始？
在我們公司沒有固定的過程，但大多數項目遵循相同的粗略順序：他們從草圖和線框開始，繼續詳細的視覺和交互設計，并以一個原型結束。
作為設計師，我們花費了大量的時間來思考我們的工具。雖然強大的工具很重要，但它們不是最重要的事情。能夠使用Adobe Creative Suite和像Sketch這樣的應用程序是相當于能夠使用鉛筆繪畫或刷子來繪畫。
話雖如此，對工具的濃厚興趣是一件好事。我也喜歡嘗試新的設計工具，可以幫助我更有效率的完成工作。我最喜歡的矢量編輯工具是Illustrator，但我的大部分視覺設計工作是在這些天在PS上完成的。其他團隊成員已經切換到較新的工具，如Sketch,Affinity Designer,這些工具我們都需要了解，找到適合自己的就行。
工具是一個非常個人的選擇。只要我們能輕松地一起工作，每個人都可以自由選擇自己。為了使與客戶的討論，我們的設計更簡單，我們使用Axure制作原型。對于更高級的原型，我們使用HTML和CSS。你需要的工具都取決于你想要做的工作。
開發者溝通
溝通設計有多種形式：詳細規格，提供資產，一起審查設計。在每個實例中提供的意義很大程度上取決于項目是本機還是Web應用程序。
傳統的方法是在屏幕設計旁邊交付資源。屏幕設計可用于查看設計整體看起來是什么樣子，而資產是即用型PNG和圖標的SVG，因此開發人員不必處理圖形編輯器。
在我們公司，我們是提供更多的支持者。我們使用組件樣式指南來幫助保持我們設計的一致性。當我們處理一個web項目時，我們提供了詳細的HTML和CSS集合，逐條記錄，準備實施。我相信在軟件開發的每個階段都有設計眼光是實現我創建一流級軟件目標的唯一途徑。
Web與本機應用程序
然而，這些指南傾向于針對營銷網站進行調整，并且其中的內容并不總是導致良好的用戶界面決策。字體傾向于出于營銷原因而選擇，而不是為了易于理解。顏色可以是粗體和醒目的，它可以在廣告活動中使用，但不會在您日常使用的應用中使用。這些指南必須解釋。
有幾個UI設計的網絡指南。你可以認為網絡是不同風格的熔爐。如果你做任何感覺更像一個應用程序而不是一個網站，你需要知道廣泛使用的框架如Bootstrap和ZURB基金會?？蚣芟却蚝?，再開始確定事情應該如何去做，因為你不想重復做某一件事。
我比較喜歡使用Bootstrap。它為常見的UI元素（如按鈕，數據表和模態）提供了合理的默認大小。
在網頁設計中，您受網絡技術能力的限制。它曾經是很難實現簡單的視覺華麗像網站上的圓角?，F在很多構想都可以做了 - 你現在可以自由繪制大量的陰影，過渡，動畫甚至3D的用戶界面。
作為設計師，在瀏覽器中控制流程和設計是更加現實的。我還沒有看到許多UI設計師接管本地應用程序的UI編程，但是設計師做一個網絡應用程序的HTML和CSS是一個常見的事情。如果你可以編寫你自己的設計，你將有一項專業獨特的技能在你的同行，也會增加你許多優勢。但是對我來說，這也是唯一的方式，真正了解網絡的工作原理。所以作為一名設計師，還是需要懂代碼的。
Web約束
您很快就會發現，并非所有的瀏覽器都支持您學習的所有酷技巧，這是網頁設計的現實。這是很好的遵循著名的原則，如漸進增強，你盡可能加載增強內容，但也想想如何內容降級。
最近，“切割芥末”已經變得流行。在BBC的網絡團隊的支持下，這包括區分“好”和“壞”瀏覽器，并為“壞”瀏覽器提供有限的體驗。但是，它真的只適用于內容網站。
當涉及到類似應用程序的體驗，許多人只限于支持一些領先的瀏覽器，使開發更容易?？杀氖?，這讓我們回到1996年的情況，你需要一個特定的瀏覽器來查看內容。
改善你的技能
那么，你如何跟上快速移動的網絡行業的最新發展，并提高你的技能？讓我們看看幾種不同的方法提高你的技能...
平臺知識
設計師的主要部分是平臺知識。你應該知道各種操作系統，以及如何使用它們。作為設計師，我們傾向于使用Mac，但是很容易忘記，大多數人使用Windows框來完成他們的工作。
我覺得你只有真正理解的東西，如果你自己使用它。我喜歡使用我的Mac設計，但花費大量的時間趕上各種其他平臺的演變。我有幾個副本的Windows安裝在我的Mac上作為虛擬機。我一直在忙于使用Microsoft的Insider程序測試Windows 10的新構建，以檢查UI中的各種更改。
我也經常購買新硬件來測試它是如何工作的。我買了一個蘋果手表只是為了測試的平臺。然后我賣了它，因為我覺得它并不是必要的。
此外，web可以被視為其自己的操作系統。它不斷發展，每周都會向每個瀏覽器供應商添加新功能。非常值得了解瀏覽器的技術方面，特別是關于CSS和圖形能力。你需要知道SVG和WebGL是什么，以及如何使用Web動畫API。
每個平臺隨著時間演變，作為一個用戶界面設計師，它是你的任務，保持最新。畢竟，無論你在設計什么，都不是孤立生活，而是一個更大的軟件生態系統的一部分。
回到基本
我們今天所處的困境與我們在20年前所掙扎的情況沒有什么不同。書中有很多好的建議。嘗試防御設計的網頁由Jason Fried和馬修Linderman和不要讓我認為通過史蒂夫·克魯格的初學者。
如果你不知道概念，如模態和可承受性，你需要讀。你應該能夠解釋Fitts的定律是什么。格式塔的鄰近法？這是UI設計的面包和黃油。
受游戲和電影的啟發
作為UI設計師，我利用其他靈感來源來完成我的工作。我在游戲中找到很多靈感。一些游戲非常復雜，UI設計人員不得不解決與UI設計師在商業項目上工作相同的復雜界面問題。
游戲也可以表示趨勢。在Colin McRae Rally的菜單中發現的極簡主義讓我想起了iOS7的方向。在某種程度上，現在時尚的UI動畫設計出現在幾年和幾年前的游戲中。從skeuomorphism到裸，功能界面和“平面設計”的轉變在游戲中也很明顯。比較2006年的湮滅與2011年的天際。這兩個游戲都是同一系列的RPG，但差異是驚人的。
Marvel電影中的未來派界面如鋼鐵俠也是我的靈感。他們不是完全可用的例子，但他們確實讓我更多地關注計算作為一個整體。我們想要一個未來的屏幕，或者我們想讓屏幕消失？這可能是一個很好的問題，在一個酒吧的設計師。
前言
近年來，「設計規范」逐漸被「設計體系」或「設計語言」的概念重塑。基于一套架構嚴謹、規則統一的體系框架，產品表現層面的設計工作可以逐漸實現模塊化運作，從而讓視覺設計工作變得更加高效。
「Design System 系列」將會從設計觀、設計原則、設計形式三個方向入手，由深到淺、由整到分地演繹設計體系對整個產品迭代過程的價值和意義。有正確的設計觀作判斷好壞的標準，并結合行之有效的設計原則作指引，才能制定出最優的設計方案。
簡介
Robin Williams 的四大基本設計原則相信大家都不陌生，尤其在平面設計領域內對它的應用更為廣泛。在此基礎上，我結合中后臺產品的設計特點，將其縮寫為「兩對兩性」原則，即：對齊、對比、親密性、一致性。
每個優秀的設計中都會應用這些設計原則，并且各自是相互關聯的，只應用某一個原則的情況很少。
作為設計體系的一部分，這套設計原則也為設計實踐提供了理論依據。本章引用中后臺產品設計中一些常見的案例，并以簡潔凝練的語言，分析總結了這四個基本原則的實際應用方法和注意事項。
本章大綱如下：
一、對齊原則
任何元素都不能在頁面上隨意擺放，每一項都應該與頁面上的另一項或多項存在某種視覺關聯。即使對齊的元素空間上是相互分開的，但在水平或垂直位置上也會有一條“隱形的線”把它們連在一起。
在界面設計中，將元素進行對齊，既符合用戶的認知特性，也能引導視覺流向，讓用戶更流暢地接收信息。
1. 左對齊
左對齊是將文本信息或視覺元素沿垂直方向向左對齊的一種對齊方式，左側會有一條“隱形的線”，將彼此分離的文本或元素連在了一起。
文案類、列表類、表單類等排版會常用到左對齊的方式，這能讓用戶順著視覺流的方向，快速高效地接收信息或填寫表單內容。
2. 右對齊
右對齊與左對齊相反，右側會有一條“隱形的線”，將文本信息或視覺元素連在一起。
在表格或表單中使用右對齊，可以實現快速對比數值大小，建議數值的格式保持統一。常規類數值可以統一使用千位符，如「1,024」；金額類數值可以保留小數點后兩位，如「￥88.00」。
3. 居中對齊
居中對齊是第三種常見的對齊方式，中間會有一條“隱形的線”，將文本信息或視覺元素連在一起。
居中對齊會形成一種更正式、更穩重的外觀。盡管這是一種合理的對齊方式，但邊界是“軟”的，“對齊線”的強度也較弱，所以會顯得中規中矩。通常，首頁的功能介紹文案以及數據、金融等類型的產品界面會使用這種對齊方式。
4. 兩端對齊
兩端對齊也稱方形左右對齊，因為文本信息的左右兩端均對齊。
通常在商品信息結算、帶有輔助說明的列表等場景中會使用兩端對齊的方式，不僅能讓橫向的文案更具關聯性，易于用戶接受信息，也能使排版顯得更加工整和嚴謹。
二、對比原則
對比可以有效地增強頁面的視覺效果，同時也有助于元素之間建立一種有組織的層級結構，讓用戶快速識別關鍵信息。
需要注意的是，要想實現有效的對比，就應當拉開元素之間的差異，差異越大，對比效果越明顯。
1. 字體對比
字體對比包括：襯線體和無襯線體的對比，如 Georgia 和 PingFang；字重粗細的對比，如 Regular 和 Semibold；字號大小的對比，如 14px 與 20px；字體顏色的對比，如 #333 和 #999。
當界面或模塊的標題字體大而粗、且顏色較深，正文字體小而細、且顏色較淺時，信息層級關系更明顯，字體對比效果將更理想。
2. 顏色對比
顏色對比包括：色相對比，如 Red 和 Blue；飽和度對比，如 S100 和 S60；明度對比，如 B100 和 B60。
下圖中的百分比堆疊面積圖利用不同維度 (區域) 的色相對比，清晰的反應每個數值所占百分比隨時間或類別變化的趨勢，對于分析自變量是大數據、時變數據、有序數據時各個指標分量占比極為有用。
3. 大小對比
大小對比就是在同一畫面里利用大小兩種元素，以小襯大，或以大襯小，使主體得到突出。大小對比主要體現在面積或體積兩種維度上的對比。
在下圖的 Dialog 中，主體圖片的面積相對于商品信息文字的面積得到最大化突出，主次更加分明，視覺沖擊感也更加強烈。
4. 水平與垂直對比
水平與垂直對比，是指水平分布的視覺元素與垂直分布的視覺元素在橫縱方向上的對比。
在排版上，水平與垂直對比可以打破單一呆板的排列方式，在保持對齊的基礎上，豐富了界面元素的空間表現形式，減輕了用戶的疲勞感和無味感。
三、親密性原則
如果信息之間關聯性越高，它們之間的距離就應該越接近，從而形成一個視覺單元；反之，則它們的距離就應該越遠，從而形成多個視覺單元。
親密性的根本目的是實現組織性，讓用戶對頁面結構和信息層級一目了然。
1. 水平空間關系
為了自適應不同尺寸的屏幕，同時保持橫向上控件的關聯性，因而采用柵格布局的方式來組織擺放元素和控件，保證布局的靈活性。
同一控件內部的元素，橫向間距上也會有“親疏”之分，以體現組織性。
2. 垂直空間關系
在復雜的頁面或模塊設計中，縱向上需要使用高、中、低三種規格的間距來區分信息的層級關系?；凇冈g距」8px，三種規格可以是 24px (高間距)、16px (中間距)、8px (低間距)。
注：縱向間距公式：y=8+8×n。其中 y 是縱向間距，8 是元間距，n≥0。
另外，增加「分割線」等視覺元素，也是有效劃分頁面結構和信息層級的常用手段。
四、一致性原則
可以把「一致性」理解為「復用」，相同的元素在整個界面中不斷復用，復用元素可以是線框、顏色、控件、文本格式、空間間距、設計要素等等。
一致性的根本目的是統一元素，并增強視覺效果，降低用戶的學習成本，幫助用戶快速識別出這些元素之間的關聯性。
1. 線框復用
同類信息的載體可以是相同粗細的線框、相同投影的卡片、或是相同顏色的底面，注意保持樣式屬性值的一致，以及上下左右間距的一致。
2. 顏色復用
在界面設計中，相同的功能提示、圖表數據、文字層級、按鈕、圖標、分割線、背景等，應使用相同的顏色，保持色彩體系上的統一，避免同類型的元素使用不同顏色給用戶造成認知困擾。
3. 控件復用
使用統一的導航、按鈕、彈框、圖表、選擇器等控件，既可以提高設計者和開發者的工作效率，避免重復造輪子的現象出現，又可以保持界面設計的一致性，降低用戶的理解成本，提高使用效率。
4. 格式復用
相同類型、維度或級別的文案，應使用相同的展現格式。注意標題、正文、輔助信息的層級關系，使用統一的對齊方式，讓關聯性高的信息之間形成一個視覺整體。
本章小結
1. 對齊
任何元素都不能在頁面上隨意擺放，每一項都應該與頁面上的另一項或多項存在某種視覺關聯。
2. 對比
對比可以有效地增強頁面的視覺效果，建立一種有組織的層級結構，如果想讓元素不同，那就讓它們截然不同。
3. 親密性
如果信息之間關聯性越高，它們之間的距離就應該越接近，從而形成一個視覺單元，這有助于組織信息，減少混亂。
4. 一致性
一致性的根本目的是統一元素，并增強視覺效果，降低用戶的學習成本，幫助用戶快速識別出這些元素之間的關聯性。
藍藍設計的小編 http://www.syprn.cn