關于文字編排的幾條小建議。
排版，或者說對文字的編排，不應該只是平面設計師才需要具備的設計能力。在互聯網設計大行其道的背景下，我認為不同方向的設計師都應該或多或少的具備一定水平的排版功底。能把排版做好，除了有助提升綜合設計能力之外，對自己作品的展示，也能夠起到錦上添花的作用。以下介紹幾個文字編排的小技巧，有助快速提升版式設計感。
重復在版式設計中是指統一與增強，即重復使用顏色、字體、圖形等講究條理性與統一性；重復出現的顏色、字體與圖形能夠有突出與強調的作用。
在這里我們只針對在文字編排中，如何使用重復來編排文字，從而提升版式的設計感。
通過上圖的案例，我們將文字進行重復的編排之后，除了讓畫面更加飽滿規整之外，既能展示完整的星球圖案，文案也一定程度得到了加強，也使得主題更加明確，氛圍感更強。
在文字的編排中，描邊的使用，多用在背景點綴與副標題上。在上文對文字重復的編排中，也使用了文字描邊的處理，這也說明了設計師在設計的過程中需要根據具體情況，找到適宜需求的設計方式。
用描邊處理對文字進行編排，我們可以看到，描邊大多用在了輔助文字上，且被用來充當畫面點綴物。原因在于文字失去填充之后，可讀性會大幅度降低，就會失去文字用于承載信息的作用，所以我們在用描邊對文字進行編排的時候，要盡量避免將其用在主標題或者重要的文字信息上。
使用文字描邊去編排的好處是，當我們在設計的時候發現畫面太空曠，且沒有其他元素可以編排時，用這個方式豐富畫面，除了提升設計形式感之外，也可以讓我們一切的設計元素都有合理的來源，而不是隨機的添加突兀元素。
字距，即文本中兩個字之間的距離。在長文本的文字排版時，我們很少會主動去控制文字間距。因為在一款字體被設計出來時，它的默認字距是經過設計與驗證過的，是最適合閱讀的字距。
但我們在版式設計中，為追求設計形式感，在文案較少的情況下，會對短文本或單一大標題的字距進行調整。原因在于短文本或大標題一般字數較少，閱讀負擔也相對較輕，所以可以接受對其字距進行適當的人為控制。
通過以上兩個字距編排案例的對比，可以發現錯誤編排忽略了文字閱讀性，在控制字間距的時候需要在形式感與實用性進行平衡。
中文繁體，從字型上相較簡體而言，筆劃會相對飽滿與均衡，文字排版使用上也會使版面更加規整。但從使用習慣來說，在做面向內地市場的設計時，繁體的使用需要反復斟酌，避免使用過于生僻的繁體，且盡量多用在短文本或標題。
從上圖案例可以看出，簡體中文的“二零·二一”雖然在閱讀習慣上會相對順暢，但單從文字編排來說，筆劃相差巨大，會造成視覺傾斜，看起來有些失衡。改成繁體中文“貳零·貳壹”，字型筆劃更加均衡飽滿，且文字也沒那么生僻，可閱讀性依然可以得到滿足。
對文案進行斷句，在重點部位進行定位打斷，然后在文字編排時體現出來。以此來制造視覺停留，故意發生不連續性的閱讀，讓閱讀落在重點部分。
斷句編排，可以看得出在版面受限制的情況下，是一個非常好用的編排方式，可以將主標題與副標題拉開差距，而且還能制造視覺重點。
將適合主題的圖案（圖片）填充進文字，在設計風格與調性適合的條件下，盡可能選擇稍粗字體，以便展示圖案全貌，如果能看清圖案全貌的話，也能起到強化設計風格的效果。
找一張精致且符合設計調性的圖片，將它填充進文字，就能起到上面案例的效果。突出了標題，即不影響閱讀性，也強化了畫面整體效果。
對字體進行裁剪和切割，是編排文字的常用手法，讓字體形成缺口或錯位，以此來創造形式感。但在裁切之后，缺失的筆畫會一定程度影響文字的閱讀性。所以在裁切時要注意保留文字的筆畫特征，盡可能的降低裁剪對文字可讀性的影響。
字體裁剪和切割的編排方式，大多用在相對比較大的字號上，原因在于字型被改變之后可讀性會減低，而相對較大的字號，可以彌補字型筆劃缺失帶來的可讀性降低。
在平面的文字編排中，制造空間感的方式，主要依靠層級的疊加。營造出前后錯落的視覺感受，以此來突出我們要傳達的主體信息。
層次的區分，除了前后關系之外，還要對大小與顏色進行區分。盡量明顯的對比，以便拉開文字之間的層級關系。
接下來，可以試著運用上面的編排方式，來做一張最近很流行的酸性設計風格的海報。具體如何編排文字，當然是先把文字隨便排進版式中，然后再對版式的文字進行編排。
下圖是作者按照上面文字編排技巧，花了十幾分鐘做出來的海報，你也可以動手試試～
文字編排也是一門創作藝術，遠不止上文所提到的這幾種方式。本文只是列舉了幾種常用的方法，希望能對大家有所幫助
不知道你們有沒有思考過“對話框”和“彈窗”的區別，我們平常所稱呼的“彈窗”主要著眼于動作，意思就是彈出來的窗口，是泛指，在GUI（Graphical User Interface）屏幕中幾乎所有彈出來的對象都可以稱之為“彈窗”。
在常用的兩個前端網頁開發組件Ant Design和ElementUI中，沒有單獨命名為“彈窗”的組件，都是細分在各個功能分類中。比如Ant Design中相關的細分就有警告提示、全局提示、對話框、通知提醒框、氣泡確認框等，而ElementUI中則又是不一樣的細分法，除了分類方法和命名不一樣，歸根結底達到的目的是一樣的，以上我們都可稱之為“彈窗”，當然在工作中用細分的稱呼會更專業更明確。
這里的“窗口”對標“對話框”和“彈窗”的概念，窗口是承載應用程序的區域，應用程序的窗口被打開，則表示該應用程序正在運行中。窗口可以移動、可以放大縮小，主要有二種姿態，一種是“獨占式”，一種是“暫時式”。顧名思義，“獨占式”就是需要占據大部分屏幕的應用，ps、ai的窗口就是“獨占式”窗口，而“暫時式”則大部分時間在后臺運行，比如音樂播放器、殺毒軟件等，只需在必要時打開即可。
一個應用通常由一個主窗口和若干輔助窗口構成，彈窗就是典型的輔助窗口之一。
對話框強調了用戶與計算機進行對話的過程，是疊加在應用主窗口上的彈出框，一般在對話中它會給出消息或要求輸入。當對話完成后，即可關閉對話框。說人話就是，對話框一般需要用戶進行操作，當用戶輸入或者點擊“確認”、“取消”等按鈕時，計算機會根據指令進行工作，這是一個人機“對話”的過程，因此稱之為“對話框”。
無論在現實中還是界面交互中，我們都不希望對話被打斷，所以對話框通常是模態的（下文會解釋模態和非模態的定義）。
梳理完三個容易混淆的概念之后，接下來主要從彈窗的二個角度展開討論：彈窗的分類和應用場景；彈窗的設計細節和技巧。
彈窗可分為兩大類型：“模態彈窗”和“非模態彈窗”。
模態彈窗：用戶必須給予彈窗反饋，除非點擊關閉或者操作完成，否則彈窗會一直在。形式上來說就是給當前頁面添加蒙層，使用戶將注意力集中在彈窗上。上文提到，無論在現實中還是界面交互中，我們都不希望對話被打斷，模態彈窗不會輕易被打斷，所以對話框通常也都是模態彈窗。
模態彈窗的常見場景：你打開了一個應用的模態彈窗后沒有管它，然后切換到其他應用程序中去，等你忙完回到原來的應用時，那個當初的模態彈窗仍舊在那兒等你。這就是模態彈窗，雖然看起來僵硬死板，但是它的目的和使用范圍通常是非常清晰的。
非模態彈窗：不需要給出反饋，不影響用戶的其他操作，主要有屬性配置彈窗、Tooltips、消息通知、氣泡框等類型。
下圖紅框中就是典型的非模態彈窗，它們可以同時開啟且互不影響，不會影響主程序的進程。
非模態彈窗的另一個特點就是：實時生效。點開非模態彈窗的同時仍然可以看見主界面，主界面會根據你的操作實時變化，你可以隨心所欲地不斷選擇、改變、選擇、改變，而模態彈窗則無法在你點擊其中一個表單的當下立即做出改變。
下圖例子就是非模態的屬性配置彈窗。
出于營銷目的，這類彈窗都會第一時間出現在你面前，直到手動關閉，它的特點就是不用登錄也會出現，提高曝光率，便于拉新和轉化。
主要是為了將一些重要信息通知給用戶，這些信息要么來自一些被觸發的事件，要么來自應用開發者的信息，一般在用戶登錄后第一時間彈出，確保用戶不會錯過。需要注意的是，在應用的通知中心一般也需要保留這類重要或者高級別的通知，以便用戶可以隨時查看回顧。
提示類彈窗是由應用程序主動彈出的消息，主要有三種狀態：錯誤、警告、確認。通常是用戶進行某項操作后給出的反饋信息，會中斷當前工作流，屬于阻塞型提示。
以上都屬于通知公告類的“模態彈窗”，特點就是一般不需要用戶具體操作，用戶將其關閉或者點擊“確認”等按鈕即代表用戶已經接收到該消息，彈窗就完成了它的任務。
“簡單”意義上的彈窗可以理解為只有平鋪的表單讓你選擇或輸入，交互清晰明了。比如創建項目、分享鏈接、更改名稱等操作。
有些應用的功能配置中有很多復雜的屬性，簡單平鋪的彈窗無法滿足需求，需要分層分類歸納，于是從20世紀90年代開始出現了選項卡/標簽頁彈窗。它的優點是合理利用了空間，也能讓用戶更好的理解信息層級。
mac os 8.5系統的彈窗（發布于1998年10月）
monday.com的配置彈窗（簡潔的標簽頁）
標簽頁彈窗的設計必須合理且適度，找到信息之間的因果關系，仔細斟酌并加以連接整理。同時，單個彈窗中的標簽頁不宜過多，一般不超過五個（動態可增減的標簽頁除外）。
如果你的標簽頁過度堆疊，你需要嘗試改變交互方式，重新整理信息。一種辦法是增加標簽頁的深度，將能夠歸納在一起的內容盡量整合，放置在單個標簽頁中；另一種辦法是拆分信息，分成多個簡單的彈窗。
下圖中的例子就是第一種辦法，整個彈窗有三個標簽頁，但是單個標簽頁中又劃分了更詳細的結構化信息，是一個典型的標簽頁少但信息量大的彈窗。
流程步驟彈窗與標簽頁彈窗接近，區別就是步驟彈窗需按順序進行，一般上一步未完成之前無法進入下一步，用戶注冊常用這種方式。
屬性配置彈窗主要為了讓用戶改變某一對象的屬性，可以是局部屬性也可以是全局屬性。
屬性配置也可以用模態彈窗，如何選擇用“模態”還是“非模態”？當你需要讓用戶實時看到界面的變化或者表單項簡單的時候可以選擇“非模態”，如果操作復雜或者信息加載比較耗時，則采用“模態”更合理。
下圖為實時生效的日期選擇彈窗
下拉菜單幾乎都是非模態，它的優勢明顯，沒有復雜操作和各種表單，只需要鼠標劃過點擊即可，快速高效。
上文中應用級的消息提示通常是模態彈窗，而非模態的消息提示彈窗則通常從頁面的頂部或者右側彈出，這類彈窗可以長時間駐留在屏幕邊緣，也可以一段時間后自動消失。
點擊按鈕時，彈出氣泡式的彈窗就是氣泡框，氣泡框可以針對元素進行簡單的操作，尺寸也會根據內容大小不一。
Tooltips跟上圖的氣泡框很類似，區別在于Tooltips更輕量，屬于頁面中最小的彈窗類型，用于功能的提示說明，通常都是文字，背景用深色來與主界面拉開層次。
一般來說，如果是明確的屬性配置彈窗都應該有一個標題來說明用途或功能，以及關聯的動詞來方便理解。比如“創建列表”、“刪除列表”、“修改配置”、“配置參數”等，不同標題對應不同的功能場景，前提是方便理解。另外，動詞在名詞前面或者后面都可以，注意統一規范即可，不要一會兒在前一會兒在后。
標題字號一般比默認文本字號大2px或4px，也有應用為了突出標題，選擇使用更大的字號，但大的字號也應該符合文字規范，而不是隨意使用。
模態彈窗應至少包含一個以上的關閉方式，常見的彈窗關閉方式有4種：（1）、右上角的關閉按鈕；（2）、彈窗底部的“取消”按鈕；（3）、彈窗外的任意區域；（4）、一段時間后自動消失。
“關閉”按鈕在彈窗外：常見于營銷彈窗，一方面按鈕遠離彈窗，比較隱蔽，拖延用戶關閉彈窗的時間，提高信息的曝光率。
“關閉”按鈕在彈窗上：版式設計中有一個“破型”的概念，是一種打破規矩的設計技巧，能讓畫面快速吸引眼球，所以營銷類彈窗經常采用這種設計方法。這種概念可以理解為，我們希望用戶關注于被強調的部分，常見的場景就是ios系統批量刪除App的時候，應用圖標左上角會出現“移除”按鈕。這種方式強調了“關閉”按鈕，視覺上增加層次外，用戶的關閉體驗也更佳，減輕干擾性彈窗對用戶的負面情緒。
“關閉”按鈕在彈窗內：這是應用最廣泛最不容易出錯的方式，對用戶來說，固定在彈窗右上角的“關閉”按鈕代表了安全感，在誤操作或者想中斷操作時我們會自然而然地去右上角點擊“關閉”。
彈窗底部的按鈕一般有2種功能:（1）、取消或者確認；（2）、進入下一步流程?；诖蠖鄶涤脩粲沂终莆帐髽说牧晳T，一般按鈕居右下角的設計方式更廣泛。這些按鈕上的文字大不相同，代表了對計算機的不同指令，但相同的結果都是關閉了當前彈窗。
有些應用也會采取按鈕居左的設計，這種方式有一個優點就是減少誤操作，讓按鈕遠離鼠標點擊熱區。
這種方式一般用于模態彈窗，除了彈窗中的關閉按鈕外，點擊彈窗外的任意區域關閉體驗更佳。操作配置類彈窗不建議采用這種方式，容易誤操作導致正在配置中的彈窗被關閉。
B端彈窗的標題字號通常比內容文本大2px或4px，常用字號為12px、14px、16px，14px為默認文本字號，12px為輔助說明字號，也有緊湊型頁面將12px作為常規字號。無論選用何種字號，都應跟主界面的字體規范保持一致。
左對齊：彈窗中應用最多的對齊方式，適合表單較多的配置類彈窗。
居中對齊：常見于消息提示類彈窗，適合圖文結合或者信息較少時的排版方式。
兩邊對齊：兩邊對齊的方式讓彈窗看起來更規整，適用于平鋪的配置類彈窗。一般表單較多的情況下不建議使用兩邊對齊的方式，一方面左對齊比兩邊對齊看起來更有層次，另一方面多表單時兩邊對齊會使彈窗看起來冗長。
除了對齊方式，表單的排列是B端彈窗中最令人頭疼的一塊內容了，在一些復雜的操作彈窗中，常常包含各種類型的表單，例如下拉框、輸入框、日期框、穿梭框以及各種組合模式的表單項，很容易讓表單看起來凌亂，也影響了交互操作。
單行一個表單項：常見的表單排列，適用于表單較少的排版方式。
單行多表單并排：在復雜場景中，單行只排列一個表單項會讓彈窗超長，因此會采用多個表單并列分布的方式。這種方式存在2個問題：（1）、如果表單的標題長短不一，看起來參差不齊，下圖中的表單標題一樣長是最理想的場景；（2）、橫向距離長，導致彈窗過大。
標題與表單分行排列：越來越多的應用采用這種表單排版方法，這種方法可以兼顧更多場景，可拓展性也更高。這種方法會增加縱向空間的占用，不過眼睛焦點的縱向瀏覽比橫向瀏覽獲取信息效率更高，所以在表單復雜的情況下，相比于上一種方法也是一種更優解。
表單的排版不只局限于一種，我們需要根據表單內容來設計。但是需要注意3點：
(1)、當表單標題長短不一，上下無法等距排列時，我們要盡量將標題和表單分行排列；
(2)、一行不要出現太多的表單項，一般來說彈窗中最多一行排列三個；
(3)、表單的靈活性很強，哪些需要寬度固定，哪些需要根據內容可擴展可換行，我們都要在設計中加以規范說明，多考慮可能會出現的樣式問題，提前規避。
彈窗是一個容器，容器的大小取決于放置其中的內容物。這里主要討論場景復雜的對話框的尺寸規范，其他例如Tooltips之類可作為單獨的組件在需要的場景直接調用即可。
對話框的大小主要根據內容而定，B端應用中，一個尺寸無法滿足所有類型的彈窗需求，所以我們要設定幾種常規尺寸，一般可設定為4種：S（通知提示類）、M（配置簡單）、L（配置復雜或者擴展詳情）、特殊（根據實際情況而定）。pc的小屏幕分辨率為1024*768，所以高度盡量控制在600px以內（除去導航欄、工具欄高度），寬度控制在1000px以內，如果你所設計的B端產品在某個固定的場景中使用，也可以根據使用場景而定，原則就是要讓彈窗能夠一屏展示完全。
這里主要分享一個小技巧，對于彈窗來說很實用。sketch右側屬性面板有一個“調整尺寸“功能，非常適合各種組件化的應用。不同場景下我們會需要不同尺寸的彈窗，有了這個功能，我們不需要每個彈窗都畫一遍，只需要創建一組基本的彈窗規范，其他尺寸可以根據所需場景調整。
未調整過的組件不能隨意更改尺寸，否則將變形不可用。
創建彈窗組件時，把彈窗里需要固定不便的尺寸參數設置好。（設置方法：靠左的左邊固定，靠右的右邊固定，對角的靠兩個邊固定，分割線高度固定，文字圖標寬高都固定）。
設置好后的彈窗組件即可在設計稿中隨意調整大小，固定參數不會發生變化，因此我們在設計規范中只需要做一種或二三種常見的彈窗樣式即可，不需要把設計稿中的每種尺寸都放到設計規范中。
表單同理，在組件中設置好參數后，調用時可以根據情況替換圖標、文字和寬高，非常方便。
在B端設計中，隨著數據量的增加和業務線的擴大，設計師在設計時，常常需要考慮到交互的可擴展性，我們設計的交互至少要滿足未來半年到一年的產品應用。因此作為使用頻率很高的彈窗，我們在設計時尤其需要考慮全面，不只為了滿足當前的場景，也要考慮未來可能應用的場景。
作者：time不休
鏈接：https://www.zcool.com.cn/article/ZMTE3NjYyMA==.html
來源：站酷
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。
蘭亭妙微(www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。我們建立了一個微信群，每天分享國內外優秀的設計，有興趣請加入一起學習成長，咨詢及進群請加藍小助微信ben_lanlan
01. 按鈕設計強弱表現
在整個產品設計中我們要根據信息傳遞的優先級對按鈕設計進行主次區分，設計表達要有強弱差異。按鈕設計可以通過大小、填充、描邊、色相、飽和度等的不同來進行強弱差異，不同強弱的差異表現出按鈕的等級：行動觸發、主要、次要、輔助、禁用等。
02. 圓角設置要合理
對于按鈕邊框來說，我們通常采用全圓角和小圓角居多，這樣顯得穩重大氣。而大圓角按鈕并非不可用，只是相對較少，會顯得按鈕不方不圓的，設計表現顯得不夠成熟。
全圓角的圓角值等于按鈕高度值的一半，而小圓角的圓角值我們通?？刂圃?1/4H（高度值的四分之一）以內（僅為個人參考，并非絕對值）。
03. 投影設置要用對色彩關系
給一個有彩色系按鈕設置投影時，選擇無彩色系（比如黑色）也能達到效果，只是為了得到更好的視覺效果，提高用戶感官體驗。我們也可以嘗試基于按鈕本身色相來確定投影顏色，這樣得到的效果會顯得更加干凈清爽。
04. 投影的使用勿過度泛濫
雖然投影的運用可以使按鈕更有層次感，但是也需要根據具體情況慎用。比如對于一些淺色按鈕來說也許投影反而會降低按鈕的識別度，使得按鈕配色環境顯得不夠干凈清爽。
05. 給按鈕文字一點呼吸感
按鈕文字和邊框的設計要預留一定的留白，不要做“舍不得”的設計，使得按鈕給人感覺很擁擠。如果你把控不好可以分析一些按鈕的負空間獲取經驗，看看文字大小和負空間之間是否存在某種比例關系。找到這個比例關系運用到按鈕設計中，也許會讓你的設計顯得更加成熟穩重。
06. 按鈕設計別讓用戶思考
按鈕的存在是為了引導用戶進行引導式操作，而不是讓用戶對其產生困惑。按鈕設計別讓用戶思考這是啥，是否可以點擊，需要簡潔明了的對此操作進行指引。用戶已經養成對按鈕外觀和功能的行為習慣，如果你設計的按鈕樣式與“標準”差異太大，用戶就會產生疑惑，影響使用體驗。
07. 樣式表達的一致性
當設計元素規范統一時，用戶操作過程中的理解成本最低，一致性也因此成為最有力的可用性原則之一。我們在設計按鈕的時候要注意樣式表達的一致性，比如：按鈕形狀、色彩定義、風格特征等，這樣會使得我們的設計可用性更強。
08. 箭頭運用不是字符輸入
一些初入職場的設計師會偷懶直接字符輸入形成按鈕內部所需箭頭，這樣的表達方式自然顯得粗糙些。箭頭要當成圖標來進行設計，控制好箭頭的粗細和文字筆畫的粗細值接近，這樣顯得更有細節和態度。
09. 按鈕設計主次分明
通過信息對比才能形成主次之分，按鈕設計需要在風格上進行區分，達到層次結構的視覺提示。主要的按鈕需要和次要的、輔助的形成差異，最大化突出主按鈕的視覺效果，更好的引導用戶根據設定的軌跡進行操作。
10. 按鈕設計不要讓用戶誤解
在整個項目設計規范中，我們需要避免讓用戶把非按鈕狀態的內容進行誤判。在確定好按鈕樣式特征之后，不要在其它場景運用其樣式特征或者類似的風格特征，這樣會讓用戶產生錯誤的認知，因而進行無用的操作。
11. 按鈕文本表達要言簡意賅
在進行按鈕文本思考的時候，盡量減少字符和單詞的數量，內容表達言簡意賅，只要能夠準確傳達信息識別度即可。有時候也不一定需要文本，圖標可以傳遞的信息可以考慮文本的減少，也許可以讓界面的呼吸感更強。
12. 按鈕文本設置切勿換行
單行文字的可讀性更高，如果出現換行就會降低可讀性。我們在設計按鈕的時候，確保文本內容在一行之內顯示，如果設計空間不足要考慮文本內容的精簡。
13. 特殊場景要靈活轉變
底部按鈕的運用并非固定不變，不同機型或者特殊場景的考慮需要靈活轉變。比如 iPhone X 等類型的機型，由于底部需要預留主頁控制器的位置，所以在設計按鈕的時候需要考慮上中下的過渡銜接，這樣才能帶給用戶更好的感官體驗。
14. 按鈕大小要便于點擊
按鈕需要方便用戶進行點擊操作，如果用戶點擊失敗或者誤點到周邊元素，就會帶給用戶不友好的體驗。若是帶有文本的按鈕，只要文字大小不要小于極限值，通常實現出來的按鈕交互熱區都會滿足點擊需求。
如果是純 icon 的按鈕，除了按鈕大小需要控制合適以外，也要確保交互熱區能夠滿足點擊區域要求。
15. 同屬板塊按鈕大小一致
在同屬板塊內的按鈕設計，我們可以通過按鈕的強弱來體現層級關系，不要讓按鈕大小不一，這樣視覺平衡會受到影響。
16. 按鈕設計考慮文本最大值
稍微注意細節的設計師也不會讓文本的長度超過按鈕寬度，這是一個非常明顯的錯誤。但是按鈕文本變得很長卻是遇見過的，幾個字即可表達的意思卻使用了過多修飾詞。在進行按鈕文本思考的時候，要根據最佳的視覺效果設定一個最大值，不要任其無限制發揮，這樣會使得最終的視覺效果大打折扣，甚至影響用戶感官體驗。
17. 保持按鈕可讀性
按鈕設計需要考慮在不同環境下的適應度，確保用戶可以一目了然的發現它。現在很多產品都適配了深色主題模式，按鈕的配色不能只考慮白色或者淺色背景下的運用，需要考慮大多數背景下的適配。在進行色彩選擇的時候，始終保持按鈕與背景的高對比度和可讀性。
18. 按鈕去文本是否合理
關于按鈕文本的設置需要結合信息傳遞的識別性和準確性，雖然純圖標顯得設計簡潔大方，但是需要考慮圖形是否可以準確的表達其含義，不會讓用戶出現誤解或者錯誤的認知。所以，按鈕去文本需要根據文案代表的含義來判斷，如果不需要輔助解釋也能判斷出按鈕的意思，那么更為簡潔的設計表達效果更佳。
19. 正確判斷按鈕顏色選擇
色彩在設計中是最直觀的體現，不同的顏色會傳遞不同的性格，帶給用戶認知差異。而按鈕的顏色選擇也并非隨性發揮，需要結合品牌色和輔助色作出判斷。
通常比較統一的標準是采用品牌色作為大部分按鈕的顏色，遇到一些需要差異化的按鈕會選擇輔助色來表達，紅色或者橙色多為行動刺激作用，不適合在非品牌色的時候濫用。淺灰色或者低飽和度的色系會帶有不可用、禁用、失效等屬性，需要酌情選擇。
20. 按鈕位置結合用戶體驗
引導用戶作出選擇的按鈕應該放在左邊還是右邊，根據操作系統的不同也引起了設計師們的爭議。比如 Windows 系統習慣將確認按鈕放在左邊，而蘋果系統卻選擇了放在右邊，用戶運用系統的習慣會影響其行為的適應度。不過要是在移動端個人傾向于將引導用戶作出選擇的按鈕放在右邊，更有利于用戶點擊（特殊人群這里需要除外）。
有時候為了防止用戶誤操作，我們會將確認操作的按鈕放在左邊，通過助力設計讓用戶再次確認。所以，一方面我們要結合操作系統的習慣，另一方面也要結合用戶習慣，將按鈕放在最合適的位置，便于用戶操作。
小結
作為設計師來說，對每一個細小的元素進行深入思考和總結，才能讓我們設計出更好的解決方案。一枚小小的按鈕設計，其背后也有很多需要探索的東西，本文為大家總結了 20 條經驗，相信還有更多值得梳理的細節，期待更多設計伙伴去挖掘。
作者：黑馬青年
鏈接：https://www.zcool.com.cn/article/ZMTIwNzE4MA==.html
來源：站酷
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。
蘭亭妙微(www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。我們建立了一個微信群，每天分享國內外優秀的設計，有興趣請加入一起學習成長，咨詢及進群請加藍小助微信ben_lanlan
情感是我們生活中不可割舍的元素，UI設計師也開始在設計時添加「情感化元素」
重復原則是經常提到的一個概念，在設計中用到的也是非常廣泛
設計中無論是版式還是字體等設計中，重復原則基本上用到的是最多的，這得益于重復本身的屬性，會使元素具備統一性，這樣視覺會更有節奏感，不至于整個畫面不融合，其中利用圓方三角或圖形做設計實最普遍的，相信大家都見過。
開篇前言
希望大家在牛年里都能實現自己的小目標
取得想要的成績，牛氣沖天
先簡單看看重復圖形在海報中的應用
這幅Nike的海報是將文字作為圖形進行設計
置入到幾何形中，形成統一，細節上進行特異性來表現
這幅海報更多的是不規則的幾何形進行組合，主要信息用白色矩形承載
形成特異性，能明確表達傳達的信息
這里則是用簡單的橫線重復形成圖形作為主視覺
還有很多主視覺都是用單元形拼湊成的，多學學Ai技巧用到設計中很重要
而字體設計中我們是不是見過這種
用幾何形來進行設計
這些都是重復圖形在設計中的應用
這種方法能夠幫我們發散思維
更好的掌握構成知識
↓↓↓
下面我們用幾何形設計一幅海報
主題為重陽節
字體先用三角形和矩形進行設計
首先將筆畫用圖形代替
接下來填充漸變色，使文字更有層次感
確定好主視覺位置，對畫面進行空間劃分
這些空間用什么填充呢，是不是就可以繼續考慮用幾何形
那么接著用幾何圖形將空間填補
這里只是一種組合方式，別的方式期待大家解鎖
要注意元素之間的節奏性
接著我們對信息進行處理，做好信息之間的對比
然后將一部分幾何形去除
把我們需要的信息放到相應的位置即可
加上噪點效果增加質感
最后我們加一個帶場景的樣機效果
↓↓↓
如果用到商業海報中能不能用這個思路呢
我們一起來看看
嚯哈~
我們先看看文案信息，簡單將文字劃個層級
顯然是個家裝的海報，全屋定制
盡量要高級一點
再來看看客戶提供的圖片
三張圖片，說多不多，說少不少
我們就分成多個矩形塊來嵌入圖片
上面主要是圖片，下面是信息
接著我們對信息進行處理
文字選用宋體，凸顯品質感
信息之間都做個小對比
中文配英文，標題配符號，這個是要點，記住了啊
接著我們將主標題和主圖放到相應的位置
接著將剩余信息放進相應的空間
由于整體色調偏低飽和度，這里背景我們選用藍灰色
最后看這個畫面，是不是左下角還有點空
而且氛圍感不夠
這時候我們加上一些裝飾
再安排一個小沙發，畫面就完成了
今天的分享就到這里了，希望對小伙伴有一點點幫助
新的一年，立個小目標
爭取把學到的東西轉化成自己的，才是真正的進步
關于設計思維你了解多少？
設計思維模型對于互聯人來說非常重要，經常我們在評價一個候選人時候會說，這個同學系統思考差了點，或者說用戶和商業思維不夠。那么到底什么是系統思考，設計師該如何學會系統思考，系統思考到底能幫助我們在做設計時候有什么幫助，今天希望我的這個分享能讓你了解什么是系統思考，以及它的思考模型是什么。
設計做久了你會發現離不開流程和思維，之前支付寶一位大佬總結下來叫“左手藝術，右手科學”，藝術大家都明白，設計師是感性動物，對于美的追求是大家都是擅長的也非常有發言權，那么科學指的是我們需要通過科學的方法流程，系統的思考問題方式，讓設計不止好看，同時也應該符合用戶，商業訴求，滿足好這3者的平衡點。
所以設計師，除了關注「左手」藝術的部分，同時也需要關注「右手」科學的部分。
設計思維模型不止是一個單一的思維模型，它包含三種思維模型，設計思維，用戶思維，產品思維。今天這篇文章，我們先來了解第一個思維，設計思維到底是什么，我們該如何提升設計師的設計思維。
第一個設計思維也是最基礎的，就是作為設計師，我們必須了解各大平臺的設計規范，這是做任何設計的基礎，如果你了解你負責的這個平臺規則，那么你的設計就無法邁出第一步，所以對于剛做設計不久的同學，基礎思維規范需要去死記硬背背下來，沒有這個基礎后面都是無用功。
常用的設計規范，比如蘋果的設計規范，里面詳細講述了，常用的蘋果導航欄高度是多少，蘋果的表格視圖高度多大，頁面中常用的設計字體字號多少，如何去適配不同分辨率，這些基礎的設計原則，都統稱為設計思維。
谷歌的material規范，也是設計師必須了解的規范，特別是需要了解它在系統層面和iOS的差異化。
設計思維很重要一點，就是要了解基礎的審美，以及用戶心理學，其中排版運用比較多的格式塔原理，是做設計排版的基礎。
相似性原則：我們會潛意識把更緊密的事物歸屬一組。
相似性原則運用：淘寶網導航菜單就是運用這種原則，根據產品類別一致，進行同類分類，這個就是運用的格式塔緊密設計原則。
封閉性原則：視覺系統自動嘗試將敞開的圖形關閉起來，從而將其感知為完整的物體而不是分散的碎片。
封閉性原則運用：我們會自動將這些不完整的圖形在腦海中封閉起來，形成一個整體圖形。如圖中海報，雖然文字被遮擋了一部分，或者被一些圖形分割了，但是我們腦海中還是會自動腦補出設計畫面。
連續性原則：我們的視覺感知系統傾向于連續性，視覺系統傾向于感知連續的形式而不是離散的碎片。
連續性原則運用：Pinterest和ins雖然卡片被下面截斷了，但是我們還是會認為它和下面內容是一組的。
焦點原則：一個一面只有一個核心，一個眼睛，引導用戶去關注你想表達的重點。
焦點原則運用：少即是多，蘋果的很多產品就是運用一個焦點，做到畫龍點睛的作業。
地面原則：我們的大腦將視覺區域分為主體和背景，主體包括一個場景中占據注意力的元素，其余都為背景。
地面原則運用：如上圖案例中，我們視覺會自動將紅色，綠色，藍色當做背景，頁面的幾何圖形會當為主體，用戶的注意力也在上面，在平時做設計時候需要去營造這種空間和層次感。
格式塔是設計很重要基礎之一，來源于20世紀的德國，也是作為設計師必須掌握的設計原則，也是你做設計的第一個需要掌握的設計基礎。
很多同學剛做設計，很容易在頁面中為了體現自己掌握的某種技法，而做過了，或者設計的頁面太偏向于個人喜好。這是不對的，我們的設計最終一定要是用戶使用的，否則再漂亮華麗的設計都會是曇花一現。
Path的設計在剛出來時候，簡直是業內交互和視覺標桿性產品，創新的交互細節，精致的頁面表現。都很完美，但是最終也逃不過曇花不現，很大部分原因是產品定位不準，商業思考不夠，沒有很好解決好用戶訴求，最終導致失敗。所以在一個成熟的設計中，設計好用比好看更重要，我們要做的就是在這個過程中不斷尋找合適的平衡點。
當年Facebook 出品的paper這款產品，也是業內關注度極高，把手勢運用到了極致。但最后也逃不過這種命運，幾乎移動市場上，沒有一個產品是因為好看而活下來的，幾乎最后的那些被人們每天使用的產品，都不是因為好看，而是因為好用，滿足人們痛點需求。
所以，剛工作的設計師，在設計思維這個層面，一定要明確我們的每一個頁面，一定是滿足用戶完成任務為第一優先級，其次考慮產品整體和品牌，公司大的設計方向掛鉤。
工作幾年后，作為一個漂亮的設計效果圖都不難，很多時候參考下競品，在競品基礎上去找一些差異化創新，甚至做出一個超越競品的設計效果圖，加上真實動效，好看的圖片，精心排版的文案。這些很多設計師都可以做到。但是很多設計師忽略了真正上線后的效果。
上面那個情況，我想大家都經歷過，我們效果圖做的很好，干凈的商品圖，標簽也很規范。但是實際上線后就是右邊效果，各種圖上放牛皮癬，以及各種標簽。
從業務層面來說，沒有錯，因為放牛皮癬可能銷量更好。但是設計時候，我們是不是可以再往前一步，幫用戶思考如果圖片上房廣告該在展示，如果文案很多時候，標簽很復雜的展示規則。
優秀設計師不僅僅能做出漂亮設計圖，同時他們也能對內容進行負責，定義好詳細是內容規范。
之前淘寶的同事，定完一個電商的KV風格后，還會出一個詳細的風格指南，里面會去定義配色，文案話術，字數，以及頁面圖片的展示規范，這些的目的都是對內容進行控制。
目前很多設計師以為做UI就只有扁平化，以為大公司設計流程都是痛點分析、人群畫像、旅程地圖、用戶調研、方案呈現。各種一堆推導，然后最終的方案簡簡單單收尾，同時還暴露一個很大問題，風格單一。其實UI真的不止是只有扁平化。
手法一：手繪簡筆風格
如果你是設計日記的忠實讀者，你一定看過我之前寫過一些大廠的設計手法。手繪簡筆就是其中一個風格之一，整體風格都是手繪線條配以低飽和度顏色，有很多趣味性和故事融合在里面。
Facebook改版之前的風格就是運用的這套風格，整個頁面也更加年輕和時尚。
手法二：分形藝術風格
利用簡單的幾何圖形，不斷重復，形成一種新的形式，在一些背景上，一些圖形和海報上經常被大量運用，只不過很多設計師并沒有關注到這些風格。
Uber之前的規范中，對于全球的各個國家的設計，都是定義了一個國家的基礎圖形，然后圍繞基礎圖形做出了一系列擴展，這其實就運用到了這個分形重復設計手法。
包括我們熟知是蘋果相冊圖標，chrome瀏覽器和谷歌相冊圖標，都是運用這種手法，一個基礎圖形有規律的變化。
手法三：柔光風格
很多設計師做東西風格比較單一局限，UI發展到今天其實有很多新的風格出現，柔光風格就是其中之一，整體風格呈現出光的折射特征，顏色層次豐富，有明顯的光的流動感和方向性。在設計上常用漸變，光斑，流動透明疊加手法，是目前大公司比較主流的一種風格。
整個畫面有色彩流動感，背景一般是多色融合，有層次，有流動液體變化。
像這個案例就是色彩上跨度比較大的一個漸變，同時運用白色透明疊加方式處理，細節簡單細膩。
支付寶之前芝麻信用的風格我很喜歡，其中就是運用的這套設計手法，背景運用這種虛實，光斑作為層次。
在很多可視化場景中也會運用，比如左圖就是運用波浪透明疊加線條作為頁面核心焦點，右邊頁面背景底部運用有層次的漸變和光暈。
手法四 ：紋理風格
這個風格很多人都有印象，特別是韓國設計中大量運用了這種設計，國內電商中也會運用比較多，這種風格就是紋理風格。
淘寶的88會員，我們能看見會員頁面輔助元素這些紋理效果作為背景出現在這些頁面中，能很好將視覺層次豐富起來。
雙11的宣傳海報，也是運用這種幾何紋理作為視覺層次的裝飾。
考拉當年的改版設計，很核心的元素就是這個圓形，以及他的底紋運用效果。
這種底紋效果，很多時候也可以傳遞出品牌的氣質，品牌的調性，左側音樂播放默認圖片，特別有品質感，右側電商主頁面的背景，清晰感覺，后面線條恰到好處。
當然，設計趨勢并不止我今天說的這些，其實有很多，作為設計師，設計思維中很重要的點，就是關注趨勢，并將他運用到你設計中去，這是必不可少的一項技能。
從這張經典的圖中我們可以看出，設計只是一個產品其中很小的一部分，很多設計師以為我們看見的就是一切，其實不是，就像冰山一樣，表現層是最上面的一部分，冰山下面其實有很多的內容。
我們來看個案例，比如支付寶：
表現層：
視覺設計師比較容易關注的，圓潤的圖標，卡片的設計，扁平的風格，2.5D的插畫風格，小螞蟻的微動效，支付寶品牌藍色，以及一些卡片的動畫效果。
框架層/結構層：
頂部的4個金剛設計，也是用戶最常用的4個功能，下面14個宮格導航，代表不同的服務入口，小螞蟻卡片是通知入口，下面營銷廣告資源位，下面是千人千面或者推薦的服務卡片等等。理財頁面也是如此，頭部用戶數錢，下面業務入口下面不同理財服務。
范圍層：
根據用戶的訴求，中間的宮格導航是動態變化的，用戶也可以去根據內容需要去定義，小螞蟻通知入口也是如此，一個小喇叭的功能，把所有支付寶的通知都收在這個地方，底部卡片根據用戶習慣去展示，比如你經常點外賣那么推送你美食卡片，你比較關注疫情推薦你疫情卡片等等。
戰略層：
顧名思義，那就是公司整體戰略，從支付寶品牌升級更加年輕化，強化生活服務心智，首頁新增外賣到家、果蔬商超醫藥等便民生活版塊，并基于智能算法為用戶推薦喜歡的服務，讓每個用戶擁有更貼心專屬的支付寶。
所以其實所有產品都是圍繞這樣邏輯去設計，我們設計師要明白設計那種趨勢手法，只是一部分。我們要不斷的去了解最頂層，才能理解產品設計背后的規則邏輯。
今天分享的是設計師需要掌握的思維模型，其中關于設計思維的，我們再來回顧下，設計思維包括哪些：
1.了解基礎的設計規范；
2.知道常用設計原則；
3.知道設計是用來用的，而不是藝術；
4.知道設計不止是效果圖，對落地負責；
5.知道主流設計趨勢和手法；
簡單的細節調整就能加強設計品質。
簡單的細節調整就能加強設計品質，昨天沒想到幾個小時寫的一篇小文章很受大家歡迎，后續我多寫一些類似使用技巧，大家多給我點贊一些，支持我繼續寫下去，那今天再給大家分享幾個設計小技巧。希望能幫助到大家。
小輪廓能讓設計更精致
電商設計中，白色商品圖非常多，很多時候如果細節處理不好，就會體驗非常糟糕，如上圖就是大家經常用到的一個場景。列表中有一個商品圖，這個設計有一個很大的問題，就是列表是灰色，商品圖是白色，白色和app的底色白色融為一體了，看起來非常缺乏平衡感。
仔細分析，你會發現問題是商品圖頂部有些白色部分和背景頁面的白色融合在一起了，同時卡片背景是灰色，所以色彩白色和灰色非常突兀，那么如何解決。其實有一個很小的方法就能解決這個問題。
我們直接在商品圖片周邊留出2px的邊框，就能很好的解決這個問題，因為背景是灰色的，留出的邊框剛好讓白色圖片看著有一個輪廓，整體更加和諧。
前后效果圖對比，加了一個淺淺的邊框就解決了白色圖片的問題，是不是頁面一下子精致起來。
同樣的原理，在大的商品圖上，留下小的邊框也很好的解決了白色地圖和背景的問題，這個小技巧希望大家能掌握。
善用色彩疊加讓頁面效果更潮
上圖這個場景我想是很多同學每天工作都在用的，圖片上需要去放一些文字，我們一般處理方式就是在上面疊加一個黑色，給一個透明度，這樣文字就能看清楚。這是一個設計手法。
還一種設計手法就是在圖片頂部，加一個黑色到透明的一個蒙版，這個大家都會。
但是這兩個設計如果對于一些比較年輕，比較潮流的頁面處理，可能就會感覺少點什么，那么這個時候就需要我們大膽一點，用一個色彩疊加的方式去設計，效果就會完全不一樣。
直接在圖片上根據你產品調性，疊加一個彩色，然后講顏色模式改為線性光，那么整體的感覺就瞬間不一樣，畫面潮了很多。
我們來看看效果對比，是不是瞬間一個普通的設計就潮起來了，當然這個效果也需要看你頁面實際場景去使用。如果你頁面就是一個傳統的設計，用戶就是普通用戶，那么可以就上面2個方法去設計，如果你的產品調性需要傳遞出很潮流，很時尚，那么就可以試試這個方法。
當然你也可以在局部去疊加色彩，效果一樣很棒，我最喜歡的音樂軟件Spotify在頁面中就大量使用這種手法在設計，有興趣同學可以下載看看。
善用空格和留白
有的時候負空間非常重要，很多同學的設計稿，非常的擁擠，頁面都像要溢出屏幕了。如上圖，文字和圖片過于緊湊，圖片下面的圖標，熱區不夠，看起來非常擁擠。
大家都太吝嗇運用空格了，但是留白和空隙是提升設計中非常重要的點。能讓你頁面呼吸感更強，是優化設計，讓設計更精致非常重要的一個小技巧。
簡單優化下，把信息分成3部分，然后加大留白，讓信息留白更多，增強設計呼吸感。
最后來看下效果，是不是看起來舒服多了，節奏感和呼吸感更強了，也有例如我們理解信息內容。
最后
今天就和大家分享這么幾個小點，希望大家都成為一個關注細節的設計師。
對于按鈕控件，Material Design 在規范中寫下了“突出一個按鈕”原則：布局中應包含一個視覺突出按鈕，以使其他按鈕在層次結構中的重要性降低，讓此高強調按鈕吸引用戶最多的關注。
依據用戶體驗設計的宗旨，把這么長一段話說直白一些，其實就是：讓按鈕幫助用戶做出最優選擇。
越是權威的設計團隊，對自家所探尋出來的核心原則越是從一而終。Google 產品線的按鈕設計，始終遵循著MD規范這一個標準。我想就這一標準，來展開對于「按鈕」設計的探索。
Material Design 按照視覺強調程度將按鈕分為了四個類型：
文字按鈕（低強調）：通常用于次要操作；
輪廓按鈕（中等強調）：描邊讓輪廓按鈕比文本按鈕更突出一些；
填充按鈕（重點強調）：填充按鈕具有視覺重點，因為它們使用了顏色填充和陰影；
切換按鈕（按鈕組）：使用布局將同類按鈕分組。與其他按鈕類型相比，它們的使用頻率較低。
MD規范之所以如此定義按鈕類型，其實就是為了滿足設計原則中的「對比」原則，足夠差異化的對比才能讓用戶視線有明確的著陸點。
你可以用“較高視覺級+較低視覺級”的按鈕搭配，來引導用戶在當前場景做出更重要的操作。
這一手法示例在許多產品中屢見不鮮。例如在一些功能性場景中，出于用戶體驗，用“較高視覺級”按鈕來輔助用戶進行正確操作。
而在一些非功能性場景中，許多產品還使用這個手法來突出重要操作，為業務引流。甚至你可以從中去摸索到競品當前對哪一塊業務更具有側重點。
例如信用消費類金融產品常常用“較高視覺級”按鈕引導用戶對賬單進行分期。而京東白條在賬單還款時，也用“較高視覺級”按鈕引導用戶進行“小金庫還款”，為自家的金融業務引流。
這些案例都是在視覺上幫用戶做出選擇。
但反其道而行之，我們也可以推敲出，當當前場景的敏感度較高時，我們也可以降低按鈕的視覺對比，不要對用戶進行引導，讓用戶自行謹慎操作，做出選擇。一般在協議、隱私條款場景這樣的設計會更為常見。
按鈕尺寸是設計界老生常談的一個問題了，想必最經典的按鈕尺寸標準就是 iOS人機設計規范提到的“44pt”。除此之外還有MD規范對安卓按鈕定義的“36dp”、“56dp”等等。
但你是不是也疑惑，為什么我們常?？吹桨粹o五花八門的設計尺寸？“44pt”真的是按鈕尺寸的標準嗎？
這個回答可以在設計師 Scott Hurff 曾寫過一篇關于按鈕可行性的博文中找到答案。
Scott Hurff 在使用 iOS 9 鎖屏狀態下的 Apple Music 時，遇到了問題：
在我想切歌時，我常常無法一次就點中切歌按鈕，我需要一而再再而三地嘗試。我甚至會因誤操作而調高音量，或是按到暫停。
而 iOS 9 在這里所用到的按鈕尺寸就是經典的44pt。
等到 iOS 10 更新了這一設計之后，上述情況改善了許多。同時也提起了 Scott Hurff 對于按鈕設計尺寸研究的興趣，并展開了一系列科學性的論證。
Scott Hurff 搬出了2006年芬蘭奧盧大學和馬里蘭大學帕克分校的研究人員合作進行的實驗。研究人員測試了兩個場景：
執行單個任務場景（如激活按鈕、點選復選框或單選按鈕）
執行連續任務場景（如輸入電話號碼）
在研究過程中，研究人員在每個場景下都測試了一系列不同大小的按鈕。他們發現，當按鈕小于9.2毫米時，單個任務場景的錯誤率顯著增加；當按鈕小于9.6毫米時，連續任務場景的錯誤率顯著增加。
當時這個實驗只確定了按鈕尺寸的合適區間。但五年后，兩所德國大學的研究人員又進行了另一項研究。這一次他們的目標是：確定觸摸屏按鈕的最佳觸摸目標尺寸。
這一次研究人員發布了一個Android游戲，該游戲被下載約10萬次，記錄了約1億2千萬次點擊事件。游戲的玩法很簡單：玩家要點擊各種大小、可能出現在屏幕任何地方的浮動圓圈來通關。
分析游戲中的點擊事件后，研究人員發現當圓圈尺寸小于15毫米，玩家的錯誤率逐步增加；當圓圈小于12毫米左右時急劇上升；當點擊目標小于8毫米時，玩家沒點中圓圈的概率超過40%。
但圓圈的尺寸大于 12毫米時，玩家的正確率也沒有顯著的數據變化。即 12毫米 就像一個按鈕尺寸用戶體驗的最大臨界點。
通過兩個實驗印證了按鈕尺寸設計的科學性后，提煉出了4個關鍵數據：9.2毫米、9.6毫米、12毫米與15毫米。
而通過換算之后經過換算可以發現，iOS 的按鈕建議尺寸約為 7毫米；Android 約為 9毫米。但微軟所給到的按鈕規范建議則直接是以“毫米”為單位的，定義為 13毫米。
經過數據的換算總結可以得出以下結論：
1.Android 所定義的 36pt 按鈕高度約為5.5毫米，在設計按鈕時，盡量不要低于這個高度（文字按鈕也應該盡量把可點擊熱區擴展到這個高度）；
2.36pt、44 pt、56 pt，這些規范參考數據在具體的頁面中需具體分析運用，目前各大規范已放開了按鈕高度的指導建議，并不是一定要讓按鈕保持一個固定的尺寸，只要在合適的可點擊范圍內，均是合理的；
3.根據以上的實驗結論，按鈕尺寸的最大臨界值 12毫米（約為 82pt），大于 82pt后并不能增加用戶可點擊概率，更多是視覺方面的考慮。
合理科學的按鈕尺寸可以讓用戶準確地點擊并進行操作，能夠避免發生類似 iOS 9 Apple Music 所遇到的狀況。
我發現當下許多 APP 好像或多或少會忽略按鈕的狀態樣式設計。似乎許多人認為移動端按鈕狀態并沒有 Web 端重要，可能是因為移動端按鈕沒有 hover（懸?。?態，認為按鈕在移動端只有常態與點擊態，狀態較少，覺得用戶本身就易于區分。
但實際上MD規范提到按鈕狀態，不但沒有簡單地一筆帶過，還展開了一個專題進行了深入研究，可見把UI控件的“狀態”準確地反饋給用戶，是多么重要的一件事。
按照MD規范，按鈕的狀態，一般會發現有：
Enabled - 激活狀態（按鈕常規狀態）
Hover-懸浮狀態（Web場景下的鼠標懸浮狀態）
Focused-聚焦狀態（長按聚焦狀態，如長按語音輸入）
Pressed-點擊狀態（按鈕被點擊按下的狀態）
Disable-禁用狀態（按鈕不可用的狀態）
Loading-加載狀態（我自行添加進來的，當下較為流行的多態按鈕）
正確地在前期規范中定義按鈕的狀態交互及樣式，對按鈕的合理設計與用戶體驗而言其實十分重要。按鈕狀態可以有效地傳達給用戶當前操作狀態，如發生失誤操作時可以及時止損，減少撤銷/返回操作的成本。
狀態樣式定義的過程其實并沒有想象中那么麻煩，一般視覺上可以高度與顏色來營造效果。
· 高度 ：界面中往往使用陰影來營造高度視覺差，例如常態時的陰影能夠營造懸浮、可點擊的效果；禁用狀態取消陰影，可以營造按鈕觸底，無法點擊的效果。
· 顏色 ：顏色的改變可以直接在按鈕上方覆蓋一層含透明度的顏色遮罩，這樣可以確保適量的底色可見性，并且針對每種不同的狀態，應調整顏色遮罩不同的透明度值。MD有一套現成的透明度指導建議，可以進行參考。
“幫用戶做出最優選擇”說起來很容易，做起來卻容易被忽視或令產品設計者糾結頭疼，不然 Steve Krug 也不會寫一整本《Don’t Make Me Think》來教大家如何揣摩用戶思想的書了。
我盡量從我能考慮得到的方面，聊了關于按鈕交互的設計點，可能不太全面，也歡迎補充與校正。至于按鈕的視覺設計，因為過于個性化，且篇幅原因，我就不再展開討論了。
希望這篇文章能夠幫助到你對按鈕有新的認識。我是耍家，我們下期再見。
藍藍設計的小編 http://www.syprn.cn