如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
這篇文章我們來談談移動端和PC端交互設計上的區別。
經常遇到一些設計師，他們之前負責的都是pc端產品，突然改做移動端，會不自覺的把pc端的一些設計理念“移植”到移動端，出現了水土不服。有經驗的設計師一看你設計的移動端頁面就知道你之前做的都是pc端，這是一件非常尷尬的事情。就好像你說了一句“nice to meet you”，別人就知道你老家是哪里一樣。那么移動端和pc端交互設計上的區別究竟在哪呢？
大屏到小屏
開門見山，移動端和pc端最根本的區別就是屏幕的大小。屏幕的大小直接決定了界面信息量，pc端一個頁面可以展示完全的信息可能需要移動端好幾個頁面來承載。
可能有的設計師覺得，屏幕尺寸不一樣做自適應不就行了，移動端頁面做長一點，讓用戶滑動就可以了。這是一個非常簡單的處理方案，但是忽略了一個重要前提：用戶愿不愿意滑動？根據埋點數據顯示，多數移動端頁面超過一屏的內容的曝光與點擊量會急劇下滑，說明用戶很少主動滑動去查看一屏以外的內容。對于移動端產品來說，一些重要的內容必須保證用戶在一屏內可以看到。
1）信息架構重構
因此，如果你要為一個pc端網站做一個移動端app，首先要做的就是信息架構的重構。pc端有足夠的空間可以把所有的功能直接展示給用戶，而移動端只能展示一些主要的功能，一些次要的功能需要放在下一層級。
例如，appstore中用戶是可以評價這條評論對自己是否有幫助的。PC端的處理方式很簡單，直接展示給用戶。而移動端是需要用戶長按這條評論才可以彈出評價列表的，可能很多用戶今天看了這篇文章才發現原來還有這個功能。沒關系，之前雖然不知道，但是并沒有影響你正常使用啊。對次要功能進行適當的降低信息層級是移動端設計師必須要考慮的。
2）一個頁面，一個任務
對于上面信息架構重構的觀點可能會有人存在異議，對于一些表單類頁面來說，例如用戶要借錢、轉賬，有些信息是用戶必須要填的。在這些場景中，我們不擔心用戶不滑動，因為用戶不滑動就無法完成操作。那么在這種情況下，是否可以繼續延續pc端的布局樣式？
以上面的轉賬流程為例，pc端是直接在一個頁面展示，而移動端是分成了兩個頁面。為什么這樣？把備注/付款說明也放在第一個頁面不行嗎？
因為移動端用戶使用環境更加的復雜多變，更容易受到干擾，所以必須保證界面信息的簡單直觀。如果在一個頁面中展示過多的信息量，容易讓用戶混亂。這里所說信息量并不是指絕對信息量，更準確的說法應該是用戶主觀感受上的信息量。同樣的幾個輸入框，可能在pc端只占了頁面的1/4，而移動端占了一整個頁面，給用戶的感觀是完全不一樣的。頁面塞的滿滿當當，容易讓用戶焦慮。
一個頁面可以完成的任務現在要跳轉好幾個頁面，增加了操作步驟。用戶害怕“內容多”，難道不害怕“步驟多”嗎？不害怕，因為頁面內容量是用戶一眼就可以看出來的，用戶無法立刻感知這個任務有多少步驟。因為無知，所以無畏。等到用戶知道這個任務步驟數的時候，整個任務都已經完成了。
借唄的這次改版，用戶要借錢必須先輸入借款金額，其余的借款期限、還款方式和利息等信息才會展示給用戶。這些信息都是跟用戶借款金額相關的，用戶沒有輸入借款金額，這些信息展示給用戶意義也不大，不如隱藏，讓用戶的注意力聚焦于完成輸入借款金額。
沒有一個放之四海而皆準的設計原則，所有的設計理論都不能罔顧實際的應用場景而機械的套用。如果前后步驟關聯性比較強，我建議不要分頁展示。例如，目前很多的短信驗證碼都選擇把“輸入手機號”和“輸入短信驗證碼”放到兩個頁面，我個人對此持保留意見。設想一個場景，如果用戶遲遲沒有收到短信驗證碼，那么他需要確定是手機號輸錯了、網絡故障還是其他什么原因。用戶需要返回到上一個頁面查看，如果手機號和短信驗證碼放在同一個頁面就簡單多了。
3）突出重要信息
前面我們提到的主要是控制移動端頁面的信息量。頁面信息量少就可以了？當然不是，我們來看一下火車換乘的場景，如果你要從南京去新疆阿克蘇，沒有直達的車次，只能從西安換乘。我們來看看下面兩款產品的處理方式，左邊是12306，右邊是飛豬。12306還是一股pc端風格迎面撲來，問題出現在哪？12306跟飛豬展示信息量差不多，唯一的區別在于12306展示了兩趟車次各自的起止時間，而飛豬只告訴用戶整趟旅程的起止時間。
顯然問題不是出現在信息量上，而是對信息的展示形式上。用戶更關注的信息，應該讓用戶更容易發現。對于一趟車次來說，用戶更加關注出發/到達站、出發/到達時間和票價。對飛豬界面進行高斯模糊處理，發現用戶的視覺焦點正好落在這些重點信息上。
12306所有的信息都屬于同一層級，讓人抓不到主次。而且界面中出現了過多的配色，更增加用戶的信息獲取成本。
鼠標到手指
pc端用戶與界面進行交互靠的是鼠標，移動端用戶靠的是手指。鼠標的操作更加精準，因此移動端界面中元素的尺寸和間距比pc端的大。以下圖為例，左邊是pc端，右邊是移動端。移動端的輸入框沿用的還是pc端樣式，而且關于利率和手續費的詳情icon過小，用戶的手指點擊的時候容易誤操作。
給你的界面做減法
前面我們主要強調了移動端產品要盡量減少界面中信息量?？刹豢梢栽诓桓淖儺a品信息架構的前提下，通過交互設計上的改動來完成目標呢？我給大家介紹兩個方法：場景化和關聯化。
1）場景化
在一個頁面中，雖然內容很多，但是用戶真正感興趣并且會與之交互的內容很少。如果我們可以獲知用戶在特定的場景下對于某個內容訴求很高，那么我們突出展示；反之如果訴求很低的話，我們可以隱藏。
舉一個之前說過的例子，知乎中，用戶在搜索結果頁滑動大概3屏后，會出現“向知友提問”按鈕。因為用戶滑動了3屏，說明用戶可能對當前的搜索結果不滿意，這時引導用戶去提問，用戶的意愿更高。如果我們全程展示這個去提問按鈕，反而會減少用戶的實際瀏覽區域，造成干擾。
上面主要提到了，同一個流程，需要根據用戶不同的使用場景提供不同的功能。其實即使是同一個功能，我們也要根據用戶不同的使用場景選擇不同的展示形式。
還是知乎，為了方便用戶可以快速的查看下一個回答，給用戶提供了一個浮動按鈕。但是這個浮動按鈕，當用戶開始滑動頁面時候就會改變樣式。這個很容易理解，當用戶剛進入這個頁面，為了降低用戶的學習成本，我們需要直接告訴用戶這個按鈕是干什么的。當用戶開始滑動進入閱讀答案的狀態，縮小按鈕的形態避免對界面信息造成遮擋。
2）關聯化
我們需要梳理信息之間的關聯性，將相互關聯的信息整合在一起，進而減少頁面中信息量。支付寶賬單的月份篩選功能，對入口進行了修改。之前用戶需要點擊日歷圖標，現在用戶直接點擊月份就可以了。用戶要篩選的就是月份，那么直接把月份作為入口更加合適。
總結
以上就是我對移動端和pc端交互設計上區別的簡單分析和總結，如果你有不同的建議和看法歡迎留言討論。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
項目概述QQ 20周年，是互聯網產品長青的一個傳說，就在 20 周年的時間節點，QQ 向用戶提供一份關于他自己的、真誠熱切的 QQ 數據總結。通過數字，匯集出每個人自己的 QQ 時光歷程，從而牽引出每個人對于成長、青春、溝通、時代流動的感知與回憶，引發 2019 年一場集體的情感共鳴。
△ QQ 20年來的一路變遷
項目歷時兩個月，從項目初期，視覺和產品密集溝通，了解需求，進行頭腦風暴，輸出多個視覺方案縱向對比，最后確定視覺風格，分配視覺工作（插畫，動畫，3D）。項目后期，包括開發還原，數據調配等眾多環節，環環相扣，缺一不可，一路過關斬將，整個 H5 需要不同崗位的高度配合和各專業的高度默契。
△ H5的項目流程圖
1. 異地合作
本次 H5 聯動了動效，3D，插畫設計師的共同合作，由于支持 3D 的設計師在韓辦公，所以大部分都是在線上全英溝通，包括前期的項目進度同步，還有后期的模型調整等環節都能及時反饋，快速反應，最后如期打磨出五款 spaceQQ。算是一次順利的異地合作。
△ 五款3D spaceQQ最終效果
2. 3D spaceQQ視覺還原
3D 鵝從設計軟件轉化為 H5 展示過程中，存在模型文件過大、材質缺失等問題，直接影響用戶體驗。在開發的過程中同學通過模型減面、重新選擇材質，還有模型拆分等解決方法，在視覺觀感和性能中建立了平衡的杠桿，最終實現了 15 個 SPACE QQ 的視覺還原。
△ 五款3D spaceQQ最終視覺還原效果
3. 視覺工作的同步進行
由于項目時間比較緊迫，而且 H5 加入了 3D 模型，還有需要大量的動效，所以需要在同一時間線上，同步進行，視覺稿輸出，動畫制作和 3D 模型打磨?？简炘O計師的溝通和執行能力。與此同時，需要隨時和開發同步動畫 demo 以確保動畫可實現。和產品密集溝通，及時根據文案調整畫面。
因為 QQ 是陪伴了大多數用戶的一個產品，見證了整個互聯網社交的演變過程，容易引起用戶的情感共鳴。設計的初期，圍繞「個人軌跡」的主題發散了不同方向的視覺概念，在引起客戶共鳴感的復古元素和傳遞不斷「探索」未來的概念間尋找平衡點。最后沿用了 20 周年的太空概念貼合「探索」的主題，結合有年代特征的代表性視覺符號來引起「個人軌跡」的這一概念的用戶情感共鳴。另外，H5 運用了 3D 打造了 15 只太空鵝，打造「個人軌跡」的專屬感，既聯動用戶溫暖的回憶之余，也增添了一些小驚喜。
1. H5整體視覺風格
QQ，是陪伴了大多數人成長的一個互聯網產品，其本身帶有很多高辨識度的視覺元素，例如對話框，提醒上線的音效等。因為 H5 本身是一個大數據總結，專屬感非常強的一個產物，所以希望是喚醒用戶一些封塵已久的記憶，就像打開時間膠囊般的期待和感動。同時也象征著 QQ 一直陪伴在身邊，從而引起用戶的共鳴。
設計方面，除了通過一些標志性的視覺元素喚醒用戶的回憶之外，也加入 QQ 20周年的太空「探索」主題的元素，響應 20 周年的主題之余，也寓意 QQ 不斷地對外探索，從多個維度來看世界，尋找有趣的內容。
對話框，是承載數據的視覺符號，也是貫穿整個 H5 的重要視覺符號之一。寓意著 QQ 一直致力于「溝通」，而且不同時代的 QQ 對話框都各有特點，也是見證 QQ 時代變遷的重要元素，所以提取了三個階段代表性的對話框樣式來承載數據，并且加入有時代特征的視覺元素（如bb機，像素化的小箭頭等）作為輔助，增加 H5 的氛圍感，也算是視覺上的「小彩蛋」。
△ QQ原始對話框
H5 加入一些趣味感的元素，如笑臉，愛心等元素，背景輔以流動的彩色不規則圖案，來增加對話框的玩味。也寓意 QQ 20年來給用戶帶來源源不斷的樂趣，留下了不可取代的時代印記。
△ 重繪對話框
H5 中也加入了很多好玩的元素，不同時代所用的移動設備，融合貼近太空「探索」主題的背景；利用帶手套的手和不同的元素進行互動；增加重繪經典頭像的互動動畫，加入 QQ 空間的植物等懷舊元素，增加 H5 的可玩性和驚喜感。
△ 經典頭像的重繪
△ 經典頭像穿插在H5中的小彩蛋
△ 帶手套的手和有時代標簽的元素互動
1. 視覺動態化方案
在動畫制作前期會出一份詳細的動態化分頁策劃，以及一份盡可能表達完整的動畫 demo，能便于設計與開發能準確的估算出制作周期。在開發完成預研測試后，基于動畫 demo 共同制定一個大致的動態化方案──對話框等大面積使用代碼實現，其他裝飾性小元素全部使用序列幀。在觀眾每滑一頁即可觸發當前頁的動畫，且能保證大體動畫的流暢度。
2. 動畫制作
為了盡可能減少 H5 的運算體積，又保證畫面動態的流暢程度，導出的序列必須滿足以下所有條件：
△ 設計了4個不同的色塊流動loop，方便開發安插在每頁合適的位置
3. 導出與同步
在配合開發導出的階段，為了能明確序列的標記，所有序列文件命名為 xx-in/xx-loop/xx-out。使用同步工具以實現 AE 動畫序列導出和開發提取素材能同步進行，并保持實時更新和迭代。
△ 第6頁動畫導出序列
創建了四款全新的 spaceQQ，根據用戶的 QQ 年齡而設計。根據用戶的 QQ 年齡，分了四個款式的鵝：奢華，智能，閃亮和神秘四個概念，一個遞進的尊貴程度，刺激用戶分享欲。包括基礎款的 QQ 在內，共創造了 5 個類型的 spaceQQ。每個設計都基于基本 spaceQQ 的形式，但是套裝的顏色和細節根據各自的概念各有特色。
△ spaceQQ總覽圖
用戶可以根據自己的喜好更改這 5 款 spaceQQ 的裝扮顏色。
1. 專屬感
整個 H5 始終緊扣 QQ 20周年的太空「探索」主題，整個 H5，除了用數據喚醒用戶和 QQ 多年的點點滴滴之外，5 個 spaceQQ 概念設定，既能增加用戶的新鮮感，又能刺激用戶的分享欲，C4D 建立的 3D 形象豐富了整個 H5 的視覺層次，深化了 QQ 品牌的影響力，寓意鵝廠一直與時俱進，緊貼潮流。
2. 情緒調動
對于當下的運營活動來說，趣味性是引爆轉發量的重要元素，H5 結合 QQ 用戶創作的背景音樂和能夠調動用戶情感的設計語言來釋放用戶的情緒，比如驚喜感（用戶結合 QQ 的標志性音效創作的背景音樂），榮譽感（不同 Q 齡獲取相應的 spaceQQ）等，讓用戶產生持續的驚喜感，在懷舊和新鮮感中得到滿足，提升用戶活躍性。
QQ 20周年 H5 設計，嘗試結合了 3D，動畫，插畫等設計形態，為每一位用戶打造專屬的「個人軌跡」，通過數字，拼湊出和 QQ 的過往朝夕，引起用戶共鳴。鵝廠不斷創新探索的同時，也為用戶溫存屬于用戶自己的專屬回憶，深化 QQ 的品牌價值。
福利
考慮到部分同學想更仔細地查看、保存或收藏高清大圖的需求，我們設置了關鍵詞，微信公眾號后臺以「spaceQQ+序號」的方式回復，例如「spaceQQ1」，即可逐一獲取對應的高清頭像和壁紙。
掃碼領取專屬「個人軌跡」：
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
阿里巴巴副總裁、中國內貿事業部總經理汪海在對外分享時提出 1688 已經從信息平臺時代進入數字化營銷平臺時代，讓 1688 用戶在平臺內完成營銷和銷售一體化的整個商業閉環。1688 的使命也升級成「在數字化經濟時代，讓天下沒有難做的生意！」在全新的業務態勢下，為了更好的滿足用戶需求，阿里巴巴（1688）主客升級勢在必行。
首頁既是業務分流的中心場景，也是平臺賣家判斷平臺打法，買賣家感知平臺價值的重要「門面」。從 UED 專業視角來看，首頁是定義 APP 內體驗范式及視覺風格的核心場景。
1. 盤點現象，定義問題
滿足業務新的訴求：平臺階段性戰略不同，1688 從曾經的信息平臺過渡到交易平臺，如今向數字營銷平臺轉型，舊的內容框架難以承載業務的新發展。
提升分流質量：從過去的數據效果來看，需重新判斷，在 For 特色采購需求和服務大面采購需求之前，如何平衡調優，提升首頁的流量轉化效能。
體驗升級：移動端 APP 天然生長在手機系統上，系統的風格更迭也牽動著 APP 的變化和升級。在 8.0 升級前，1688APP 存在著 5.0、6.0、7.0 多個由不同設計師在不同時間點所設計的場景，到8.0，APP 趨待從框架層、表現層以及品牌等方面進行統一及升級。
APP 升級前與業務對焦，我們收到三點訴求：
在內容框架制定上，我們聚焦用戶價值，舍掉 7.0 時的內容版塊個性化，聚焦做商品的個性化，僅保留For大面用戶的營銷、內容場景，提升算法推薦區的曝光率，以此區域的商品做首頁的直接轉化。
視覺容器升級
做平視覺框架，選擇「大間距分隔」，為內容留出干凈、簡潔的視覺空間。
精簡內容柵格，避免形式給用戶閱讀帶來的負擔。
提高留白率，提升頁面整體的透氣性，為內容留出更清爽、輕松的閱讀空間。
拉大字體大小的梯度，加重字體顏色梯度，提升文字的清晰度和可讀性。
強調版塊特性，塑造買家心智感知，達成業務目標
強化搜索：7.0時，曾上線過將搜索做到「主觀上覺得顯眼」的測試方案，但相較于之前沉浸式搜索，數據幾乎沒變化。
8.0 階段，從視覺表現層跳出看：「強化搜索」并不意味把搜索設計得更「顯眼」，而是達成「讓更多用戶更高頻地使用搜索」這一目標。如提升搜索底紋詞、熱搜詞精準度和吸引力、增加搜索布點等，都可能助力達成業務目標。
基于用戶單手操作時，拇指在屏幕不同區域的點擊體驗，選擇將搜索組件移到更易于點擊、視線更聚焦的屏幕位置，上線后數據提升非常明顯。
Banner 升級：7.0 的 Banner 畫面豐富度高，加之描述字段多，用戶閱讀有一定成本，較難在 3 秒內掌握全 Banner 的信息。此外，相比于 C 類用戶，B 類用戶會更偏理性，我們選擇以更冷靜、克制的「視覺語氣」與 B 類商人對話，而非渲染氛圍引導點擊。（上線后，同樣的活動內容，按新、老兩版規范設計投放兩套 Banner，新版較老版 UV CTR 約高出 48%）
For 新人：以差異化的利益、個性化秒殺、新人攻略做用戶的承接。
營銷場景心智差異化表達：營銷由伙拼爆品、天天特賣兩部分組成，我們判斷爆品主打心智為「賣得火爆又便宜」，特賣主打心智是「限時限量搶便宜」，選擇將兩個區塊最關鍵的特質做強化表達。
內容場景（直播）動態化、互動感、實時性傳遞：抽象出直播間的方形版面+內容疊加形式來設計，大坑位以動圖傳遞給用戶直播的動態感，以紅包、個性化商品的多維實時輪播氣泡傳達直播的互動感、實時性。
為什么要做APP應用內的品牌設計？
品牌設計是將內容層（平臺價值）與接收層（用戶）做柔性鏈接的一環，譬如在 APP 場景中，由于有商品、商家、商機等「干貨」，即使不特意做品牌設計，用戶也能與平臺保持剛性、穩定的連接。而反過來看，品牌做得很好，但平臺沒有「干貨」，用戶也不會單奔著品牌設計來平臺。我們認為，做 APP 應用內的品牌設計，核心價值在于助力用戶認知到平臺特性，感知平臺價值。從設計專業視角來看，APP 應用內的品牌設計，有利于定義并統一 APP 內體驗范式及視覺風格，保障用戶的體驗。
每位設計師所處的業務環境不一樣，解決問題策略和方式也千差萬別，在 APP 應用內的品牌設計中，個人選擇是通過厘清內容層（平臺）多層次訴求及 For 用戶的價值點，認知、感知接收層（用戶）特質及內容傾向，基于內容層底料+接收層用戶特質確定設計底層范式，塑造用戶感知。
在阿里巴巴商業操作系統中，1688 聚焦做 B 類業務，直接服務對象是 B 類買賣家，業務細分出檔口尖貨、淘工廠、企業采購、淘貨源、微商代發、工業品超級店、跨境專供等，這些都是具有一定 B 類特質及體量感的場景，故在 APP 業務門洞及常規圖標的表達上，基于扁平 vs 寫實、輕盈 vs 厚重、活潑 vs 穩重的維度，圖形選定輕擬物、弱對比的設計范式，塑造 B 類場景 For 買家的沉穩、份量感。
此外，異常/空白場景也是平臺與用戶互動，塑造用戶感知品牌的機會。在空態情感化插圖部分的繪制上，力求塑形出有份量、易讀、有意味的場景以示對應空態，并佐以輕微動效，增強空態的互動感。（在收藏夾、我的供應商等工具型場景，基于空態信息的價值考慮，將空態與工具新手引導相結合，并未做常規的插圖。）
標準色
隨著業務的發展，我們基于新的業務態勢，豐富了 1688 品牌色，以橙紅色作營銷、利益屬性的表達，以商務藍作服務、數字化屬性的表達，以金色作權益屬性的表達。
輔助色
在實際產品設計中，品牌色并不足以表達各類業務場景中的多層次的內容。因此，基于 VI 品牌色，裂變出不同重量、層次更豐富的品牌輔助色。
場景用色規則
基于買家角色及場景特征定義用色規則。
1688色域及選色示意
以 HSB 模式劃定出偏沉穩的 1688 色域，在日常 banner 及業務場景中可靈活取用。
動效是設計的重要手段，良好的動效表達能增強信息表達強度，清晰信息層級關系，提升用戶體驗的舒適度。做動效之前，將 APP 信息結構平整到三層，保障內容在頁面簡潔明暢地呈現。
在實際落地中，動效實現非常依賴技術資源，故動效設計之前，應考慮一個前提：動效設計增益內容表達，價值可論證，效果可衡量；同時，考慮接收層用戶的商人特質，我們期望動效表達給用戶以穩定感，并且在設計表達上能兼顧效率。
在動效呈現部分，主要以緩入、緩出、緩動結合曲線來調節，總的來說，內容入場時節奏稍慢，速度緩，分層加載，交代清信息在 Z 軸上的層次關系，內容出場時節奏快，速度快，內容層級不用再做分層消失。
APP 內典型場景的動效案例及演示：
此外，除以上在圖形、色彩、動效等基礎維度收口外，我們也需要將業務品牌放聲給買賣家，以達成業務品牌的價值傳遞。在 1688 向數字營銷平臺轉型的階段，業務提出了「源頭廠貨通天下」的口號，我們通過設計手段，利用 APP 開機啟動頁及下拉刷新的空間，將「貨通天下」的概念強化表達。
以上便是此次首頁改版階段性的記錄。在 8.0 的視覺體系里，為更好地突出內容，視覺容器選擇盡可能做輕、做平，以冷靜、克制的「視覺語氣」與 B 類商人對話。當然，這是設計師和業務同學階段性的選擇。后續品牌的完善及產品的優化，仍需結合數據持續打磨。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
最近設計群里經常有人問起小程序設計規范的問題，雖然官方有提供樣式庫的下載，但是停留在 16 年版，不是的。而設計經驗這部分網絡上也沒有比較全面的分享，這促使我停下手上的計劃，加快輸出本篇文章。正好近期剛結束幾個小程序項目，總結下經驗，并結合微信小程序的官方設計指南，一起分享給大家，希望幫助大家更快速地上手。
隨著 2018 年小程序的迅猛發展，小程序現已被各大企業廣泛采用，「觸手可及、用完即走」的用戶體驗備受青睞，隨之小程序設計也成為設計師的必備技能，那在進行小程序界面設計時，應該如何快速做設計？過程中又要注意哪些問題呢？
對于已經開發了 App 的產品，在進行小程序設計時需遵守小程序的規范，同時要保持小程序界面設計與 App 的風格統一性。
小程序的「所有頁面」右上角位置，都固定放置了小程序的菜單，在設計界面時需預留出該區域空間。
1. 小程序菜單固定樣式
微信提供了深淺兩種配色樣式，以便更好地融合到各種風格的頁面中，需注意保持小程序菜單清晰的辨識度。
線上案例：
2. 交互注意事項
如果要在小程序菜單附近放置交互元素，要考慮是否有交互沖突，應盡量避免誤觸的可能。
建議開發者設計的自有導航樣式與微信官方小程序菜單樣式保持一定差異，以便區分。
如上圖，小紅書的自有導航樣式個人不推崇，理由如下：
微信讀書既有微信線條外框的 DNA，又區別于官方樣式，是不錯的綜合。以上僅限個人觀點，還需用戶數據來客觀驗證。
3. 搜索框常見的幾種表現形式
1. 小程序設計規范
頂部標簽分頁欄顏色可自定義，一般會沿用 App 的設計風格，以保證兩個平臺的視覺統一性。
2. 常見的幾種表現形式
1. 小程序設計規范
微信有提供小程序的底部標簽樣式，建議標簽數量在 2-4 個適宜。
也可根據產品需要選擇或者去掉底部標簽欄功能。
2. 常見的幾種表現形式
啟動頁除品牌 Logo 外，其他元素都由微信統一提供，且不能更改，設計師僅需提供 2 倍和 3 倍尺寸的 Logo 即可。
1. 小程序設計規范
全局加載是小程序名稱左側的加載圖標。模態的加載樣式將覆蓋整個頁面，由于無法明確告知具體加載的位置或內容，可能會引起用戶的焦慮感，建議謹慎使用。
2. 常用的加載樣式
需告知用戶具體加載的位置形狀，減輕用戶焦慮情緒。
對于沒有開發App來說，可依據官方推出的《微信小程序設計指南》來設計，以確?？焖僭O計出符合規范的小程序。
小程序設計應遵循友好、、一致的設計原則，每個頁面都應有明確的重點，清晰明確地告知用戶身在何處，又可以往何處去，確保用戶在頁面中游刃有余地穿梭而不迷路。
最后，推薦幾個常用的平臺設計網站。
1. BAT各平臺小程序設計規范網站
微信小程序設計指南：https://developers.weixin.qq.com/miniprogram/design/
支付寶小程序設計規范：https://docs.alipay.com/mini/design
百度-智能小程序設計規范：
https://smartprogram.baidu.com/docs/design/overview/introduction/
2. 其他常用的設計規范網站
蘋果-人機界面指南：https://developer.apple.com/design/human-interface-guidelines/
詳細介紹了 iOS 設計規范，同時還提供了 UI 設計資源下載。
安卓-MD設計指南：https://material.io/design/
螞蟻設計：https://design.alipay.com/#ds
提供移動和 Web 端的設計組件，還有設計案例和心得的文章供學習。
微信樣式庫：https://weui.io/
提供微信內的網頁和小程序設計規范。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
為什么要構建 MIZ Design？隨著米莊 APP 用戶的增長，以及 APP 不停的迭代，我們在設計上積累了越來越多的債務。越來越多的新頁面，新功能，以及不同的組件，都是由不同的設計師來設計，前端也是由不同的開發來實現，這直接導致了整個 APP 越來越臃腫無序，視覺和交互體驗不一致，且團隊溝通成本高，重復勞動力大，輸出效率低，迭代速度慢。
開發層面
場景：
設計師：涉及到這個組件的頁面都改一下吧。
開發：改不了，每個頁面都是單獨寫的，改起來非常麻煩，耗時間耗資源耗人力。
設計師：為什么同樣的組件要單獨寫？
開發：我怎么知道，這是以前的開發寫的，而且寫的亂七八糟。
設計師：……
那怎么辦？不改也得改呀。總不能一直留著這些大大小小的毛病，不解決問題會越來越嚴重。
代碼混亂，遺留了非常多的開發層面代碼不一致的問題，后期迭代的過程中如果不統一，也會使整個系統失去可控性。
設計師層面
場景 1：
設計師 A：這個頁面是誰做的？源文件有嗎？
設計師 B：不知道哎。以前的設計師做的。去庫里找一下吧。
30 分鐘以后，依然沒有找到源文件。
場景 2：
開會：為什么這個項目的頁面和以前的風格差很多？
設計師 A：現在流行的就是這個風格呀，多好看。
設計師 B：雖然設計每年都有流行趨勢，但還是要和產品品牌風格相結合。
一個項目兩個設計師負責，設計出來的頁面控件：按鈕，列表，輸入框，色彩，視覺風格完全不一致。在 2 個設計師完成設計以后，還需要整合在一起重新修改，效率很低。并且每次頁面中的元素，開發需要根據不同業務中的不同設計師的「創意」來進行人肉修改。
當我們開始設計新的頁面，功能需求點優化的時候，這個問題變得更加嚴重。同時，因為沒有一個統一的基礎設計規范原則，設計師在設計項目的時候，在設計決策和討論中花費了大量時間，會存在大量的重復勞動。同時由于產品的界面和交互缺乏一致性和可預測性，用戶體驗也受到了影響。整個產品也會在風格定位上不統一，沒有確定產品風格特質的情況下越來越模糊，失去自身品牌該有的特性。
產品迭代，基本上是基于新功能的開發設計迭代，新的功能、新的頁面不斷的增加，對于設計師而言，有設計規范的原則做基礎設計框架，更容易延續 APP 統一的設計風格，不至于被不同的需求，不同的設計趨勢以及蠢蠢欲動的新的設計靈感牽著鼻子走，導致越做越亂，無章可循。
一個 APP 就像自己的孩子一樣，從一個嗷嗷待哺的嬰兒逐漸長大成人。設計系統就好比一個人的生物系統，是整個生物體的基礎。如果對此系統不維護，那么此系統將會隨著時間的增長越來越脆弱以及呈現不可逆的現象。那么如果維護好一個設計系統，骨骼會在成長中呈現規律清晰的生長模式，會隨著業務的生長而生長，可控制、可更新，使生物體健康的發展然后去完成它的使命。
Design System 最開始是 Guide 演化而來，Guide 是一套可指導、可延續、可擴展、可統一的、可區分的視覺指引手冊，指導相關設計結構完成統一性與對外區分性。具象層，它是一種設計方法；抽象層，它是一種思考模型。
最近幾年，「Design System」這個詞非?；?。下面介紹紅遍全球設計界的兩大設計規范網紅。
谷歌在 2014 年的 Google I/O 上推出了 Material Design，它的目標是創造一個將經典的設計原則和科技、創新相結合的設計語言，并且在不同設備上提供一致的體驗底層系統，并同時支持觸摸、語音、鼠標、鍵盤等輸入方式。
一經發布就紅遍了全球設計界。新穎的設計理念，清晰明確的設計原則，詳細的設計規范，使之成為完美的安卓端標準設計規范。也給設計界的設計師們提供了非常好的參考，很多設計師也根據 Material Design 設計原則延展出更多的創新設計可能性，制作了各家的設計規范。
出了官方的 Sketch 組件庫以后，谷歌團隊還開發了基于此設計規范的延展工具：比如基于 Material Design 色板的 Sketch 源文件下載；谷歌色彩顏色獲取工具；一整套的 Material Design IOCN 輸出；在 2018 年 5 月份的 Google I/O 大會上，Google 設計團隊開發了一款叫做 Material Theme Editor 工具，可以幫助設計師輕松且快速創建符合自身品牌又符合 Material Design 風格的應用。
設計價值觀
設計原則
材質是一種隱喻：Material Design 的靈感來源于物理世界和世界中的材質，包含了材質如何接受光的影響以及所形成的光影效果，并且對紙張的質感和墨水的介質重新進行了構想。
大膽，圖形，鮮明：Material Design 基于印刷設計的指導原則，字體、柵格、留白、顏色等元素都以創造層次、意義和焦點為基礎來讓用戶沉浸在設計體驗中。
動效賦予意義：微妙順暢地反饋和過渡性的動作效果，引起用戶的注意力并使之保持持續關注。當元素出現在一個界面中的時候，元素之間的互動重塑了環境。
基礎靈活：Material Design 同樣旨在實現品牌價值的傳遞。結合了基礎的代碼、組件和元素，可表達不同的品牌需求。
跨平臺：Material Design 的 UI 組件庫可在不同的平臺共用，不論在安卓平臺、iOS、Flutter，還是 Web 都可保持一致的組件元素。
iOS 的人機規范指南，保持了蘋果一貫的風格。雖然沒有 Material Design 規范那么細致全面，但是核心的設計原則在每個組件的設計說明中都有滲透。作為 iOS 系統的設計基礎，建議每個設計師都需要仔細研究。
iOS 設計價值觀
iOS 設計原則
Aesthetic Integrity 整體美感：整體美感不僅僅包括美觀的 APP 界面，還包括流暢的交互體驗，產品功能和用戶行為的有效結合。比如當一款工具類 APP 主要是幫助用戶完成一項任務時，設計師應關注于用戶操作本身的行為路徑，和產品功能相結合來幫助用戶完成目標，使用戶聚焦功能本身。而如果是一款游戲，那么需要提供非常有吸引力的界面，在鼓勵引導用戶探索的同時也有非常棒的操作體驗。
Consistency 一致性：一個保持了一致性原則的 APP，通過使用標準的控件、熟悉的 icon、標準的文字規范、統一的組件俗語來實現一個擁有標準化范例的系統。這個系統提供的特性和交互行為也符合用戶的心智模型和預期。
Direct Manipulation 直接操作：讓用戶在屏幕上直接對內容進行操作的交互行為，可以鼓勵用戶和系統進行交互并且更易于理解。當用戶翻轉屏幕或者使用手勢直接與屏幕交互時，他們會感知到直接操作的行為，并且能立即得到操作結果。
Feedback 反饋：反饋能夠響應操作，呈現結果，使用戶獲得信息。手機中內置的 iOS 應用程序為用戶的每一個動作提供可感知的反饋。交互元素在點擊時會凸顯被高亮顯示，進度指示器顯示了需要長時間運行的操作進度、動效和聲音，使用戶能夠更清晰地感知交互行為的結果并作出響應。
Metaphors 隱喻：當一個 APP 的虛擬對象和操作路徑與用戶本身所熟悉的心智模型一致時，不管它是來自于真實世界還是數字世界，用戶都能很快上手。隱喻之所以有效果，是因為用戶和屏幕存在物理上的交互。用戶可以通過移動分層視圖來顯示手機上被遮擋的內容；拽拖并且滑動對象，切換開關，移動滑塊，滾動數值選擇器，用戶甚至可以通過翻轉手勢來翻閱手機上的雜志和文章。
User Control 用戶控制：在 iOS 系統中，用戶是主導者，而不是 APP。APP 可以提供行動建議，給予警告提示，但是不應該替用戶做選擇。優秀的 APP 始終會在用戶主導和用戶不想要出現的結果中保持平衡。一個 APP 應該始終讓用戶感知到在他的掌控之中。交互的元素給用戶熟悉感并且可預期；對有破壞性的操作可確認；對錯誤操作可取消，即使是在進行中的行為也可中斷。
在 Sketch 工具中可直接下載 iOS 的組件庫使用。
在 2016 年，由工程師和設計師組成的團隊創建了 Airbnb 的設計語言系統 （DLS）的第一個版本，其目標是創建一致的體驗和跨平臺的統一。DLS 包含了一套內部和第三方工具，由共享原則和模式定義的組件的集合。這允許使用跨設計、工程和其他學科的共享詞匯表進行快速迭代。DLS 的結構簡單而連貫，簡化了團隊之間的溝通。并制定了以下幾條原則來指導 DLS 的設計：
ADS 開源庫
Airbnb 設計副總裁 Alex Schleifer 在 IXDC 2017 國際體驗設計大會上分享了這一創新的 React Sketch APP 管理設計系統，這是為 Airbnb 的設計系統而設計的，其實就是個實時更新的代碼數據庫，可以實時查詢 Sketch 數據和代碼，也可以下載圖標、設計模塊，所有工程師和設計師都可以免費下載?？吹竭@個，我想完美共享庫也許并不是那么的遙遠。
Airbnb 團隊在設計 DLS 過程中，也是通過原子組件的方式來構建整個框架，我覺得他們對于設計系統的理解非常對：「一個統一的設計語言不應該只是一組靜態的規則和原子組件構成，它應該是一個可持續發展的系統?！顾栽跇嫿ê玫讓拥脑O計語言之后，可持續性、可發展性，是維護并讓設計系統產生價值的重點。
隨著商業化的趨勢，越來越多的企業級產品對擁有更好的用戶體驗有了進一步的要求。帶著這樣的一個終極目標，螞蟻金服體驗技術部經過大量的項目實踐和總結，逐步打磨出一個服務于企業級產品的設計體系 Ant Design。基于「確定」和「自然」的設計價值觀，通過模塊化的解決方案，降低冗余的生產成本，讓設計者專注于更好的用戶體驗。
設計價值觀
自然，讓人機交互行為更自然。
自然規律運用到設計中，自然界的方方面面都會對用戶行為產生深遠影響，設計者應該從其中汲取靈感，并運用到當下的設計工作中。螞蟻金服已做了部分探索，并將追求「自然」作為未來持之以恒的方向。
自然的人機交互核心：節能。既要節省身體運動的體力，更要節省大腦思考的腦力。
那么如何在設計中體現呢？
確定，保持克制、對象設計方法、模塊化。
設計者需要做出更好的設計決策，給予研發團隊一種高確定性、低熵值的研發狀態。同時，不同設計者在充分理解業務訴求后，基于 Ant Design 體系都會有相同且符合當前業務特性的設計產出。
給予用戶確定感，結合 Ant Design 的三個關鍵點，可以總結為邊界和規則 2 個方面：
構建米莊設計系統的目標是什么？
意義
有了規范和控件庫，設計師在接受需求的時候，可以減少設計成本，提高設計效率，尤其是在用于快速迭代產品的階段，通過大量的標準化組件即可實現縮短設計周期的效果，并且設計師可以更專注于深耕體驗和細節，同時能保證高質量的輸出。
構建一個設計系統來支撐產品的所有業務線，解決團隊協作一致性問題，產品的周期性更新問題，解決不同的設計師和工程師規范性輸出 UI 的問題，最終從設計驅動商業的層面上，解決用戶體驗一致性，迭代開發的問題。
時間
APP 進入穩定發展階段，也完成了基礎功能的開發，在業務穩定發展的前提下，構建已有 APP 的整體框架，規范前端開發和設計流程是個好時機。在產品發展到穩定階段、參與的人越來越多時，對整個 APP 的頁面整理是非常有必要的。也為了后續快速發展的業務起到完整系統地支撐能力。
人力
相信幾乎在所有的公司和團隊，規范建立都是非常有價值，也非常耗費資源的一件事。你可以一天抄一套亮麗炫酷的 UI kit，但是你沒法一天上線一套系統。沒有上線落地的視覺規范只是耍流氓。所以項目啟動的時候，團隊分工必須明確，你們是一條船上的人了。勢必要有劈浪前行，破釜沉舟的決心。
場景
所以在項目開始之前，便需要和整個團隊統一目標意義：視覺規范的建立，除了保障統一的用戶體驗和認知，還能夠通過工程師代碼層面的組件化提高開發、設計效率。整個設計系統的開發，從設計到落地，需要產品、設計和前端的全力支持。
雞生蛋問題
即使我們看了很多設計系統范例，甚至也下載了很多 UI KIT 的源文件來做參考。我們依然無法確定第一步需要做什么。當我們還沒有組建一個 UI kits 組件庫的時候是如何來搭建一個頁面的呢？是先有了組件，然后創造了模塊頁面；還是先設計了頁面，然后再來歸納總結出頁面匯總的元件呢。這和先有雞還是先有蛋的問題有所相似。
原子理論
在學習其他公司如何搭建設計系統的時候，我們了解到了 Brad Frost 的原子設計理論。他提出了原子設計原則，并且在他的文章中有一句非常出名的引用：
we’re not designing pages, we’re designing systems of components.──Stephen Hay
概念
2013 年網頁設計師 Brad Frost 從化學中受到啟發：原子（Atoms）結合在一起，形成分子（Molecures），進一步結合形成了生物體（Organisms）。于是提出了原子設計方法論，由原子、分子、組織、模板和頁面共同協作以創造出更有效的用戶界面系統的一種設計方法。
原子設計的五個階段
原子（Atoms）：符號，為頁面構成的基本元素。例如顏色、字體，或是一個圖標等。
分子（Molecules）：組件，由原子構成的簡單 UI 組件。例如，一個表單標簽，搜索框和按鈕共同打造了一個搜索表單分子。
組織（Organisms）：模塊，由原子及分子組成的相對復雜的組織，在 UI 頁面中可視為模塊/樣式層級。
模板（Templates）：原型，將以上元素進行排版，顯示設計的底層內容結構，在 UI 設計中對應的是原型圖層級。
頁面（Pages），將實際內容（圖片、文章等）套件在特定模板，頁面是模板的具體實例。
特點：
從 Brad Frost 的原子設計理論得到啟發，將我們 APP 產品的所有頁面都整理了出來，我們歸納出了組成這些頁面的常用組件。這個詳盡的庫幫助我們以一種更合理的方式構建了一個設計系統的底層框架。
這個理論提出來以后就產生了非常大的轟動。并且至此以后 Atomic Design（原子設計）成為了構建 Design System 的核心指導理論。
Sketch工具
Brad Frost 在 2014 年提出來：「使用 Sketch 的 Atomic Design 是產品設計的未來?！刮覀兛梢允褂?Sketch Library 功能實現組件庫的創建。而組件庫的底層邏輯就是原子設計理論。Sketch 中的 symbols、textstyles、color styles、Layer style ，來構建組件和樣式。
Text style：Text Style 用于設置文字規范，在一個系統中包含大量的文本樣式，并且擁有不同的文本屬性。使用字體樣式來管理一個系統中的字體樣式，可使之便于管理和修改，保持系統的可持續性和可用性。并且可單獨輸出字體樣式系統進行團隊之間，不同項目之間的共享。
Layer Style：可編輯元素的各種樣式，比如用于制作顏色規范，涵蓋填充顏色、描邊顏色、內外陰影、模糊效果等內容?？墒乖乇３忠恢碌膱D層樣式。
symbols：設計系統中的任何元素都使用 symbols 來形成符號，可復用、可嵌套、可批量修改，非常靈活化、輕量化。并且將符號進行嵌套組合，可形成符號嵌套，作為模塊來使用。symbols 在使用過程中如果使用「/」來命名，那么會形成符號嵌套層，作為不同符號組件的分層。同樣的對于 symbols，可使用縮放工具，來靈活適配各種不同的界面需求。
Library：Library 是所有元素、文字樣式、圖層樣式等組合的一個組件庫，可通過共享形式，來使它成為團隊的設計工具。輕松訪問次庫中的所有元素和樣式，并且始終可同步接受更新，保持一致和的文件狀態。
在確定了原則和工具之后，我們為設計系統項目制定了完整的項目計劃，因為涉及到上線和設計兩大塊，所以項目也是分設計線和落地線，兩條線既有關聯性，又是相對獨立和分離的。組件設計完成以后才可上線落地，因推動落地的過程是需要整個設計開發團隊的，不管是從時間還是人力上的資源協調和配合，所以落地線需要更加靈活。
設計階段 – 設計線
目標結果 – 設計資產
設計階段，我們所產出的設計資產包括設計價值觀，設計指導原則，以及設計模式（解決方案）。
展開實施 – 任務細分
確定了設計資產以后，我們將設計資產進行細分。整理規范的內容并對每個組件進行優先級的確定。整理規范內容的過程也是一個逐漸完善的過程，第一次整理可能并不完善，但是沒有關系，先把基礎框架和內容整理好，后續在設計過程中有遺漏的再進行添加。
內容整理好以后，我們會發現一套規范里內容非常多，所以需要根據項目時間來安排所有內容的優先級和分工。根據我們的設計系統的底層邏輯，所以我們將核心組件建設放在第一階段，比如字體、顏色、icon 等。構建了基礎元件以后再來搭建模塊，最后再根據不同場景來確定樣式。至于分工，最好整個設計團隊的人員都可參與，互相分擔工作量以達到工作效率最大化。
整體內容確定以后，因每個組件的整理有規范可循，所以我們針對每個組件的設計過程也確定了單個組件的設計流程。
過程跟進 – 關鍵節點
在設計過程中，我們也需要對關鍵時間節點的項目整體進程和結果輸出總結。此階段是和上線的項目節點重合的關鍵點，設計輸出的內容會和上線過程有非常多的磨合，一個組件的落地還需要不停的和開發溝通，收集反饋意見，并且進行調整修改，記錄解決問題。
執行復盤 – 結果驗證
在每個組件的設計過程中，我們都會反復完善每個組件的內容，包括設計原則、交互細節以及應用場景等。反復去驗證組件的可行性。并且對階段性完成的設計結果進行復盤和分享，進一步來驗證設計方案的可行性。規范需要不停地優化創新，才能讓它的可持續性特性發揮至最大。
上線階段 – 落地線
沒有上線落地的視覺規范只是耍流氓。
設計師自嗨并無意義。推進的過程，最重要的還是溝通。溝通的內容包括組件輸出的合理性、開發工作量、產品版本迭代需求計劃等。
愿望如此之美好，現實如此之貧瘠。
設計從落地到上線的過程想必每個設計師都有大把心得。在公司中實際的推進是非常難的，因為產品需求永遠都做不完，開發永遠在寫代碼，設計永遠需要將先完成業務需求設計為前提。所以如何將設計規范的內容插進項目中是個最關鍵的點。
存在問題，根據項目的時間安排和產品迭代安排，我們試圖將不同優先級組件的內容分配到不同的產品迭代中。實際卻證明這非常的理想化。在這個過程中我們遇到非常多的問題：
解決方案：
APP 在建立的時候沒有規范性，所以現在想要規范所有的內容就是一個非常巨大的工程。就像沒辦法一口吃掉一整塊蛋糕一樣。
我們的核心組件在產品迭代中完成上線以后，將剩余的組件規劃至開發的重構版本中進行開發。減少資源的重復使用，以及最大化降低對 APP 的影響。我們衡量了利弊之后，決定此次規范的設計對于樣式的修改減少到最少，保持和線上內容的一致性。很多時候我們設計師對于設計趨勢是很敏感以及非常想要去創新的，但是基于現狀下保持對樣式的克制完成基礎體系的搭建這個核心目的，是最重要的事。
MIZ Design 的設計資產中設計價值觀是貫徹整個產品的迭代發展，是產品持續迭代的指明燈。設計原則是團隊成員建立設計的標準指導規范；設計資源庫貫徹設計師、開發和產品，實現產品迭代。我們也非常愿意分享這個過程，希望對大家建立設計規范整個流程有所幫助。
When your values are clear to you,making decisions becomes easier.──Roy Disney
當你認清自己的價值觀和行為準則后，決策就輕而易舉了。價值觀是指明燈，貫徹整個產品系統。我們根據米莊品牌的特性，以及業務場景的需求來定義 APP 的設計價值觀，指導 MIZ Design 的設計語言的建立。
品牌特性
米莊的品牌理念在于科技金融，小額惠普，以簡單可靠的價值觀來驅動業務增長。
業務場景
米莊作為金融工具類產品，功能操作場景不算復雜，強調一致性的用戶體驗和安全規律的操作路徑。這也體現了產品對于不同頁面元素之間的相互關聯性和一致專業性的要求。
用戶調研
結合我們進行的用戶調研報告，米莊產品的核心用戶對我們產品的需求是賺取零花錢居多，也就是利益的獲取。所以針對明確的用戶目標，我們對于整個產品的設計需要以產品可操作性、性為第一原則，呈現的視覺層以安全可靠，清晰明確為風格導向。
從以上三個方向，我們概括了設計價值觀核心的三點：
格式塔心理學
心理學的完形法則：相似、相近、封閉、簡單。
MIZ Design 的設計原則參考了格式塔心理學，取人和萬物交流的過程中，大腦最基礎的一些精神反射和行為操作，格式塔心理學的理論主張研究意識和行為，強調經驗和行為的整體性，這也符合了米莊的設計價值觀里關于效率和自然的定義。所以我們參考此心理學來幫助團隊順暢地溝通，減少信息不對稱以及學習成本，作為協作的基礎。
第一性原理
埃隆·馬斯克非常推崇的思維模式是 「First principle thinking」，也就是「第一性原理」。它是一種演繹法思維，自上而下來看，就是從原理出發，一步步往前推演，直到找出適合該問題的解決方法。自下而上反推，那么它的原則便是從結果出發，把事物分解成最基本的組成，看透事物的本質，從源頭解決問題。這和原子設計理論也非常有相通性。巴菲特的伙伴查理·芒格也是第一性原理的積極實踐者，他將此原理視為科學界和商界非常古老的一條守則。
奧卡姆剃刀原理
Entities should not be multiplied unnecessarily.
如無必要，勿增實體。
奧卡姆剃刀定律是由英國奧卡姆的威廉所提出來的。他提出「切勿浪費較多東西去做，用較少的東西同樣可以做好的事情」，也叫簡約法則，是一種迅速決策和判斷認知行之有效的工具之一?？梢院唵卫斫鉃楸３质挛锏暮唵涡?。在各個學科，各個研究領域都有發展。這個原則至少可以追溯到亞里士多德，他寫到：「Nature operates in the shortest way possible」，自然作為一個穩定的，持續自我生長的系統，發展原則是盡量保持簡約之道。
設計資產層面，我們輸出的內容包含了以下兩大部分：
MIZ UI KIT_3.0 LIBRARY：
MIZ UI KIT 說明文檔：
開發層面 – 溝通，減少重復
基于 UI kit 創建的組件庫，幫助他們在最終產品中保持代碼的一致性和復用性。并且設計語言作為一種工具，是整個團隊順暢溝通的最重要的語言。所以我們確保我們的設計語言，是能夠讓開發，產品都懂，并在第一時間執行的。既然是語言，那么每個元素都會有自己的名字。每個組件，甚至每個組件中不同屬性的元素我們也賦予它名字。
無名萬物之始，有名萬物之母。──《道德經》
我們的祖先發明語言文字的過程，其實就是一個給萬事萬物命名的過程。而名字是連接人和世界的渠道。名字也是主觀的，因此它有情感溫度，也會有文化偏見和個人信息資產的反應。所以我們需要給設計系統中的每一種組件都給予屬于它的名字，才能讓它成為一種專屬于你們產品的特殊語言。
場景：
開發：#000和#00000000分別替換成什么顏色？
設計師：#000，替換成 black-1
開發：那#00000000呢？
設計師：一臉茫然，這 2 個不是一個顏色嗎？
慣性思維，色值在設計師眼中，對應的是一種色彩，而在開發眼中只是一堆數字。將心比心，當你扔給開發一個色值的時候他們只是一個難過的問號；而當你給他們具體的一個顏色的名字，他們能馬上對應到這個名字，那么就是順暢的。
所以當我們給顏色命名以后，溝通就變成了以下這樣：
設計師：#ff5600 換成 orange-2。
開發：好的。修改完成。
設計師：#ff3450 全部替換成 blue-2。
開發：好的，替換完成。
設計師：這次我們品牌升級，orange-2 的色值更改為 #ff5666。
開發：好的。全局修改完成。
雖然修改的過程比較辛苦，但是結果是好的。從此設計師掌握了話語權。當然，開發也很高興。
不單單是色彩，我們對字體、icon 以及間距等也定義了尺寸。給抽象事物以不同的命名來賦予它意義，也能讓使用者使用它產生價值。
設計層面 – 輸出，快樂傳承
設計師們可以更加便捷地創建、分享、定義設計界面的內容。此外，在設計傳承方面，也能讓我們更好地將設計原則傳遞給新人。
場景：
設計師 a：此次版本迭代涉及到優惠券頁面的優惠，這個頁面的字體和顏色有規范嗎？
設計師 b：有的。請參照設計規范。
不同設計師在接到需求開始設計以后會擔心：怕風格有差別，怕頁面不統一。辛苦做好頁面以后發現和別的設計師同時做的差別很大，也不符合產品整體品牌調性，陷入循環改稿中。此時設計規范就是迭代的明燈，天上的北斗七星，指引方向讓你不偏離終點。
同步更新：設計資產的目標用戶，除了團隊中的前端開發，那么最大受益者其實就是設計師們。設計系統的一大優點便是修改設計系統中任何一個原子，整個系統所有這個原子都能感知到。這便是設計系統的可持續性、統一性，也是設計系統的基礎。
△ 組件庫中的任何修改，會同步到所有使用該庫的文檔中
自定義內容：組件中的內容都可自定義進行修改。
解放重復生產力
Here’s the simple truth: you can’t innovate on products without first innovating the way you build them. ──Alex Schleifer
這句話的道理和我們的設計原則中第一性原理相通，從原理出發，一步步往前推演，直到找出適合該問題的解決方法。這和在構建設計系統的時候是一個道理。學習從元認知能力開始，而組件一個系統，從元件開始。埃隆·馬斯克從組成汽車的發電機開始思考，創辦了特斯拉；從底層元素的創新開始，才會有產品整體性的創新。
最后補充一下結構圖：
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
響應式已經成為網頁設計的主流，目前已很多網站能兼容手機端 ，但是唯有 dashboard 的界面是相當難在移動端顯示，特別是數據復雜、內容較多的后臺數據，是很難直接展示到移動端的。
今天我們分享一系列 dashboard UI 設計作品，主要展示一些用戶數據、圖表的可視化組合設計。這些作品界面布局合理，層級分明，設計美觀，對要做這類 UI 的同學有很好的參考價值。
– 01 –
by limor.tabeka
– 02 –
卡路里消耗跟蹤器 by Cuberto
dribbble.com/cuberto
– 03 –
健身活動追蹤 by Cuberto
– 04 –
醫院 APP 設計 by Nicat Manafov
dribbble.com/nicatmanafovv
– 05 –
by Stelian Subotin
– 06 –
– 07 –
by Zoeyshen
dribbble.com/zoeyshen
– 08 –
by Gabe Becker
– 09 –
by Cedrica
dribbble.com/rddstudio
– 10 –
by Michal Parulski
http://dribbble.com/Shuma87
– 11 –
by Divan Raj
dribbble.com/divanraj
– 12 –
by Maciej Ka?aska
dribbble.com/themce
– 13 –
by Gregory Muryn-Mukha
dribbble.com/murynmukha
– 14 –
by Saepul Rohman
dribbble.com/SaepulRohman
– 15 –
by Dmitro Petrenko
dribbble.com/ortimd
– 16 –
健康生活 APP，by OKatarina
dribbble.com/OKatarina
– 17 –
暗色系移動端后臺 by ortimd
dribbble.com/ortimd
– 18 –
by Riko Sapto
dribbble.com/RikoSapto
– 19 –
by Taras Migulko
dribbble.com/migulko
– 20 –
電子單車 APP 后臺設計 by Arnar ólafsson
dribbble.com/pollur
– 21 –
by Cedrica
dribbble.com/cedrica
– 22 –
交易證券數據界面設計 by Iftikhar Shaikh
dribbble.com/iftikharshaikh
– 23 –
記帳應用統計界面 by Matt Koziorowski
dribbble.com/mattkoziorowski
– 24 –
by Matt Koziorowski
dribbble.com/mattkoziorowski
– 25 –
銀行 APP 數據界面 by Vlad Ermakov
dribbble.com/ermalength
– 26 –
比特幣交易界面設計 by Pawel Kwasnik
dribbble.com/pawelkwasnik
– 27 –
醫療護理app用戶后臺 by Masudur Rahman
dribbble.com/uigeek
– 28 –
by Manoj Rajput
dribbble.com/manojrajput
– 29 –
這個展開菜單很好看呢 by Martin Mro?
dribbble.com/martinmroc
從收集的這些 Dashboard 界面來看，它的展示形式和PC 端有很大的區別，移動端的后臺只能顯示少量或簡化版的數據。比如 PC 一個頁面的功能，在移動端可以分開1-2個頁面來區分，或者使用類似 Tab 的形式來展現。
如果是手機 WEB 端可以用響應式來解決，以節省成本，但這樣通常交互并不十分友好，如果時間和成本允許的話，建議產品和交互人員策劃新的后臺版本。
藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
在整體設計流程中，用戶故事可以說是點亮應用絕對目標的那一點星光。該片文章的作者將給我們講解為什么哪怕是小范圍的采用用戶故事也能給整體UI設計流程帶來巨大的好處。
一支設計團隊坐下來討論為一家新客戶所設計的應用的第一輪模型情況。隨著團隊成員不斷提出想法，我們發現大家對于這個應用是什么？其功能應該是什么樣有著截然不同的看法。后來，會議迅速變成了“誰對誰錯”而不是“什么對什么錯”的爭論。大家紛紛為自己的設計辯護，但沒有一個人站在用戶角度說話。聽著耳熟嗎？正是在這種時刻，我們迫切需要描繪用戶故事。
今時今日，很多UI/UX專業人士都開始意識到自己工作的環境進入了Agile狀態。Agile開發（和設計）流程需要快速推進，相應地，我們也需要能夠實現快速、協作的工具。這個聽起來像是個矛盾，但實際上確實有很多工具能夠幫助我們在不增加項目時間的情況下有效合作。用戶故事就是針對“Agile法”的工具，在運用到UI設計流程時，其能夠為后續的設計階段提供堅定的基石。簡約版的用戶故事操作起來幾乎不用時間，但卻能對保證項目按軌道運行帶來奇跡般的效果。
我們的UI設計團隊會在流程中運用用戶故事，而在運用過程中我們發現，用戶故事幫我們做到了三件事。
1. 用戶故事可以讓產品以用戶為核心。
2. 用戶故事可以促進團隊成員之間的合作。
3. 用戶故事可以防止出現功能蔓延以及設計死胡同。
從根本上說，用戶故事的用途是描述用戶通過使用軟件產品想要實現的任務。用戶故事起源于Agile和Scrum開發策略，但是對于設計師來說，用戶故事主要用來提醒用戶目標以及對各個界面設計進行整理和排序。
一個用戶故事就是簡單的一句話?？梢杂眠@句作為模板：“作為用戶我需要（基本用戶目標）”。因為故事都很簡短而且有針對性，所以需要多個不同的故事來覆蓋所有可能的用戶案例。事實上，我們會想辦法把每個故事進行細化。
舉個例子，一個用戶故事剛開始時是：
“作為用戶我需要創建一個新帳戶。”
但是新建帳戶的過程中又涉及到哪些步驟呢？用戶需要提供用戶名、密碼以及其他相關信息。其中每個操作都需要有相對應的用戶故事，故事越具體，到后期對設計師和開發來說就會越方便。那么，“創建新帳戶”就可以進一步細化為：
“作為用戶我需要輸入一個新用戶名?！?br data-filtered="filtered" /> “作為用戶我需要輸入密碼?！?br data-filtered="filtered" /> “作為用戶我需要再次輸入密碼進行確認?！?br data-filtered="filtered" /> “作為用戶我需要提交信息，創建帳戶?！?
這樣繼續下去，最后就會得到一大長串用戶故事，其中大部分都需要加入到最終產品內。
我們最近為Quiksilver服裝設計了一款iPad應用，可以讓銷售其貨物的店鋪跟蹤當前存活狀態，以便輕松下單訂新貨。就是這么一款看似非常簡單明了的應用，我們想出了266個用戶故事（剛開始時）。你們都沒想到細節能夠細到這種程度吧！
作為設計師，我在第一次和項目相關人員開會的時候就會開始考慮布局和配色方案。在聽他們說目標以及了解終端用戶情況的同時，我就能想象出這款應用應該是什么樣的。但關鍵在于不能本末倒置——我們要先確定用戶故事，讓用戶故事道出設計，而不能倒過來搞。
在對應用的所有用戶故事做完腦暴之后，我們會把故事放到Google的合作電子表格上，以便客戶在想到有其他用戶故事時隨時添加。在客戶和團隊感覺已經窮盡所有內容之后，我們會給每個故事一個編號。這些編號到項目后期會派上大用場，我們會用編號作為一個簡明的標簽來表示哪些故事需要在哪個時間段處理。
這個表格的功能不僅是提醒我們應用的功能，還能讓我們在整個流程中與用戶緊密相聯。每個用戶故事都是針對于我們終端用戶的，以便保證始終照顧到他們的需求。這一點在一個有關約會應用的項目中表現的尤其明顯。
關于這個應用，我在給“用戶資料”頁面做線框圖的時候，最開始以為需要添加一個“保存用戶”功能按鈕。但是，我不經意瞟了一眼“用戶資料”部分，突然想起來用戶故事中的一個細節：“作為用戶我需要收藏其他用戶?！?
把“保存”一詞改成“收藏”這個決定雖小但很關鍵，因為“保存”用戶聽起來冷冰冰的，而“收藏”則契合了用戶有關約會的心態。設計師容易陷入到技術的陷阱中，特別是在對功能投入了大量時間之后。而用戶故事可以提醒我們時刻以用戶體驗為核心，因為用戶體驗是最終決定應用性格的東西。
UI設計通常涉及到的人不止一個。其中還可能包括客戶、設計師、程序員以及一大堆的其他職位工作人員，具體要取決于公司的規模大小。從很多方面說，這就類似于一隊人劃船。要贏得比賽，團隊的每個成員都要以相同的速度朝著相同的方向一齊劃槳。這并不是說所有人的意見都要始終統一，而是說所有人都要有統一的目標并且清楚自己在團隊中的角色。
雖然我們在CitrusBits所采用的流程遠算不上完美，但是我們卻發現用戶故事能夠保證船上的人勁都往一處使。以用戶故事為基準做出決策讓我們得以明確定義出應用的目標。這樣一來就大大降低了團隊合作時的障礙，因為我們用簡短、有針對性的詞句明確定義出了共同的目標。
另外，用戶故事還能讓身處不同地理位置的團隊更加輕松的合作。我們在為一家舊金山客戶開發一款問答類應用時，我們在海灣地區的團隊會時不常的和客戶碰面討論應用要求。他們寫出了用戶故事（但并沒有在項目期間進行其他修改）然后放到了Google Drive。而我們身處洛杉磯的團隊則可以在畫線框圖的同時隨時參考用戶故事，并進行必要的改動。要不是有了這個步驟，這個項目所花費的時間會長的很多，而且還會需要通過大量漫長的解釋工作來解決這些簡短用戶故事幾分鐘就能解決的問題。
“功能蔓延”是一個UI設計中常見的詞。它是指相關人員會不自覺地不斷增加新功能，擴展項目范圍，這既包括硬件也包括軟件方面。
這幅漫畫完美地詮釋了功能蔓延。
當然，在項目進展期間我們是不反對更改要求的。但是，除非有明確的用戶故事告訴我們原因，我們會拒絕哪怕添加一個簡單的文本框。我們之所以在這方面這么強硬，是因為之前看到過有的項目超出控制、丟掉中心最后無法實現最初設定的目標。
舉個例子，不久之前，我們有個客戶忽略了用戶故事這回事。當時我們正在給一家處理保密資產的公司搭建應用，客戶想要做一款能夠管理員工之間通訊的應用。主要的通訊手段是一個使用文字信息和圖片的公司內部對話平臺（這一點我們都認可了），這個我們記錄到了用戶故事里。后來，客戶又要求增加視頻、語音信息和位置分享。為了保持我們“靈活”的形象，我們想辦法把這些內容加入了新的通訊系統，也因此擴大了項目范圍，推遲了時限，在做完了全部工作之后我們卻發現添加的內容其實對終端用戶沒用。
盡管新增的功能也很屌，但我們最開始的初衷是做一款盡量簡化通訊的應用以便促進團隊建設和協作，不讓他變成一個公司內部的Facebook。于是，我們又回到了用戶故事并重新提醒了客戶做應用的初衷，最后成功組織了功能蔓延，回到了正軌。多方面的實驗盡管能帶來很多很棒的成果，但是如果產品無法滿足根本要求，再精巧也沒意義。
通過這次教訓，我們在開發Quicksilver這個針對B2B公司的銷售類應用時嚴格遵照用戶故事開展流程。最后，最終產品一絲不茍地遵守了最初設計，這主要歸功于我們在前期積累了一套全面的用戶故事。以用戶故事為基石為后期節省了大量工作，同時也讓我們的工作更加有序、更加以用戶為中心。盡管產品的每次迭代都帶來了更多的用戶和客戶反饋，但產品理念的核心一直屹立不倒。
每個用戶故事對于設計團隊和開發團隊來說都有自己的一套意義。時刻思考技術限制雖然說是好的，但是畢竟我們說的是“用戶故事”，不是“開發的故事”也不是“設計師的故事”。正因為我們通過用戶故事對用戶的觀點進行了排序整理，我們才能更輕松地了解所面臨的問題進而創造出一款真正有用的最終產品。
藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
不要小看一個登錄界面，它內里包含很多細微的東西，除去外觀視覺，更多要注意的是交互的操作體驗，比如一些動畫、一些文案提示等細節都要注意，如果你是UI設計師，建議看看這次經驗文章，附上了大量案例，也許能助你未來更好的去設計一個用戶體驗友好的APP登錄界面。
下面通過幾個關于登錄界面的UX策略指南，讓你更好的應用和實踐。
如果用戶使用你的服務必須登錄，那么信息字段是你必須要做的主要功能（即輸入框中的提示語，如：輸入手機號碼，輸入驗證碼。）
使這些字段清楚可視，并且不要強迫用戶到處尋找，或花更多的步驟進到App. 一旦他們進到App, 登錄界面是他們所應當見到的第一個事情。
獎勵提示：相比于使用常見的“登錄”“登陸”的按鈕，可以更富有創造性，并要包含可直接輸入區域。確保記住用戶的數據，這樣他們就不需要每次輸入信息。
更多地時候，我們看到注冊和登陸按鈕被放置的靠近彼此，但是這會對用戶產生反作用。
這兩個動作都包含了相同的動詞，并且看起來也很相似，所以他們會混淆用戶的選擇。在有限的時間內進入問題，他們可能會感到沮喪并且離開。
基本上，任何界面上不應該有使用戶“暫?！焙汀八伎肌钡脑亍?
如果你想讓他們的體驗完美無瑕，分開這注冊和登陸兩個區域，并且使差別清晰可見。另外，你可以使用不同的動詞或者簡單解釋不同的字段是什么。
在登錄和注冊部分，增加不同的輸入字段。
除了動詞“Sign”是事實之外，另一個另用戶感到困惑的是，登錄和注冊部分通常有相同數量的輸入框（用戶名，密碼，和郵箱）。
為了完全地區分，最小化新用戶嘗試直接登錄的機會。用不同的輸入字段。
當大多數用戶的密碼由于安保原因被打了馬賽克，用戶頻繁遇見的另一個問題是打錯他們的密碼。
這甚至會發生在很有經驗的打字員身上，特別是當他們在移動設備上登錄的時候。
防止這種情況發生的做法是：在密碼字符旁邊包含一個“顯示密碼”的單選框或圖標。
如果應用監測到一個錯誤的密碼組合，和用戶名，但是沒有明確的報告給用戶問題是什么，用戶可能會多次嘗試后，很生氣的退出應用。
這是為什么你應該考慮通用的回復（例如“你的密碼或郵箱不符合”），并且給他們立馬回復怎么解決這個問題。
問下郵箱地址或電話號碼，而不是唯一的用戶名
為什么人們登錄時人們很少記住“用戶名”？如果使用用戶名登錄，你會面對很多可避免的困難：用戶名必須是一個唯一的，這意味著人們會重復嘗試輸入一個系統里目前還沒有的用戶名，或者最終使用其真實姓名。
過了一會兒，用戶想出了一個唯一的登錄名，但是只過了一小會兒就忘記了，因為這個用戶名對他沒有任何的意義。
另一個事情可以促進登錄，是提供給用戶幾個登錄選項，并且給他們機會來選擇和嘗試用戶名而不會沮喪。在這過程中強迫的一部分是允許他們使用郵箱地址和密碼來注冊。
忘記密碼發生在所有人身上，這也是為什么，你急迫的給到用戶一個機會來恢復密碼，那么就直接在登錄界面這么做吧。
所要做的就是，在輸入框下增加一個“忘記你的密碼”的鏈接，并讓系統能給用戶的郵箱或電話號碼發送驗證碼。
為了避免強迫進入和暴力攻擊，許多網頁和應用在一系列的錯誤嘗試之后關閉賬戶。
安全第一，但是你至少要嘗試告訴用戶，在多少次嘗試后，在關閉賬戶前，他們必須離開。你也可以分享更多的細節，例如，在試錯后的十分鐘才可以再次嘗試的事實。
如果在過去，都是在用相同的無風格和定制化的登錄頁?，F如今，給你的應用，創造一個獨特的登錄頁設計是非常重要的事情，尤其是你想要圍繞你的應用和服務來創造品牌。
設計師和開發人員也有承認意識到登錄表單的重要性。這是事實，特別對于移動環境下，用戶界面相比于“桌面”網站，扮演了更重要的角色。
當為一個應用和移動站設計這個元素的時候，設計師花很多的精力，使它既好用又美觀。
在這篇文章里，你會看到很多移動端用戶界面設計的案例靈感，關于一個移動端登陸頁面應被設計成什么樣，給你一些線索。
Roostio Login Screen
Login Screen
Job Board – Company Profile / Login
Shopping app
Tailslife: Login
Moody Sign Up/In Screen
Bandio App Login & Sign Up
Parts – login dark side
Login Screens
ZSSK – login and route detail
DailyUI Day001
Skype Redesign
Sign Up Window – Daily UI #001
對用戶來說，登陸已經很困難了，所以，使之變得更復雜，對你的產品來說并不是一個很聰明的決定。避免更大的和不熟悉的形式，并且讓輸入字符簡單可視。這些只是一些為了節省用戶時間可以考慮的技巧，并且幫助他們享受你所提供的服務。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計
藍藍設計的小編 http://www.syprn.cn
