距離業界首次提出“全鏈路設計師”這個概念已經過去了幾年，從稱謂的變化我們就可以感受到設計師這一角色職責的變化。在近幾年的產品設計工作中，我們和上下游之間的協作越來越緊密，介入階段越來越往前，新的趨勢對設計師也提出了更高的要求，包括更深入的產品思考，對用戶的時時洞察，高效的溝通合作，以及細致的質量把控等等。那么如何成為一個全能型的互聯網設計師呢？本文以日常工作流程為路徑，為大家整理了一波實用小技巧和小工具。希望能夠幫助大家在保持設計的專業度的同時，在工作的方方面面都能夠得心應手。
有效的設計積累讓我們事半功倍。養成隨手記錄的習慣，逐漸形成自己的素材庫，不僅能夠讓我們在需要的時候能夠快速檢索靈感，偶爾回顧也總能有新的感受。
字體識別神器：WhatFont
當你想知道一個設計精美的網站設計使用了什么字體時，可以安裝一款叫做 WhatFont 的瀏覽器插件，開啟時鼠標 hover 到文字上即可快速識別出字體、字號、字重、行高和顏色。對于不習慣使用控制臺的朋友來說非常簡單實用。
插件最新的版本停留在 2017 年，不過在大部分網頁上都是可以正常使用的。同類產品還有 Fonts Ninja 等，除了識別字體還可以收藏和管理字體，可根據你的需要進行選擇。
用戶體驗設計檔案: UXArchive
該網站收集了來自世界一流的科技公司的產品用戶體驗流程。例如，你正在設計“忘記密碼”體驗，需要參考時通常都是打開不同的 App 一個一個體驗和截圖。而通過這個網站，你可以根據場景快速瀏覽其他公司的示例，對比不同的解決方案。
地址：https://uxarchive.com/
素材管理: Eagle
Eagle 應該是很多設計師耳熟能詳的素材管理產品了，它支持圖片和視頻等基礎格式，有豐富的標簽系統和智能分類功能。此外還支持可視的字體管理，也能夠預覽 PSD 格式（常用的圖形和文稿格式基本都支持），可用于放一些 mockup 素材。自動解析圖片色板，從而允許按顏色搜索也是相當實用。
地址：https://cn.eagle.cool/
靈感速記: Flomo
Flomo 是一款非常輕量的筆記工具，用類似發微博的方式快速記錄一些知識片段。相比 Eagle 用于“剪藏”已有的內容，Flomo 更注重主動創造和記錄。產品的功能目前非常簡單，但背后的「卡片筆記法」理念很有意思，提倡先快速積累卡片，然后通過標簽和關聯讓結構涌現，積累知識的復利。感興趣的朋友可以了解他們對于“知識管理”的思考。
地址：https://help.flomoapp.com/weekly/orgin
當我們進入到產品設計工作中時，了解用戶往往是最重要的前提和基石。大公司的團隊往往有專職的用戶調研團隊來協助產品設計，但對小型一點都團隊可能用戶調研這個流程是全部歸到設計師角色里的。而且即使有專門的用研報告，直接觀察用戶的行為和描述往往是最直觀的，也更容易洞察到問題和機會。這里介紹兩種我們常用的低成本的方法。
用戶反饋什么: 七麥
如果你的產品是一個成熟的上架了各大應用商店的 App，可以通過一些第三方平臺看到各應用商店的評分評論匯總，構成和趨勢，也可以將自己的 App 和競品放到一起對比。例如我日常使用的“七麥”，可以通過微信訂閱每日評分變化，也可以導出指定時間段的評論的匯總表格，做更深入的檢索和分析。
用戶談論什么: 微博
商店評分和用戶反饋通常的內容通常比較有針對性，大部分都是圍繞已有的功能。如果想要看到用戶在生活中如何使用我們的產品，使用過程中有什么樣的情緒和感受，看他們如何理解在用的這個東西，則可以去社交平臺上搜索產品的關鍵詞，常常會有些很有趣的發現。據說早期微信的剪刀石頭布的想法就來源于一個微博用戶的分享。
來到我們最熟悉的設計實操階段。設計類工具非常多，Sketch 和 Figma 也都有相對豐富的插件市場，這里選擇了幾個我們日常使用的小工具來進行分享。聰明地使用已有資源，可以幫助我們呈現最好的設計概念。
Mesh Gradient 網格漸變工具
一款 Figma 插件，Illustrator 里強大的 Mesh 功能在 Figma 里也能用了。做好的漸變還可以保存下來多次復用。
Runner Pro
如果你主力使用 Sketch，習慣鍵盤操作，熟悉各種指令名稱，而且有完整的組件庫，那么 Runner Pro 將會是一個很好的 Sketch 助手。它的使用方式就像在 Mac 中使用系統聚焦搜索，通過一個搜索框即可快速完成組件插入，指令運行，插件安裝，以及快速前往某個畫板。
Runner 的組件搜索支持中文，但對于多個關鍵詞的模糊搜索還是對英文支持比較完整。
Blush 插畫插件
一個由 Pablo Stanley 設計的免費可商用的手繪風格的插圖庫。任務造型有數十種選項可供選擇，可以自定義角色的頭發、褲子、膚色等等，無需打開 Illustrator 即可創建獨一無二的插圖。適合用來做運營插畫，拼用戶故事版，PPT配圖等。
地址：https://blush.design/zh-CN
另外也有越來越多的設計師開始用 Figma 的原型功能直接做 PPT 了，順應這個趨勢他們還提供同系列的 ppt 模板，一鍵套娃。
POSE 人體姿勢參考
在自己畫人物插畫的時候，如果對人體動作和比例難以把握，那一定不能錯過這個插件—POSE。它是我發現的用于創建解剖學和身體插圖的最佳工具。Gal Shir 在 Behance 和 Dribbble 上都有眾多的粉絲，這是他在 Snapchat 做插畫師時創作的軟件。
地址：https://galshir.com/pose/
動畫曲線預覽
細膩的動畫能夠讓體驗更有溫度，這個網站提供了五種簡單的網頁版式和最基礎的三組動畫曲線，你可以選擇最適合你的 demo，體驗不同動畫曲線在實際頁面上的感受。底部還可以調整具體參數來達到想要的效果。
地址：
需求過程中我們需要反復和上下游溝通，在這個階段里設計稿是解決方案的可視化呈現，是中間產物，首先要滿足方便溝通和傳遞的訴求。方案定稿后，交付的則是產品的設計藍圖，首要確保方案的完整性，要能夠拆解和執行。
Design Project Template
這是由 Dropbox 團隊整理的設計項目模板，可以從 Figma Community 中復制一份使用。每份設計稿都包含基礎的項目信息，責任人，進度等概覽信息，尤其對于直接和開發、產品經理共享 Figma 稿件的團隊而言很好地保留了相關的上下文信息，提升項目溝通效率。
設計協作工具 XSHOW
XSHOW是一款由 ISUX 研發的高效設計協作平臺，通過其官方 Sketch 插件，你可一鍵將設計稿上傳到云端，XSHOW 會保留完整的版本記錄和成員操作。上傳到云端后分享給開發人員即可在線查看標注，多端預覽。除此之外 XSHOW 的團隊管理還可以控制權限時效，這一點在敏感項目對外合作的場景下可以說非常實用了。
地址:
https://xshow.tencent.com
還原自檢 Window Resizer + Zeplin
Window Resizer 是一款 Chrome 插件，正如其名就是可以把瀏覽器窗口固定到指定尺寸，可用于檢查網頁的自適應策略，或截特定尺寸的圖。
我們常常配合標注工具 Zeplin 的疊圖功能使用。將瀏覽器設置為和設計稿相同的尺寸，再將半透明設計稿疊上去即可一眼看出網頁是否還原到位，還有哪些地方需要調整。一圖勝千言，再也不怕開發哥哥說“看不出來”了，顯著提升了溝通效率和團隊和諧氣氛。
使用示例: 上層為設計稿，下層為對應瀏覽器尺寸的實現效果。
圖片壓縮工具
如果仍采用非在線的較為傳統的交付方式，通常需要導出為圖片發給對方。有時輸出網頁設計或者完整流程交互稿的尺寸較大，可以多做一步壓縮工作。一來同步方案的時候合作方更容易打開，另外需要導出多個版本時占用我們自己電腦空間也比較少。
如果圖片在 5M 以內或者需要批量處理，可以用 ImageOptim 或者 Tinypng 應用來進行無損壓縮，通?？梢詼p少 60-90% 左右。但如果圖片尺寸超過 5M ，使用以上兩個應用耗時較長而且容易失敗，此時可以試試在線壓縮網站 https://compresspng.com/，即使是超過 20M 的大圖也可以穩定壓縮。
Rotato 動態 Mockup
Rotato 提供了很多常見的動態 Mockup 效果，只要將你的設計稿放進去（圖片或視頻皆可），即可快速實現高端大氣的展示效果，支持非常完備的蘋果設備以及部分主流安卓設備，效果包括界面的反轉，拉近，滾動展示等。
地址：
https://www.rotato.app/mockups
設計上線后效果如何？有效的驗證能夠幫助我們有目的持續迭代精進。
AB 測試用戶樣本計算小工具
AB 測試，也稱為分桶測試或分批測試。AB測試本質上就是把平臺的流量分為為幾個不同的組進行實驗，然后觀察不同組的用戶數據指標，例如：點擊率、次日留存、人均觀看時長等等核心指標，最終選擇一個更有效的實驗組上線。
在開始設計實驗之前，需要明確實驗的目標。基于假設方案中的元素個數，AB 測試可以分為單一變量測試和多變量測試。這里以單一變量為例來進行簡單的說明，如何進行流量分桶。我們推薦這個免費的小工具，來進行流量分配：https://www.evanmiller.org/ab-testing/sample-size.html，根據實驗的預期結果，大盤用戶量，來確定實驗所需最小流量。
以騰訊文檔里面某一個按鈕的點擊率為例，目前大盤點擊率為5%，預期實驗能夠提升0.5pp。
這個工具還可以進行很多其他維度的流量配置，感興趣的同學可以進行深入的研究。我們希望大家在設計的同時，能夠大膽創新的提出假設，然后進行科學的驗證，從而得到一個更有效的設計。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系。
作者：騰訊ISUX團隊 來源：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
Meet more beautiful colors.
在《騰訊文檔-構建科學有效的色彩系統》這篇文章中，我們闡述了騰訊文檔如何升級了新的品牌色，為騰訊文檔塑造更加有未來科技感及智慧感的視覺感受和品牌認知，以及如何構建一個科學有效的調色板。
在設計系統的實際運行中，我們也需要著眼于如何應用調色板，建設協同工作流，并給各個角色提供有關色彩的擴展指導，以達到在騰訊文檔中構建一致且有品牌感的數字界面并有效提升效率的目的。
在建設騰訊文檔色彩系統的工作中，我們首先構建了一個包含品牌色、灰色、輔助色的調色板，但僅有這個調色板不足以支撐我們流暢、無障礙的協同工作。日常工作中，“這里我用哪個藍色？”“這里我用哪個灰色？”“開發同學能否快速的變更某些元素的顏色？”等等問題層出不窮，建設系統的協同工作流迫在眉睫。
HIG強調不要在APP中使用“硬代碼”，即十六進制色值進行編碼，但前期我們構建的調色板僅有色值，這種硬代碼應用到app中導致項目效率低下，維護也會成本激增。
于是在騰訊文檔中，我們開始采用顏色變量（color token）和主題（theme）來管理顏色，顏色變量（color token）基于任務（role）、主題（theme），為UI中的任務指定十六進制代碼的色值（hex value），以弭平設計師之間、開發與設計師之間的溝壑，將顏色變量（color token）嵌入設計組件中與開發代碼形成聯動，便于開發利用程序中的變量來做全局修改，橫向提升團隊的協作效率。
所謂顏色變量，通俗的意思就是可以將一個顏色按任務用途去抽象，抽象成一個有命名的顏色樣式，這個顏色樣式就是顏色變量。
在設計或者代碼中，可以通過修改這個顏色變量的值來進行全局顏色的更新。例如，我們現在需要給button一個顏色，不要將其寫為 #1E6FFF這樣的色值，而是將button的顏色指定為命名是Fill-01的顏色變量， 如果有重大版本更新，僅需將顏色變量Fill-01的色值更新，即可實現全局顏色的高效更新。如果在不同的主題下（例如淺色/深色模式）button有不同的顏色表現，顏色變量Fill-01可以在不同主題下，映射不同的十六進制色值。這就是我們建設協同工作流的的基礎邏輯。
調色板的各個色值（hex value）是最底層的基礎樣式，我們將色板上的顏色進行規則化命名，以方便后期將其引用到顏色變量中。
騰訊文檔包含核心藍色、藍灰色、中性灰色及其他輔助色，按照顏色屬性，將其命名為：Primayblue、Gray、Grayblue、Purple、Indigoblue、Acidblue、Cyan、Greenblue、Yellow、Orange、Red，并在命名中加入色階后綴。
*騰訊文檔調色板命名圖表
1、 從調色板中選擇合適的顏色并測試
從調色板中根據UI中的任務挑選合適的顏色并進行可用性測試，做具體任務中顏色選擇的最優解。
例如，我們需要選擇一個藍色作為鏈接色，作為文本，對比度必須達到4.5:1以上才符合WCAG2.0的可用性標準。經過測試我們選擇了primayblue-02作為鏈接色。
騰訊文檔的界面中，灰色系列占主導地位，起著至關重要的作用，為產品界面創造結構、表達邊界、建立信息層次。在調色板中，我們選擇了兩種灰色：中性灰色和藍灰色，來支撐系統的設計。藍色系列是騰訊文檔產品和體驗的主要動作顏色。
同時我們也使用了其他顏色以滿足一些沖突性任務（警示等）的顏色使用，這些顏色需要謹慎、有目的地使用。
經常會有設計師問，“這里我能用這個灰色嗎？”出現這種問題，根本上還是顏色使用規則定義的不夠清晰，含混的口口相傳的規則會導致更多的混亂。于是，需要我們根據任務和使用場景把顏色的使用規則清晰的定義。
首先定義在界面中占主導地位的灰色、藍色的使用規則。
在騰訊文檔中，藍灰色與品牌藍共同建立品牌印象，由此，藍灰色主要應用于與風格相關的場景。包括：圖標色、填充底色及大面積的背景色等。
中性灰色主要應用于一些全局系統行為。如：文本、分割線及交互反饋hover、press等場景。
品牌藍色主要應用于系統中的各種行為，如藍色圖標、button、文本鏈接等。
其次定義在界面中用于警示、狀態提醒的其他顏色的使用規則。
紅色主要應用于系統中需要警示的場景，如紅色警示圖形、錯誤文本、紅色tag等。
在騰訊文檔中，會針對不同的任務應用不同的顏色，如左滑操作、成功提示、高亮顯示等。
在騰訊文檔中，不同的品類有不同的基準色。
定義了顏色在系統設計中的使用規則后，我們需要根據顏色變量的使用用途對其進行語義化命名。一套好的語義化命名規則需要易于維護且具備可拓展性，如果只是將調色板的色值命名為 blue-01、blue-02... ，語義化的收益并不明顯。哪天設計團隊需要調整品牌風格，或是蘋果又掀起什么新潮流，把所有命名為 blue_x 的變量改為 gradient_serenity， 對于開發來說也是巨大的災難。
根據 HIG 的建議，語義化命名不應該描述外觀或者色值，而是指明這個顏色的任務用途——標簽 Labels，分割線 Sepatators 或者填充 Fill。
在思考如何賦予顏色語義化的命名時，設計師也需要用更概括和結構化的視角來看待界面設計，同時也需與開發同學達成一致，使用同樣的命名，滿足以更好地維護一套收斂和統一的設計語言。
在騰訊文檔中，顏色的任務用途定義為為以下幾種：背景色 Background、文本色Text、圖標色Icon、分割線 Border、透明填充 Transparent fill 、實色填充 Opaque fill 、默認交互反饋 Feedback、語義 Intent。統一使用ultrastrong、strong、medium、weak、ultraweak作為后綴來表達顏色強度。在需要更明確的用途說明的任務中，直接描述其用途，例如：hover，pressed、disabled等。
以上種種，最終目的在于建設團隊的協同工作流，將顏色變量（color token）嵌入設計組件中與開發代碼形成聯動，便于設計利用變量及組件、開發利用程序中的變量來做全局修改，橫向提升團隊的協作效率。
在設計系統中，顏色變量屬于底層的設計原子，需要將其生成為顏色變量并嵌入到設計組件中，便于設計內部使用。我們將已根據任務用途命名的色值，生成figma中的顏色樣式（color style），后續無論是進行組件的設計，還是項目的設計，都可以直接賦予設計元素明確的顏色樣式。
我們生成了一個面向內部、外部的顏色變量表，進行顏色變量的說明和信息的同步，沉淀落到實處的資料文檔。（此處推薦使用騰訊文檔，多人協作實時溝通～）
最終形成了設計組件庫與開發組件庫的聯動，構建了一個協同工作流，橫向提升工作效率。
上篇的調色板設計后，一直在醞釀這篇調色板的實際應用。在設計一個較為復雜、龐大的產品時，提效是永恒的課題。痛過、踩過坑的設計師應該深有感觸，溝通的無力、推動的困難都推動著我們發動自己的能量去想辦法提效。
設計師們可以在自己的項目中與開發同學多多溝通，嘗試這種方法，去建設更高效的色彩設計系統。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系。
作者：騰訊ISUX團隊 來源：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
交互文檔，是一份用來解釋項目交互方式、內容、規則的說明文檔，也叫 DRD ( Design Requirement Document )。
在過去的分享中，我們有解釋過，B 端項目會包含大量的交互內容，需要前期繪制交互原型來展示和確認交互方案。
如果是比較簡單的小型項目，或成熟產品的小迭代，那么這樣的連線圖確實就足以表達交互的意圖和方案了，寫太多注釋文字反而會畫蛇添足提高觀看者的認知成本。
但是，如果項目和展示的流程內容，邏輯非常復雜，包含非常多的選項和狀態，那么單靠原型和連線是絕對不夠的，添加更多的圖文說明就變得非常有必要了。
同時在團隊協作場景中，就需要將這些內容制作成一份規范的 “文檔”，用來進行統一的展示、備份、歸檔。
所以做交互光靠畫交互原型是不夠的，“文檔” 就成為必要的輸出成果。
在產品側（非開發），文檔就有好幾類：
- 商業需求文檔:BRD,Business Requirement Document
- 市場需求文檔:MRD,Market Requirement Document
- 產品需求文檔:PRD,Product Requirement Document
- 交互說明文檔:DRD,Design Requirement Document
- 設計規范文檔:DGD,Design Guidline Document
BRD 和 MRD 是一個產品經理行業內部也在反復科普討論的東西，和我們沒多大關系可以暫時忽略。設計規范文檔 DGD 大家應該也有概念，比較容易辨識，也不需要在這里強調。
而產品需求文檔 PRD，是和交互文檔最撞臉的文檔類型。它們的文檔規格、樣式幾乎一致，還包含大量界限模糊、相互交叉的內容范疇，會對新手的理解造成很大的不便。
要理解產品文檔和交互文檔的核心差異，就得從他們各自的工作職能說起，產品經理的主要產出是解釋產品要做的功能和邏輯，所有的原型和連線的目標都是為了解釋功能本身。
部分產品經理會 “順帶” 在這個基礎上增加交互的元素，以及相關的說明。這恰恰是問題的關鍵所在，因為產品經理制作產品原型的過程是可以覆蓋一部分交互信息的，所以很多設計師也天真的認為交互內容是應該由產品來出的。
這當中一定要關注里面的 “順帶”，因為一份有效的 PRD 主旨一定不是以交互為核心的，在面對需要大量圖例、連線、方案、解釋的交互問題下面，產品經理往往選擇直接跳過，只把功能描述清楚，剩下的就交給交互設計師還是 UI 設計師來完成具體的交互方案。
所以，交互文檔就是在產品文檔的基礎上，進行交互內容的補充，專注于解釋項目的交互內容，讓設計師和前端開發可以更直觀得理解后續的工作內容。
來自 UEDART 的付費文檔，案例地址：http://vip.uedart.com/interactive.html
交互文檔和產品文檔是相互獨立和補充的，當產品文檔無法完成對產品交互的有效解釋時，我們就應該選擇輸出獨立的交互文檔，來提升項目協作的效率。
主流的交互文檔輸出有三種方式：
1. Axure/墨刀 導出
2. 一般文檔制作
3. 線上 Wiki 記錄
Axure 和墨刀是用來制作產品原型的軟件工具，也是目前在產品經理、交互設計行業中應用最廣泛的原型工具。
它的主要優勢，在于可以比較方便的制作可交互的組件、連線、導出。
當然，光制作原型圖并不能叫交互文檔，它們還提供了比較全面的內容標注、文本記錄、圖形繪制的功能。
這就可以讓我們完成原型繪制以后，結合頁面結構的管理，添加交互文檔所需的其它信息，并最終輸出文件。
而在一些比較傳統的行業或外包領域，使用的記錄文檔往往要使用 Word 或 PPT（方便開會演示或要打?。?。這就要在原型完成以后，導出原型圖例，并使用這些文檔軟件進行文字的記錄和連線。
受限于 Word、PPT 的布局限制（強行分頁），使用它們做交互文檔是非常難受的，并且這些文檔需要保存到本地，存在各種文檔版本管理的問題。
所以還有另一部分也希望使用普通文檔格式記錄，并滿足云端同步、備份、版本管理的團隊，就會使用 Wiki 類的工具來制作交互文檔。如語雀、飛書、Confluence、Notion 等工具。
如果只是一些比較小的項目迭代、一次性使用的交互文檔，使用前兩種方法都可以勝任。而真正大型、系統性的交互文檔，往往都使用團隊內部的 Wiki 進行創建和管理。和設計稿不同，這些使用了內部賬號或需要內網訪問的文檔資料，是不會沒事發到網上來分享的，這也是在網上找不到完整交互文檔的主要原因。
和你們網上可以找到的大多數交互設計干貨不同，我即不推薦你們使用 Axure/墨刀 來畫原型，也不推薦用它們或普通文檔、Wiki 的形式來輸出交互文檔。因為：
—— 太低效了！
產品經理和交互設計師的主要產出物就是文檔，自然可以耗費比較多的精力和時間去制作原型和編寫內容。而 UI 設計師的主要工作肯定是最終的視覺界面和交付，所以用最復雜的方法去制作交互文檔，顯然是不合理的。
同時還要提一句，Axure/墨刀 等軟件用來制作一般的線框圖原型，效率實在是太低了。且絕大多數情況下的頁面跳轉、交互都是可以忽略不做的。而且隨頁面增加，它的左側導航層級、數量會非常龐大，導致查找和瀏覽的效率進一步降低。
在我自己的所有課程和分享中，我始終都建議直接使用你們正在用的云端 UI 設計軟件直接繪制產品、交互原型并輸出文檔，如即時設計或 Figma。
原因包含：
- 速度快：能用 Axure 五分之一的時間完成所有原型繪制
- 可復用：做好的原型方便復用，而且可以直接在原型上完成后續設計
- 交互性：對于表達交互流程所需的基礎跳轉和動效都能滿足
- 更自由：一些需要復雜圖文結合的說明方式不再受到普通文檔布局限制
比如下面這樣的原型案例，就可以通過一個簡單的鏈接快速分享出去，或者添加團隊成員自由查看。
在我過去長期的實踐體會中，這種方式是優勢最明顯，效率最高，最易懂，也符合 UI 設計師工作需要的。如果項目中有其它因素要求，你們也可以選擇前面的方式輸出。
任何文檔的目標都是為了書面記錄和讓看的人更容易理解我們要表達的信息，不要被固定的方法局限住，要努力去探索適合團隊當前場景的方式。
前面把基本的信息聊完了，這里就來具體講講交互文檔應該如何進行輸出。
當然，輸出交互文檔前需要先理解交互是什么，交互設計的具體設計內容和步驟。交互文檔是對你已經設計出來的方案的書面記錄，你不能在對交互一無所知的情況下強行編寫文檔。
交互文檔制作首先要確認文檔的記錄內容和文檔結構。
記錄內容指的是你在該文檔準備放哪些交互內容進去，并不是每次項目設計都要把項目所有頁面和流程交互都重做一遍。
比如一次中等規模的迭代，新增幾個通用的列表頁面，調整了一些細節字段，增加了一個功能流程。那么文檔重點記錄內容肯定就是流程而不是所有頁面。畢竟通用的列表頁和細節更改，在產品需求評審階段就可以完整的解釋，而功能流程則不行。
如果是全新的項目，包含數十上百個頁面。把所有流程、頁面的交互內容全部表現出來的工作量是頂不住的，在繪制原型的過程中，你就會發現有大量的重復頁面、流程和交互。所以制作文檔就要有目的性的對重復的內容進行合并，以及只保留重要的頁面和流程。
具體該放什么要考慮項目的實際情況，需要設計師自己評估。除此以外，標準的交互文檔里面會包含背景介紹、編輯日志、文字圖例、業務流程、名詞解釋、頁面結構等等。
這些 “文縐縐” 的細節，并不是必備的，你可以根據當前場景自己決定需要加哪些。比如項目、業務背景前面的產品需求已經講清楚了，業務流程、名詞解釋團隊成員也都了如指掌的時候，那么這些頁面模塊就完全沒有放的必要。
并且，基于前面對放置內容的考慮，結構的順序并不一定要類似下方案例，完全按照產品的導航目錄來走。
所以，根據一個中等規模的迭代項目，我會制定一個這樣的一級文檔結構。
- 基本信息：項目的簡單信息，快速目錄，參與人信息等
- 基本組件：涉及的相關組件展示和交互規則說明
- 原型一覽：本次迭代涉及的所有頁面原型和連線一覽
- 流程介紹1：流程1的所有頁面、狀態、說明展示
- 流程介紹2：流程2的所有頁面、狀態、說明展示
- 流程介紹3：流程3的所有頁面、狀態、說明展示
每個1級文檔結構對應 UI 軟件中的 Page 目錄，力求所需的 Page 數量越少越好，而不是像 Axure 的做法一樣密密麻麻的。
結構可以根據復雜程度做進一步的細分，它像寫文章的大綱一樣，幫助我們提前規劃好后續完成文檔所需的內容和工作量。
有了結構，就要在對應的 Page 中填充內容了。其中一般的文字介紹、流程圖、思維導圖，只要正常輸入或將導出的圖例黏貼進來就可以。
而針對具體的交互內容，流程解釋上，則重點處理連線和標注說明。比如下面是我自己在課程演示中的一個簡單的交互流程演示案例。
在 UI 軟件中，制作連線其實是很簡單的事情，只要畫出一個直線，再設置箭頭和尾部圖形、描邊色彩和粗細即可。
然后，將該線段的圖層放置在畫布之外，起點放置在觸發交互的區域之中，終點尖頭則緊貼目標畫布的邊緣（不用特意延伸進畫布內）。如果使用水平、垂直的方式連接兩個畫布，那就可以雙擊進去添加錨點制作 90 度的折角。
連線的應用是非常簡單的操作，不要舍近求遠通過插件或是其它的一些功能來實現。而除此之外，我在文檔中添加的解釋性文本主要有兩種，交互事件和交互規則。
交互事件代表了連線的兩個頁面是如何被觸發跳轉的，所以我會在線段中帖一個文字卡片，解釋觸發的條件和交互操作是什么。
然后，就是頁面或流程中的交互細則，包含兩個部分，數字標簽和對應文字注釋。它們都是用 Auto layout 可以快速制作出來的組件，每次要做備注的時候，只要復制標簽到頁面上，設置對應的數值，再將右側的文字卡片復制到頁面旁邊，再加上對應的數字、內容信息即可。
在設計軟件中，畫布的自由度極高，你想要怎么備注和添加內容都沒關系，只要在內容翔實的基礎上保證 —— 團隊成員能看懂，就是一份優秀的交互文檔。多在繪制過程中和同事溝通，優化展示的做法，可以避免很多會出現的問題，進一步加速我們的制作效率。
將文檔全部做完以后，最終就是關于交付和協作的問題了。
既然我們使用線上的 UI 軟件來完成交互文檔的制作，那么文件設置公開訪問權限，再分享鏈接自然是最簡單的辦法。
但每次項目分享個網頁鏈接，或者并行有好幾個項目，需要其它成員自己去收藏網址，也是挺麻煩的。所以盡量充分應用軟件中的團隊協作功能，通過創建一個團隊，添加成員，讓他們自行查看當前文件目錄中的交互文檔。
查看過程中，團隊其它成員可以通過評論的功能對交互內容進行糾錯、提問、建議，方便我們進行優化改進。
通過這種簡單高效的文檔協作模式，我們可以非?？斓猛瓿烧w交互內容的定稿，并開始后續的工作。
再回到前面的話題，我們是 UI 設計師，不是全職交互設計。原型文檔輸出完了，下一步可是要做視覺界面的，所以交互文檔就可以不用管了嘛？
交互文檔的最佳狀態是 —— 應用最終界面圖例解釋交互內容。
也就是當我們把所有頁面內容設計完成后，強烈建議將界面的展示和交互文檔進行整合。除了前端和產品可以看到最終的交互落地效果外（有時候最終設計和前面的交互不一致），還可以直接通過這個文檔查看界面數值標注，而不用往返于交互和設計文檔來回切換，這才能讓文檔作用最大化。
以上就是關于交互文檔的相關解釋。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系。
作者：酸梅干超人 來源：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
網上對介紹導航文章已經有很多，有部分已過時，今天自己再重新整理一遍，方便自己也方便更多人理解。
如2、社區產品引導用戶發帖子
如3、凸顯核心功能，如百度地圖、高德等
優點：
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系。
作者：UX設計筆記 來源：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
視覺設計排版：
第一步，先把文字內容做好排版；
第二步，思考場景設計與信息層級處理；
第三步，進行排版設計的布局；
第四步，最后做好色彩和細節的優化，從整體出發到細節處理再回歸整體性的原則，做好包裝的設計展示。
一 格式塔原理在排版中的應用
格式塔原理是 20 世紀早期的德國心理學家研究小組發現的人類視覺工作原理。人類視覺是整體性的，我們會對看到的事物自建結構，并且在神經系統層面上感知形狀，圖形和物體?！感螤?、區域」在德語中是 Gestalt，所以這些理論也就叫做視覺感知的格式塔原理。
格式塔原理的設計原則如下：
1. 鄰近性原則
物體之間的相對距離會影響我們認知它們的關系。相互靠近的元素被認為是一組，那些距離較遠的則自動劃分為組外。整體看來，距離近的關聯性更緊密。
下面左圖中的圓相互之間在水平方向比垂直距離近，那樣我們看到了4排圓點，而右圖看成2列。
如何應用于UI設計：
鄰近性原則，在網頁端或移動端的排版布局中有非常廣泛的應用。設計師應用此原則，調整距離或者用分割線等來分開不同設計模式的構建。此原理應用在設計中，界面層級好，視覺清晰。
按照原理，我們會將內容相似的元素位置放置得更接近，在 UI 設計中的卡片化設計，列表組合等信息整合設計都會應用到此原理。并且不同內容之間我們使用分割線，留白，卡片區分等方式來使不同的內容區分更為明顯。
2. 相似性原則
格式塔原理中的相似性通常和鄰近性原則一起運用在產品設計中。它指出了影響我們感知分組的另外一個原則：有共同視覺元素的物體看起來更有關聯性。我們傾向于將看起來相似的對象視為一組或者一個模式，并且將它們與特定含義或者功能聯系在一起。
如何應用于UI設計：
利用顏色，形狀，大小，方向，以及紋理等視覺元素，組成相近的樣式。UI 設計規范中的控件組合成的組件，大部分都會使用到相似性原則，統一視覺樣式，來表達統一的功能性。
3. 封閉性
人的眼睛在觀看時，大腦并不是在一開始就區分各個單一的組成部分，而是將各個部分組合起來，使之成為一個更容易理解的統一體。這個統一體是我們日常生活中常見的形象，如正方形、圓形、三角形等，讓用戶容易理解。
如何應用于UI設計：
這個原則也非常適用于圖形用戶界面的圖標設計或界面設計中
4. 連續性原則
人的視覺具備一種運動的慣性，會追隨一個方向的延伸，以便把元素連接在一起成為一個整體。下圖是兩個交叉的圓弧軌跡，人們往往傾向于使視覺流跟隨著相同顏色的軌跡，而不會被干擾，我們能夠感知這是兩條弧線。
如何應用于UI設計：
連續性目前在 app 產品中應用非常廣泛。比如在電商產品中 banner 區域的左右滑動交互模塊，滑動組件和進度條展示。
主要應用范圍如下：
1 導航欄中的連續性設計
2 卡片模塊中的連續性設計
3 模塊的連續性設計
5. 主體/背景
我們的大腦將視覺區域分為主體和背景 2 個部分。這個特征有利于我們對重要信息和次要信息的感知。
主體和背景的區別可以從以下兩個方面來控制：
1 場景大?。何覀儍A向于將處于大場景中的中間小區域部分視為主體，而大場景視為背景；
2 層級關系：如果在同一個平面中，我們傾向于將處于視覺第一層級的物體視為主體。
如何應用于UI設計：
此原則可以幫助設計師在設計界面的過程中抓住用戶注意力，并且讓用戶優先看到我們想讓他們看到的事物。比如重要信息的彈窗提示，以及弱化背景從而突出內容等界面中都有運用到此原則。
二 移動端版式設計原則：
版式設計，在有限的版面空間中，將版面構成元素，如：文字、圖片、線條和顏色等，根據特定的內容，進行組合排列，并運用造型要素及形式原則，把構思與計劃以視覺的形式美感，表達出來。
一個優秀的排版要考慮到用戶的閱讀習慣和設計美感，幫助用戶區分重點、提升可讀性。遵循平面設計原理，排版中的對齊、對比、重復、親密性 4 大原則。
對齊原則
對齊是版式設計的最重要的原則之一，對齊可以建立一種整齊的外觀，帶給用戶舒服的一致性的瀏覽體驗?；趶纳系较?，從左到右的閱讀習慣，應用在界面設計中，一般是左對齊、居中對齊和右對齊，同時同一豎線上的元素，要保持居中對齊。
對比原則
做排版設計時，重點的元素通過尺寸、色彩、造型等引起用戶關注，這樣重點內容，才會突出出來。設計要有輕重緩急之分，不要讓用戶去找重點，Don't let users think，讓用戶順利的接受重要信息。
例如：圖片大小的對比，讓用戶感受到最重要的信息。
親密性原則
根據親密的原則來組織復雜的信息，將彼此相關的同一類的元素靠近，同時把遠離不相關的元素，這樣就可以大大提高界面設計的可讀性。
三 作品集排版法則
設計排版法則：
1 左對齊
在頁面排版時，將你的文字設置為左對齊。為什么？在西方文化中，人們的閱讀習慣是從上到下，從左到右的。通過左對齊文字，眼睛能夠更容易地找到邊緣，更易于閱讀。避免因為這個原因縮進段落的第一行。
2 使用一種字體
優秀的設計師在排版設計中能夠完美使用兩種字體，是因為他們能夠把握和了解所選的字體的類型，并保證他們是互補的。
但是一般情況下，避免使用兩種相同類型的字體。例如，不要使用兩種以上的非襯線體、粗襯體或手寫體。
使用一種字體，直到你能夠很好的運用和掌握它。如：蘋方字體或Dinner字體。
3 跳過一個字重
在改變字體權重時，從細體到粗體，或者從中粗體到超粗體。大師級的設計關鍵就是對比。
粗體和細體對比的標題字體組合，獲得最大的對比。
4 雙倍字號尺寸
當改變字號大小時，一個好的經驗法則是，你使用的字號大小是現有字號的兩倍或一半。
5 對齊到一個軸線
沿著一個主坐標構建你的字體排版，并將字體元素對齊到網絡線。無論文字類型或大小如何，在垂直軸上，字體對齊軸線的左邊緣。在水平軸上，尋找最佳水平元素，或對齊文字的大寫字母字高，或對齊文字基線即可。
6 使用條框分類
使用形狀/線條將相關的內容信息塊進行分類編組。這樣會使不同的元素排列很有順序。
7 注意間距
段落排版中到處都是間距。如果文字左對齊。右側會出現文字的參差不齊、起伏留白等。避免在段落的最后一行出現單字成行的情況，切勿使用強制對齊設置。
注意段落右側的起伏形狀，在一個句子中標點符號之間使用單個空格，以避免形狀和角度不美觀。
間距的重要性。越是間距接近的元素，讀者就會假設在不同的信息塊之間存在這一種關系。
最后推薦 優秀設計師的作品排版 ：
如下圖：來自國際化設計師 MIKE 的設計作品
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系。
作者：峻溪POINTVISION 來源：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
這些年里，這款工具進行了快速的迭代和更新，響應設計師們的需求，不斷完善功能，成為設計行業推薦率（NPS）最高的軟件之一。
尤其是作為一款優秀的買斷制軟件，不僅定價合理，甚至 5 年來 ￥199 的售價分文未漲。
而我同期開始用的 Ulysses（用它寫了兩本書，寫過的公眾號內容超100W字）、MindNode、Notability 等，全都在這期間從買斷制改成訂閱制，甚至訂閱價格還逐年上漲？？
我從來不吝嗇于贊美優秀的軟件工具，尤其是保持初心以純粹的產品功能來服務用戶的那種更甚。五年前我作為最早就推薦它的人之一，五年后我不介意再夸它一次。
它就是 —— Eagle。
Eagle官網：https://cn.eagle.cool/
前面說過，Eagle 是一個設計資源管理器，它可以做的事情非常多，但我不是要在這里寫功能介紹的，而是來分享一下，我都用它做了什么。
圖片采集是我使用 Eagle 的核心目的，他包含豐富的采集形式完美覆蓋我的實際使用需要。
第一類采集形式就是通過瀏覽器插件或截圖工具，將網頁中看見的圖片下載到本地。
第二類采集形式，則是通過粘貼花瓣或 Pinterest 的畫板地址，批量采集該畫板的所有圖片。這是我最喜歡的功能，沒有之一。
花瓣和 Pinterest 這類網站，真正的精華是優質用戶自己收錄的圖庫，而不是直接搜索出來的結果。批量采集，就是讓我在找到優質圖庫后，用最簡單的方式下載這些被精挑細選出來的圖集。
因為批量下載很方便，我可以很快的針對同一類目收集出成千上萬的內容。但同一個類目下載那么多圖片或素材有意義嗎？
數量從來不是我追求的目標，我會將任何類目的內容數量進行精簡，只保留其中最精華的一小部分，即使它們是由一批最優秀的設計師收藏的圖庫，我也只取精華中的精華。
但是，光靠一張張圖看過去打星再篩選，會把我累死。于是，我就會利用 Eagle 的篩選與排序功能，快速剔除劣質內容，縮小選擇范圍。
比如之前我分享過的 UI 配圖的素材，包含十幾個顏色的分類和上千張精選圖片。原始圖片超過五萬張，是我從上百個攝影畫板里批量采集下來的。
應用到大小、尺寸排序，色彩篩選，星級篩選等多種手段配合，幫助我快速篩選出各自質量最好的 100 張圖片。而這前后大概只用了兩小時的時間。
通過前面兩個功能，我收集和篩選了海量的靈感元素。但這么多元素我們不可能無序放置，需要根據一定的規律進行編組和管理。所以這里就要分享 Eagle 的資源管理功能了。
Eagle 的資源管理包含三個方向：
1. 普通文件夾：類似電腦文件夾的邏輯，可以進行排序和上下級設置，收納
2. 智能文件夾：通過一定條件設置，篩選出對應圖片和素材的動態文件夾
3. 分類標簽：即可以作為分類來使用的標簽系統，可以為一張圖片或素材打上多個分類標簽
我的資源管理方法論一直崇尚的是極簡主義，能用普通文件夾管理的情況我就一定不用智能和標簽。不是說這些功能不好，而是因為它們需要對素材進行二次的處理和維護，只有在必要條件下才會使用。
我的素材資源管理是首先構思我會用到的幾個大類，每個大類下會包含幾個二級分類，即 Eagle 中的1級文件夾，然后再創建對應的文件夾并命名和添加色彩，比如下面示例。
不要奢望一開始規劃分類能做到盡善盡美，只要大的方向上確定了，然后再根據日常收集的需要慢慢去添加下級文件夾，而這一級就沒有那么嚴格的限定，用到哪加到哪。
只有在一些非常特殊類目下，我才會去為圖片和素材增加標簽，而不是為了打標簽而打標簽。比如我收集的學員作業也存在 Eagle 中，會包含課程期數、作業類型兩個維度，我就需要用標簽進行管理，方便我后續進行跨文件夾的查看與篩選。
除了基礎的靈感圖片外，我還往里面存了很多其它文件素材，包括但不限于下面這些種類。
Eagle 能作為一個設計資源管理工具，并不是因為可以添加文件夾和標簽，再實現一遍 MacOS 的資源管理功能。而是因為它支持多種文件格式的快速預覽。
它比 Mac 自身的快速預覽更高效（后面會解釋），同時作為雙系統用戶，我得以在 Windows 系統下如下圖快速查看素材預覽，而不是安裝格式支持零碎的插件（或流氓軟件）來實現。
尤其是 Sketch、XD、Mindnode 文件，有了縮略圖，就不用通過打開源文件來查看內容。并且字體文件支持在目錄中直接啟用和停用，可以非常方便的實時管理本地字庫，保證我在設計軟件中只會出現必要的字體，而不會全部顯示出來。
Eagle 還有個特別的功能 —— 網址記錄，這也是我最常用的功能之一。
早前有先用 Pocket 然后轉移 InstaPaper 和 Cubox 來收錄網上看到的優質設計文章，方便我需要引用原文和整理思緒的時候回看。
雖然最后采用的 Cubox 也是一個優秀的稍后閱讀工具，但長期使用下來我還是想盡量打開少的軟件來完成我的工作。所以，自然而然的，我還是把網址全部遷移回 Eagle 中。
只要安裝 Eagle 瀏覽器插件，我就可以快速收集網址到 Eagle 目錄中，之后隨時進行查看。
可能有的同學喜歡用網頁整頁截圖來收集文章，只是我不太喜歡用圖片格式查看文本，所以這個根據個人喜好即可。
同時，我不止拿 Eagle 管理靈感和素材，也直接拿來做項目管理。
在 Eagle 庫文件進行團隊同步以后，針對每個項目創建獨立的項目文件夾，用來收錄相關的文檔、靈感圖、情緒版、配圖和設計文件。
尤其是項目前期收集靈感圖和情緒板的階段，多人共同收集和編輯的結果可以最方便的查看和進行評價，非常好的優化我們的協作流程和效率。
作為一個設計講師，要觀察學生的作業和進行點評。自然而然，我也會優先將所有作業添加到 Eagle 中去。
通過對每份作業前期的打分，標注，來進行后面點評課程的分享和講解。
同時，這些收集的作業，需要在后續其它場景中作為正、反面的案例。所以對作業的評級和標簽就變得必要起來，在相關場景下通過創建智能文件夾快速篩選出范圍內的圖例。
以上就是我使用 Eagle 最重要的 7 個場景，雖然實際應用還遠遠不止它們，但因為篇幅關系就先介紹到這里。
Eagle 作為一款被我長期使用和推薦的工具，不僅僅是因為上面的使用場景，它們是結果。所以，我要從更底層的角度，來解釋它的不同之處和特點。
從上線以來，Eagle 有一個飽受誤解和詬病的底層設計，就是它的 “素材包” 文件 .eaglepack 。用戶需要先創建一個 “庫“，之后添加的所有素材、文件，都會被保存到這個庫文件中去。
換句話說，相當于 Eagle 在你的電腦中創建了一個特殊的文件夾，用來保存你置入的文件。即使你添加的素材是已經下載到本地，它也會再 “復制” 一份到這個庫中。
很多設計師對這個邏輯感到很費解，為什么本地存的好好的，Eagle 要再復制一份，完全就是浪費系統資源和時間的做法。如果無法理解這個邏輯，就是不具備 ”產品思維“ 的特征之一。
我們先從和多人舉例的 Bridge 和 Lightroom Classic 講起。
它們的運作機制，是通過運行該軟件，來讀取你的硬盤目錄和對應文件。使用它們并不會額外復制文件出來，即使你在軟件中置入素材，它們也只是幫助你正常保存到硬盤的對應位置。
為什么這類工具會被我們放棄，有下面這些原因：
第一，它們的核心一直都不是全領域的設計資產管理，而是圍繞在 Adobe 體系下的照片、視頻、矢量圖等多媒體項目素材管理，尤其是攝影相關項目。
第二，就像對比 Photoshop 相較與 XD 一樣，龐大的軟件體積和功能，對啟動速度和硬件資源消耗帶來沒辦法忽視的負面影響，降低操作的效率。
第三，就是比較值得深入思考的地方，那就是管理范圍太廣。直接讀取硬盤就是讓所有文件夾被暴露在管理器中，多出大量非必要的目錄和文件，嚴重增加我們的決策成本和管理成本。
范圍太大或自由度太高并不是什么好事，就像 iOS 的相冊一樣，它是個封閉的圖片庫，不像安卓一樣讀取其它硬盤文件夾，從而讓相片的管理更簡單明了。
自由雖然可以做更多事，但這些沒有必要的可能性增加就只會變成決策和行為中的負擔。簡潔明了，才是高效的前提條件。
第四，就是設計文件的 ”預覽效率“ 問題。不管電腦的性能怎么提升，大型位圖的渲染都是非常消耗資源的工作。不管是動輒幾 G 的 PSD 素材文件，還是高達幾億像素的超清圖片，加載都是需要等待的。
比如下方目錄中的作業文件，因為很多同學導出畫布不考慮圖片質量尺寸，所以往往會出很多 1W*1W 像素以上超過 30M 的位圖。
當這么多大型位圖聚集在一起，Bridge 完全加載出它們的縮略用了整整 2 分鐘的時間……雖然 Bridge 會讓你覺得久第一次打開慢以后就好了，這個功能的代價是生成了大量的 ”緩存”，即這些縮略圖會暫時保存到緩存文件夾中。
緩存文件都只是過客，在你格式化系統，換另一臺電腦打開，或者緩存超過了上面設置的 50G，那么舊的文件就會被刪除，你還是要重新加載該文件的縮略圖。相信我，超出緩存容量是非常容易的事，即使你加到 100G 也一樣。
Eagle 的庫特性，是在添加素材進庫之前，會生成一個對應的縮略圖文件，之后 Eagle 讀取素材列表的時候就是加載這個只有幾十 KB 不到的小文件，而不是解析原圖。
這種策略帶來的幫助除了在文件夾之間切換高效自如，也對本地內存的壓力有非常大的緩解。
在一般資源管理中，一個文件夾內有幾千張高清圖片時，持續滾動到目錄底部就會發現越來越卡，因為占用的內存越來越多，直至達到臨界點釋放掉上方列表加載的內容（上滾會重新加載）。相信有用相機的同學一定很了解這種感受。
綜合各種問題和影響，自建庫，并為每個素材生成不會被刪除的縮略圖就是最好的選擇。
這不僅僅是 Eagle 一個工具的做法，即使 Adobe 也在 Lightroom 應用了相同的策略，新 LR 導入圖片素材到它的自建庫中進行管理，同時生成縮略圖用于列表加載（降低高像素調節延遲）。而老版的 LR 雖然還沒下架，但為它增加 Classic（古典） 的后綴，所以它們認為哪種做法更有潛力，你們自己也能判斷了對吧？
今天我們使用的絕大數軟件都是 SaaS（微軟：基于web的軟件服務），自帶聯網備份和同步，但是 Eagle 只能保存本地卻不符合我們的 “習慣”，這是為什么？
因為成本是沒辦法控制的，重度用戶成百上千 G 的硬盤占用，是不可能輕易使用云服務來實現同步的。這些動輒幾 G 的 PSD 文件或其它大型設計文件，會讓整個同步過程充滿不確定性和沖突。
同時，云同步是一種成本特別高的服務類型，和一般的云存儲空間不是一種概念，想要大容量又要免費，是不可能的。Adobe 同步盤 1T 容量港區售價 68 港幣，蘋果 iCloud 同步盤是 2TB 68 元/月。
算起來他們的價格并不貴，但一定要清楚 Adobe 和蘋果云都是為了自家生態服務的，而且作為軟件業巨頭有自己的大型數據中心，降低云服務成本。類似 Eagle 這樣的初創團隊是不具備這種條件的，即使推出了，價格也不會便宜。
可能還有人會對比花瓣 Pro，它就支持云同步。但是，花瓣 Pro 只是官方網站的本地客戶端，更方便的訪問自己的官網個人中心，無法收集和整理圖片以外的其它素材，所以同步起來容易。
Eagle 的數據就只能保存本地，或者保存在笨拙的移動硬盤內，隨身帶著嘛？肯定也不是。
庫文件的另一個管理好處，就是方便做備份。在今天同步盤服務逐漸成熟的環境下，你可以選擇購買類似 Dropbox、堅果云這類同步網盤，通過它們實現備份和多設備同步。
或者，可以購買群暉、威聯通、極空間為主導的個人云盤硬件，實現空間更大、更靈活的使用體驗。
如果有同學不知道怎么同步的，我會在后面分享。
最后一點，就是對蘋果 ARM 架構的適配了。在 Eagle 2.0 版本中，快速適配了 Mac 的新硬件架構，從而讓軟件的運行、讀取效率遠遠高于上一個版本，做到了絲般順滑的地步。
對軟件本身的優化也是速度的保障之一，相信 Bridge 用的多的同學一定忽略不了它無處不在的延遲與卡頓。
Eagle 如果要進行網絡的備份和同步，那么一定要分清楚同步盤、網盤、移動硬盤的區別。
其中，網盤和移動硬盤基本上是一樣的，它們的使用特點就是我們要主動把要保存的東西，拖拽進硬盤目錄內。移動硬盤備份速度還好點，網盤的備份就要非常久的時間。
如果你有兩臺電腦，使用移動硬盤的方案就得一直隨身帶著，用哪臺插哪臺上。非常容易在第二天忘記拔掉，然后回公司的時候沒庫可用。使用網盤的方案，那就更不可能的頻繁的備份和在另一臺電腦中下載。
類似 Dropbox 或 同步盤工具，就是用來解決這類問題的。簡單點說，同步盤的原理就是本地安裝一個同步軟件和云端的服務器進行通信，這個同步軟件會綁定相關的本地文件夾。于是，這個文件夾內有任何文件的變更，同步軟件就會自動把變更的軟件傳輸到服務器上。
而同步盤的特點并不是只能客戶端和服務器一對一傳輸，而是可以多對一同步。如果服務器內容更新，它就會把更新的數據實時推送給其它客戶端，更新它們本地的文件。
通過這種模式，就能實現自己多臺設備，或者團隊多個成員設備的文件夾實時同步，無需你手動進行操作。
當然，同步盤對服務器的資源占用與消耗遠遠大于一般網盤，所以基本只有付費的工具，而這種帶給我們生產力的提升和數據安全的預算是有絕對必要的。
如果使用蘋果的同學，可以通過將 .eaglepack 保存到關聯 iCloud 的文件夾即可（最好“文稿”里）。蘋果系統就會自動開始同步，其它 Mac 電腦就能實時接收。 默認的空間肯定不夠用，建議開通 200G 容量的服務。
如果用專業同步云軟件，以堅果云舉例，下載完客戶端，只要完成關聯包含 .eaglepack 的文件夾，那么該文件夾就會啟動同步。再在別的電腦中安裝堅果云，就可以把該文件夾下載下來并自動同步。
我收集靈感素材是非常有目的性的，比如一個項目需要的配圖素材，我會一口氣去收集幾十張覺得合適的圖。
Eagle 有一個瀏覽器的采集插件，這個插件非常好用。只要拖動瀏覽器的圖片，就會出現對應的采集彈窗，把鼠標移動到對應目錄上就可以完成采集。
如果你覺得整個頁面的圖片都想保存，也可以在插件圖標中使用批量收藏按鈕（或快捷鍵），就可以采集整個頁面中的所有圖片，以及通過尺寸篩選對應尺寸。
應對日常看到的優質作品、靈感圖，也可以非?？焖俚膶崿F采集?？梢宰罘奖愕氖占{我們自己的采集資料。
作為移動端 UI 設計師來講，收集日常見過的優秀 APP 界面，是必要的職業素養。而使用 iPhone + MacOS 再結合 Eagle 的話，這個過程就會變得非常的簡單。
首先以完整頁面收集為例，之前看過不少人推薦使用 iOS 的跨設備復制圖片到 Mac 中黏貼的操作，是完全沒有必要的，因為一次只能復制一張截圖。
你要做的就是開啟相冊的云同步，日常使用 iPhone 時把想要收集的頁面進行截屏即可。每過一段時間，在電腦的相冊中打開 ”截屏“ 相冊，就有你這段時間收集的所有截屏?？蜻x相關內容，拖進 Eagle 對應文件夾中就完成收集，然后再刪除原圖。
而且因為相冊特殊的機制，直接拖拽出的圖片是壓縮后的版本，讓截圖的文件的體積大幅度縮小，從3M 變成 300K（完全夠看），非常好的降低硬盤占用量。
除了收集頁面，更重要的 UI 靈感是頁面中的 ”組件“，我們需要根據組件為目標去收集相關的案例。直接拖進整頁截圖的方式就不太合適，比如下面的瓷片區案例區。
所以，我們要開啟 Eagle 的自帶截圖功能，并設置好你覺得順手的快捷鍵。
記得打開第一個選項 ”彈出分類“，就可以每次截圖后選擇指定的文件夾。不管是你的截圖，還是網上的其它案例，你都可以用最高效的方式收集這些組件樣式，輕易搭建自己的組件靈感系統。
前面講過，我會用 Eagle 來放 Mindnode 這類思維導圖文件。但是，Mindnode 先創建保存，再拖進 Eagle 的步驟太麻煩了。
所以，我正常新建并保存 Mindnode 思維導圖會到它默認文件夾中，然后使用 Eagle 的文件夾檢測功能關聯它，之后所有保存的文件就會出現在 Eagle 的目錄中。
之后，我編輯和查看老的 Mindnode 文件就在 Eagle 中進行了。這么做的好處，還可以讓我使用 Windows 系統的時候能夠正常預覽思維導圖。
Eagle 是可以管理字體的，我把所有正在用或收集的字體都放進了 Eagle 的字體文件夾中。
可能你們會有疑問字體丟進字庫就行了，還管理它們干什么？或者說有字由之類的字體軟件，用 Eagle 干什么。
一方面是我會盡量精簡使用工具的數量，另一方面，就是使用團隊同步盤的時候，我們的團隊字庫是統一的，隨時可以找到啟用的，最快解決其他人的設計文件字體缺失問題。
同時，當我在使用 UI 軟件設置字體覺得選擇起來太困難時，就會去關閉掉大多數最近不會用的字體。實現這個操作非常的簡單，只要新建 ”智能文件夾“，并添加選項 ”字形文件“ 和 ”已安裝“，那么啟用的字體就會全部出現在這個列表中。
用一兩分鐘的時間就可以批量選擇你想要停用的字體，右鍵停用即可，它們就會自動從智能文件夾中消失。你可以一直保留這個智能文件夾，每次清理只需要一兩分鐘時間。
目前上方截圖中的很多案例還不是最終的完整版，最近上海疫情居家隔離，大多數工作暫停中，我在閑暇時就開始重新整理 Eagle 庫。因為以前堆積了很多冗余的東西，所以這次我把整體素材都導出后重新進行整理中，也是為什么會寫這篇內容的原因。
Eagle 帶給我最大的價值，就是為我和團隊節省了海量的時間，讓我有可以更快的找到參考素材，更快的整理分類，更好的同步項目文件。
上面分享的很多體驗和總結，都是在 5 年來長期使用中一點點摸索，適應，并形成習慣的。任何工具的使用與自己工作學習的結合，都是漸進磨合的，每個人都可以在這個工具中挖掘出適合自己的用法。
但依舊要給大家一個建議，不要為了收集而收集，也不要沉迷與堆積素材的數量，讓它為我們服務，恰到好處的出現在我們的實踐過程中。
作者：酸梅干超人 來源：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
什么是形式呢，就是組件在相同的功能和元素下，排版、視覺的呈現方式。形式的對比，就是在一個頁面中，不同組件的呈現方式上是否能形成差異化，讓頁面看起來更豐富多元。
分析上方的案例，組件之間并沒有拉開差異性，尤其在詳情頁中，劇情簡介和觀眾影評，影人和劇照，設計形式接近一致，這就是一個不好的開端。
再看看一些擁有相同問題的設計案例：
仔細點觀察就會發現，作為飛機稿，不是圖片、顏色用得花哨就夠了的，組件缺少差異性，設計感就完全無法體現。如果還沒法理解，就再看看下面幾個案例，是不是就沒有形式強行重復的尷尬，表現得更合理：
所以針對作業中的問題，我們在這個基礎上進行完善，第一步要做的就是在形式上做出區分。所以我們可以通過以下幾個思路來調整第一頁：
- 頭部分頁器和下方的上映/即將上映過于近似，控件形式上需要作出區分
- 圖片太多，模塊左右邊緣都是圖片，導致看上去呆板，要減少圖片出現的面積
- 底部新聞部分不能繼續使用大圖模式要作出調整
第二頁的調整上，主要在下半部分
- 演員和劇照應該有更加明顯的差異
- 評論和上方的簡介這兩個不同的組件，形式上卻看起來完全一致
通過原型上的調整，就可以得到一個初步改版的樣式，各個組件之間保證足夠的差異化和識別性，可以觀察看看是不是比原來的頁面更合理了。
色彩對比是很關鍵的對比，色彩決定作品給人的第一印象。那么如何為色彩做出對比呢？無非就是鮮艷對比淺色、暗色對比亮色、暖色對比冷色，不用特意套用配色的理論，用比較直觀的感受判斷就可以。
開始配色的過程中，我們首先需要確定主色和背景色，原圖中的主色棕色和背景色白色，搭配起來的效果給我們的感受并不強烈，所以我對原色的棕色做一定范圍的調整。
然后把主色添加到原型中，并為相關的一些元素添加合適的輔助色。先看第一頁添加后的效果。
然后我們再為原型增加配圖，這里要重點關注，以 “作品” 角度切入的話，配圖也是整個界面元素的一部分，包括它使用的色彩。如果一個界面中出現了多處需要應用配圖的地方的話，那么不同的模塊所使用配圖的風格和色彩，也應該有一定的對比，而不是一種風格擼到底的。比如還是之前的這個錯誤的案例：
所以根據這個原則，我們加入配圖后再看看效果：
如果頭部我們用了色彩主體比較強烈的配圖，那么在下方就應該用比較平淡簡約的，做出明確的對比。
在第二頁中也應用一樣的方法，那么思路如下：
- 頭部作為權重最高的組件顏色要更突出
- 頭部背景和封面的顏色應該具有更大的對比，并能讓文字更容易識別
- 頭部、劇照圖片較豐富，所以在影人和用戶頭像中應該使用更簡單的配圖
整體增加配圖后的效果：
到這里已經有了大致的設計效果，已經可以明顯感覺到比之前的設計有更好的提升，但是，對比不是到這里就結束了，我們接著往下做。
文字對比是最容易被忽視的細節，很多設計師都認為文字只要看得清就行，樣式變化越少越好，這是非常錯誤的思路。
文字樣式的多少主要取決于文字段的類型和需要重點體現的內容數量，而不是沒有理由的精簡到最少。例如看一篇排版成熟的期刊或是論文，其中標題、副標題、正文、引用、標注等作用不同的文字段，都會有不同的樣式來幫助我們去區分，如果從頭到尾出現的所有文字都應用一樣的格式，那么就毫無可讀性。
文字的對比，主要通過以下幾個屬性表現：
- 字號
- 字重
- 色彩
即：越重要的文字字號越大、字重越高、色彩越深，權重越低的則反之。
回到我們的案例，在原型階段，其實我已經對文字做出了簡單的對比處理，下面我們要進一步細化這個步驟。
修改的分析大致如下：
- 分頁器作為權重最高的文字段，所以模塊標題不應該比它更顯眼
- 多段文本比標題類文字權重低一級，可以統一它們的樣式并比標題稍弱
- 注釋類文字比多段文本再弱一級，用較低的灰度
- 為評分、點贊數、展開等有“特殊性質”的文本增加色相
然后我們可以看看下面修改前后的對比：
通過正確細化文字的對比以后，就能真正讓頁面精致起來，具備豐富的細節。當然，對于文字權重的安排和思考會根據不同的思路和產品需求得到不同的樣式結果，但絕對不能忽略這個過程。
通過正確細化文字的對比以后，就能真正讓頁面精致起來，具備豐富的細節。當然，對于文字權重的安排和思考會根據不同的思路和產品需求得到不同的樣式結果，但絕對不能忽略這個過程。
投影的使用既是視覺樣式，也是一個用來制造景深的技巧。只要在一個扁平的界面中，為任何一個元素添加了投影，那么這個界面就存在了上下的空間關系，處于上方的元素就會得到凸顯，例如蘋果官方應用中的案例：
既然是空間關系，就要有前后的落差對比，我們要為最重要的元素增加投影，而不是把它當成設計風格進行統一的添加。所有元素都帶上了投影，就沒有了對比，可看性也會大打折扣。
所以，在這些頁面中，需要突出的元素分析如下：
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系。
作者：酸梅干超人 來源：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
一、官方規范
對于剛開始思考 UI 元素尺寸的新人，通常第一反應都是去看官方規范，新人都以為官方設計規范的作用就是告訴你們元素的大小和怎么設置，只要看完了就能懂得如何設計 iOS 或 Android 應用。而實際上，這些規范并不能幫助你們解決這個問題，因為設計規范涵蓋的內容遠遠比這些復雜，比如我們之前翻譯過的 iOS 規范。
我們想要搞清楚 iOS 和 Android 官方元素的具體尺寸，最好的方法就是去下載它們的官方 UI-Kits，如下圖的安卓組件庫所示。
官方并不會提供一個列表，逐一羅列每個元素的長寬和其它參數，所以想要弄明白參數的問題，要自己在這兩套素材庫中選中元素才能查看其尺寸。如下圖左側這個按鈕，我們就能看見它的各項屬性：寬 359pt、高 57pt、圓角 14pt；右側的 Alert 提示框則寬 270pt、高 230pt、圓角 14pt。
因為 iOS 組件庫下載下來的都是 dmg 格式的文件，很多 windows 用戶不知道該怎么打開它，這里只需要百度搜索「DMG 提取器/查看器」就能下載到專門的解壓工具了。
在初期，我們想要設計出符合官方規范的界面，就可以嚴格照搬官方的元素設置。但是，即使官方的源文件所包含的元素及字體已經非常多了，在實際設計過程中，還是會出現它們無法覆蓋的元素類型，需要依靠我們自己去給出尺寸。
還有如字體的應用，官方源文件使用的語言是英文，光是官方應用的兩種 SF 字體，就包含了十幾種字重，所以我們可以看見文字應用面板中密密麻麻的字體類型。在真實的中文設計場景下，我們是不可能照搬這種規范的！
所以每一個學習UI設計的新手，都必須要明白，官方的規范終究只是一種建議，我們可以選擇遵守也可以選擇不遵守。如果一味的照搬這些內容，我們是無法設計出有趣個性化的界面的，比如下面這幾款已經看不到 “ iOS 設計 ”的應用。
官方的參數決定我們設計的下限，當你不知道該怎么做，或者設計的目標就是以系統原生的體驗和視覺為準，那么照搬就行了！后面文章要說的，就是脫離開這些束縛之后，該怎么自定義 UI 元素的尺寸。
二、尺寸設置原則
UI 和平面不一樣的地方，就是極其關注元素屬性的具體數值。平面的排版無論是海報或畫冊，使用百分比、目測的形式就足以讓我們做出很多優秀的作品，無需緊盯著其中出現的每個元素的長寬高的數值。而 UI 的設計中，無論字體、圖標還是按鈕，都需要我們嚴謹地定義它們的長寬高，如下圖設計一個按鈕的操作：拖拉出矩形之后，我們依然需要到屬性設置的對話框中去輸入精確到1pt的數值。
這么做是因為在電子屏幕中，圖像的呈現是由屏幕中的像素點來完成的，像素點是最小的顯示單位，一個像素只能顯示一個顏色，所以如果設置了帶有小數點的數值，那么這個元素的邊緣就會虛化。所以為了避免這種情況的出現，我們就得用整數來定義元素的長和寬。
這當中還涉及到不少比較復雜的屏幕顯示原理問題，尤其是和像素倍率相關的基礎知識，我會在另外的文章里分享。
需要注意的是，文章中出現的所有尺寸數值的單位，默認以 iOS 官方規定的邏輯像素單位「pt」為準，即 XD 和 Sketch 默認畫布的單位，若在 PS 中設計需要在這個基礎上乘以 2。
只有分隔線，是唯一可以不使用整數的特例。因為 1pt 的分隔線看起來會非常粗，一點也不精致，感興趣的同學可以自己在 Sketch 或 XD 中畫個列表然后用 1pt 的線條做分隔，再導出到手機里觀看效果。即使是官方應用，也主要使用 0.5pt 的線條做分隔。
無論是在 iOS 還是在 Android 的規范中，都提到過使用 8 x 8 的網格做輔助，這導致網上有很多片面的文章會反復強調對元素的尺寸使用 8 的倍數。
iOS: 使用 8px 網格系統：網格系統可以讓線條和圖像內容在所有尺寸上保持清晰，無需太多的修飾和銳化。將圖形邊界對齊到網格上，減少按比例縮小圖像時出現的半像素和內容模糊的情況。
Android：所有組件都與間隔為 8dp 的基準網格對齊。排版/文字與間隔為 4dp 的基準網格對齊。在工具中的圖標同樣與間隔為 4dp 的基準網格對齊。
實際上，我們在真實的設計環境中，建議大家使用 4 的倍數作為一般元素的尺寸倍率即可，如 8、12、16、20、24……等，它的好處我會在后面的文章中做說明。如果發現 4 的倍數無法滿足某些特定的需要，如：多 4pt 太大，少 4pt 太小，那么我們就可以使用一般的偶數如18、22、26 等。
以上就是我們一開始要建立的元素尺寸原則，精簡完即：
使用整數，只有分隔線可以使用 0.5 的小數
使用 4 的倍數，根據實際情況可以切換成一般偶數。
有了這樣的原則，并養成習慣，我們就能在每次設計前對元素尺寸有個大致判斷，然后再根據需要按 4 的倍數調整
開始我使用 280pt 寬，44pt 高的尺寸，但是覺得有點僵硬，太正式了！這時候反思認為應該是輸入框太矮導致的，所以高度上改成 44+(4x2)=52pt 。這時候又覺得太高了，實際輸入內容也沒那么寬，于是再對高減 4，寬減 40，獲取最終結果。
所以，因為這樣的操作原則，決定了 UI 元素的尺寸不是憑感覺用鼠標拖拽出來的（拖動效率太低），而是在元素的屬性欄中填入它們的數值。UI 的設計過程就是一個不停鍵入參數和調整參數的過程。
這里要聲明，在我的描述體系中，控件指的是：界面中最基本的交互單位，如按鈕、滑塊、開關、分頁控件等，更復雜的如動態卡片，功能快速入口等，就歸入組件中，便于我們理解。
下面，我會根據前面定義的基礎原則，分別講解控件應該使用的尺寸范圍。
一、按鈕 ( Buttons )
按鈕是界面交互操作中使用最頻繁的控件了，當然按鈕呈現的形式也多種多樣，比如可以是文字、圖片、圖標、卡通形象等等。在這里，我們只聚焦于矩形的基礎按鈕。
在進入具體參數的講解前，要先理解一點，按鈕實際上是所有控件中最復雜的一個。并不是因為在設計樣式上復雜，而是因為按鈕承載了最多的產品訴求，權重差異極大，例如看下面的案例。
在上圖里，可以點擊的東西不少，我們只說外觀是標準樣式的按鈕，就有 9 個。而這里面，權重最高的必然是 “加入購物車”。權重最低的，則是前往新品頁。
要定義按鈕尺寸，我們首先需要整理清楚不同的按鈕在界面或整個應用中的權重。尺寸和權重是成正比關系的。當然，顏色也是對重要性表現的關鍵因素，不過不在這里展開。
按鈕高度
當我們設計按鈕時，優先從高度入手，再去定義寬。為了便于新手理解，我首先從高度上來匹配權重，分成高、中、低三類：
- 高權重：40-56pt
- 中權重：24-40pt
- 底權重：12-24pt
高權重的按鈕，類似登錄頁的注冊、登錄，購物詳情頁的購買，流程頁中的下一步，它們的最小高度應該從 40pt 開始遞增。低于這個數值，那么按鈕就很難在頁面中起到視覺支撐的作用，因為會感覺到它太細了。
中權重的按鈕，類似個人主頁的關注、點贊、評論按鈕等。這個層級的按鈕依舊有比較高的交互頻次，所以我們必須得保證它易于點擊。24pt 是在我經驗中便于點擊得最小尺寸了。這種按鈕通常是組件中的一部分，不像層級最高的按鈕常常是處于一個孤立的空間，所以高度如果超出 40pt，就會對當前模塊產生直觀的破壞。
低權重的按鈕，就類似查看更多、標簽、詳情等類型，相對于交互屬性，這類按鈕具備更多的提示屬性，只要讓用戶能看見，又不需要太顯眼。尺寸不大于 24pt，能容納內部文字或圖形元素即可。
按鈕寬度
主流的按鈕都是橫向的長方形，正方形的也有，但就是不能變成縱向的矩形。
按鈕的寬度主要和內容掛鉤，內容數量越多，按鈕自然也就越寬。唯一的例外，只有高權重的按鈕，可以無視內容的長度。因為它們需要更多的區域，往往都是撐滿屏幕內容區域或橫跨屏幕的，可以特殊處理。
普通按鈕，左右邊界與內容的距離過大，就會讓按鈕看起來非常的不協調。所以我們要根據內容的長度來設置按鈕的寬。左右間距的大小，應該小于或等于上下間距的 2 倍。
按鈕圓角
最后，按鈕尺寸還有一個屬性，就是按鈕的圓角。矩形的四角有三種類型，即直角、圓角和半圓。
為矩形設置圓角，是為了讓按鈕看起來有一定的圓潤感不會顯得太尖銳鋒利，這種圓角的數值要給得更加謹慎，只要超出了一定的范疇，就會對視覺的和諧產生影響，我習慣稱呼為——半圓不圓，如下圖右側的錯誤案例。
所以，我們在設計圓角的過程中，一定要仔細感受圓角在畫面中的和諧性。而圓角的設置范圍，小于等于高度的 1/4。例如，一個 24pt 的圓角矩形，圓角的尺寸就應該不大于 6pt。
以上就是按鈕相關尺寸定義的說明，當然，在真實的設計需求中可能遇到很多無法滿足的情況，這就需要大家多做嘗試了。
二、輸入框 ( Text Fields )
輸入框也是比較常用的控件之一，它和按鈕有非常接近的外形。最常見的就是登錄頁賬號密碼輸入框，以及首頁上方的搜索欄了。
輸入框的高度，常規在 36-56pt 之間。低于 36pt 時則輸入框看起來會非常擁擠，比如我用下面學生的案例做個演示。
三、步進器 ( Steppers )
常見的步進器，就是輸入框和按鈕的結合。左右有兩個用來增加數量的按鈕，中間是允許我們直接鍵入數字的輸入框。在尺寸上，它也介于兩者之間，高度在 28-40pt 之間。下面我再用學員的作業做次演示，當低于 28pt 以后，就會發現在屏幕中的占比實在太小了。
步進器中常見的錯誤，是在我們在繪制左右兩個按鈕，設置外框的圓角時，并沒有合理的去掉內側的圓角，這是絕對不應該忽略的細節。
四、下拉菜單 ( Dropdown Menus )
下拉菜單要注意它具有多種狀態，默認、展開和選中。默認狀態與輸入框類似，主流的高度也使用 36-56pt。但是，當菜單展開后，下方多出來的選項菜單，就值得注意了。
菜單的寬度正常情況下與默認狀態相同，而高度根據里面包含的選項數量決定。單行選項的高度，不大于默認的選項框。但也不能過小，新手很容易在彈出菜單中設定過小的高度，使個控件看起來會非常的別扭。
五、開關 ( Switches )
開關也是按鈕的一種形式，通常出現在設置頁的列表中，上方就是它主流的幾種樣式。在設計開關的時候，要先確定一個矩形區域，高度使用 24-32pt，寬度則用 1:2 的比例。如高度使用 28pt，那么寬大致可以使用 56pt，之后再將其他細節填入。
六、滑塊 ( Sliders )
滑塊形式接近開關，通常在中間有一個操作節點，下面有一個用來表示區間的線條。實際上我們該做的就是分別決定它們的尺寸。
節點如果做的太小，不僅會顯得難看，而且會讓人覺得很難操作。它的直徑應該在 16-28pt 之間。而下方的橫線，寬度由所在內容區域的寬決定，高度一般在1-4pt 之間。
七、頁面指示器 ( Page Controls )
指示器用來展示元素序列，雖然在 APP 中沒有太重要的作用，但既然我們加進去，就要讓它看起來和諧。大多數人在定義指示器時，不是太大，就是太小?？梢灾粡暮竺嫣峁┑某叽缰羞x擇，就能保證指示器的尺寸不會出錯。
指示器主要是圓形和矩形兩種形式：
- 圓形：8、10、12pt ( 直徑 )
- 矩形：14×2 pt、16×2 pt、20×3 pt
八、提示紅點 ( Badges )
提示紅點也是大多數應用會使用的一個控件，它的大小應該在 24-32 pt 之間。作為一個圓形，這個控件設計起來很容易，但設計師往往忽略一件事，那就是如果中間的數值超過 10 變成 2 位以后，要怎么處理。
在設計這樣的元素時，我們要用一個矩形元素來表現，即畫一個正方形，然后將圓角設成最大，那它看上去就是一個圓形。那么每增加一位字符，我們就需要為這個矩形增加該字符的寬度，可以用左右間距判斷。
因為相同字號下，不同英文、數字的寬度都是不一樣的，所以我們要根據實際輸入的字段長度去決定圓角矩形的寬度。
九、分頁控件 ( Tabs )
后一個控件，就是分頁控件了，安卓中的 Tabs。這個元素在設計時也受到排版空間的影響。較為寬松的排版風格，高度就比較大，若擁擠則反之。下面是高度的取值：
- 高權重：40-48pt
- 低權重：28-36pt
分頁控件主要應用在頭部和頁面中部的組件中，如下方的案例：
雖然很多時候分頁器沒有背景色，但是背景的矩形框是必須畫出來的，即隱藏填充和描邊，這樣我們就可以通過垂直居中的方式，來確定中間文字的位置。
一個完整的分頁控件，里面會包含兩個或以上的選項，所以定義每個選項的寬是必要的。通常，我們有兩種定義方法，一種是選項少時，直接進行均分顯示，另一種是選項較多，采取定寬模式，寬度最小建議在 64pt以上，才不會顯得過度擁擠。
分頁控件選項處于選中狀態時，有的設計是修改背景色，有的是修改文字屬性，但今天最常見的就是加入下劃線。這個元素如果定義得不好，會讓整個控件看起來非常粗糙，它需要在樣式中能起到畫龍點睛的作用。
下劃線分為兩種，一種是貼在控件底部的，另一種是在文字下方懸浮的。兩種方式線條應該使用的高度都不應該大于 2pt。寬度的話，前者和每個選項背景區域相等，后者則可以在 8-16pt 間（小于文字總寬）。下面是正確設計效果：
十、尾聲
前面說到了不少控件的尺寸，那么真實應用的效果會如何呢？下面我就用原型的方式，不考慮樣式與色彩將它們組合到完整的頁面中去。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系。
作者：酸梅干超人 來源：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
關于比較
審美是一個宏大的話題，無論是文學、影視、視覺、時尚等我們都可以審視它們的 “美”。不同領域的 “美” 有不同的形式，不同的立場，不同的角度，不同的原則。
在這里，我們不談具體某個領域審美的規則和方式，我們來講講提升審美的具體做法。
講一個例子，在國內，我們普遍覺得女生在對穿衣打扮的審美上比男生更優，對于其它經過設計的事物所展現的審美也比男生更好。這種差別在高中時期便逐漸放大，在大學中就能明顯得感覺出來這一點。
這是由于基因天賦論導致的嗎？
是也不是。女生愛美這點是一個既成的事實，有比較大的先天因素，而因為對美好事物的追求比男生更強烈，所以在審美上整體大于男性。
但大家要注意，這個因果關系的模型太過簡陋，我們要進一步來分析為什么對美好事物的追求就能導致審美上的差異，這就是我們提升審美的關鍵，先從衣品講起。
原因1：
基于對美的追求，女生往往會花更多的時間在穿衣打扮上，也就意味著要購物。無論是在商場還是淘寶，女生逛起來的熱情與時長都遠遠大于男生，這造成了女生在查看數量上也遠遠大于男生。
這就和很多設計前輩告訴你要 “多看” 的做法是一樣的，通過量變引起質變，只要你看的夠多，審美自然就可以提升了。
這話說的頗有道理，但依舊在推理上站不住腳。因為，量變為什么一定就能產生質變？這個變化的邏輯依據是什么？在青銅段位里打了一萬盤，也不代表一定能打進最強王者不是。
所以，這就是要引入第二個原因，關于對比。
原因2：
女生逛街能逛這么久，往往在除了看以外，還會做一件事，就是大量的試衣服（此處被我言中的女性同學可以點個贊讓我看見你們的雙手），經常抱了一整籮筐的衣服進試衣間，在里面對著鏡子鼓搗擺 Pose 大半個小時，然后才能挑選一兩件自己喜歡的出來，或者干脆一件也不要。
嗯，不要問我是怎么知道的……
在這個過程里，就發生了提升審美中最重要的一環 —— 對比。通過大量的對比，來找出好看的、高級的、適合自己的衣服。也因為對比，女生們就通過實踐來了解到，什么樣的衣服是好看的，什么樣的是丑的不適合自己的。
這個過程實際上收窄了選擇的范圍，比如一個個子比較高挑五官比較立體的女生，是很難在比較過后還會選擇那些可愛、少女、小鳥依人的設計。很可能會偏向運動、男友、中性等風格。
而在有了具體的偏向以后，她們依舊會深入到這個范圍，繼續觀察、嘗試、對比，然后再次提升對這些東西的理解和審美。
所以，看吧，審美的提升第一步就是這么簡單，通過大量的觀察，然后對比和篩選，就能非常直接的提升我們的審美，這個提升的過程完全依靠的是人的主觀能動性。
日常生活中我們遇到的絕大多數某些人審美比自己更好的人，都是因為他們在某些方面看過的，比較的比我們更多，而不是依靠天賦的加持，這個思路落實到創作中也一樣。
當然，我絲毫不懷疑人類的歷史長河里，有極少數人打娘胎里就因為染色體中某些基因片段神秘的律動，而獲得了獨特的審美與創作天賦，但那始終是一個可以忽略的概率。審美的提升是個人主動的行為，不要祈禱上帝在你身上投的骰子能得到你要的結果。
即使拋開這群有 “天賦” 的神仙，也依舊還有很多第二梯隊、第三梯隊的老法師們通過奮斗逼的經歷功成名就不是。
所以別這么自戀總要搬達芬奇、畢加索、梵高等人舉例，每次忍不住想要把鍋甩給天賦前，就問問自己鑰匙配嘛？
什么？您配？
您配幾把……
具體案例
不正經到此為止，正經臉……
既然說了那么多關于比較的問題，空口白話難以令人信服，所謂沒圖我說個……錘子。因為很多新人都會說，你覺得大多數設計案例看起來都挺好，覺得挑不出什么毛病啊。
所以，下面我挑了幾個與設計有關的方向，并找了一些案例出來，你們來看看同類型中，哪一張圖是最優的。
而沒被選上的那些，對于你選出來的圖而言，它們當然都是有 “問題的”。
人像攝影
美食攝影
室內設計
產品設計
海報設計
管理界面
UI APP 界面
小結
審美提升的第一步，就是從對比開始，因為這個世界對所有事物的評判，都有不同方向的兩個極端。善惡、美丑、高矮、胖瘦，是對立而相互依存。
就像左拉的《陪襯人》中所講的：
“……另一個卻總是奇丑無比，丑得刺眼，使路人不禁要看她幾眼，并且拿她和她的同伴作個比較。要知道，你上了圈套。那個丑女子要是獨自走在街上，會嚇你一跳；那個相貌平常的，會被你毫不在意地忽略過去。但當她們結伴而行時，一個人的丑就提高了另一個人的美。”
之前我們講了關于審美提升的第一步對比，但是我們留了一個疑問，為什么依靠對比我們可以提升，或者只靠對比我們就一定可以提升審美嘛？審美提升起來就如此容易？
當然不是！
對比的過程只是表象，我們還要追究深層次的原因，那就是“推理”。
在系統性提升審美的道路上，最大的敵人就是——主觀感受。因為無論我怎么解釋和審美提升相關的方法，總有人會覺得它就是依靠個人審美，不同人審美不一樣，總能找出有的人就喜歡網紅臉但看不上湯唯或者高圓圓的案例。
沒錯，每個人都有自己的審美，無論喜歡什么稀奇古怪的東西都可以，存在即合理。但是，設計師該擁有的審美是不能這么隨意的，因為作為專業人士，我們的審美就要符合 “專業” 的要求，即通過客觀標準來評價事物的內在價值。
比如茶、酒、咖啡這類飲品，都已經擁有非常成熟的市場，會根據產品的價值形成對應的價格。而有趣的是，這些飲品都不是甜的，都不符合我們本能的喜好。所以，還有很多人不接受它們，只喜歡帶有甜味的飲料。這種個人的選擇上，任何人都可以偏愛一杯 1 元不到的雀巢的速溶拿鐵，厭棄紅標瑰夏冰滴，但無論你怎么想，也無法改變它們價值不對等的事實，瑰夏手沖有遠遠超出速溶的口感和品質。
但超出的部分在哪里？答不答得上來，就是內行和外行的區別。
內行經過專業的訓練可以品嘗出其中蘊含的風味、口感，解釋它們與產地氣候的聯系，儲藏運輸的條件，以及沖制過程的步驟。但外行往往只能給出好喝、甘甜、順滑、難喝、太苦之類零碎、沒有體系的評價。
如果設計師對設計相關的作品只能做到和外行一樣的水平，那么他也只能是設計師中的外行，并且缺乏成為優秀設計師的必要基礎。
所以，接下來我們來探究一下，作品的評價為什么重要！
丹尼爾·卡尼曼的暢銷書《思考快與慢》中，將我們的思考方式簡單的劃分成了兩個部分，用了非常簡單粗暴的 “系統1”、“系統2” 命名。簡單概括它們的含義，就是系統 1 是聯想式思維，系統2是規則式思維，也可以看成是直覺與慎思的區別。
先說系統1，直覺是我們大腦對日常接受信息簡化處理的產物，我們的大腦就像處理器一樣，每天都要面對海量的信息通過視覺、味覺等五感導入，如果它沒有任何區別的對這些內容進行深度、縝密的分析，那么它一定會超負荷運轉并最終自我毀滅。
所以生物的演化，讓我們的大腦進化出了一套可以對信息進行過濾和簡化的系統，格式塔心理學中關于視覺對物體簡化、完形的理論，也是由其產生，這就是我們對很多事物下意識反應的來源。比如在走路的過程中，看見一輛自行車直挺挺的從遠處像你沖過來，那么你會馬上感覺到危險并往某個方向規避，整個過程會在不到1秒的時間內完成。
而系統2，就是對事物進行邏輯推導的深入思考，如果用它來處理危險的事件，那么結果可能是我們先判斷這輛自行車行駛的軌跡并得出它前進的方向與我站立的位置相交，并且它的時速約為 40km， 在撞到我的時間還有3S，如果以這種速度撞在我們身上，大概率會發生……
“BONG～”
那就不用想可能會發生什么事情，你已經被撞飛了，可以直接得到結果。類似的事情還有很多，無論是對與危險的，還是日常事務的作用，系統1都發揮出了極其重要的作用。也因為它的有效，而導致我們對它依賴過度。所以，很多人在對于美丑的審視上只依靠系統 1 來完成，而不會深入去思考各中原由。
系統 1 對美丑的判斷，是個人的，但它并沒有 “審” 的過程，專業的分析也就無從談起。斯洛曼和費恩巴赫所著的 《知識的錯覺》 里提到：
"直覺給予我們一個簡化的、粗略的，而且通常足夠好的分析，這讓我們產生錯覺，自以為所知甚廣。但是當我們慎思時，我們才意識到事物實際上何其復雜，我們真的只是略知皮毛。"
審美和品嘗美酒、咖啡一樣，需要通過了解專業的知識，培養系統的分析方式進行刻意練習，逐漸擺脫依靠我們直覺做出的不可靠的判斷。
因為任何優秀的設計作品，在創作過程中都不可能是隨性而為的，都是經過創作者深思熟慮后的產物，我們對優秀作品的評價，就是通過專業的知識對其創作邏輯進行推導，哪里有亮點，哪些是敗筆，都是清晰可見的。
它不僅幫助我們判斷別人作品的優劣，也可以分析我們自己作品的不足，從而得到改進的思路。所以為什么說審美要先于實踐，如果連什么是好的都不了解，自己設計出來的東西都不知道如何評價，又談何進步？
在我自己的教學經驗中，這個問題所表現出來的差異就很有意思。如有一些審美能力較差的學生第一次設計 Banner ，花了非常多精力和時間，自我感覺不錯，但是作品質量極差，會在得到否定的評價以后表示詫異和茫然，因為他們已經預感應該得到贊美與肯定。而審美較好的學生則是在完成作業以后充分的發現自己設計的東西和較好的作品之間的差距，那么他希望在我這里獲取的，就是如何縮小這種差距的具體方式，而不是對其作品做出評價，因為他們自己也會覺得作品質量差的沒評價的必要。
但不幸的是，在商業視覺設計的領域中，提升我們的專業評價的能力，并不如其它行業一般有固定的流程和教學，按筆者自己長期的經驗來看，如果我們盲目的從藝術、設計、心理多個學科的基礎理論開始學起，那提升的速度太緩慢，需要的周期太長，而且有非常強烈的挫敗感，如果沒有好老師的引導，還容易鉆牛角尖誤入歧途。
所以，第一部分的對比，重要性才能體現出來。我們要通過實踐作為基礎，來系統性的提升我們的專業審美能力，通過應用推理的能力，抑制我們無所不在的直覺。
前面扯了這么一大堆，都是在紙面上的探討，不太接地氣，只分析一通原因，和你該如何提升審美沒太多關系，這是最氣人的。所以，最后一部分，我們來講講具體實施的做法。
先聲明，審美提升是要通過刻意練習的步驟的，誰也不可能只通過區區幾篇文章就以為自己已經明白了，所以需要執行下面這個循環步驟：
? 采集：大量觀察和收集作品
? 對比：留下它們中最好的
? 分析：尋找優劣差異的原因
開始前，還要解釋一件事，就是我們提升審美都要先從某個點開始突破，從你最感興趣的，或是工作關聯度最高的設計類型開始，而不是無差別的亂看。與美術學相關的所有設計中，底層的原則都是近似的，精通一種，就能更容易理解其它種類的作品。
1.采集
觀察的來源多種多樣，強烈建議初期只使用花瓣即可，不要分心到太多的平臺上，選擇太多往往不是好事，會增加干擾，讓我們疲于奔命，模糊一開始的目標。
例如首先要提升在 APP 方面的審美，我們先在花瓣中創建一個 APP 的畫板，然后搜索 APP 相關的關鍵字，但不需要關注第一頁彈出的采集結果，直接查看 “畫板” 選項。
畫板是別的用戶自己整理的采集合集，我們可以通過封面簡單篩選出你喜歡的，然后打開它們，瀏覽里面收集的作品。
然后盡量按自己最高的要求來找到能讓自己覺得滿意的作品，再將它們 “采集” 到自己創建的畫板中，并設定一個數量，比如采集到500張為止。
2.對比：
達到目標的數量就停下來，因為再采集下去能帶來的作用已經非常有限了。雖然采集中已經包含了選擇和對比的過程，但我們要更進一步，在自己的選出來的作品里進行比較。相信在完成這個步驟以后，你們已經可以明顯感覺到最后 100 張收集的質量是遠遠高于前 100 張的。在羅子雄 TEDX 的演講中就說過：你回頭看三個月前收集的作品，會發現它們都是垃圾……
更極端一點，那就是我們只在挑選的作品中留下最好的十分之一，聽起來是不是很刺激。
也就是我們要開始在自己選出來的作品中，你要刪掉其中的 450 張作品 （最好有留底），即使當中有一些你非常喜歡，而且它們都是你的勞動果實。但就因為這樣，你才會更慎重的進行比較。因為多數人的采集只是走馬觀花，后面根本就不會看這些東西。
當然，這個過程推薦用 Eagle 或者 花瓣 PRO 客戶端，操作起來會更順手一點。
3.分析：
在上一步操作里，我們會動用我們腦海里所有關于理性的分析方法來解釋它們的優劣，并得出結論，雖然這些想法可能很幼稚或漏洞百出，但不要擔心，最后一步就是用來解決這個問題的。
我們捉對挑選一些作品出來，在剩下的作品中和已經被你否決掉的作品各選一張，然后將它們排列到一起，對比它們的優缺點，比如下圖是我從我自己畫板中找出的近期和早期的采集作品。
專業的分析是怎么得出的？當然不像朱熹提出的 “格物致知” 一般盯著它們思考，就能把設計的理論給格出來，這條路是走不通的，所以才有王陽明 “知行合一” 的教誨。
我們要把對比的內容進行細化，把一套作品看成若干細節的合集，明確比較的目標，這樣才能得到理想的結果，比如：
? 字體
? 配色
? 布局
? 配圖
? ……
比如我們挑文字出來分析，這時候局勢已經比較明朗了，上側的設計中文字是能被清晰識別的，在不同的字段類型中字重有對應的調整，主次有序。而下側的文字應用則缺乏對比，部分文字甚至和背景都無法做出區分，且字重幾乎沒有變化，使用了多種字體沒有整體性，導致最后的閱讀感受極差。
同理，你可以再試試分析其它幾個細節，是不是簡單多了。如果這時候你再覺得手足無措，完全分析不出什么具體的東西怎么辦？
學??！
如對比到配色，我們解釋不出為什么右圖的配色不行，那就針對配色去了解相關的配色技巧、理論，網上可以搜索的分享就一大堆了，比如關于色彩對比、用色比例等等，將你學到的知識現學現用套進這兩張作品中，也就可以很快的得到驗證。
后面每出現這樣的問題，就現學現賣，不僅可以直接提升我們對作品的理解能力，還能鞏固我們學過的理論知識。多分析幾組對比，你就會發現對于這類作品的審美和理解已經得到了質的飛躍，這時候，你就可以以留下的這幾十張作品作為你接受的下限，去收集新的作品，完成下一次循環。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系。
作者：酸梅干超人 來源：站酷
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
藍藍設計的小編 http://www.skdbbs.com