加上簡單的文字編排，一張很有品牌形象的海報就做出來了。
原文地址：修先森撩設計（公眾號）
作者：修先森
轉載請注明：學UI網》設計的魅力既是如此
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
頁邊距與版心
頁邊距是指版面上下左右留“白”的范圍。
版心是指頁邊距所包裹的區域。目的是為了使內容看上去處于安全范圍內，也符合人的視覺習慣
注：所有元素都應該在版心內編排，但并不是絕對不能超出版心，在已有規則下，我們可以將部分重要性低的元素放置到版心之外，從而為畫面帶來動感與張力
欄和欄間距：
“欄”就是放置文字或圖片模塊的范圍，“欄間距”就是欄與欄之間的距離。
在建立好“欄”的標準范圍之后，主觀將元素和內容進行占比分配，根據實際需要跨欄應用，讓排版更具靈活性。
在PS默認的單位為“像素”，而我們做的海報、畫冊等印刷品使用的單位為“毫米”。所以要先執行【編輯】—【首選項】—【單位與標尺】，把“標尺”單位改為“毫米”。
再執行【視圖】—【新建參考線版面】”，分別設置列、行數、裝訂線（欄間距）、邊距。如本次我們要設置的是5X8，欄間距為5毫米、邊距為10毫米的網格：
新建好的網格如下：（快捷鍵Ctrl+；可以顯示或隱藏網格）
在AI中沒有繪制參考線的命令，可以先使用“矩形工具”，繪制矩形邊框作為版心。
打開【對象】-【路徑】-【分割為網格】。點擊“預覽”，行的數量選擇8，欄的數量選擇5，間距選擇5，點擊確定后按“ctrl+5”,轉成參考線。
新建好的網格如下：（快捷鍵Ctrl+；可以顯示或隱藏網格）
ID為專業的圖文排版軟件，在進行書籍畫冊排版時，一般只設置豎向的分欄。在新建文件時，選擇“邊距和分欄”。
在對話框中分別設置邊距、欄間距和欄數即可：
然后執行【版面】—【創建參考線】，
分別設置行數、欄數、欄間距：
設置好的網格如下：（按W鍵可以隱藏或顯示網格）
設計時設置網格是為了幫助你讓頁面中元素布局更加規范且統一，易于用戶理解，靈活運用網格不僅不會限制編排形式，還會使版面變得更加清晰、生動、統一、有條理。
原文地址：藝海拾貝Design（公眾號）
作者：鄧海貝
轉載請注明：學UI網》如何在PS、AI、ID中快速繪制“網格”
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
漫畫作品資源圖往往承載了這個故事的內容、情感關系、又或者是人物性格等…，而設計者的任務就是去制造這個畫面賦予它意義使用戶能夠迅速的得到想要傳達的信息以及情感。
我們所有行為的背后其實都是情感的驅動，情感塑造了我們的思維感受，以及回應整個世界的方式。所以當我們的設計激發了用戶的回憶以及想象力，也就觸發了情感鏈接。
視覺設計師余肉圓圍繞【什么是情感的傳遞者】，【傳遞情感的4個要點】以及【如何利用情感傳遞使畫面更有故事性】展開了分享。
她認為設計師不單單需要的是設計技能的提升，更重要的是要捕捉事物本身的情感。再去傳遞給大家，這才是設計師需要做的。
還向我們展示了一個嘗試突破的完整案例-獵愛誤殺，探索他們是如何主導視覺走向。
漫畫logo設計不單單是字體設計，往往還要結合故事劇情去設計，快看設計師宋宇瀟從設計背景、設計原則、品類概覽、女頻品類分析設計思路、男頻品類分析設計思路5個方面去分享他做漫畫字形設計的思路和經驗。
最后MEUX的資深設計師慶爺介紹如何運用環境、信息和行為、三步掌握運營設計理論體系，結合自身參與的設計案例，希望能幫助設計師輕松掌握運營的底層邏輯，徹底解決視覺風格與活動的關系等問題。
快看的交流在2個小時激烈討論中結束，同學們都意猶未盡，表示開拓了自己的思路。
原文地址：百度MEUX（公眾號）
作者：愛分享交流的
轉載請注明：學UI網》對話設計圓桌會-快看漫畫
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
品牌是運營中非常重要的部分，產品是品牌的生存基礎，而品牌是產品的認知升華，它代表了產品在用戶心中的形象，同時影響著用戶自身認知世界的構建。
好看視頻是一個為用戶提供海量優質短視頻內容的專業聚合平臺。我們希望通過好看品牌運營升級強化產品調性，提升產品氣質。于是針對“如何找到適合好看視頻的品牌道路”進行了全面的思考和分析。
通過對好看視頻視覺語言的探索與應用，形成統一品牌感知，深化用戶與產品的情感鏈接。向用戶傳遞產品理念，為產品建立優質形象。
在設計初期，我們對同類型產品與用戶類型進行了分析，現在很多品牌的活動視覺不只是單純的畫面展示，都開始有更加明確的設計背景和理念，但品牌不是千篇一律的，需要突出產品的特色，明確自身定位。
好看視頻在升級后主打“知識傳播”的內容，我們從這個角度出發，將“輕松有收獲”作為貫穿產品的設計理念，思考如何通過設計來傳達品牌感知。
品牌不是單一樣式的體現，包含了多種表現形式。在這個過程中，需要重點考慮通過哪幾個維度來支撐整個品牌體系。我們梳理了以知識傳播為中心觀點，邏輯統一、情感滲透、個性風格、表現手法和知識內容五維一心的傳播框架，運用以超級符號提取、輔助圖形重構、字體、色彩、排版、動效等設計手段，將產品理念傳遞給用戶，建立好看視頻在用戶心中的優質視頻聚合平臺形象。
1、好看視頻品牌升級海報
品牌海報是好看視頻品牌升級中最重要的環節之一，我們為好看視頻九大垂類設計了九個相對應的概念場景。每個場景的中心主體均與品牌logo形狀強關聯，強化超級符號在用戶群中的記憶度，擴大品牌影響力。
我們對九大垂類進行了發散性思考，確認了“以好看視頻logo符號為主體，通過材質、元素的結合表現垂類感受”的設計方向，帶著這樣的思考收集了每個垂類對應的一些情緒圖。
在測試階段，以美妝為例，可以看出元素的羅列或許更加直接，但缺乏了想象力，形式上偏向“電商”。經過多次的嘗試，最終的設計邏輯我們決定以材質為主要突破口，柔軟的皮毛、細膩的膏體等具有想象空間的質感會更加觸動人的感官。
我們通過質感與元素的組合，形成中心主體畫面。在字體設計上，為了適配多垂類海報的應用及后續調整，在版權字庫中選擇了方正摩登體作為本次設計的通用字體。背景結合趣味貼紙強調輕松有收獲的品牌調性。
按照同樣的思路完成了9張海報設計，我們以品牌logo作為容器承載不同的真實質感，結合拼貼+故障風的排版，體現品牌調性的同時，打破固有思維，注重細節和質感帶來的沉浸式視覺體驗。
2、好看視頻品牌升級概念片
在完成9張垂類海報的同時，我們還規劃為本次品牌升級做了一支品牌概念片，多維度對好看視頻品牌擴大影響力。
如何在保持景別不變的前提下，讓整條片子富有趣味性，是本次設計的最大難點。我們通過拆解優秀的動態作品，總結出了一個貫穿全片的動態邏輯。通過“元素動勢、攝像機動勢、太陽光動勢”的相互配合，形成強關聯且具備故事性的銜接轉場。
![[優化輸出圖像]](https://imgs.xueui.cn/wp-content/uploads/2022/02/ezgif-5-8065076557.gif)
例如，利用旅游垂類的攝像機旋轉，承接美妝場景。用睫毛刷的動勢，銜接杠鈴動勢的同時，在中間直接加入剪輯的氣口。
![[優化輸出圖像]](https://imgs.xueui.cn/wp-content/uploads/2022/02/ezgif-5-ae1881cce5.gif)
將評測與人文垂類設定為正反桌面，通過翻轉進行鏡頭切換。設定筆筒與咖啡袋同樣倒下的動畫，加入太陽光方向的延續，同時，將攝像機調配為速率相接。
![[優化輸出圖像]](https://imgs.xueui.cn/wp-content/uploads/2022/02/ezgif-5-c1ef7282f2.gif)
除了轉場，每個場景的細節動畫都給予了充分的表達。通過多種動態手法的組合，緊密銜接了每一個場景，保證強化品牌符號感知的同時，提高了視頻的動態細節。
![[優化輸出圖像]](https://imgs.xueui.cn/wp-content/uploads/2022/02/ezgif-5-ad73c2b293.gif)
本次品牌設計在發布會、萬象大會中都得到了很好的反饋，我們的設計影響力在內外都有了非常大的提升，為后續設計樹立了標桿。
在品牌運營越來越重要的今天，成體系的設計打法，不僅規范化了設計側的執行流程，也統一了整體的品牌感知，使得向用戶傳遞產品理念變得更加直觀，向外建立優質形象擴大影響力也變得更加簡單。
轉載請注明：學UI網》好看視頻品牌升級運營設計
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
百度文庫作為行業內的頭部品牌持續多年，把創新和開拓為己任，如今開始在品牌IP的領域上探索。市場上有很多著名的高辨識度IP，比如迪士尼的米老鼠、唐老鴨，即時通訊軟件LINE的LINEFRIENDS等等。這些IP幫助品牌提高了知名度，同時也為品牌帶來了巨額利潤，可以說IP形象是品牌的一種資產。
IP形象作為具象化的產物，能夠幫助文庫在用戶心中建立深刻的品牌形象，擴展文庫品牌線上線下多場景的影響力。當IP形象能夠做到足夠惹人喜愛時，它自身就會有超越品牌的個性魅力，從而反哺品牌，為文庫吸引更多用戶，驅動營銷玩法的升級。
剖析競品IP設計底層邏輯，找到切入點成為抓手，建立框架，理清思路后深入設計。
IP形象要與品牌承接，必須契合品牌定位。風格表達要符合時代潮流趨勢與消費者的審美視覺契合。
IP形象往往承載著企業對品牌價值觀的表達，同時衍生出IP形象本身的性格特點。
好的IP形象本身就帶有一定的故事性，這樣便于用戶了解品牌的價值觀。后期還可以進行二次創作，發展IP形象的周邊產品，比如手辦盲盒等，形成一定的文化氛圍。
結論：進一步剖析文庫品牌，細化需求。從四點著手支撐設計：
1. 文庫價值觀：讓每個人平等的提升自我;
2. 完善IP形象性格特點；
3. 設定完整的背景故事；
4. 選擇適合的風格表達。
四個方面相互呼應，互為支撐。促使IP形象設定有的放矢。
通過探索各種可能性，進行逐個衡量、推演討論，初步選方向，主推其一，按照設計思路進行不斷調整和優化。
概念闡釋：首先利用圓潤的造型營造親和力，用文庫拼音首字母”W”的造型結合鬃毛設計，在視覺錘的角度上來說剪影的識別度非常有優勢，同時也有山或筆架山的造型，寓意書山有路，勇攀高峰。
01/會員LOGO
02/會員身份卡、掛件
01/會員買贈系列活動開屏
02/七夕告白指南系列漫畫
03/重點垂類個性化形象
04/表情包
![[優化輸出圖像]](https://imgs.xueui.cn/wp-content/uploads/2022/01/ezgif-7-8a58b1bcb2.gif)
01/IP周邊文具禮盒
02/IP軟膠手辦、毛絨玩具
各互聯網品牌都有各自的成熟IP。百度文庫同樣重視IP形象的設計和布局，其作為一個重要的品牌概念，是科技和文化的集合體。作為文庫的“代言人”，IP形象可以幫助品牌在產品、市場業務鏈中，發揮其自身獨特的商業價值、增強情感歸屬和拓展應用場景。在用戶體驗和文化輸出方面給予用戶更多的溫度和關懷。
原文地址：百度MEUX（公眾號）
作者：文娛平臺用戶體驗
轉載請注明：學UI網》百度文庫品牌IP形象設計
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
絕對時間包含：年月日、時刻
絕對時間適用于對時間精確度要求較高的時候，比如說訂單創建時間、某項活動開始/結束時間、特定節假日簡稱等。絕對時間在信息表達上更加精準、正式，給人確定感和安全感；但是內容顯示過長，占用的空間較大。
相對時間的展示形式：剛剛、XX分鐘前/后、XX小時前/后、X天前、昨天、明天、今天等
相對時間適用于對時間精確度要求不高的時候，比如說消息、通知類功能、Feed流。采用相對時間對用戶來說理解成本低，不用去往前推算出發布的具體時間點；但是不夠精確、并很難衡量兩個時間點的臨近性。
目前主流App上，年月日的常見的用法有“2022-01-01”、“2022.01.01”、“2022/01/01”、“2022年01月01日”、“2022-01-01 ～ 2022-12-30”，那這些日期格式是否都正確呢，日期的連接應該使用什么標點符號？
《中華人民共和國國家標準GB/T15834-2011標點符號用法》中對于連接號、點號、分隔號的使用場景有明確規定。
連接號（短橫線“-”、一字線“—”、波浪號“～”）：標示某些相關聯成分之間的連接；
點號（.）：作用是點斷，主要表示停頓和語氣；
分隔號（/）：標號的一種，標示詩行、節拍及某些相關文字的分隔。
基于國標對于連接號、點號、分割號的使用場景說明，用阿拉伯數字表示年月日時應采用短橫線“-”。在比較正式的文件、公告中，日期一般不用分隔符連接，而是直接采用中文的年月日連接。
Antdesign規定日期范圍需要在日期或時間范圍之間顯示波浪號 （前后需要空格），這種方式是不符合標點符號的使用規范的。
在標示時間的起止時，應該使用一字線“—”，而非波浪號“～”，波浪號主要用于標示數值范圍而非日期的起止。日期帶有分隔號橫短線“-”時，可以采用“至”作為連接符；日期不帶有分隔號橫短線“-”時，可以采用一字線“—”作為連接符。注意日期與連接符之間用「空格」隔開。
時間計時方法包含十二小時制、二十四小時制。在設計過程中注意區分十二小時制，上/下午和A/PM的位置區別。
當日期和時間連在一起時，兩者之間用「空格」隔開，如“2022-01-01 16:00:00”、“2022年01月01日 16:00:00”。
涉及到周的時，可以將周放在日期與時刻之間，用「空格」隔開，如：“2022-01-01 周三 16:00:00”、“2022年01月01日 周三 16:00:00”。
涉及到日期和時間范圍時，可在表示日期范圍的基礎上添加時間，如“2022年01月01日 16:00:00 — 2022年01月01日 16:00:00”、“2022年01月01日 16:00:00 至 2022年01月01日 16:00:00”、“2022-01-01 16:00:00 至 2022-12-30 16:00:00”。
以月、日為標志的事件或節日，用漢字數字表示時，只在一、十一和十二月后用間隔號；當直接用阿拉伯數字表示時，月、日之間均用間隔號。
設計雖然有很多的表達形式，但還是需要遵循文字規范哦。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
“我們需要停止快速設計，學會減少設計?！?br style="outline:0px;margin:0px;padding:0px;" />
我們的心態需要從一次性做完全設計轉變到進行小規模設計。那么，所謂小規模設計到底要怎樣做呢？這篇文章來跟大家分析一下小規模的設計是什么樣，它有什么好處呢？
為什么要做小規模設計
在討論如何做之前，我們先談談為什么，為什么在設計、搭建和交付中小規模思維如此重要。這并不像人們想的那樣，僅僅是為了讓某些設計師和研究人員掃興，他們出于某些原因喜歡對所設計的東西有一個整體的看法。
通過最小的設計來為客戶或用戶提供價值，可以給我們帶來很多好處。首先，我們可以把一個有潛在價值的東西直接提供給某人，讓他立即開始使用，而不是讓他等待設計人員開發完其他幾十個不相關的功能或更新。一般來說，只需非常小的變化或錯誤修復就可為用戶產品體驗帶去巨大改善。
當然，有時候，設計上的變化可能不會帶去任何影響，甚至是帶去負面影響，這些缺陷我們越早發現越好。更頻繁地運送小型成果，對我們理念和執行的反饋也能更高效地回輸。
通過遞交一個小規模版本，你能盡早預測未來會發生的大問題。想象一下，如果你早就知道某些功能雞肋的表現，你根本就不會創建這些功能！想象一下，如果你不忙于搭建無人問津的龐大版本，你本可以向用戶提供多少價值。盡早交付小型的設計，你就能及時獲得相關信息，這些信息可以幫助你的團隊對剩余的設計部分進行取舍。
通過把設計分解成可交付的小塊，我們可以盡早且頻繁地向用戶提供價值，同時在投入大量資源之前及時獲得反饋。這聽起來真是美事一樁。
唯一的缺點是，小規模設計很難做得好，如果你做得不好，那還不如一口氣把所有東西都設計完。
按理來說，小規模設計不應該比大規模設計難才對，但出于一些原因，許多設計師十分不擅長處理小規模設計思維。
首先，作為設計師，我們常常被教導要從整體上考慮產品和體驗。這是件好事，因為我們得了解用戶對產品的整個體驗。事實上，大家都知道把東西分成幾塊來設計可能會導致不連貫和不一致的體驗。
某位與我們交談的設計師完美地解釋了這一點。她的團隊任務是為一個有不同類別內容的大型網站設計信息架構。工程師們想直接開始編寫搜索內容的代碼，但她覺得只提供一個類別的分類法是不妥的，因為她知道，一旦她評估了系統中其他類型的內容，工程師們會發現還有更多東西同樣需要搜索。畢竟，你不會用搜索鞋子或汽車的標準來搜索書籍。她不希望得到一個不完整的模型，以后還得再做改進。
與我們交談過的許多人都說，一旦設計進入市場，他們就很少有機會進行迭代和改進。當迭代和改進環節缺失時，設計者只能盡可能多地為初代版本添加細節。
當然，對于設計者來說，知道某項不完美的功能面世，且它永遠不會被改進，這是非常痛苦的。畢竟這就是我們的工作。我們希望它是完美的。我們希望它能為人們解決問題。我們想讓每一項作品都無愧于心。這些都是非常合理的反應。因此當我們確信完整版本會更好時，一般不會考慮交付小規模且不完整的設計。
小規模設計的意義在哪里
小不等于壞
Jobs4Pets.com上一項小型但重要的視圖功能
我們經常把某項產品的初代版本稱為MVP或最小可行產品。但是，人們往往忽略了”可行”兩個字，而這恰恰是最重要的。當你創建一個新功能或產品的初代版本時，盡管規模再小，它也必須是可行的。它不應該存在問題，不應該無法使用，更不應該帶去糟糕的用戶體驗。
請記住，我們進行小規模設計，并把它交付給用戶，目的是為了了解關鍵信息。這就是生產最小可行產品的全部意義。如果我們推出了一個糟糕的、有缺陷的或無法使用的產品，我們所了解到的無非就是人們不喜歡這個糟糕的東西! 以及我們必須弄清楚，人們之所以不使用我們的新功能是因為它不對，還是因為它雖然功能完美，但可操作性太差，以至于沒有人能夠堅持使用。
小不等于無關功能的混雜
小規模設計、搭建和交付的另一個困難是，我們可能會傾向于一股腦交付大量的小功能，因為這些功能可以為快速構建，所以我們就先將它們做了。
思考一下，你正在構建一個讓人們搜索和申請工作的界面。有很多東西需要你來完成，例如，你需要用戶能從潛在雇主那里得到帶有工作描述的招聘信息；你需要一個要求求職者提交他們個人信息的界面；你需要一個能讓雇主審查申請的系統。你還可能會需要某種檔案或賬戶頁面，讓流程雙方都將信息存儲進去，這樣他們就不必在每次發布或申請工作時都重復輸入信息。
上述所有大系統都包含多個小功能在里面。例如，申請系統可能包含暫停功能，求職者可以暫停申請，過一會再來完成?；蛘?，發布系統可以讓雇主在需要另雇他人時重新發布工作描述。
現在，作為設計師，你可能認為你需要一次性交付所有功能才能打造一個有力的招聘網站。但事實并非如此。你要做的是，確保你搭建各項功能時采用了正確的設計順序。比方說，重新提交招聘信息的功能應該推到后面，在此之前，應當設計首次發布招聘信息的界面。同時，應該先設計出令人們查閱各種工作的方法，然后才輪到申請工作界面的開發。
每次你設計和發布的東西都應是有用的，而且應該以合理的方式出現在現有的界面上。
小但有用
最重要的是，你發布的任何東西都應該有益于目標用戶。如果你有一個非常大的用戶群，你的設計可能不會立即對每個人都有用，但它應該有一定的使用性，至少足以讓你得到反饋，并在下一次迭代中完善版本。
對一個招聘網站來說，最小可行產品是什么？要想交付某版本以獲得用戶反饋，你能做的最小努力有多少？
如何進行小規模設計
小規模設計涉及很多技巧，下面這些技巧十分實用，且可操作性強，并且仍有發展的空間。例如：
理解目標
小規模設計最重要的部分就是理解你正在創建的功能或產品的核心目標。如果你的目標太大或者你對目標理解不透徹，就很容易因為 “有人可能需要它 “而繼續增加一個又一個的功能。
例如前面提到的求職網站。如果它是一個普適型的招聘網站，那么你的設計將與針對專門行業的招聘網站有很大的不同。過于寬泛的目標會影響你的搜索選項、你期望顯示的工作數量，以及對申請表格的要求等等。
鎖定明確的目標用戶，你就已經成功了一半。設計一個小型的、有針對性的功能或產品對你來說作用更大，所謂為 “所有人 “設計的大型功能，實際上對任何人都沒多大用處。
做好一件事
假設你正為你的求職網站設計信息表。你可能想廣泛地構思，試圖了解雇主和求職者可能需要的所有不同的報告，然后把它們都設計出來。
Jobs4Pets.com的信息報告案例
花時間研究哪些報告形式最好用是完全合理的，但不妨考慮一次只設計和搭建一種，最好先做研究，找到那些價值最大化的報告形式。為什么要把時間消耗在搭建價值最小的報告形式上呢？這樣反而浪費了用戶時間。用戶可能根本就不需要你手頭搭建的那些遜色的報告形式。通過一次只設計和發布一種類型，你會得到更快的反饋，且能定期為用戶提供價值。
一次僅設計和搭建一種類型有助于為你的用戶提供最大的價值
這種設計思維不只適用于報告。如果你打算發布多種類似的產品，看看是否有可能僅從一個開始，到后期再逐漸增加。
不要從代碼開始
設計一個新功能或產品的方式有很多，我們可能會在會議上花大量時間來爭論最佳的方式。
理想情況下，我們可以搭建許多不同版本，然后看看哪個版本更受歡迎，但這導致了另一個問題：編程和代碼成本不菲。另一方面，原型和實驗法可是相當便宜。
與其直接跳到設計完整的功能，讓工程師們立即開始工作，不如嘗試設計實驗。試試禮賓服務測試或綠野仙蹤實驗。建立一些交互式的原型，與用戶一起測試。
沒有規定說設計師只能設計像素般完美的界面，我們也可以成為實驗設計師。
不要立即面向廣大群體
設計師在向人們交付不完美或未完成的設計時，常常很在意的一件事情是，用戶可能會感到失望。畢竟，推出半成品最終可能會對產品和公司產生非常不好的影響。
但向一小群用戶提供內測產品就完全不一樣了。在幾十個甚至幾百個用戶身上測試新的設計，可以為團隊提供巨大的價值，即發現關鍵的見解和潛在的問題，同時不會有讓整個用戶群失望的風險。
不要再古板地認為，推出新功能必須通過新聞發布和市場推廣才能實現。雖然只是在幾十個測試者或一些內部人員中提供內測版本，但你仍然在向用戶提供價值。如果交付對象的規模較小，你對失敗的擔心會少很多；如果你先在較小的受眾中測試了你的設計，你失敗的可能性也會少很多。
接受不完美
除了上述技巧，團隊還應學會接受不完美。事實是，世界上不存在完美的產品；此外，在多數情況下，我們甚至不知道什么是完美。顯然，我們不應該向人們提供無法使用、有缺陷或不安全的軟件。但是我們也不需要花幾天或幾周的時間去糾結每一個像素和每一點拋光，特別是在連這個功能是否有用都不確定的情況下。
想想看，我們到底把多少時間浪費在所謂華麗的設計上，而對應的產品甚至無人問津。比起糾結細枝末節的完美，如果把時間花在測試想法和找到人們真正想要使用的產品上，我們的收獲會更多。
允許迭代
當然，如果你要接受不完美，最好也愿意進行迭代。我們接收到設計師在敏捷軟件開發團隊工作時最大的抱怨之一是，團隊從不進行迭代。團隊會非常努力地工作，爭取快速交付，然后從不反思或改進功能。有時候部分團隊甚至不測試產品效果。
如果你從不回頭去改進（或扼殺）你不完美的功能，那么沒有人會放心地發布他們認為可能不完美的東西。我們必須致力于向用戶學習，不斷改進已經投放在外的功能和產品，而不是不停地向用戶輸送無效產品及功能。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
前言
做好圖標設計是一個入門級UI設計師的必備技能之一，圖標是界面中非常重要的組成部分，在實際的工作中，即便是一些工作多年且有一定經驗的設計師，也很難保證自己設計的圖標有多么完美。不同位置的圖標在界面中所起到的作用不同、風格也不同、其設計思路更是有所區別，例如金剛區、分類、標簽欄、服務工具等。
用圖標準確的表達出實際含義，僅僅學其「形」是不夠的，需要對圖標有較為全面、系統的認識，了解圖標的相關概念、正確的繪制方法及處理好一系列的細節，本篇文章將介紹圖標設計的具體方法及要點，幫你規避掉一些常見的問題，讓圖標設計有理有據。
本期大綱
一、圖標的定義
二、常見的圖標風格
三、性格與氣質
四、設計規范與流程
五、常見問題及注意事項
六、圖標資源
七、總結
一、圖標的定義
1 什么是圖標？
圖標是一種具有高度概括性的圖形化標識，在界面中與文案相互支撐、搭配使用，隱晦或直白的表達內容的具體含義、屬性特征、形象氣質等豐富的視覺信息。
從概念上來講，圖標可分為廣義、狹義兩種，廣義指的是現實世界中的圖形符號、且有明確指向的含義，而狹義的圖標指的設備界面中的符號，這些設備泛指承載互聯網產品的載體，如手機、電腦、iPad...等。在UI設計中主要具是針對狹義的概念。
圖標設計是一門學問，在我們的認知中，通常將圖標理解為某個概念的抽象圖形，通過設計清晰易懂的圖形傳達出比文字更高效率的信息，同時提升界面的美觀程度。想要將圖標設計的更加出色，則需要頻繁練習、不斷試錯、持續探究并嘗試新的風格，所以很值得我們花費大量的時間去鉆研練習。
2 圖標的基本特征
一個界面是由文字、圖標、幾何圖形、圖片（音頻、視頻）組成，從UI設計師的角度，相對來說，其他三種元素大多運用到的是排版技巧，而圖標則是需要繪制、創作的元素，在沒有圖標的情況下，純文字也可以代替，可為什么貴還要費力費時的設計圖標呢？原因主要有兩點：
首先，圖標作為一種圖形符號的存在，跟文字的復雜程度相比，在識別效率上有著先天的優勢，因文字需根據語種、長短的不同，所占用的界面空間資源就不同，在文字較多的情況下，大大減低了用戶瀏覽速度及信息傳達的效率，固圖標將文字信息進行了濃縮。好的圖標不僅易于識別、效率更高，且讓界面更加簡潔，所以我們常見的圖文結合界面，絕大多數都是圖標在上、文字在下，或者圖標在左、文字在右，這些設計足以說明圖標視覺傳達的優先級高于文字。
其次，不同風格、樣式的圖標能讓界面看起來更美觀，提高用戶的視覺舒適度。設想一下，如果界面沒有任何圖標的點綴，即便用戶也能使用，但看多來多少都有些枯燥無味，全部用文字來理解內容還容易引起視覺疲勞。
二、常見的圖標風格
1 扁平風格
扁平風格圖標主要是由形狀的描邊、填充進行各種組合搭配來表達不同的含義，并通過不同的色彩體現出不同的視覺效果，最常見配色有以下幾種：
◇ 單色：簡潔、清晰視覺效果，常見于基礎功能圖標。例如：B端功能入口，移動端個人中心、二/三級頁面的工具欄等，也有很多app的金剛區利用底色塊襯托反白的圖標。
◇ 雙色：是很常見的功能性圖標，至少由兩個以上的元素組成，在單色的基礎上加以色彩點綴，讓本身就不是很突出的元素不再單調，如果融入品牌色，能提升整個界面品牌調性，適用場景跟單色圖標相比則范圍更廣。
◇ 多色：至少由三種或以上的形狀、顏色組合而成，常用于金剛區、產品分類列表、定制化菜單等。
◇ 漸變：漸變色的圖標顯得較年輕化，可以是單元素的漸變或多元素的漸變組合，能映射出一種活潑、熱烈的氛圍。例如：視頻、直播等娛樂類型的APP，或車載UI等。
◇ 不透明度：調整圖標中某個元素的不透明度，可在不變換色系的情況下豐富配色細節，還能與底色融合的更加細膩，解決多色漸變視覺跳躍的問題。
另外，在UI界面中，扁平化風格圖標使用最多的當屬線性、面性、線面結合這三種類型。
1）線性
線性圖標主要是通過線條描邊勾勒出來的圖形，在界面中的尺寸普遍偏小，其線條不能過于復雜，否則將會影響辨識度，看似不多的簡單線條搭配不同的色彩，則有很大的調整空間。
2）面性
面性圖標主要通過剪影的形式來制作抽象的形體，相比線性圖標則面積更大、視覺層級更高且更有體積感。通過不同色彩填充、切割手法塑造不同的設計感，以達到多種視覺表現的效果。
3）線面結合
線面結合的圖標既有線段或輪廓、又有填充的色塊，相比純線/面性單一樣式的圖標則細節更加豐富，如果把控到位，會有更好的視覺效果及信息傳達的效率，也不失趣味性。
2 擬物化風格
擬物風格的圖標主要通過細節和光影、根據現實世界中的物品塑形打造出圖形立體效果，非?？简炘O計師的造型繪制、技法表現能力。這種風格的圖標有著極強的代入感，能讓用戶快速領會圖標所傳達出的意圖及氣質。
因為擬物化圖標信息元素的高復雜度及突出的視覺效果非常搶眼，在頁面中頻繁出現會成為干擾其他信息的存在，游戲類應用中使用的非常普遍（不過多贅述）。在其他類型的應用中，大部分出現在營銷類型的界面，例如專題頁、成就榜、會員中心等。
3 輕質感風格
跟擬物化圖標相比，輕質感就不會有太多復雜的元素，主要通過各種色彩漸變、發光、投影等圖層樣式體現出非常柔和的立體感，整體風格偏年輕化，給人輕盈、簡潔及精致的感覺。在設計過程中，請使用干凈且和諧的配色，主要使用在界面較大區域的位置。
4 磨砂玻璃風格
不僅僅是頁面背景有毛玻璃風格，圖標的毛玻璃風格也很出彩，主要通過背景模糊、疊加、剪切圖層來實現（網上很多教程）。輕量漸變搭配毛玻璃的朦朧感，可以體現出圖標的質感與神秘感。
除上述這幾種風格的圖標之外，還有例如2.5D、3D、像素風、新擬態...等，但在UI設計中并不常用，就不一一舉例說明了。
三、性格與氣質
1 性格走向（描邊/拐角）
力量型：粗線條、直角拐點，給人一種力量、狂野的感覺，常用于體育、健身、機械類型的產品；
可愛型：粗線條、圓角設計，看起來活潑可愛，給人舒適、飽滿的感覺，在兒童、教育類產品中很常見；
嚴謹型：細線條、直角拐點，看起來工整、嚴謹，中規中矩，適合政府、法律類型的產品；
精致型：細線條、圓潤的拐角，柔和、干凈、纖細且精致的感覺，很適合極簡風格的設計，在藝術、金融、珠寶等奢華類產品中比較常見。
2 動態效果
如果想要突出金剛區、工具列表中的某個功能入口，將圖標設計成動態效果，既能保持整體圖標風格的統一、又能單獨突出功能的重要性，起到強調的作用，用來吸引用戶的注意力，引導用戶操作，提升其點擊率。切記動效圖標不能過多，當什么都突出了等于什么都沒有突出。
其次，在年輕化、娛樂類型的產品Tab欄中的圖標切換時，加入動態效果，可起到畫龍點睛的作用，還能通過動效表達出不同的情緒，降低切換時的枯燥感，好的Tab動效能傳達出整個產品的氣質。
最后，如果有類似運營或短期內的活動，需要吸引用戶注意但又不適合固定在界面中的某個位置，這時可以設計一個動態圖標懸浮在設備某個位置（注意用戶體驗及交互原則），既不過多的占用頁面資源，還能同時顯示在多個界面，一舉多得。
四、設計規范與流程
遵循圖標設計規范有利于設計師之間的合作及接下來的設計，以及產品整體圖標風格的統一性，起到約束的作用，即便在更換設計師的情況下，也不至于出現較大的問題。在制定合理的設計規范前需要先了解圖標到底有哪些規范，應從哪些方面入手，以便接下來的圖標設計順利進行。
1 網格尺寸比例
為了保持圖標元素的平衡，尺寸大小需要保持一致，通常我們會建立基礎網格尺寸進行圖標的繪制，常見的網格尺寸有16、24、36、48、64、128、512、1024，這些網格尺寸并非固定，也會根據設計中的特殊尺寸而變化。
一個圖標系統包括網格尺寸和圖標元素兩部分，設定好網格尺寸后，就需要用keyline來約束圖標形狀的長、寬比例了。最終設計的圖標大小并不是跟隨網格尺寸，而是根據不同的形狀占比受制于圖標keyline，最終形成統一的視覺大小。
從上圖中可以看出，相同尺寸的圖標在真實的視覺中相差很大，這就好比一個100像素的圓形、跟100像素的方形相比，站在邏輯角度，大小是相同的，但在視覺上，一定是方形顯得更大。所以我們常說的圖標大小相同，并非真實尺寸，而是視覺感受。
2 圖標keyline
為保持圖標視覺上的一致性和平衡感，需要先繪制keyline用來指導、規范圖標設計。keyline由圓形、正方形、長方形-橫、長方形-豎、三角形和對角線組成，網格的大小需保持4的倍數，便于不同尺寸的圖標都能適配，可使用24*24px的網格尺寸為基準，其他尺寸的圖標可通過增加倍數以此類推，如48*48px、72*72px......
下圖是以24px尺寸的網格參考基準示例（出血為2px）：
3 確定圖標風格
根據產品屬性及目標用戶并結合應用場景，找到最符合自身產品性格、氣質的圖標設計風格，例如健身應用屬力量、粗礦類型，圓角、曲線適合女性產品等，在前面的「性格與氣質」中有舉例說明。
4 圖標繪制
經過圖標風格的確定，圖標細節便是接下來繪制過程的核心部分，對線性圖標來說，注重的是線條的粗心，而面性圖標則注重各小圖形之間的距離，所以在繪制時，需要保持線條、間距的統一，方便后期的圖標更新迭代。
1）線性描邊粗細
我們以iOS@2x為基準（避免@1x的3px描邊變成1.5px，小數點），可適配最2px、3px、4px最常用的描邊粗細，4px視覺較重，用于優先級較高區域的功能性圖標，2px看起來會顯得更加精致，在設計中，還需根據產品的行業屬性及調性來確定描邊的粗細，并統一起來。
2）面性正負形間距
面性圖標需要確保每個單獨的形狀之間有足夠的間距，以24px大小的形狀為例，其間距不能小于1px，以此類推，雖然未規定上限，但間距也不宜太大，否則無法相互組合關聯，以實際視覺的舒適度為準。
5 創意提取
根據行業類型及風格進行創意設計，如線性統一斷點、融入品牌基因、單個元素傾斜、節日氛圍烘托、修飾元素等，為圖標塑造靈魂或傳遞更多信息而進行的二次創作。
五、常見問題及注意事項
1 識別性
圖標存在的意義，主要是為了快速傳遞信息，不能讓其成了無用的裝飾品。隨著互聯網的普及、時間的積累，人們對一些線上圖標信息的隱喻已根深蒂固，早就形成了慣性思維，所以我們設計的圖標必須要符合用戶的認知，能讓用戶快速理解，即便出現個別特殊情況，也要用文字清楚的標注說明，否則一旦讓用戶產生疑惑，圖標就起了負面作用，在很大程度上影響使用體驗。符合認知的圖標能讓用戶下意識的理解且接近心理預期，減少學習成本，提升使用效率。
2 簡潔美觀
圖標是將現實世界中的事件/事務用抽象的圖形表現出來，如果過于追求完美而設計的太復雜，還不如直接上圖片來的快，所以不能過于展現真實物品的細節，最終設計出正確而不失真的圖標尤為重要，這樣既能用于傳遞信息，又便于用戶快速且清晰感知。
3 視覺對齊
為確保視覺平衡，異形元素在使用系統自動對齊后，會有一定的偏差，需手動微調進行視覺對齊。
4 保持一致
針對大型項目，要想整個家族的圖標更加和諧，保持相同的樣式及設計原則著實不易，尤其是在多人完成設計的情況下，事先有一個清晰的設計原則和規范是必不可少的。圖標都有著對應的視覺重量，例如描邊粗細、填充模式、繁簡程度等屬性，需要做的就是控制好這些關鍵因素，讓整體看起來視覺重量相同且能相互關聯組合到一起，保持所有圖標的一致性。
5 最小間隙
單個圖標的各元素之間要有呼吸感，需要適當的留白，如果描邊過大，整個條看起來感覺像糊成一團或臃腫不堪，如果存在類似問題，可通過減小描邊值或降低圖標的復雜程度來解決。
6 使用2的倍數
以偶數為單位的設計便于數據的計算（2的倍數），例如正負形間距、描邊值等，在iOS@2x設計下，@1x也不會出現小數點。在移動端設計中，最小的圖標為24px，可被2、3、4、6、8、12整除，也是可以被整除最多的數值，因此，可靈活的等比縮放。
7 延展性
即便做好了前面的一切，圖標設計工作也并未完成，需要做的是持續測試圖標的可用性，做好后續的完善與優化，沒有最好、只有更好，以確保上線后的效果和后續的迭代。
六、圖標資源庫
阿里巴巴矢量圖標庫：https://www.iconfont.cn/，90%以上常見的矢量圖標下載；
飛書官方圖標庫：https://iconpark.oceanengine.com/official，海量資源可在線修改，調整描邊、填充、單/雙/多色、端點后下載SVG格式圖標。
雖然上述圖標資源基本能滿足我們的日常設計所需，但僅僅只能是作為參考而已，一味的圖方便、投機取巧只會毀了自己的動手、創新能力。
七、結語
圖標設計是一個非常龐大的版塊，且有很多個分支，例如：金剛區、標簽欄、應用圖標...等，每個分支都有自己的一套設計法則，我們需要在不斷的學習與創新中獲得更多經驗。一篇文章不足以道出圖標設計的精髓，但可以在不斷沉淀、相互探討、持續的學習中一起進步。
下篇「圖片」文章再見。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
“時間”作為人機交互界面中經常出現的元素，本質上都是為了去傳遞時間維度的信息。但是我們平時在使用一些互聯網產品時會發現，關于“時間”的顯示狀態或形式在不同場景、不同頁面里往往是不太一樣的，這是出于怎樣的考慮呢？今天我們就來聊一聊，如何在產品設計中把握“時間”顯示的訣竅，讓其在頁面中發揮最大的作用。
按照“時間”元素在頁面中的出現場景和所起到的作用，可以大致歸為以下幾類：
指用戶本人作為行為主體或行為的接收對象，在某一動作發生后為其所打上的時間標記，比方說“我”購買商品下單的時間或收到一封郵件的時間。
用戶在使用產品進行內容消費時，時間作為該條內容的附屬信息，起到補充說明的作用，比方說一條短視頻或新聞的發布時間。
在上面的案例中，我們會發現“時間”在對應場景里所發揮的作用不同，用戶在使用產品時往往對時間存在不一樣的關注程度。因此我們在做頁面設計時，要根據具體場景和用戶訴求判斷“時間”元素的重要性和優先級，通常情況下：時間作為事件的關鍵構成要素＞行為的時間標記＞內容的附屬信息，之后再思考用什么樣的設計形式去展示來達到我們的目標。
在討論“時間”元素的設計之前，我們先共識一些有關時間的理解和概念。時間可以劃分為“時間點”和“時間段”兩個維度，類似我們高中物理時學過的“時刻”和"時間間隔“的概念。
拿開會舉例子：“下午4:30會議開始”、“下午6:00會議結束”描述的是事件開始、結束的時間點，而“整個會議持續1.5小時”、“會議時間為下午4:30-6:00”描述的是事件過程的時間段；但是，我們在會議開始時也可以這樣講“會議將在1.5小時后結束”。
通過上面的例子我們可以發下，同樣是描述一件事情，運用不同的時間點、時間段的方式去表達，意思一樣但卻傳遞出不一樣的情感，并且兩者存在如下的“換算”關系：
1）時間段加上定語會變成時間點（但同樣是時間點，“下午6:00”是絕對時間，而“1.5小時后”是相對時間，剛好對應到我們設計時兩種時間戳類型）；
2）兩個時間點之間則表示時間段。
所以，我們在平時表達或設計時，要先想清楚用“時間”是想側重表達某一事件、動作發生的即刻時間節點？還是想描述其所持續的時間過程？之后我們再針對不同語境去選取合適的文案和呈現方式。
時間的呈現方式離不開：時間戳類型、時間顯示格式、時間顆粒度。其中，時間顆粒度指的是描述時間的最小單位，往往顆粒度越細，給用戶傳達的確定感越強（如轉賬時間是12日15:15:20），對用戶的激勵作用越明顯（如距搶購結束僅剩00時01分23.6秒）。
絕對時間可理解為事物發生時的確切時間，由具體日期（年、月、日）和時間（時、分、秒）組成。使用絕對時間戳的優勢是信息傳達精準，顯得正式，給人確定感和安全感，同時排布規整，便于形成認知習慣；但缺點是內容顯示過長不利于閱讀，并且占用空間較大。
在時間顯示格式的選擇上，為了避免混淆，推薦使用文字格式或“-”分隔符來分隔日期，而“/”分隔符在不同國家有不同的展示順序習慣，容易造成誤解，盡量少用。
時間顆粒度的選擇依情況而定，一般場景總結如下：
相對時間在產品設計領域通常是指內容生產、到達、或狀態發生改變時，距當前時間點的時間差值，多用于push通知、信息流產品，側重強調內容的時效性；而“倒計時”也算相對時間的一種，側重營造時間的緊迫感。使用相對時間戳的優勢是用戶辨識、理解成本低，不用通過計算來判斷時間過去或還剩下多久；缺點是不夠精確、正式，并很難衡量兩個時間點的臨近性。
在使用相對時間是，要注意格式友好。時間單位可隨著時間的推移自動改變；數字不要過多，盡量取整；并且可設置其與絕對時間轉換的臨界點。
在設計界面中的“時間”元素時，要遵循場景貼合、便于閱讀理解的總體原則；之后根據場景和目標，再選取合適的“時間”呈現方式（包括時間戳類型、時間顯示格式、時間顆粒度）。
一般情況下使用絕對時間，并且要看是為了強調某一關鍵時間節點，還是側重表達整個持續過程。此外，選用關聯場景的文案或者運用倒計時（相對時間）的形式，可一定程度上促進用戶更加集中注意力，提升對信息的關注度，并達到特殊的激勵作用和轉化效果。
該場景通常是為了追求確定感，通過提供精準的時間和日期便于用戶定位到過去或將來的某個時間點（段）去查找、回顧相應內容，因此大多數采用絕對時間，時間顆粒度依具體情況而定。
如果所設計的產品供給內容的更新速度快，用戶活躍度高，并且此時內容的時間信息準確性不那么重要反而更側重于內容的時效性，那么通常會使用相對時間。部分信息流產品（比如新聞資訊類、社區類）會在列表頁使用相對時間，在詳情頁使用絕對時間，時間顆粒度也是依情況而定；并且會隨著時間推移，在某一時間節點前把相對時間轉換為絕對時間。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
前言
說起按鈕，很多做設計的小伙伴是熟悉的不能再熟悉了，它是我們在設計界面時最常用、最重要的組件之一，也是易被忽略的元素之一，所以在設計之前，做好對按鈕組件的認識、了解非常有必要。
從我們有記憶認知開始，按鈕就時刻在和我們打交道，墻上的電燈開關、電視機的調節按鈕、遙控器的按鈕等等，這些物理按鈕不僅僅是當下UI按鈕組件的前身，且不會消失，依然會有很多非數字化的產品及機器設備在持續延用，不管如何演變，基本不會脫離實物參考。按鈕最吸引我們的莫過于通過簡單觸摸就能輕松滿足自己的行為需求，按鈕設計的直觀性及易用性會影響著人們完成一件事情的意愿及效率。
在UI設計中，如何完美的避開問題、把按鈕設計的更好，是每個設計師需要深思的問題。按鈕設計的好壞，將直接關系著用戶引流、觸發行動、產品轉化率等至關重要的問題。另外，精致的按鈕也會讓整個頁面的視覺提升檔次。本篇文章將對按鈕作出解析，介紹在設計按鈕時需要著重考慮的因素及設計標準，并將理論付諸于實踐。
分享目錄
一、按鈕的作用
二、按鈕的類型
三、按鈕的狀態
四、按鈕的大小及風格
五、常見誤區及避坑指南
六、總結
一、按鈕的作用
1. 什么是按鈕
在UI設計中，按鈕是一個明確指示交互行為動作的組件，主要用于觸發某一個即時操作，很多時候，我們需要采取下一步行動或返回到上一步，都要通過按鈕（部分場景可用手勢交互）來完成。
在視覺層面，按鈕的組成看起來很簡單，由一個底色塊/線框加上一組文案即可組成，但真正要將按鈕設計好，僅停留在視覺層面并不嚴謹，其大小、位置、色值、文案...等每一個細節的處理都關系著用戶的操作體驗，下面的這幾種情況大家肯定有碰到過：
2 按鈕有什么用
通常，我們在設計按鈕之前，需要詳細理解按鈕所存在的意義，哪里該加、哪里不該加、為什么要加，主要從以下幾點來體現按鈕的作用：
2.1 功能性操作
這種按鈕很常見，比如展開、收起、下拉、加減等，按鈕視覺較弱，重點強調該頁面的功能，突出主體信息，在操作之后會發生一些交互變化，這類按鈕主要起到功能形態的作用。
2.2 明確引導下一步操作
當用戶完成一個頁面的內容填充或信息確認，就會失去視覺焦點，而下一步按鈕就會聚焦視覺重心，通過文案告知用戶下一步該怎么做，常見的有保存、下一步、支付、確定...等。
另外，用戶需要完成某個任務，但同一個任務流程的信息、種類較多，這時就會通過分步驟、分頁的方式，并在每個步驟的末尾增加一個能起到上下銜接作用的按鈕，明確引導用戶進入下一步操作，以此來提升用戶完成整個任務的成功率。
2.3 培養行為習慣
如果在操作某個按鈕之后得到了一定的利益，且能持續為用戶帶來價值，那么不妨將這個按鈕設計的更醒目，并在同等級但不同的地方保持視覺的統一，持續培養用戶點擊習慣，當用戶下次再看到類似這種按鈕時，慣性思維就會引導點擊。
3 按鈕的組成
在大部分的認知中，最常見的按鈕就是一個底色塊加上一句文案就完成了，殊不知一個好的按鈕需要經過很多細節的把控，才能發揮出按鈕的最大作用。例如文案的長短/邊距、容器的大小/圓角、填充色的主/次之分...等，下面我們來看看一個按鈕到底是由哪些屬性、元素組成。
◇ 圓角：傳達出按鈕的氣質，決定用戶的視覺感受，最常見的為小圓角，也有較為嚴謹、力量型的全直角、卡通可愛、年輕化風格的全圓角。
◇ 圖標：用于按鈕含義的圖形化抽象表達，例如加載中、編輯；
◇ 容器：整個按鈕的載體，容納文案、圖標等元素；
◇ 邊框：確定按鈕的邊界，常用于次級按鈕描邊；
◇ 文案：用文字表達按鈕的含義，精簡文案；
◇ 背景：表達按鈕的當前狀態，對按鈕合理的使用主體色能有效傳播品牌氣質；
◇ 投影：讓按鈕具有層次感，配合漸變背景能體現出微質感的效果。
二、按鈕的類型
1 功能類型
按照功能屬性分類，可將按鈕類型分為流程控制和功能選項操作。
流程控制：常見的傳統按鈕，如支付、下一步、確定、保存等，容器承載著圖標、圖標+文案、文案。
功能選項：開關/加減控件、標簽欄/分類、狀態切換等，操作之后只針對當前頁面做出屬性的調整，不涉及流程的變化。
2 視覺樣式（橫向）
視覺樣式有所區別，在不同的頁面可能存在同等級的權重。
常規按鈕：最常見的按鈕，當同一個頁面出現多個常規按鈕時，會有主次之分；
虛線按鈕：常用于添加、上傳等操作；
文本按鈕：僅用文字作為觸發點，部分會用主色、右側箭頭、下劃線等方式突出。
3 層級分類（縱向）
高權重：帶有填充色的主操作按鈕，當同一個頁面存在多個按鈕，只允許存在一個高權重（主操作）按鈕；
中權重：帶邊框輪廓的概述按鈕，同一頁面可存在多個中權重的按鈕；
低權重：純文本按鈕，以及淺色填充+淺色文字的按鈕，同一頁面可存在多個低權重按鈕。
三、按鈕的狀態
在設計按鈕時，為了體現按鈕不同的具體含義，以及后續設計、開發的統一性，明確按鈕交互樣式是設計過程中不可缺少的重要組成部分。設計師需要在不干擾界面視覺的前提下，對每個按鈕的樣式、狀態有清晰的定義，與其他元素、布局區分開來，以確保按鈕的可供性。常見的狀態主要有以下幾種：
◇ 待激活狀態：需要完成一定的操作、或有一個以上必要的前置條件后才允許交互；
◇ 正常狀態：按鈕的正常顯示狀態，可進行交互操作；
◇ 點擊狀態：觸碰效果，表示按鈕正在進行交互且未結束，會在正常狀態的基礎上增加一個純黑色不且透明度為10%的蒙層，交互完成后，即會引發此按鈕的真實作用；
◇ 加載狀態：產生交互后沒有立即執行、或系統需要一定的時間才能執行完成；
◇ 禁用狀態：系統默認暫不允許操作、或需要用戶離開此頁面去完成一定的前置條件才能使用。
四、按鈕的大小及風格
1 按鈕的尺寸
在PC端設計按鈕時，因為鼠標的精準點擊，我們通常會將按鈕設計的小一些，同時也能讓整個界面看起來更加細膩，只要不影響操作，36px~48px范圍內的按鈕是比較常見的。但移動端的按鈕設計，我們要更多的考慮到物理尺寸，即手指（指尖）在操作時需占用的實際范圍。
iOS的設計規范中，將按鈕的最小點擊區域規定為44pt，一旦小于這個數值，操作時就會出現精準度較低的情況，導致操作失誤或無效。
在實際的iOS界面中，很多應用在設計按鈕時并未嚴格遵循最小44pt的這個標準，例如很多一、二級界面的次級功能入口，有些連30pt都不到，也并未對用戶造成多大的影響，可能是對應的功能權重、用戶點擊頻率都非常低的原因，還有一部分文字按鈕，其本身永遠都不可能達到最小的觸控標準（觸控熱區加大即可），所以關于按鈕的尺寸大小并非規定的很死板。
費茨定律告訴我們「目標尺寸越大，移動至目標所花費的時間就越短」，所以，在滿足手指觸控范圍的同時，還要根據所對應功能的權重占比來適當調節按鈕的大小。不難理解，當某個元素的尺寸越大就越吸引眼球，就更容易被視覺捕捉到，也更容易被「點擊」，精準度被降低的同時，也減少了用戶的操作成本。
我們以8像素柵格系統、iOS的2倍圖為例，較為常見的有：小型-64px、中型-80~88px、大型-98px、超大型-隨機這四種按鈕。
2 按鈕的風格
在UI設計中，幾乎每個頁面都存在按鈕，樣式、種類也有很多，但設計風格常見的也就幾種，例如扁平化、微質感、擬物化、新擬態（概念）...
2.1 扁平化按鈕
通常在容器中填充一個純色即可，沒有多余的視覺干擾，操作簡便，這種類型的按鈕一般在應用中用的最多。例如：工具型應用、B端應用等。
2.2 微質感按鈕
相比扁平化，填充漸變色再加上淺淺的投影，不僅能保持信息內容的簡潔、讓用戶產生更強的操作欲望，還能讓頁面具有品質感，更加耐看。例如：年輕化應用、娛樂類應用、兒童應用等。
2.3 擬物化按鈕
大多設計的很立體，3D質感、屬性樣式豐富多彩，參考現實世界中的事務或攝取應用場景中的某些元素，使其更加逼真，有較強的代入感。例如：游戲類應用、H5專題、運營banner等。
2.4 新擬態按鈕
2021年風靡一時，幾乎無人不知，但要想落地卻不太現實，實用性不強，也只能在飛機稿中出出風頭，隨著時間的流逝，逐漸銷聲匿跡，不知哪天會不會經改良后再次面世（當初扁平化問世，也是幾經波折，經多年改良才逐漸被大眾所接受）。目前只有少數工具類應用使用了新擬態，例如：計算器、AI設備控制、有道云筆記等。
五、常見誤區及避坑指南
1 主/次操作層級分明
當同一個頁面出現多個按鈕時，只允許存在一個主操作按鈕，其他不做特別設定。當然，如果次要操作較多，也不益過多的出現次級按鈕，可根據權重降級處理，以小圖標或文字按鈕的方式呈現。
2. 統一樣式
主/次操作按鈕要統一樣式，用戶需操作時，盡可能的減少其思考及選擇時間，按鈕應該迎合用戶固有認知及慣性思維，節省時間成本，提高操作效率。
3. 圓角值
在大多數界面設計中，我們通常所見到按鈕還是小圓角和全圓角居多，也有部分按鈕完全直角，需要根據產品的行業屬性與氣質來選擇最合適的圓角類型。不管如何，盡量避免大圓角（卡片除外）按鈕，不方不圓、不倫不類的，顯的不夠成熟也不好看。
3.1 小圓角
小圓角按鈕的圓角值通常控制在高度的1/5、1/6，兒童類型的應用也有1/4（較大）的，并非絕對值。如果習慣使用8像素網格，根據按鈕的尺寸大小，直接將圓角值固定在8px、16px、24px（較大）這幾個數值，能減少設計組件的數量，也利于開發做組件封裝后續調用。
3.2 全圓角
全圓角按鈕的圓角值固定為高度的1/2，或者在軟件的圓角設置中直接將數值拉到極限。
3.3 直角
不設圓角值，在PC端較為常見，也有部分較為嚴謹的移動端應用使用直角按鈕。
4. 按鈕中的文字
按鈕中的文字要便于用戶理解，不能過于陌生或繞口，用戶碰到不易理解的信息會產生困惑，甚至誤導用戶導致操作失誤從而造成損失。除此之外，文字還需要精簡，不能過多或折行且能合理的引導用戶完成操作。
上圖的文案歧義就很明顯，自以為聰明的設計師想要挽留用戶，刻意將主次按鈕樣式對換，希望用戶操作不成功，那么用戶在需要取消訂單時就疑惑了，到底是點擊「確定」還是主操作按鈕「取消」才能取消成功呢？或許稍加思考，用戶也能反應過來，但無疑增加了選擇難度、思考時間及操作成本。
5. 文字與按鈕比例
按鈕中的文字太大或太小都會影響用戶對信息接收的效率，大小比例需要適中。文字太大會感覺很擁擠（跟大家衣服買小了感覺一樣），沒有呼吸感，要給文字四周留下足夠的空間，同時文字太小會顯得小氣，看起來也會比較吃力，不利于信息接收。
6. 按鈕與其他組件的區分
設計好按鈕組件之后，頁面中的其他組件或元素要與按鈕有很明顯的區別，避免讓用戶產生不必要的誤解。
7. 彈窗主/次按鈕的位置
在彈窗中，主按鈕是在左？還是在右？這是一個爭論不休的問題，那么不爭了，在移動端的彈窗設計中，主按鈕靠右就行了，不一定絕對正確，但絕對不是錯的。根據調查數據顯示，單手使用右手操作手機的用戶比左手操作手機的用戶量高，且用戶也有一定的意識，左側為上一步、右側為下一步，頂部左側為返回，右側為保存或確定。
8. 無障礙設計
可訪問性是按鈕設計最重要目標之一，不僅要樣式統一，還應符合用戶的認知，讓用戶能快速知曉這個元素能否點擊？點擊之后會發生什么？甚至有種似曾相識的感覺。如果將按鈕樣式設計的與用戶認知有較大的偏差，不易于用戶理解。
9. 減少使用禁用按鈕
在表單設計中，大部分都需要用戶完成一定任務之后才能正常操作下一步按鈕，在完成之前，需少用禁用按鈕，在前面有講到「待激活狀態」，即在按鈕中填充淺淺的主體色等待用戶完成任務激活。
通常系統默認不允許操作或存在時間限制會用到填充為灰色的禁用按鈕，即便如此，也要盡量讓系統將其隱藏，萬不得已的情況下需要在按鈕附近說明情況，以免使用不當引起用戶的負面情緒。
10. 投影的使用
在給按鈕添加投影時，選擇灰色或純黑色加調整不同明度即可滿足基本效果，但如果想要更好的視覺體驗，可以基于按鈕本身的色值來調整，讓投影效果看起來更舒適，跟頁面更搭。另外，切勿過度使用投影，寧缺毋濫，若按鈕的投影太深，看起來粗糙臟亂，還不如不用，顏色較淺的按鈕盡量不使用投影，否則可能會影響按鈕的識別度，讓這個頁面看起來不夠清爽。
六、總結
對于設計師來說，按鈕作為設計組件之一，有很多細節容易被忽略，我們需要對每一個細小的元素進行深入思考，如論任何大小組件，都需要做到精益求精，才能給用戶帶來更好的使用體驗。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計的小編 http://www.syprn.cn