如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
UI走查表有什么用？
一套成熟的UI走查表能更科學更地改稿；減少設計中的反復試錯、評審交付時更言之有物；不僅僅停留于“看上去順眼”、“我覺得挺好”、“先這樣”的視覺表層。更深一層來說，走查表有助于培養設計師的結構化思維，形成一個完整的設計體系。
01.頁面要表達的意思是否正確
在設計頁面的時候，需要注意頁面要傳達給用戶的信息重點，例如本次案例的產品需求中，該頁面的功能是促使用戶快速下單，信息上則要側重于價格與優惠信息。
首屏信息是給用戶的第一印象，在用戶打開頁面，盡可能展現出更多用戶感興趣的內容， 而此次頁面需要突出促銷優惠信息，次要信息則放在后面。
02.頁面視覺重點
相信大家平時經常聽說0.618的黃金比例（斐波那契數列），屏幕方寸間合理運用黃金比例可以讓界面視覺重心更加平穩，視覺更加舒適。同時有助界面區域分割，集中視覺焦點，承載更重要的信息，讓整個界面布局更加合理。
淘寶、京東到家等成熟的一線產品黃金比例運用，o在視覺焦點區域都向用戶展示了關鍵信息。
02.元素間距符合各層級的關系
為什么頁面會雜亂無章？主要是信息一味地堆砌，分布沒有區別，但只要遵從以下方法，頁面就會清晰很多，有節奏的呼吸感也出來了。
同類的板塊不應被混亂的間距區隔開來，他們應該更集中，并且整體與別的板塊區別開來，同理，不僅僅是板塊，元素與元素之間也是如此，這樣用戶可以更加快速地看到自己想要的東西。
那么，如何更好地讓信息按照相似屬性分布合理呢？這就要利用5分、等分原則來讓分布變得更合理，假設相同板塊的間距值為a px，則不同板塊為2apx。這樣不僅在視覺可以將信息分布開來，還能讓整體的布局更加規整，不會凌亂，盡可能使用同一或者同倍數的間距，更便于開發。
案例中，相近元素的間距為16px（a px），則不同類別的元素則為32px（2a px）。
01.字體種類的控制
一個產品如果字體種類過多，會導致界面的不統一與混亂。通常字體控制盡量在3種以內，中文字體、英文字體以及特殊數字字體。如下圖：
02.字號與粗細控制
字號過多使信息失去重點，基礎字號控制在3種以內，目的在于清晰區分信息的層級。正文字號建議為28px，副文案為24px，大標題、價格等重要信息需按實際情況加大，令信息的層級區分更明顯。
加粗字體往往是整個界面的視覺焦點，重點的文本（如標題、價格）需要加粗處理，注意控制字體加粗的使用，以免造成信息層級的混亂。 下圖為調整字號及粗細的前后對比：
03.行距控制
行距太小不便于用戶閱讀，太大會顯得松散，所以控制在1.2-1.5倍的范圍是較為舒適的范圍。下圖為調整行距的前后對比：
04.字體顏色
字體主要以黑白灰為主：#333333?#666666?#999999；字體顏色深淺有序能讓信息層級主次分明，產品應該根據不同模塊以及同一模塊的層級需要調整不同的灰度值，并在產品中反復使用，統一規范輸出。
信息越重要，字體顏色越深。除此之外我們還需要注意到什么呢？也是很多剛入行的設計小伙伴很容易忽略的細節，產品的實際使用環境。比如，我們此次改版的產品詳情界面就是線上下單，線下提貨的運營模式，不僅需要考慮室內使用環境，還需要考慮到特殊的室外強光環境。結合下圖感受一下。
如何在強光環境下保證產品良好的視覺體驗呢？這也是UI走查表需要注意到的細節點：強光測試(大于4.5:1)。
4.5：1經驗數值參考前輩行業經驗總結：
https://www.sitepoint.com/making-bootstrap-accessible/
我們先觀察一組顏色對比，如下圖：
我們會發現字體顏色層級依然是深黑色、中黑色、淺黑色，相信很多設計師朋友已經注意到我們使用的顏色更深了，為什么呢？為了保證好在強光環境下的信息閱讀可閱讀性，如下圖：字體信息最淺層級，淺黑色的色彩數值對比數值都大于4.5:1。
強光測試鏈接：https://webaim.org/resources/contrastchecker/?fcolor=0000FF&bcolor=FFFFFF
有細心的設計師朋友或許已經注意到色彩值并沒#333/#666/#999那么便于記憶了，為什么呢？
為了提升更好的視覺感受與界面的品質感，我們在字體顏色中采用了偏藍灰，至于為什么，大家不防給我一起觀察下圖，上圖灰色看上去略微有一些臟臟的感覺，下圖視覺更耐看、更有質感。
騰訊新聞、金色財經App中的也應用到了偏藍灰，帶來種撲面而來的清爽。
除了常用字體層級的顏色對比，在界面中針對關鍵的賣點信息還用到強調色，即品牌色
品牌色也會經常運用到特殊字體、提示文字、鏈接等等。
改版前，促銷信息缺少提示入口；改版后，以品牌色作為入口字體顏色，引起用戶注意。
01.視覺比例
由于圖標通常都是成群結對的出現，彼此之際的統一性顯得非常重要，但是常常容易被忽略，可以制定如下圖的圖標盒子來規范尺寸。
02.圖標設計要點
設計圖標時應注意基礎形狀復用，保持整體識別性。如下圖重復使用矩形、圓形、橢圓形等基礎形狀進行設計，既能統一大小又有整體感。
面性圖標
設計時需要注意挖空比例的一致性，保持圖標的整體性。如價格走勢、降價通知這一排圖標，挖空比例控制在20%
線性圖標
設計時應注意保持良好的線條粗細的統一，案例中使用2px的粗細線條重復使用，所有圖標的粗細與文字粗細一致，和諧統一
03.圖標尺寸
在app中，功能圖標大致可分成兩種：可以點擊的按鈕；不可點擊的展示圖標。
可以點擊的按鈕常用于導航欄、tab欄、操作欄（吸底按鈕圖示）常用尺寸為：48x48px 64x64px。如下如的導航和吸底按鈕都用了48x48px的大小。
不可點擊的展示圖標常用于信息展示位置（價格走勢/規格/評論等圖示）常用尺寸為：24x24px 32x32px，如下圖，評論模塊中的展示圖標使用24x24px，價格走勢則使用了32x32px的尺寸。
04.標簽的走查規范
從商業的角度，標簽是為了凸顯產品賣點，比如你在商場時常能看到“全場低至2.9折”這類的促銷信息，其實在界面中同樣也會有，目的就是為了抓住用戶貪小便宜的消費心理，對比沒有標簽的同類商品，用戶會更佳傾向與有有標簽的商品。
常用標簽樣式有三種表現樣式，面性：填充一整個色塊；線面結合：低飽和度的色塊結合高飽和度的描邊；線性描邊：1px粗細描邊；
如上圖：為展示清楚，在原來基礎上放大了1倍，運用規則與之前提到的圖標一樣，根據模塊功能的重要性去搭配，按照重要到次要的排序是：面性>線面>線性
標簽呼吸感規律：
很多初級設計師都在疑惑到底標簽文字定多大合適呢？標簽字號一般為：18-22px
以"自營"標簽為例
如上圖：外框邊距橫縱向成2倍的倍數關系，所以以后在畫標簽，只要先定好字號大小，剩下的邊框邊距就按照2倍的關系去拓展
為了確保我們做視覺稿的時候易于文本的閱讀我們通常會用到一些配圖，而這些配圖通常也影響著我們整個界面的美觀度，一個優秀的設計師在設計作品時都會特別的注重圖形與圖象的比例，圖片的選取當然也是重中之重，那么我們在項目中應該如何選取圖片并且正確的使用圖片的比例呢？
01.圖片使用的規范
第一點：首先就是要做到讓圖片的背景保持統一并且做到干凈整潔
第二點：圖片主體的比例大小跟其他圖片保持統一避免出現有些圖片展示局部有些圖片展示整體
02.圖片模塊的常用使用比例
UI設計中圖片的比例會比較的多常用的有下列幾種
1：1，這種比例比較適用于電商，它可以讓商品圖片展示最大化。也是目前電商最主流的圖片使用尺寸。如下圖：
16：9，這種比例比較適用于視頻，這是標準的人體工程學比例，根據人體工程學家的研究發現人的兩只眼睛的視野范圍并不是方的，而是一個長寬比例為16：9的長方形，所以我們看到的視頻比例通常會采用16：9。如下圖：
4：3，這種比例應用于新聞類APP比較的多，它源自于一些微小型相機最原始的尺寸比例，不需要進行過多比例的裁剪，應用起來比較方便，對于需要展示大量的圖片信息類的產品來說特別的適用。如下圖：
如果你還是不知道如何去使用尺寸，那么你可以直接查找相關競品進行設計。
壓軸給大家帶來一個小驚喜，我們整理了一個較為完整的設計走查表，希望在實踐中能夠幫到大家。
藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
上周和小伙伴一起翻譯了一篇 medium 上點贊量超多的文章（8.1k贊），該文作者在電子產品的界面設計領域有13年的從業經驗，也經歷了從架構師到用戶體驗設計師再到如今的產品設計師的多次職業轉換，文章主要是講他對用戶體驗設計的犀利吐槽，以及對產品設計所代表的工作方法的無限看好?；蛟S觀點上并沒有什么新意，但是，就像某大佬說的，設計是對混亂的馴服。想要馴服混亂僅憑理論套路是遠遠不夠的，而設計師真正的價值或許也就在于此：投身于未知與混沌的灰色之中，并且還要從中分出黑白。
那么為什么我要翻譯這篇巨長的文章呢？就我個人而言，單純很喜歡作者傲慢中帶著犀利的風格，就像看一篇文字版的吐槽大會般有趣。我在翻譯的時候加上了自己的思考和看法，所以，文末也留了 medium 的原文鏈接，可以去查看作者的本意，并觀看其中的演講視頻。
這是關于我從架構師轉變到用戶體驗設計師的一段經歷，以及我是如何看待行業現狀的。
十年前的某一天，我決定要把我的職業從架構師改成用戶體驗設計師。我記得當時很多可用性專家、架構師、界面設計師、交互設計師對我說：這只是潮流而已，「用戶體驗設計」這個表述并不，簡直就是胡說八道，體驗怎么可能被設計？
然后在去年，我又突然決定把我的職業從用戶體驗設計師改成產品設計師。同樣的，一群用戶體驗設計師又來對我說，這只是潮流而已，用戶體驗設計師和產品設計師之間并沒有什么本質的區別。
但是，對我來說，它們是不同的。在我看來，產品設計更加的謙虛真誠。我覺得這是用戶體驗設計師不具備但最應該學會的：謙虛務實。
我不是在勸你像我一樣改換職業名稱（坦白地說，你最好別這么做），我真的一點兒也不在意。我只是想告訴你，我決定轉變的原因，以及我是如何看待行業現狀的。
很膚淺的話題，聊職稱大概是世界上最無聊的事兒了，但是作為設計師們，我們又確實很喜歡討論它。或許，這次我們可以聊的更深入一點。
我一直很喜歡 Alan Cooper 提出的這個詞：交互設計師（interaction designer）。我認為它很地抓住了這項工作的本質。但是早在十年前看來，這個詞的定義就已經很狹隘了。數字產品的設計師們希望工作能觸及到更多的內容，而「用戶體驗設計」似乎就承擔了這個「需要觸及更廣泛內容」的責任。
它確實抓住了這個需求，現在 UX 這個詞廣泛流傳，每個人都在使用這個縮寫，但問題是每個人對它的理解是不同的。所以，直到現在它也是個令人疑惑的概念。
在Peter Merholz 的一次訪談中，Don Norman 對創造 UX 這個詞的初衷做了如下解釋：
我發明了這個詞是因為我覺得人機交互和可用性這兩個詞兒太狹隘了。我想要創造一個可以覆蓋人們體驗各個方面的系統，包括圖形設計，界面，體感交互和這個系統的使用手冊。但從那之后，這個詞就開始廣泛地流傳，慢慢地失去了它本來的意義。
如今它偏離本來的意義越來越遠，以至于 Alan Cooper 先生說：根本沒有用戶體驗設計這回事。
在我們盡可能擴寬工作邊界的努力之下，我們把 UX 這個氣球吹得快要爆掉了。UX 現在承擔了「設計不同觸點的體驗」的任務，包括組織轉型，制定策略，改革創新，市場營銷，設計從 app 到廣告、服務、設備、地點、事件，甚至公司文化在內的所有事情。
或許用戶體驗確實應該做到這些，但是問題是，沒有一個用戶體驗設計師能一個人把所有的這些事情做好，要創造一個復雜的產品，你需要的是一個由不同領域專家組成的團隊。
我不得不說很多 UX設計師真的是眼高手低，他們根本不具備足夠的技能或者經驗去支撐他們的野心。
我同時也負責招聘的工作，大多數申請 UX 這份工作的求職者可以分為以下幾類：
當然，以上只是一種簡單的歸納，但是從我的觀察來看，很多做 UX 的都可以歸到這三類人當中，因為真的很少見到那種既懂戰略又會戰術，既有創造力又有執行力，既了解商業又懂設計的人才。
UX設計師日常做的事情以及他們對商業的價值根本配不上他們的自我認知：「用戶體驗設計很重要 」。
用戶體驗設計實際上并不像很多「什么是UX」的文章寫的那樣是所有事情的中心。我推薦你去看Paul Addams在UX London 2018上的優秀演講——《The end of Navel Gazing》。標題「用戶中心論的終結」很好地表達了這個意思。
我觀察到的另一個現象，是關于用戶體驗設計目前的狀態的。UX設計師們每天都會發表數不清的文章，它們大部分都是關于研究工具以及方法論（例如用戶畫像，用戶體驗地圖，原型制作工具，用戶研究方法等等），各種教程，無關緊要的圖形設計趨勢，或者用戶界面細節。
Fabricio Teixeira 和 Caio Braga 寫了一篇優秀的文章來說明這些理論的狹隘之處：
https://essays.uxdesign.cc/state-of-design-publishing/
然而，這些我們經常討論的東西，對于處在殘酷商業競爭環境下的產品設計團隊來說，并沒有什么用。因為計劃與管理實際的產品開發進程和理想的「Design thinking 五步法」之間并沒有太大的關系。
整個 UX 行業好像對商業這部分都沒什么興趣，也難怪，「用戶體驗設計」這個名字就暗示了他們只關注用戶。商業是別人的事。
也難怪會冒出 UX 的忠實捍衛者們了，如果你膽敢不同意他們的信仰，他們就會把你的心扯出來。
僅僅只要說一句：用戶研究不是總是被需要和有實際意義的。他們就會告訴你如果你不會用戶研究，你就不是一個合格的用戶體驗設計師。如果你個人并不是很喜歡一些方法論，像用戶畫像或者其他，你最好趕緊默默溜走。
可悲的是，UX們總是想成為最有創新能力的人。但是我認為他們并不是。因為，創新力需要嘗試不同的工作方法，考慮新鮮的想法，要求與眾不同以及靈活多變，敢于實驗，勇于實踐，并擁有商業頭腦與落地思維。想要成為真正的革新者，需要的是自己去開創自己的道路，去突破規矩，去冒險。而不是重復說那些所有人都在說的簡單的陳詞濫調，遵從那些輕而易舉的方法指南。我覺得 UX設計師整個群體都搞不清楚地圖和實際道路，模型（或其他噱頭）和現實之間的差別。（只有這些「革新者」的想法才很容易被預測：因為他們所有人都讀一樣的書，說著同樣的話。）
我從事數碼產品的設計有13年了，現在我不覺得我和大多數的 UX設計師之間有什么共同點。我覺得我已經超越了用戶體驗設計。我跟產品經理或產品需求方之間更為投契。
Peter Merholz 在他的一次演講中說過，用戶體驗這個行業的出現是因為產品經理對用戶體驗缺乏考慮，我同意這種說法。
數字產品就是我現在正在做的，像網頁，app，界面。我的目標是為我的客戶創造一個成功的產品，一個會幫助他們賺錢或者省錢的產品。可用性和用戶體驗只是實現這個目標的一部分，它們很重要，但是說實在的，并不是最終的目的。我不會像大多數的 UX設計師那樣不切實際的浪漫主義。
我也需要為我自己和我的公司賺錢，所以我要擅長規劃一個有效率的設計流程，估計好預算，有條有理地和客戶進行合作，銷售與推廣我的工作，招聘人才等等。
我知道我很擅長數字產品設計，但是我可能并不擅長做所有類型的設計。這就是為什么我更喜歡「數字產品設計師」這個頭銜的原因了。
我喜歡它的點在于，它更聚焦于產品而不是用戶。它把我的工作放在了資本市場的背景之下。產品需要對顧客有用，但是也需要切實地有利可圖。
對我來說，無論它是什么，聽起來，「產品設計」比「用戶體驗設計」都更加的落地。產品設計更容易被所有人理解，甚至你媽媽也能懂。它不需要太多解釋。用戶體驗只是它的一部分，但是從另一方面講，比起想要解決世界上所有問題的萬能藥UX 來說，產品設計這個說法更加的謙虛。
現在我大部分時間依然是在做交互設計和信息架構這種傳統工作。我大部分的精力也都是花在制定策略，進程管理和設想概念的層面。但是我也正在帶上許多的帽子：決策者，界面設計師，架構師，文案，創意總監，項目經理，產品需求方，用戶研究員，測試人員?？傊睦镉行枰睦锞陀形?。
當然我需要和很多人（他們是各自專業領域的專家）一起合作來實現我的愿景，然后把它迭代變得更好，更完善。技術專家，開發者，圖形設計師，內容設計師，項目經理，甚至律師等等。最后的用戶體驗其實是很多這些人的工作共同作用的結果。
用戶體驗是很多人工作的結果，是一個產品或者服務生產出來的，并不是一個職位的描述。
我會把產品設計師定位為這樣一個角色：他們是那些為產品功能和形式的最終呈現負責，并能夠以任何可能的方式對設計流程以及產品的發布進行規劃和優化的人。（如果你還把產品設計僅僅看作是 UI/UX 的另一個名字，這對你毫無幫助）對于很多有經驗的 UX設計師來說，并沒有什么新鮮的，但是產品設計確實和 UX 不同。
我看到如今，越來越多的有經驗的 UX設計師稱自己是產品設計師了，所以，也許這是一個潮流吧。又或許是某種原因？
Andy Budd，一個有著很棒的見解的家伙，我一向很尊敬他，最近他發了一個推特說：UX就像爵士樂，產品設計就像朋克樂。
好吧，我的看法跟他完全相反。打比方說，如果你想成為一個 UX設計師，你現在要做的只需要去上個周末課程，學習設計過程的5步法以及5個方法論，像用戶畫像，用戶體驗地圖，愿景圖，你就可以開始干活兒了。
但是成為一個產品設計者，你需要把產品交付給市場的實際經驗，這非常的難，因為經常是一團混亂，復雜的過程。產品設計就像自由的爵士樂?？赡苈犉饋砘靵y嘈雜，有一點像朋克樂，但是想要把它玩好，你需要很多的技能和經驗以及音樂理論的掌握，也需要一些即興創作的能力：改變規則甚至是反對它們。更不用說，在團隊中，你需要成為整個團隊工作的主導。
無論你想叫自己什么，無論你有多大的夢想，但，也要記得保持真實和謙卑
藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
現在讓我們關注最常見的設計專業：UI/UX設計師。
在進行設計練習之前，你需要做的第一件事就是學習一些設計原則。這樣你才能夠進入設計世界，并開始進行“創造性”的思考。你會學到心理學對設計方案的影響，例如：為什么它看起來不錯，為什么會失敗。
下面是你應該了解的一些設計基本原則。
1、顏色
色彩詞匯，色彩基礎和色彩心理學。
設計原則：色彩
2、平衡
對稱性和不對稱性。
設計原則：平衡
3、對比
使用對比來組織信息，構建層次結構和創建焦點。
設計原則：對比
4、 排版
選擇字體和在網絡上創建可讀的文本。
易讀性的10個原則與網頁排版
5、一致性
最重要的原則，創造直觀和實用的設計。
設計原則：一致性
下面是設計好的界面一些好的方法和需要注意的事項。
接下來要了解創作過程，UI / UX設計是設計都要經歷的特定階段。它分為四個不同的階段，發現、定義、開發和交付。
創作過程
發現
在項目的最開始，設計師會開始研究，獲取靈感并收集想法。
定義
在定義階段，設計人員定義從發現階段提取的想法。由此創建了一個清晰的創意設計方案。
開發
在這里創建原型，測試和迭代解決方案或概念的地方。這種反復試驗過程有助于設計師改進和完善他們的想法。
交付
最后交付階段，項目會最終確定并且投入使用。
了解設計原則雖然有很大的幫助，但這是遠遠不夠的，還需要培養你的視野，知道什么是好的設計和壞的設計，并且能找到設計方案的優缺點。
在打開一張空白的畫布并盯著它看半個小時之前，你明白創新的唯一方法是通過研究。培養你的設計視野的最有效方式是通過看更多的設計方案來尋找靈感。尤其當你是初學者的時候，有時候無法自己打開腦洞，這時候你必須先看看其他人的設計。
瀏覽靈感類網站
所以看看其他設計師在Dribbble上做了什么，每當你遇到漂亮的設計或與你的項目相關的東西時，將它保存在筆記中并能說出你為什么喜歡，你也可以截屏保存。通過這種方式，你將擁有一個豐富的設計素材庫，設計之路由此展開。
為了讓自己盡快的熟悉設計，最好的方法是每天閱讀一些文章。讓閱讀設計新聞和博客成為日常習慣。我們有數百萬篇在線文章可供我們了解新趨勢，設計方法和教程。我們所要做的就是找到它們，沒有比從其他人總結的經驗中學習更好的了。
讓閱讀文章成為日常習慣
在早上學習新事物會擴充你的腦洞，并為白天創造騰出更多的空間。因此你早上可以在Medium或Smashing Magazine看一些優秀的設計文章，開始新的一天。
另外要注意勞逸結合，不時地休息一下，閱讀更多設計內容。特別是當你陷入困境并感到沒有想法的時候，更有停下來休息，休息對于創造力非常重要。你可以將您喜歡的網站收藏為書簽或訂閱設計博客。
實踐是檢驗真理的唯一標準，并且我們清楚的知道，沒有設計經驗我們就無法獲得客戶/工作。但如果沒有客戶/工作我們就沒有辦法加強設計技能。所以我們可以通過自己的實踐來打破這個循環，進行概念項目設計以獲得樂趣以及成長！Dribbble上有很多的概念設計，他們都做的很棒。
Facebook Material Design by Kevin McCarthy
你可以花點時間選擇你感興趣的網站或App并重新設計它。你可以完全賦予它新的創意和意義，并且由此你將形成你的設計風格和作品，獲得快速的成長。
我們有很多的設計工具，但你不需要都了解。你只需要選擇你喜歡的并且適合你的工具即可，并隨時了解的功能和趨勢，以下是我在設計過程中使用的工具：
界面設計：Sketch
用于協作界面設計：Figma
用于低保真線框圖：Axure
用于界面設計和原型設計： Adobe XD
可交互動態原型：Principle、Flinto
用于原型設計和協作：Invision App
學習設計的另一個好方法是找到愿意提供幫助的設計導師或設計師朋友。他們將幫助您加快學習進程，導師或者設計師朋友會對你的設計方案會盡可能地發表意見。這就像一條捷徑，他們還會分享他們的經驗和方法論以及設計技巧。因此請向有經驗的設計師或者導師提出問題并討論您的疑問。
另外在我教授設計和前端的幾年時間里，我學到的東西比我教的要多很多。所以當你準備好如何與人們討論設計時，你可以指導或教育某人有關設計的知識。你將學習從不同的角度看待它，你將獲得你可能從未想過的反饋和問題。
每當你和其他人談論設計時，你的思維將一直處于“頭腦風暴”模式，你會發現自己越來越對設計產生興趣。
藍藍設計( 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 KIT之后，則可以直接利用KIT里的組件快速搭建好頁面，把設計師從基礎工作中釋放出來，大大提升設計效率。
目錄
一、為什么要建立規范
二、規范的適用范圍
三、如何建立規范
1 利于多人協作，提率
2 增強一致性，塑造品牌感
制作和遵循設計規范，能夠保證整個產品的交互效果和視覺風格、乃至文案的統一性，提升用戶的體驗。
3 減少冗余內容，方便維護和更新
同類內容使用一樣的組件，能夠降低輸出的內容量，減少冗余的控件和代碼。同時也便于維護，在迭代時進行統一的更新和應用。
4 利于工作交接
方便設計團隊和其他團隊交接，如果團隊有人員變動，也方便后續入職的同事能夠通過規范迅速熟悉產品，快速上手。
前面的文章我提到過，如果產品處于啟動期的話，這個時候最重要的事情是圈到第一波用戶，讓自己活下去。在這個階段產品會頻繁的改版、驗證，迭代非常快，整個團隊可能都處于拼命加班的狀態。在這種情況下做設計規范文檔顯然事倍功半，一個是浪費人力資源，另外就算做了，在頻繁更新的背景下也很難去執行。
因此設計規范文檔更適合于那些跨越0-1階段的產品，這個時候產品已經用有了一定的用戶，團隊也會擴張。這個時候我們可以選擇制作基礎的設計規范，比如柵格、配色、字體、圖標規范等等。對于成熟期的產品來說，大版本更新的周期是非常長的，這個階段通常會制作更為詳細的設計指南、設計原則、do & don’t、品牌書、圖標手冊等等。
電商類的產品對于大家來說都是比較熟悉的，就算不從事這個方面，日常使用也會很頻繁，所以此次案例我們以下面這個電商APP作為示范。
做規范時通常會有這兩種情況：
1、不打算進行大版本更新的產品
對于小版本迭代的產品來說，建立規范只需要在sketch里把所有設計稿進行歸攏和分類。直接根據現有的稿子梳理出規范，再對不符合規范的文件進行調整即可。
2、新版本 新規范
而對于需要做新版本并且建立新版本規范的產品來說，在做設計稿之前，我們就需要先統一一些基礎的內容，比如顏色、字體、柵格等等，然后在設計過程中去制作KIT、對基礎的規范進行補充。
1 制定統一的柵格系統
因為現在都是一稿適配多端，所以首先需要確定設計的基準尺寸，是基于iphone8？還是iphone 8P？或者1080*1920等等……每個公司設計稿的基準都不一樣，我們是以一倍圖為基準進行設計的，所以我這里的基準尺寸就是375*667，單位為pt。
柵格一種情況是制定網格系統，網格系統的話首先要制定最小的設計單位，比如淘寶的最小單位是3，掌閱的最小單位是4，airbnb的最小單位是6……定好最小設計單位之后，界面中所有間距采用最小單位的倍數。
假定我們最小單位4的網格，排版時橫向和縱向的間距都是4的倍數，比如8、12、24。
第二種情況是可以直接建立橫向柵格系統，常用的是12柵格，12柵格比較好的地方是能夠同時被2、3、4整除，因此能夠根據具體需求靈活的設計各種模塊。當然如果產品比較輕量化，是不需要這么復雜的柵格的，可以根據需求設置6、4甚至2柵格等等。
2 色彩規范
色彩規范主要表明色彩的色值和使用范圍，一般會從品牌色、輔助色、基礎色、狀態用色等等。如下圖所示。
如果產品常用到漸變的話，需要注明漸變的角度以及漸變色的色值。包括產品如果有夜間模式的話，要額外注明日間和夜間模式下各個顏色的對應色值。當然這里的夜間模式說的是真·夜間，而不是微博那種直接加一個黑色透明度蒙層的偽·夜間。
額外提一句，重要內容和正文內容要保證文本的可識別度，WCAG指南中指出，文本和背景色的對比度需要達到3：1。大家可以通過
https://webaim.org/resources/contrastchecker/ 的顏色對比檢查器來核對顏色。我這里的品牌色和強調色對比度為3：1和6.3：1，而輔助顏色（比如標簽）的對比度則在2-3之間。
3 字體
字體規范最需要注意的是提取出各個場景下需要用的字體和字號。
需要注意的是，要標注上應用場景方便其他人理解。不然其他成員也并不知道到底什么時候應用一級標題、什么時候用二級標題。
4 圖標
通常來說圖標分為兩種，功能性圖標和展示性圖標。
功能性圖標是為了引導用戶理解和操作，需要表現和簡介，方便用戶識別其含義。功能性圖標常規狀態下為無彩色。
展示性圖標通常為頁面入口，會有更多形狀、顏色、質感的表達，吸引用戶的注意力和點擊欲望，強調差異性，比如各種品類區的圖標、徽章、等級圖標等等。
圖標規范通常來說會先定一些基礎尺寸，梳理好各個頁面的圖標尺寸，進行整合，最后確定好幾個基礎尺寸，比如我這里的基礎尺寸是4個。功能層級一致的圖標尺寸要一致。
為了保證不同形狀的圖標在視覺上保持大小一致，會制作一個圖標的基礎制作說明。制作說明里會統一圖標的圓角、描邊的粗細；如果是涉及到展示性圖標的話，還會有圖標的視角選擇、配色的選擇、以及如何表現質感等等等等
5 默認圖
電商APP的話有大量的產品圖片，所以我們也把默認的占位圖樣式進行了統一。因為我們這里樣式都是一致的，所以采用了統一的規范，如果有多種默認樣式，或者有其他類型的占位圖，需要分別進行說明。
頁面組件通常包括導航欄、工具欄、彈框、列表、卡片、空狀態等等，按照原子設計理念來說，還可以把組件拆分為原子、分子等更小的基礎設計組件，比如角標、標簽、按鈕、圖像、優惠券、選擇器、進度指示器等等
頁面組件除了梳理出規范之外，通常會整理成一整套UI KIT，保存為sketch文件日常拖拽使用，或者導入為Libraries直接調用。當然，也可以直接在KIT上備注出規范和注意事項，具體輸出什么格式這個看團隊的需求即可。
因為組件部分是一個比較龐大的內容，需要根據具體產品
1按鈕
按鈕一般有懸浮按鈕、填充按鈕、線框按鈕和文本按鈕等類型。其中懸浮按鈕具有最高的優先級，屬于強引導型按鈕。
按鈕通常會有三種狀態，常規狀態、點擊狀態和不可用狀態。因此在規范中需要標明按鈕在這三種狀態下的樣式，比如顏色、投影、圓角、文字大小等等
除此以外，也可能會有加載狀態，也就是在點擊按鈕后，如果有1S以上的數據延遲，通常會考慮觸發按鈕的加載狀態。加載狀態的按鈕樣式為按鈕上顯示進度指示器。
2 導航
對現有頁面的導航進行收攏和分類，比如我這里分類為常規標題樣式、標簽樣式、搜索框樣式、無標題樣式、字母導航……
標題需要注意文字的極限值，ICON尺寸和位置的話要考慮最小可點擊區域，我這里icon的尺寸設置為24pt，但是熱區是44pt，所以要注意間距的設置，熱區不能重疊。
3 標簽
標簽通常有多個使用場景，我們可以對標簽進行分組，比如運營類標簽、內容屬性標簽、篩選標簽等等
然后對每類的標簽統一樣式、文字內邊距以及說明適用場景。
4 彈窗
彈窗是為了提示和通知用戶而位于頁面內容之上的一種控件。它是引導用戶專注于某一項任務，用戶可以通過操作來關閉彈框。彈框包含模態（對話框、操作菜單）和非模態（toast、 snake bar等）兩種形式。
模態彈窗需要定義蒙層的樣式（顏色、透明度），以及彈框內的文字說明和按鈕。
我這里拿一個對話框的規范進行舉例，這是一個無ICON的雙按鈕對話框，因此在這里我們需要說明標題、正文文本、按鈕以及背景遮罩的信息，還有字號、行距、文字極限值、文字色、按鈕的狀態等等……
除此之外，組件類的規范可以配上常用案例、don’t&do，會更方便團隊人員理解，防止錯誤狀況。
5 列表
列表是由多個等寬的行組成的、按照一定規律排列的連續條目。列表在一些資訊類產品里會有更多的組合形式。我這款產品里用到的列表主要是單行和雙行列表，那么我們就整理出對應的列表類型和需要說明的事項。
寫這篇文的初衷，是因為從去年底我建立公眾號，并且在站酷發表了一些文章，得到了很多人的認可。很多粉絲私信我各種問題，陸續有人問我設計規范怎么做、交互規范什么樣之類的問題。但是公司內部的文件確實沒有辦法公開分享，所以我就想說，那不如專門寫一篇文章詳細教大家制作移動UI設計規范吧。
這篇的基礎部分我做的比較詳細，組件部分寫的有些概括，主要是因為組件部分不是通用的，要根據自己的稿子進行整理和歸納，歸納好之后做好標注和規范說明即可，這部分是一個羅列的內容，所以就不必展開了……
當然還有很多內容沒有展開說，比如在Sketch里把KIT制作成Libraries統一使用，但是我想作為一篇設計規范入門教程目前應該足夠了，更多的內容我在后續開新文去補充吧。
藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計
藍藍設計的小編 http://www.syprn.cn
