如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
最近一段時間一直在建立APP的設計規范，從一開始的立項到現在落地上線，可以說是從零開始進行APP全部細節的梳理并且規定規范，這一路走過來還是能總結出很多心得，本文將分為3個部分，闡述如何從0到1建立設計規范。
目錄：
一、如何確定內容，規范里要寫什么
二、如何寫
三、如何推動規范落地
一、如何確定內容？
這里我總結了三步：
1）確定目標用戶、用戶目標、設計目標
根據不同的用途和目標，不同的團隊對設計規范的制定是不一樣。比如為了指導與規范全球第三方開發者進行設計和開發，Google建立的Material Design覆蓋面廣，每個組件細節寫得非常細致。Ant Design則是直接做出了組件，方便直接進行調用。有些國內設計團隊的規范則是主要描述常用控件和色值。因此我們需要確立用戶目標和設計目標，這樣才能確定我們的規范側重點是什么，需要做成怎么樣的形式。
在這里我列舉了自己撰寫規范時的用戶與目標：
2）模范大平臺，先列全
一個規范里面的東西是很多的，那么我們究竟需要做什么呢？假如一開始我們沒有方向，找一個，列一個，這樣我們很容易疏漏很多情況。在這里我采用的的一個辦法是：首先熟讀iOS，Material Design規范，并且模范他們，在腦圖中，把規范中應含有的所有內容羅列出來，羅列一個大綱。
這里我列舉當時自己做的一個腦圖大綱，覆蓋了主流規范中的所有細節，大家可以進行參考并模仿：
3）針對自己情況進行刪減
列完齊全的大綱后，我們需回顧設計目標，對大綱里的內容進行刪減。（比如在組件、模式這些地方，可以對著自己的APP，進行挨個尋找，看自己的APP當前是不是運用了這個組件，沒有的話就進行刪減。）
在這里我列舉了針對自身APP的情況刪減后的大綱圖：
二、如何寫
進過了以上的三步，我們基本得出了要寫什么的框架了，接下來就是如何寫規范的階段。
這里我總結了3步：
1）確定優先級
我們可以通過版本迭代計劃+性價比+重要性（該組件在頁面出現的場景次數以及當前的不統一對APP體驗影響程度）這幾個維度分別確定每塊內容的優先級和分工?；A的、必要的、高性價比的放在第一期，復雜的向后放，隨著產品的迭代，我們的規范也會越來越完整。
同時需要留意版本規劃，了解即將要做的功能或即將要改版的頁面。我們可以提高這里面牽涉到的控件、組件等內容的優先級。龐大復雜，牽涉到很多頁面的，我們可以先降低其優先級：比如全局提示框的規范，toast的規范。
同時，我們也需常與開發溝通，爭取把可復用性高、組件日后變化幅度少的組件做成開發組件庫。
2）確定規范書寫格式
我們制定的規范本身也是設計的交付物，假如每個設計師都按照自己的喜好來編寫規范，那么這個規范本身也會變得不規范，規范自身保持一致性是提高規范閱讀效率的一部分。
我們可以回歸我們之前制定的用戶目標和設計目標來制定我們規范的書寫格式。規范的用戶群是誰，主要想達到什么作用，是通過文檔展示還是網上展示，確定了這些問題后，就可確定規范的詳細程度、主要的展示形式（比如前文說到的Ant Design和Material Design）。
這里我的思考點是：假如規范寫太多字就會變得很臃腫，沒有人喜歡慢慢仔細的閱讀你寫的規范，所以我們應該做到寫得簡明扼要，再輔以例子說明（根據開發的習慣，都是喜歡直接看例子，看標注）。
我的書寫格式是：先寫描述這個組件是什么，再列舉出現的場景，然后編寫交互規則，最后給出視覺標注+例子。
3）逐步對單個規范進行整理與書寫
當確定了要寫什么東西和格式之后，我們開始進入到細節，對每個內容進行整理，制定規范了。
通過對每個內容制定規范規范也是有方法的：
下面我通過整理“列表”這個規范來講解：
1.收集出現的所有的場景。
當一個產品已經趨于成熟，這個組件出現的場景就會非常多，比如對話框，toast，列表這些組件出現的地方很多，需要我們自己仔細地體驗產品，把所有頁面都找出來。
2.提取共性，歸納分類
我們需要分析每個頁面的特點并且把相同特點的頁面歸納一起，眾多的頁面場景就能整理成幾個典型的種類，然后只需對這幾個典型的種類進行定義和描述即可。
在列表中，我分為了大封面列表、小封面列表、用戶列表、單行列表
3.編寫規則
在分類好后，我們可以對每個種類編寫規則，在這里我們需要描述好每個種類有什么特點或屬性，什么時候場景下適用，并且給出標注和例子，方便閱讀者理解。
4.多與組內成員討論修改
在制定好初稿后，我們可以與組內成員宣講下自己制定的規范。多從別人的角度出來，確保你編寫的規范是否易懂，是否包含了全部的情況，是否容易執行落實。
三、如何推動規范落地
寫完內容后，最重要的一步就是推動落地，規范要真正有人用才能體現價值，在這里我給出幾點幫助推動規范落地的小建議：
1.制定規范推進進度表
表格里面應該包含規范制定的優先級，分工進度，分工人員，并且確定每一期進度的交付時間，開會討論的時間，作為負責人，也可以適時提醒成員每次的開會時間（畢竟deadline是第一生產力）。
2.編寫過程中多與其他成員討論，達成一致性共識
制定規范后，與部門其他人員進行宣講，灌輸概念，針對如何更好的落實進行討論調整。在設計中都不可能一次就完美，我們需要不斷的在修改中逐漸完善。
3.規范建成后放在網上
同步在網上，方便部門內的其他成員能隨時查看和團隊成員對規范的更新修改、同步。
4.強制性制定規則要求團隊成員執行。
有明確的懲罰機制和要求才能更好的執行，不然在規范制定后很容易健忘此事。（我們組的懲罰機制就是罰錢）。
5.規范保持持續的更新迭代。
規范推動落地后并不是完全了事，要根據產品的迭代，保持規范的更新。
這整個制定規范的項目中，還是有不少反思的地方，值得我們深思和注意：
1.切記不要為設計規范而做規范
規范最重要的點是能推動落地，能確確實實改善產品，達到統一性。因此我們在設計規范時，并不需要“高大上”術語，給出一大堆的設計理念用來提升設計逼格。而是真正的回歸到我們的設計目標，針對目標用戶制定規范，做到簡樸、易懂、能落地。
2.沒人愿意閱讀長篇文字
我們應該盡量控制文案長度，做到通俗易懂即可。
3.要時刻圍繞我們的目標做規范
比如，我這次做的規范中有一項是去工具化，在制定控件中，空白頁面中就會加入很多趣味化的設計。
4.靈活變通
規范只是適合大多時候的場景，對于一些規范中沒有包含或者不符合規范的場景，我們可以靈活變通，積極創新或者是補充新的規范（前提是與組內積極溝通，達成共識）。
總結：
再來回顧如何從0到1建立規范
一、確定內容
1.確定用戶目標和設計目標
2.模仿大平臺，列全
3.針對自己情況進行縮減
二、寫
1.確定優先級
2.確定規范書寫格式
3.逐步對單個內容進行整理與書寫：a.收集全部情況 b.分類歸納 c.提取共性，編寫規則
三、推動
1.制定規范推進進度表
2.編寫過程中多與其他成員討論
3.把規范建成后放在網上
4.強制性制定規則要求團隊成員執行
5.規范保持持續的更新迭代
今天分享的內容就是這些了，希望能幫助到大家，感謝閱讀~
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
經過一個多月的閉關潛修，新MMORPG回合制游戲《魔力物語》近期又準備和大家見面了。至于具體的開測日期，容小編先賣個關子（PS：我絕對不會說其實我也不知道）。在上次結束之后，我們針對測試出現的問題進行修復并優化游戲。在一個多月的優化中，游戲將會脫胎換骨，以更完善的姿態和大家見面。下面就讓大家看下游戲UI界面優化的成果。
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
用css隱藏頁面元素有許多種方法。
opacity屬性的意思是設置一個元素的透明度。它不是為改變元素的邊界框（bounding box）而設計的。這一位著將opacity設置為0只能從視覺上隱藏元素。而元素本身依然占據它自己的位置并對網頁的布局起作用，它也將響應用戶交互。
visibility
第二個要說的屬性是visibility。將它的值設為hidden將隱藏我們的元素。如同opacity屬性，被隱藏的元素依然會對我們的網頁布局起作用。與opacity唯一不同的是它不會響應任何用戶交互。此外元素在讀屏軟件中會被隱藏
注意，如果一個元素的visibility被設置為hidden，同時想要顯示它的某個子孫元素，只要將那個元素的visibility顯式設置為visible即可。
dispaly
display屬性依照詞義真正隱藏元素。將display屬性設為none確保元素不可見并且連盒模型也不生成。使用這個屬性，被隱藏的元素不占據任何空間。不僅如此，一旦display設為none任何對該元素直接打用戶交互操作都不可能生效。此外，讀屏軟件也不會讀到元素的內容。這種方式產生的效果就像元素完全不存在。
任何這個元素的子孫元素也會被同時隱藏。為這個屬性添加過度動畫是無效的，他的任何不同狀態值之間的切換總是會立即生效。
不過請注意，通過DOM依然可以訪問到這個元素。因此你可以通過DOM來操作它。
position
假設有一個元素你想要與它交互，但是你又不想讓它影響你的網頁布局，沒有合適的屬性可以處理這種情況（opacity和visibility影響布局mdisplay不影響布局但又無法直接交互）。在這種情況下，只能考慮將元素移出可視區域。這個辦法既不會影響布局，有可能讓元素保持可以操作。
隱藏元素的另一種方法是通過剪裁它們實現。
1、opacity:0
2、visibility:hidden
3、diaplay:none
4、position:absolute
opacity
.hide {
position: absolute;
top: -9999px;
left: -9999px;
}
.hide {
clip-path: polygon(0px 0px,0px 0px,0px 0px,0px 0px);
}
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
用css隱藏頁面元素有許多種方法。
opacity屬性的意思是設置一個元素的透明度。它不是為改變元素的邊界框（bounding box）而設計的。這一位著將opacity設置為0只能從視覺上隱藏元素。而元素本身依然占據它自己的位置并對網頁的布局起作用，它也將響應用戶交互。
visibility
第二個要說的屬性是visibility。將它的值設為hidden將隱藏我們的元素。如同opacity屬性，被隱藏的元素依然會對我們的網頁布局起作用。與opacity唯一不同的是它不會響應任何用戶交互。此外元素在讀屏軟件中會被隱藏
注意，如果一個元素的visibility被設置為hidden，同時想要顯示它的某個子孫元素，只要將那個元素的visibility顯式設置為visible即可。
dispaly
display屬性依照詞義真正隱藏元素。將display屬性設為none確保元素不可見并且連盒模型也不生成。使用這個屬性，被隱藏的元素不占據任何空間。不僅如此，一旦display設為none任何對該元素直接打用戶交互操作都不可能生效。此外，讀屏軟件也不會讀到元素的內容。這種方式產生的效果就像元素完全不存在。
任何這個元素的子孫元素也會被同時隱藏。為這個屬性添加過度動畫是無效的，他的任何不同狀態值之間的切換總是會立即生效。
不過請注意，通過DOM依然可以訪問到這個元素。因此你可以通過DOM來操作它。
position
假設有一個元素你想要與它交互，但是你又不想讓它影響你的網頁布局，沒有合適的屬性可以處理這種情況（opacity和visibility影響布局mdisplay不影響布局但又無法直接交互）。在這種情況下，只能考慮將元素移出可視區域。這個辦法既不會影響布局，有可能讓元素保持可以操作。
隱藏元素的另一種方法是通過剪裁它們實現。
1、opacity:0
2、visibility:hidden
3、diaplay:none
4、position:absolute
opacity
.hide {
position: absolute;
top: -9999px;
left: -9999px;
}
.hide {
clip-path: polygon(0px 0px,0px 0px,0px 0px,0px 0px);
}
移動端推廣速度快，效果好，越來越多的企業，商家開始重視移動站的建設和移動頁面（h5）的制作。隨著移動頁面的玩法越來越多，對前端技術的要求也會越來越高。
關于移動設備一些基本概念的理解。
網站示例
網址：https://github.com/amfe/lib-flexible；
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
本文聚焦 Airbnb 產品，描述10大可用性原則的應用場景，希望能夠幫助你更系統地理解10大可用性原則。
Visibility of system status
The system should always keep users informed about what is going on, through appropriate feedback within reasonable time.——Nielson
系統應該在合理的時間內通過適當的反饋，始終讓用戶了解正在發生的事情。
這項原則通常被遵循并使用在如下幾個場景：
Airbnb 的房源詳情頁頂部導航，可以通過點擊快速定位到房源的某類信息，讓用戶清晰地知道「我在哪？我還能去哪？」
在發布房源時，系統頂部模擬了進度條，顯示出了當前步驟，以及當前的發布進度。
Match between system and the real world
The system should speak the users’ language, with words, phrases and concepts familiar to the user, rather than system-oriented terms. Follow real-world conventions, making information appear in a natural and logical order.——Nielson
系統應該說用戶的語言，用戶熟悉的單詞，短語和概念，而不是系統導向的術語。遵循現實世界的約定，使信息以自然和合乎邏輯的順序出現。
這項原則說的直白一些，就是：「說人話」。
產品簡單到傻瓜也能操作，是喬布斯和張小龍做產品的核心理念。坐擁10億用戶的微信之父張小龍說過，做產品要有傻瓜心態。不要炫耀自己的智商，不要讓用戶覺得自己是白癡，請用最簡單直白的語言描述狀況；就好比自然世界里，你和他人說話的時候必然使用簡單的白話文進行直白的溝通以保證交流順暢。
在房源的詳情頁、Airbnb PLUS 介紹頁，系統用了大量高質量的攝影圖片傳達一種空間氛圍感。同時，在介紹文案的措辭方面，簡潔易懂，語言邏輯清晰。
User control and freedom
Users often choose system functions by mistake and will need a clearly marked 「emergency exit」 to leave the unwanted state without having to go through an extended dialogue. Support undo and redo.——Nielson
用戶通常會錯誤地選擇了系統的某個功能，并且需要一個明確標記的」緊急出口「來離開不想要的狀態，而不必進行擴展對話。支持撤消和重做。
用戶擁有自由使用和控制系統的權利，最為常見的就是系統會為用戶提供「撤銷、重做、返回」的入口。
在故事專欄，當用戶在瀏覽器當前標簽頁進入下一級頁面時，系統都為用戶提供了返回按鈕，一方面方便用戶來去自由，另一方營造出了一定的沉浸式瀏覽體驗。
Consistency and standards
Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform conventions.——Nielson
用戶不應該懷疑不同的話語、情況或行為是否在表達同樣的一件事情。系統設計需遵循平臺慣例。
在房源、故事集列表頁，系統統一用了卡片式的視覺風格，并且每個卡片里的文字與背景圖片的層次也都保持一致。
在房源詳情頁，系統使用了統一的 iocn 風格和文字風格，傳達房源的設施屬性。
Error prevention
Even better than good error messages is a careful design which prevents a problem from occurring in the first place. Either eliminate error-prone conditions or check for them and present users with a confirmation option before they commit to the action.——Nielson
比良好的錯誤提示信息更好的方法是：一個走心的設計可以提前防止錯誤的發生。系統要么消除容易出錯的情況，要么檢查它們，并在用戶采取行動之前向用戶提供確認選項。
如果房源在某天或多天已被預定或暫時不開放，則日歷里將這些不可預定的日期置灰。
用戶在修改個人重要信息后，系統會讓用戶輸入密碼二次確認。
Recognition rather than recall
Minimize the user’s memory load by making objects, actions, and options visible. The user should not have to remember information from one part of the dialogue to another. Instructions for use of the system should be visible or easily retrievable whenever appropriate.——Nielson
通過使用對象，動作和選項的可視化表達，最大限度地減輕用戶的記憶負擔。用戶不應該記住從對話的一部分到另一部分的信息。
系統會在首頁第一屏為用戶展示瀏覽歷史（登錄后）。
搜索框也會保留最近5次的搜索歷史。
Flexibility and efficiency of use
Accelerators?—?unseen by the novice user?—?may often speed up the interaction for the expert user such that the system can cater to both inexperienced and experienced users. Allow users to tailor frequent actions.——Nielson
一些被精心設計的體驗也許會被專家用戶察覺到，使系統需要能夠滿足無經驗和有經驗的用戶。允許用戶進行頻繁的操作。
當用戶在滾動屏幕瀏覽房源詳細信息時，系統將預定的基本信息（如：價格、日期、人數等）固定在瀏覽器的右側，方便用戶在瀏覽過程中隨時開始預定步驟。
Aesthetic and minimalist design
Dialogues should not contain information which is irrelevant or rarely needed. Every extra unit of information in a dialogue competes with the relevant units of information and diminishes their relative visibility.——Nielson
對話中不應該包含無關緊要或很少需要的信息。在對話中每增加一個相對重要的信息，就意味著需要弱化其他信息。
高顏值不需要理由。
Help users recognize, diagnose,and recover from errors
Error messages should be expressed in plain language (no codes), precisely indicate the problem, and constructively suggest a solution.——Nielson
錯誤信息應該用通俗易懂的語言表達（不要用代碼），較準確的反應問題，并且提出解決方案。
實在無法避免的報錯時，不要單純只是報錯，要提供解決方案。就好比小時候犯錯，你絕不能光說：「啊，我錯了?！估蠋熁蚣议L必然會追問：「錯哪兒啦？」你要是說不出緣由，則必定被認為認錯不誠懇不真心。
當用戶填寫錯誤時，系統會及時給出提示以及解決方法。
Help and documentation
Even though it is better if the system can be used without documentation, it may be necessary to provide help and documentation. Any such information should be easy to search, focused on the user’s task, list concrete steps to be carried out, and not be too large.——Nielson
如果系統能讓用戶不需要閱讀文檔就會使用那是最好的，但通常情況下還是需要幫助文檔的。任何信息應該容易被搜索，且專注于用戶的目標任務，并列出具體的步驟來告知用戶。
在個人資料頁面，對于用戶關心的隱私信息，系統會給出非常有親和力的解釋文案。此外，在系統很多頁面都有對應功能的幫助鏈接以跳轉至幫助中心。
系統的幫助中心，提供了搜索和問題分類引導，方便用戶快速定位問題。
△ 本文圖片版權歸 Airbnb 所有
號稱以設計驅動的 Airbnb 公司，的確在產品設計、用戶研究、UX設計方面展現出了較高的功力。網站甚至移動端APP 的框架層、范圍層、視覺層的設計都體現出了高度的用戶體驗一致性和品牌感。可以看出，Airbnb 對 design system 的重視一級高度的執行力。什么是好的產品品牌認知和識別，我可以簡單的理解為：「脫掉」Logo，用戶照樣認識你。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
很難想象，如果沒有原型設計，如今的數字產品設計流程會變成什么樣。原型的存在，讓產品團隊在制作和開發過程中更加直觀，就像那句話說的：展示，而非表述。
現如今，許多產品團隊借助原型來測試想法，甚至銷售產品。不過，原型設計本身并非是萬無一失的，設計師依然會面臨許多陷阱，并且拖累整個產品的進程。
今天的文章，總結了6個常見的原型設計的陷阱。
我們先設計出來，然后弄明白如何使用它。
在這種說法的指引下，設計和開發團隊需要花費大量的時間來處理那些沒有任何價值的事務，在沒有特定目標的情況下制作原型，會浪費大量的時間。
每個原型的設計目標應該是非常明確的，原因應該是清晰的。這個目標可以是源自于一個特定的想法，或者某種假設，產品團隊在這個方向的指引之下，利用系統化的知識來構建符合目標的原型。
在創建原型之前，設計師應該問自己一個問題，「通過創建這個原型我們要試圖解決什么問題？」如果能夠找到一個明確的答案，那么這個原型是清晰且具有凝聚力的，有助于減少潛在的開銷。
產品團隊通常會力圖制作出有效有用的原型。當制作出來的原型不可用甚至根本無法完成的時候，整個團隊會為之氣餒，而這種消極的心態可能會拖垮整個項目。
為了提率，設計人員應當將失敗的情況視作為整個原型制作過程中自然的組成部分。原型在很多時候是用來測試假設和想法的，并非每個假設都是有效的。這就是為什么創建工作原型不應該是原型制作工作最重要的結果。原型制作工作最重要的成果應該是獲取有用的信息和新的知識。因此，將焦點從失敗的情緒上，轉移到學習新的知識上來，成功和失敗的原型，都能夠讓你的產品進步。就像大家常說的，失敗是成功之母。
產品團隊常常在擁有第一個想法的時候，就想堅持住，將它打磨成為最終的解決方案。隨后，團隊花費大量的時間來出揣摩嘗試，調整細節，制作原型，甚至直接開始設計視覺稿。
結果，花費無數小時創建和打磨的原型，在可用性測試早期，就呈現出不理想的狀況，接下來，設計師和團隊會意識到最初的想法其實不夠好。
經驗豐富的團隊知道，想要探索和測試一系列的想法是必不可少的，并且只有通過測試之后，效果最好的方案，才是值得堅持做下去的?；ㄙM更多的時間來思考，團隊才能針對問題空間繼續挖掘下去，并且找到潛在的解決方案。
原型的設計者常常會對于自己的設計有大量的投入。這種投入是會造成一種「投資偏見」——你在某個事情上花費的時間越多，它對你來說就越有價值。值得注意的是，它對于你的價值會越來越高，但是對于別人而言并非如此。而原型設計同樣如此，當設計師對于自己的原型過度沉迷的時候，產品可能就會暴露在危險之下了：你會很容易忽略它們存在的缺點，即使這些缺陷很明顯，設計師也會忽略團隊成員和其他人的反饋。
不要拿原型當傳家寶。
在打磨原型上花費太多寶貴的時間和精力，會剝奪設計師對于反饋應有的注意力和敏銳度。讓你的原型在細節和復雜度上保持在一個合理的度上。
原型并不是藝術品，它應該是幫你找到答案的工具。
如果你傾向于采用盡可能完善的設計，那么請采用最小可行原型——添加足夠的細節，但是盡可能確?？尚小⒃鸵曌鳛橐淮涡缘墓ぞ?。每個原型都有特定的用途，一旦達到目標，就盡可能用更好的東西替換它。
「當我們擁有強大的原型工具的時候，為什么還要使用紙和筆呢？」設計師跳過手繪階段，并且直接使用計算機來繪制數字原型的時候，他們相信數字化的設計是可以節省時間的。但是實際上，手繪的草圖能夠幫助設計更快地起步。
當你下次不知道如何解決問題的時候，可以試著從筆和紙開始繪制草圖。只需要開始繪制草圖，勾勒出所能想到的變化，然后把它們貼在墻上，并且和你的團隊一起從技術和業務的角度上討論可行性。
保真度是描述細節程度的一種度量，我們常說的線框圖細節簡略，是低保真的，而視覺稿則常常會用到豐富的細節刻畫，它是高保真的。原型的呈現形態是非常多樣的，可以是低保真的也可以是高保真的。制作一個高保真的原型是非常誘人的，但是一定要抵制住這樣的誘惑。值得注意的是，原型的保真度應該和你想法的保真度相匹配。
這意味著，設計師應該根據他們的設計過程所處的階段來選擇保真度。當設計師違反這一規則的時候，往往會帶來糟糕的結果。比如過高的保真度會讓處于早期階段的設計師陷入「投資偏見」。
當團隊設計產品尚且處于初期的時候，盡量采用低保真的策略來進行繪制，比如使用草圖。
△ 低保真的草圖原型
當你想要與真實的用戶一起測試你的想法的時候，盡量使用保真度更高的設計，比如數字化的可交互的原型。使用高保真的原型來進行可用性測試，能夠產生更真實、具體的反饋。高保真的原型展示給利益相關者來看也非常有用，他們會更好地判斷產品的功能和內容。
△ 在 Adobe XD 中創建高保真的原型
因此，考慮最終的目標和你所擁有的時間，來確保原型的最佳保真度，盡早與期望達成一致。
原型設計在每個產品設計項目當中都是至關重要的，正確地設計原型，才能盡早地構建真實的產品。
關于原型設計，喬布斯在1992年 MIT 的演講上說到的一個事情非常有意思。彼時，他還未回歸蘋果，而是在制造名為 NeXT 的高端電腦，并且對于面向對象編程有著極高的熱忱。
我們已經有2年時間沒有構建任何工程上的原型了。這意味著，從產品開始設計的第一天，工程師和整個制造業就已經參與進來了。很多時候，在構造原型的時候，生產工具和技術根本是無法與之匹配的，而當你在原型設計的時候所積累的東西，在投產的時候就得完全拋棄，然后重新開始。因為我們始終緊密地和技術結合起來做，因此我們不會拋棄任何東西，并且不浪費時間，這也是我所見過的設計、工程和制造團隊之間，最健康的關系之一。
現如今，身為設計師的我們在使用 Photoshop、InVision 等工具制造原型的時候，實際上開發可能是與之脫節的。產品團隊中，設計和開發之間的矛盾，從來沒有僅此減少過。而「全棧設計師」這一概念的提出，又何嘗沒有來自這種矛盾的壓力呢？
諸如 Sketch 和 Figma 這樣的新工具在做原型設計的時候，已經或多或少地開始在設計和開發之間找到協同的點，試圖在設計驗證和技術驗證之間，找到結合的辦法。
更好的原型設計，更合理的技術和設計的結合點，這也許是我們未來的探索方向吧。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
我們不會放過一套好的ui素材，一定會把他們分享出來，而今天分享的就是由云瑞整理的2017年11月新出爐的ui套裝源文件下載，這些套裝都是極簡主義和扁平化風格的，都是當下最流行的，包含web和手機app界面ui，希望對您有用
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
對于圖標如何斷線，如果是經驗豐富的設計師，估計靠感覺做就可以了，但不是大神的我們怎么辦呢？總得有點規律讓我們參考參考吧，雖然有些規律不能全盤通用，但這次總結一定能給你帶來幫助。
來，看下大綱：
1.先考慮在拼接處斷線
2.平衡視覺復雜度
3.避免正中間處斷線
4.盡量讓圖標一筆畫完
1.先考慮在拼接處斷線
如果你覺得此篇文章對你有作用，請收藏轉發分享給你的朋友，把自己的收獲寫在評論區，小編會解答。
如果一個物體是由兩個部分組成，當我們選擇在拼接處斷開：
我會覺得兩個部分還沒組裝好，是一種很自然的分開。
但如果是下面這樣的：
我會覺得它壞了，很不舒服。
我們做斷線圖標的時候也一樣，可以先考慮在物體的拼接處斷線，讓斷口看起來自然和諧！
舉個例子：
下圖是一個“我的”圖標：UI設計學習群：583915450，領取100G學習資料，備注：資料領取
如果現在讓我給它來做斷線，我就先找到拼接處，分析如下：
雖然例子有點血腥，但事實確實如此，拼接處就在頭和身子連接的地方，所以嘗試在這里斷開：
哎呦，我覺得還ok。
行，那再來個例子！
下圖是個消息的圖標：
再來分析，它的外形是由一個矩形和一個三角形組成的：
我們還是在拼接處斷開，得到如下圖：
嗯，也還行！
所以一般來做斷線圖標，我就會先利用這一個規律看可不可行。
如果可行，就繼續優化細節，如果不可行再嘗試其他方法。
2.視覺復雜度要平衡
有時候，我們的圖標不好將其拆解，這時候我們就可以嘗試去考慮圖標的視覺復雜度。
來個例子，下圖是一個皇冠的圖標：
經過分析，我們可以得出，圖標紅色區域的復雜程度要比藍色區域高：
所以我選擇在藍色區域斷口，來增加藍色區域的復雜程度，達到平衡的效果：
那如果在紅色區域斷開是什么樣的呢，我們來分析對比一下：
所以，通過對視覺上復雜程度的解析后發現，方案一會平衡協調很多！
再來個例子，下面是個通訊錄圖標：
圖標的左側要比右側復雜:
如果我們選擇在左側斷線，那左側就會更復雜，這樣兩邊的復雜度就會失調，所以我選擇在右邊斷線：
這樣圖標左右都有細節，視覺平衡多了！
3.避免正中間處斷線
有朋友會說了，那有些圖標沒有拼接處，復雜程度也都一樣，比如下面這種：
怎么辦呢？
很簡單，這種圖標只要盡量避免在正中間斷線就ok，因為正中間斷線顯得過于呆板：
其它地方都可以嘗試，例如左上角、左上角、右上角、右下角等等。
4.盡量讓圖標一筆畫完
這也是一個很重要的知識點：如果可以的話盡量讓圖標外輪廓一筆畫完，如下圖：
其實很多時候，只要我們能從拼接處斷線，基本都是可以一筆畫完的，所以大家注意一下就好了。
當然，如果實在不能一筆畫下來，也不必勉強，因為強扭的瓜不好看！
總結
這四個知識點就是目前為止菜心所整理的關于斷線圖標的規律，個人經驗，供大家參考。
不過提醒大家，這些方法難免會有少數不適用的時候，遇到不適用的情況，千萬不要因為規則而被困住，多多嘗試，敢于不同，也許可以找到更合適的解決方案。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
藍藍設計的小編 http://www.syprn.cn
