本章會從實操出發，結合真實項目為大家帶來配色實踐。期間會介紹項目選色邏輯、配色過程、使用到的工具及如何建立色彩系統。
本章會從實操出發，結合真實項目為大家帶來配色實踐。期間會介紹項目選色邏輯、配色過程、使用到的工具及如何建立色彩系統。
21年我司進行業務調整，原保險業務從當前產品中獨立出去，作為一家全新平臺為印尼用戶提供保險選購及理賠服務，為此我們提供了新的產品設計和配色。
根據上一章提到的選色邏輯，我們依次從產品情緒、行業屬性和目標用戶幾個緯度去思考。作為一家全新的保險平臺，我們希望產品給到用戶專業、安全、信任之感，那么藍色、綠色可以作為備選，藍色代表專業、權威，綠色代表安全、健康。后續我們做了相關行業調研，發現大部分本地產品也使用了這兩個顏色，可以確保備選顏色是符合行業喜好的，屬于安全的用色范圍。最后考慮到用戶的地域屬性，印尼大部分用戶都信奉伊斯蘭教，對綠色有著非同一般的熱愛。結合本次項目訴求，便選擇了綠色成為我們產品主色。
明確了主色色相，但同一色相會有冷暖、深淺之別，給到用戶的心里感受也略有差異。具體到本次項目中，暖綠有溫暖、活潑、歡快的感覺，冷綠則帶給用戶冷靜、平和的情緒。對于本次項目，冷綠更加符合產品定位。
飽和度控制色彩的艷麗程度，明度控制色彩的明暗變化，這兩項參數直接影響色彩的最終效果，所以需要同步交替調整，直到選出最合適的。考慮到主色常用于按鈕或重要文本，所以需要注意色彩的對比度，確保文本在界面中的可讀性。在本次項目中，“綠色”本身屬于對比度較小的顏色，為了獲得合適的對比度，需要調整更大的飽和度和更低的明度。經調整之后，我們測試了色彩的對比度為3:1，滿足W3C中給到的色彩對比度建議。
根據輔助色定義，我們匹配到了不同色相的輔助色，但并不是所有顏色都是我們需要的，需要根據經驗做出一定刪減。如同類色中的兩個綠色，色相上與主色過于接近，使用過程中會造成視覺混淆，所以我們剔除這組顏色。再如中差色與對比色中都有黃色，為了與橙色區分更加明顯，我們刪除對比色中的黃色。經過一系列刪減后，留下來的便是我們需要的色彩。此時也可以對色相進一步調整，如類似色中的藍色偏向湖藍，為了盡量和主色拉開差別，我們選擇色相向右偏移。
以上色彩只確定了色相，沒有進行飽和度、明度調整，視覺上并不屬于同一層級。為了獲取更加統一的配色，需要對其進行調整，這一過程被稱為視覺感官校準。如何校準？有人通過給色彩疊加黑色，對比色彩亮度進行校準。但不同顏色本身亮度不同，強行調整一致會導致部分顏色失衡。所以此種方法可作為參考，但不具備太大可靠性，實際工作中還需依靠自身經驗進行調整，確保視覺上和諧統一。以下為完成校準后的配色。
第二章提到中性色可通過調整明度或透明度得到，本項目使用場景比較固定，所以決定調整明度來得到中性色。考慮到主色為“冷綠”，與偏藍的中性色搭配可保證色彩調性一致，于是我們取藍色色相值，調整飽合度獲得最終色彩。需要注意的是隨中性色明度依次降低，飽和度需要逐級增加。最后確保主要用色符合無障礙設計指南，我們對一級、二級、三級文字用色進行了對比度測試，符合無障礙設計要求。
梯度色板可以提供更多配色，覆蓋更多使用場景，避免后續新增顏色的煩惱。早期為了獲得梯度色板需要設計師利用公式計算，現在可以直接使用在線工具生成。如Ant design的色板生成工具（https://ant.design/docs/spec/colors），Material design的色板生成工具（https://materialpalettes.com/），Eva Design System的色版生成工具（https://colors.eva.design/）。由于不同平臺算法不同，生成的色版效果也存在差異，這里首推Ant design，對比其他平臺色相變化更豐富、顏色更均勻、色階也更明確。
色彩系統隸屬設計系統的一部分，是對色彩進行科學管理的體系。不同于色彩規范主要針對設計側，而是需要打通開發聚焦產品代碼中。
簡單來說色彩系統由design token、色彩庫和說明文檔構成。design token是設計與開發約定一致的色彩名稱，作為色彩調用的唯一憑證。色彩庫是包含design token和顏色參數的樣式集合，供我們在設計和開發中調用。說明文檔類似于設計規范，定義了色彩的使用方式，為我們的使用提供指導。
如何命名需要考慮token層級和token構成。
關于token層級，設計師Lukas Oppermann在文章《Naming design tokens》(https://medium.com/user-experience-design-1/naming-design-tokens-9454818ed7cb)中有提到一般設計系統會將token分為三個層級，核心token（core token）、語義token（semantic tokens）和組件 token（component tokens）。核心token存儲的是原始值作為構建設計系統的基礎，語義token引用核心token，它的名稱描述了token的預期用途。組件token引用語義token，并將token綁定到對應的組件。較多的層級可以使token命名更加清晰，但層層嵌套的邏輯也增加了管理的難度，Lukas Oppermann在文中提到也可以使用一層或兩層。
關于token構成，體驗設計師Nathan Curtis在《Naming Tokens in Design Systems》(https://medium.com/eightshapes-llc/naming-tokens-in-design-systems-9e86c7444676)一文中指出為了更加充分的描述token，token可以由名稱空間（namespace）、目標對象（object）、基礎樣式（ base）、修飾符（Modifier）構成。名稱空間對應系統、主題名稱，目標對象對應組件、組件元素和復合組件，基礎樣式是token的主干部份，包含樣式、屬性、語義，修飾符表明狀態、尺度、模式等。由于篇幅原因，此處只是簡單介紹，感興趣的同學可以點擊原文查看。
按照兩位作者的觀點，筆者對本次色彩系統進行了design token命名，如下所示：
樣式庫是設計與開發調用的基礎，需要在設計工具中實現token的層級邏輯，同時方便開發同學查看。筆者主要使用的工具是figma，Figma為我們提供了豐富的功能和插件建立樣式庫，以下會介紹些主流方式及優缺點，大家按照項目實際情況選擇使用即可。
local style：figma支持將色彩定義為全局樣式，并對樣式進行命名。設計在調用樣式后，開發便可以在查看面板看到對應token，基本實現了樣式庫的作用。但local style不支持token的層級嵌套，只能實現單層級token。如果你的項目剛好使用了單層級token，那么建議你使用此功能。
local variables：在今年6月份的config大會中，figma發布了變量功能，雖然CEO Dylan Field先生說不會推出design tokens，但變量功能卻完美實現了token的作用。它支持將色彩定義為變量，且可以實現層級嵌套，開發在查看面板也可以方便的看到變量名稱，算是解決了figma在design token方面的缺陷。
Figma token：一款定義design token的插件，且支持token的層級嵌套。開發查看token名稱目前有兩種方式：1.可在 Figma token的inspect面板進行查看，但插件需要在編輯模式下使用，意味著你需要給到開發編輯權限，這無疑會增加團隊成本。2.插件支持將token轉化為figma樣式和變量，并保持當前的token名稱，此時開發可以在figma的inspect面板查看token，建議使用此種方式，經濟實惠。
一般文檔內容包含使用規則、注意事項、場景描述、token名稱、色值參數等等，也可根據實際情況作以增減。輸出說明文檔后，整個色彩系統搭建完成，接下來需要推進團隊使用。為確保整個系統在項目中順利落地，最好組織相關人員進行一次宣講，介紹清楚使用規范及注意事項，明確要求嚴格按照系統執行。
作者：大漠飛鷹CYSJ
鏈接：https://www.zcool.com.cn/article/ZMTY1MTk0NA==.html
來源：站酷
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。
作者：彩云Sky
鏈接：https://www.zcool.com.cn/article/ZMTU5NDg1Mg==.html
來源：站酷
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。
蘭亭妙微(m.gerard.com.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。我們建立了一個微信群，每天分享國內外優秀的設計，有興趣請加入一起學習成長，咨詢及進群請加藍小助微信ben_lanlan。
設計過程被描述為多個階段，每個階段都包含不同的活動來完成該階段，它沒有統一的標準流程，每個公司和設計師都有自己的流程版本。
盡管存在多個流程，但一般流程和階段類似于以下內容:
了解問題：初步了解問題。觀察、采訪和傾聽用戶。
定義問題：解釋和定義要解決的問題。
構思：通過頭腦風暴產生盡可能多的想法。
原型設計：構建原型并與其他人分享（ 再次縮小解決方案空間，為實驗階段 ）。
測試：測試可能的解決方案、實施、改進或重新設計。
傳統的問題解決采取有條不紊而又科學的形式。該過程從一個問題開始，定義要采取的步驟以及達到解決方案的工具或方法。
設計思維是一種創造性的策略，可以產生創造性的未來結果和/或創造性的問題解決方式，它應該被認為是一種以解決方案為中心的思維策略。
它通常被描述為一種創造性、主觀和感性的對許多大型組織的分析邏輯（ 布朗，2008 年 ），或作為分析和創造性推理模式的組合（ 鄧恩 & 馬丁，2006 年；利特卡，2015 年 ）。
設計思維來源于常規問題解決方法，常規問題解法是設計思維的基礎。
從解決問題到設計思維，Liedtka (2013)
結果發現，設計思維實際上也是一個解決問題的過程，而不僅僅是一個創新過程（ 利特卡，2013）
一個例子是，豐田采用設計思維從頭開始分析其西海岸的一個客戶聯絡中心，在重新設計過程中，組建了一個由一線呼叫代表、軟件工程師、業務主管和變革代理組成的跨職能團隊，這一舉動最終改變了客戶和員工的服務中心體驗。
我們每天都會遇到問題，但是當我們解決同樣的問題時，它們就成了例行公事（ 似乎已經忘記它們是問題了 ），我們甚至都沒有意識到正在解決這些問題。例如，我的辦公室在 30 分鐘路程之外，該怎么到達那里？開車、坐火車或巴士到目的地；除非車子輪胎被刺破，否則你就需要弄清楚如何到達辦公室。
1990 年代，IDEO 的 David Kelley 和 Tim Brown 與 Roger Martin 共同創造了特定術語：“設計思維”，并將多年來醞釀的方法和想法封裝成一個統一的概念。
設計思維是以人為中心、開放式、基于問題的方法論。這種方法最初是為了改變工程教育中的教學方式，而工程師處理和解決問題的方式有其設計思維的基礎。
設計思維一詞可以追溯到 1987 年 Peter Rowe 的著作：“設計思維。” 他描述工程師和建筑師處理問題的方法有很大不同。
90 年代初，認知科學家 Don Norman 加入 Apple 團隊，擔任他們的用戶體驗架構師，這使他成為第一個在職位中包含 UX 的人。他提出了“用戶體驗設計”這個術語，因為他想“涵蓋人們對系統體驗的所有方面，包括工業設計、圖形、界面、物理交互和手冊。” 從那時起，這些領域中的每一個都將用戶體驗，擴展到了自己的專業領域。
設計思維在解決“棘手問題”時特別有用。
棘手問題的特征
“棘手問題”一詞是由設計理論家 Horst Rittel 在 1972 年創造的，用來描述本質上非常模糊 \ 特別棘手的問題。棘手問題，有很多未知因素，沒有確定的解決方案。問題或解決方案可能與另一個棘手的問題有關，因此這是一個需要設計思維的持續過程。貧困、饑餓和氣候變化是一些現代的棘手問題。
設計主題的范圍是普遍的，因為 設計思維可以應用于人類經驗的任何領域。
它可以用于：
符號和視覺傳達：這包括平面設計的傳統工作，如排版和廣告、書籍和雜志制作、科學插圖、攝影、電影、電視和計算機顯示。
材料：這包括對日常用品的形式和視覺外觀的傳統關注 —— 服裝、家用物品、工具、儀器、機械和車輛。
人類活動和組織性服務：包括對物流的傳統管理關注，結合物質資源、工具和人類低效的序列和時間表，以達到特定的目標。
復雜的系統或環境：生活、工作、娛樂和學習。這包括系統工程、建筑和城市規劃的傳統關注點，或復雜整體部分的功能分析及其隨后在層次結構中的集成。
設計思維起源于設計師的培訓和專業實踐，但這些原則可以被每個人實踐并擴展到每個活動領域。（布朗，2013 年）
在企業中，設計過程可以為企業環境中的問題解決帶來創新思維。它還可以用于醫療保健，通過向護士、醫生和管理人員教授設計思維技術，我們可以激勵相關從業者貢獻新的想法。
不管是什么設計，理解和研究問題是必不可少的，因為我們能夠從其出發，從而進行以用戶為中心的設計。
設計思維的最早階段是搞懂你能帶來的情感價值。設計思維方法迫使你停留在提問與質疑階段，而不是準確定義出問題后進入下一階段。我們都有過快進入解決方案模式的傾向，所以設計思維方法迫使你真實地存在于這個不清楚、有時還非常混亂的時刻，從而使你對要解決的問題產生更好的理解。（利特克，2013）
傳統的問題解決涉及提出一個解決方案，但設計思維首先使我們發散，試圖為問題生成各種可能的替代解決方案。然后讓我們進行收斂性思維，縮小多種可能性，找到單一的最佳解決方案。
根據利特卡和奧美 (2011) 的說法，設計思維的全部意義在于學習一種新的、系統的解決問題的方法。正如我們思考創造力一樣，即使是設計思維也可以通過實踐來教授和改進。
設計過程從來都不是線性的，它由多次失敗和迭代組成（布朗，2018）。
首先，設計師試圖將問題與過去的類似案例聯系起來。如果這種方法不能提供任何解決方案，下一步就是使用知識和創造力作為一種實驗思維形式來產生新的想法。使用決策矩陣對這些想法進行評估，從而會產生被進一步分析和測試的解決方案。如果成功，它將被實施。如果不成功，則需要重新表述問題，并重復該過程。這是一個迭代過程，即循環方法。
這一持續不斷的重新再設計過程，源于和客戶親密接觸的洞察。
學習設計思維不僅僅意味著學習一套新的工具。它還意味著：學習收集和分析大量數據；學習挖掘對象可能的形態而不是自主認為他是什么；學習管理不確定感，以及與許多新的伙伴合作（ 利特卡和奧美，2011）。你可以進行的研究類型分為三類：生成性研究、評估性研究和驗證性研究。
一種常見的表述 —— 實際上是設計思維的另一種視角 —— 即設計師應該預料到會“很快失敗或經常失敗”（布朗，2009）。
當過程早期發生故障時，例如被拒絕的原型，實質上它可以為有效解決方案提供關鍵見解。這種觀點與傳統的先形成理論，再檢驗正誤的方式相矛盾。
Airbnb、Braun 和百事可樂等多元化公司都在 采用設計思維并將其作為核心戰略。例如，IBM 為全球旗下的 44 個設計工作室聘請了 1600 名設計師，并且正在培訓數以萬計的設計師員工建立深度創新能力 ( O'Keefe, 2017 )
設計思維為我們解決問題添加了以人為本的元素。當我們試圖通過牢記人們的想法來解決問題，并使用基于直接觀察乃至訪談的研究時，我們便會捕捉到與消費者需求一致的意外見解和創新。
它有助于將成功的產品更快地推向市場，最終節省企業資金。
IBM 的健康和人類服務組織的設計思維實踐，通過有效使用設計和設計思維幫助企業將缺陷數量減少了 50% 以上。這種更高效的工作流程導致計算出的 ROI 超過 300%。
由于復雜的問題從來不能被所有人完全理解，因此在嘗試設計解決方案時，處理歧義和多個并發的思路方向的能力是至關重要的素質。
設計思維通過綜合和歸納思維，幫助實現質的飛躍。它允許通過解構來測試約束，并允許通過多樣性思維和批評思維，來擁抱和探索歧義。
消費者通常不知道他們有什么問題需要解決，或者他們無法用語言表達出來。只有經過仔細觀察，設計者才能根據真實消費者行為中看到的東西來識別問題，而不是簡單地根據對消費者的想法來確定問題。這有助于定義模棱兩可的問題，并找到解決方案。
該方法鼓勵“跳出框架思考”（“瘋狂的想法”）；它蔑視顯而易見的事物并采用更具實驗性的方法。
在早期的流程階段鼓勵大膽的想法，以產生創造性的解決方案。使用它是為了讓設計師可以嘗試開發新的不受約束的思維方式，或對常見問題的創新解覺方法。
根據大多數設計學院的說法，具備特定特質的人能夠更好地發揮設計思維的作用。
同理心：從多個角度想象世界 —— 同事、甲方客戶、實際使用者和消費者的角度。要成為更好的同理心，必須傾聽和觀察他人的行為，注意并獲得洞察力。
綜合思維：重要的是不僅要有分析能力，而且要能夠提出新穎的解決方案，還要憑直覺。
樂觀：除非你相信有解決方案，否則在遇到挑戰且解決方案遇到瓶頸時，你可能會放棄。
實驗主義：重大創新并非來自漸進式調整。設計思想家以創造性的方式提出問題并探索限制因素，并朝著全新的方向發展。
協作：產品、服務和體驗日益復雜，因此必須擁有一支具有不同背景的團隊，以幫助從多個角度看待問題。
當我們想到一個問題的多種解決方案時，對我們解決問題會非常有幫助，因此“功能固定性”阻止了我們以新穎的方式使用舊工具解決新問題。想要擺脫功能固定，首先是要讓人們可以使用“改造后的衣架進入上鎖的汽車”。這也是盜賊第一次可以用信用卡撬開簡單的彈簧門鎖。
為了幫助設計師利用文科和技術理論，整合多個領域的知識以找到創新的解決方案，我們采用設計思維來獲得洞察力。該方法側重于可視化和操作，因而幫助我們更容易地了解實際解法，而不僅僅是理論模型。
第一批美國公司在 2000 年代初期開始實施設計思維，這一概念引起了德國投資者 Hasso Plattner 的興趣，他于 2006 年資助創建了兩所設計學校（d.schools），其中一所位于波茨坦大學（德國），另一所位于美國斯坦福大學。由于兩所學校都成功地為大型組織提供了高管設計思維培訓，因此該研究重點關注這些國家，以尋找早期實施者。
設計思維通常涉及希望參與整個設計和開發過程的龐大利益相關者團隊。
觀點、才能和經驗的多樣性被認為是注入新思維的部分重要來源。多樣性確保通過融合不同的觀點、技能和知識來產生創意（卡振思，2018 年；薩梅和德拉赫-扎哈維，2013 年）。設計思維的協作方法和工具可幫助團隊以積極的方式利用他們的差異。
決策是平等的，因為每個成員的意見都被征求和使用（卡爾格倫等，2016）。
當 IDEO 去 Apple 展示他們的鼠標時，它不是什么花哨的設備，而是一個用膠帶粘起來的原型。
低保真原型制作起來既快速又便宜（ 想想幾分鐘和幾分錢 ），但可以從用戶和同事那里得到有用的反饋，這符合快速驗證、廉價試錯的原則。為每個想法投入盡可能少的資源意味著前期投入的時間和金錢更少。此外，將多個原型帶到現場進行測試為用戶提供了比較的基礎參考，同時也有助于揭示某些需求。
為了創新，設計思維意識到認知和行動對創新過程很重要。認知包括接受度、樂觀和創造性的信心（ 凱莉 & 凱莉，2013；鄭，2018），而行動包括快速原型設計、旅程地圖和假設浮現（ 假設浮現：assumption surfacing，這是一種評估技術，涉及寫出潛在的假設和反假設。）（ 卡爾格倫等，2016；利特卡，2015）
如果領導層不歡迎風險、模棱兩可和風格的改變，實施起來就會變得更加困難。它會被管理者“質疑”其具體指標
沃爾特斯 ( 2011 ) 聲稱，由于設計思維的模糊性，它與組織文化相沖突。
據受訪者稱，在日常業務中使用設計思維之所以不會是最優選項， 因為它是資源密集型的，增加了工作量。（ 麗莎等，2016）
在醫療保健等規避風險的行業和公司中，“經常和早點失敗”的方法被認為是非常困難的。
許多設計師反對設計思維這一觀點，設計思維不僅關乎一個過程，而且關乎改變思維過程并提高人們可能提出的解決方案的創造力。
“設計思維”的推廣已被大型全球公司用來增加業務。不過，在更廣泛的設計世界中，我甚至會說“設計思維”的過度宣傳導致了所提供設計質量的下降。—— Yasushi Kusume
弗吉尼亞理工大學科學、技術和社會助理教授 Lee Vinsel 在《設計思維運動是荒謬的》中寫道，“歸根結底，設計思維與設計無關。這與文科無關。這與任何有意義的創新無關。如果這意味著重大的社會變革，那肯定不是關于“社會創新”。這是關于商業化的。”
觀察人們的行為以及他們如何與環境互動，可以為你提供有關人們想法和感受的線索。
你可能認為你知道問題所在，但只有通過觀察才能了解消費者真正需要什么。
宜家派設計師到人們家中，觀測他們的互動行為來了解他們的需求。這將使設計者能夠推斷這些經歷的無形含義，以發現洞察。這些洞察提供創新解決方案的構思方向。而事實上，最好的解決方案來自于對人類行為的最佳洞察。
Good Kitchen 是一家為老年人和體弱者提供膳食的社會服務機構。起初的問題似乎是設計不當的膳食菜單。然后設計思維揭示了無數問題，所有問題都源于服務本身的性質。因此，經由對服務進行了徹底改革的之后，最終提高了客戶和員工的滿意度（利特卡，2014）
對于設計師來說，遇到設計瓶頸期很正常，入行一段時間后所具備的能力就會達到峰值，無法突破峰值就會遇到瓶頸。主要在設計思維和設計技法層面受限，打開設計思維才能突破瓶頸期，通過積累優秀的案例并進行總結分析，可以更快的打破思維限制。
分享目錄
一、趣味性的登錄設計
二、瓷片區的趣味性手勢交互
三、營造懷舊感的溫馨體驗
四、趣味性的進度提示設計
五、場景感的點擊操作
六、動效引導用戶發帖
七、卡通形象強化瓷片區視覺感
八、不改變布局的曝光強化
九、可以晃動的 Banner 圖
十、場景感的底部標簽欄設計
一、趣味性的登錄設計
登錄是進入產品的第一道防線，也容易讓用戶產生排斥感，降低用戶的防備心理才能提高登錄的意愿度。
盯潮 App 在登錄界面中，以潮流元素和商品等內容進行設計，使得頁面視覺感豐富。晃動手機時元素也會移動，在掉落或者碰撞手機邊緣時配合震動感，讓體驗變得非常有趣。趣味性的設計降低了用戶的排斥感，提升了登錄的意愿度和體驗感。
二、瓷片區的趣味性手勢交互
瓷片區、Banner、金剛區是產品中的三大運營模塊，起到提高曝光度達到引流的目的。瓷片區在頁面中的布局比較靈活，設計表現也非常豐富。
盯潮 App 在首頁瓷片區設計中，以柵格式布局進行區塊劃分，占比較大的模塊類似于 Banner 式表現。通過手勢可以任意拖動實現切換，趣味性和互動性相結合，提高了用戶的使用樂趣。
三、營造懷舊感的溫馨體驗
童年的記憶是我們逝去的青春，每每看到小時候的畫面，總能勾起我們童年的回憶。最近發現一款結合懷舊感營造設計風格的產品，名字叫“軟眠眠”。
這是一款拯救失眠者的治愈系睡眠 App，以一幅小時候生活的環境插畫填充界面背景，圖標設計也是提取小時候的玩物或者生活用品，視覺風格營造極強的懷舊感。無論是畫風還是配色、配樂等，都勾起了我們滿滿的回憶，帶給用戶溫馨的體驗。
四、趣味性的進度提示設計
在完成步驟化和消耗數據等內容表達層面會選擇進度條，通過可視化的表達提高用戶的理解，減輕信息認知負擔。
軟眠眠 App 在定制睡眠計劃的過程中，完成選項時的進度條設計非常有意思，是一個小孩通過拉動繩子移動。拉動過程中結合動態表達，配合手繪風的表現讓人感覺輕松愉快，趣味性的設計也提高了完成選項任務的意愿度。
五、場景感的點擊操作
在保障底層操作體驗的基礎上，設計會越來越講究細節的體驗，逐步強化情感化的融入和場景感的體驗。
最近在體驗小雞上工 App 時，在找工作的列表設計中加入了“搶”按鈕，在點擊列表時按鈕會有按壓的動效過程。模擬搶拍按鈕獲得機會的體驗，營造場景氛圍感，提高了設計表達的趣味性。
六、動效引導用戶發帖
微動效可以提高功能的吸引力，也能讓互動體驗變得更有趣，可以通過動效引導功能操作和提高關注度。
騰訊動漫 App 在圈子欄目中，以 IP 形象結合動效強化發帖按鈕，以此引導用戶參與發帖。動效不僅突出了發帖的關注度，也讓發帖按鈕設計更有親和力，進而提升用戶的點擊欲。
七、卡通形象強化瓷片區視覺感
瓷片區起到強化曝光達到流量引導的作用，提高該模塊的吸引力至關重要，視覺感的突出也尤為重要。
會玩 App 在首頁“一起玩”的瓷片區設計中，以卡通形象結合豐富的色彩進行表現，各種裝扮的形象豐富視覺感。卡通形象設計風格統一，卡片色彩豐富且協調，整體瓷片區視覺沖擊力十足。
八、不改變布局的曝光強化
在當前產品結構不變的基礎上，如何提高局部內容或者主推內容的曝光度，是產品設計師不斷探索的方向。
愛奇藝 App 首頁推薦欄目 Banner 圖下方，默認情況下以宮格布局推薦影片。前段時間在打開時發現了一個臨時設計表達，保持當前結構布局不變，放大了圖片填充和推薦影片，整張畫面填充宮格，視覺張力十足。該設計表達既不會干擾當前布局，也能強化推薦影片的曝光度，解決方案值得探索。
九、可以晃動的 Banner 圖
Banner 可以在創意、造型、互動形式等方面進行設計發揮，也呈現了許多優秀的方案，產品設計師也在不斷嘗試更多的可能性。
最近在體驗盯潮 App 時，發售欄目頂部 Banner 圖設計引人關注。當用戶左右晃動手機時，Banner 圖背景層不動，而文案和產品等元素層會跟著晃動的頻率左右移動。可以晃動的 Banner 圖非常有意思，成功地吸引了用戶的關注度和點擊欲。
十、場景感的底部標簽欄設計
底部標簽欄設計可以在背景、造型、圖標等元素中發揮，其中圖標設計中的發揮相對更多一些，在背景和造型層面的案例較少，不過最近也發現了一個解決方案。
在體驗云游萬里長城小程序時，進入之后的小程序底部標簽欄設計結合了長城墻面和結構，非常有場景代入感。設計了深色版和淺色版，圖標造型設計也融入了長城元素，不失為一種優秀的差異化設計探索。
小結
希望本期的分享可以開啟大家更多設計思維，從優秀的設計方案中發現設計的軌跡，復用到后期的項目設計中。本文描述屬于個人理解和總結，不足之處歡迎大家留言補充，我們互相進步。
形狀設計可以影響整個界面的視覺效果。通過選擇適當的形狀和排列方式，可以創造出令人愉悅、易于使用和富有吸引力的界面。
在UI設計中，形狀設計是一個至關重要的環節。對其選擇和排列會直接影響到界面的美觀度和用戶的交互體驗。接下來將詳細探討UI設計中的形狀設計，包括其重要性、基本原則和實際應用。
形狀可以幫助用戶理解和操作界面。一個優秀的形狀設計應該具有清晰、簡潔和易于理解的特點，我們在平時做設計中，需要將這些原則深入到每一個細節中。
在設計中，形狀的識別和理解是至關重要的。一個成功的形狀設計應該能夠快速地被用戶識別并理解。例如，一個常見的形狀可以使用不同的顏色和大小來區分主要內容和次要內容，從而引導用戶的注意力。
1、形狀的一致性
在UI設計中，一致性是一個非常重要的原則。一個好的形狀設計應該在整個應用程序中保持一致，從而使用戶可以輕松地導航和操作。例如，閑魚APP里的所有的按鈕可以使用相同的形狀和顏色，以便用戶可以輕松地識別并操作。
2、形狀的個性化與品牌識別
一個獨特的形狀設計可以幫助品牌在競爭激烈的市場中脫穎而出。一個好的形狀設計應該能夠體現品牌的個性和價值觀，從而增強品牌的識別度。使用獨特的圖標和標志來傳達其品牌形象和價值觀。例如：小米的logo、京東狗、淘寶天貓。
1、按鈕設計
按鈕是UI設計中最重要的元素之一。一個好的按鈕設計應該具有清晰的形狀和易于理解的標簽。
按鈕形狀主要有直角、小圓角、全圓角三種樣式。
① 直角按鈕具有嚴謹、力量、高端的特點，適用于大牌美妝、奢侈品類產品；
② 小圓角按鈕具有穩定、中性的感覺，適用于用戶跨度較大的常規類產品中，例如微信、滴滴、抖音等；
③ 全圓角按鈕更加溫和、親切，適用于電商類和兒童類的產品中。
按鈕尺寸和比例根據iOS和Android的規范，按鈕尺寸至少高于5.5毫米（36 pt），否則用戶點擊時會較為困難。同時，按鈕長度固定，文字長度變化或是按鈕長度根據文字長短而變化的設計方式也需要考慮文字距離按鈕上下左右邊距的比例關系。
總的來說，UI中按鈕形狀的設計需要結合具體的產品屬性和界面風格，以及用戶的使用習慣來進行綜合考慮。
2、圖標設計
圖標是UI設計中另一種重要的具有高度概括性和視覺傳達性的小尺寸圖像元素。可以幫助用戶快速地識別和理解功能和信息，是靠文案無法實現的。
例如，天氣圖標通過其形狀、色彩和設計元素直觀地傳達不同的天氣狀況和氣象信息，幫助人們更好地了解天氣狀況。又如衛生間男女圖標的設計讓人們易于識別和理解。
在UI設計中，圖標的圓角度通常是怎么定義的呢？
① 大圓角：應用在以圓潤、可愛為主要風格的UI設計中，以營造出更加柔和、親切的視覺效果。
② 小圓角：小圓角作為一種微妙的細節元素，可以增加圖標的層次感和細節。在追求設計質感的界面中，適當添加小圓角可以使圖標更加精致和有品質感。
③ 無圓角：應用在科技或現代感的UI設計中，以營造出更加硬朗、冷峻的視覺效果。但使用需要克制，過多的直角可能會讓整個界面顯得生硬和冷感。
補充一點，我發現一個重要細節，就是很多人在計算內圓角數值時都存在困擾。自工作以來，我注意到這個問題影響了很多人，他們不知道如何正確地計算內圓角的數值。為了解決這個問題，通過以下方式幫助大家更好地掌握計算內圓角數值的方法。
3、輸入框設計
輸入框是用戶輸入信息的重要區域。在UI設計中，輸入框的形狀設計可以根據實際需求和設計風格進行變化。以下是一些常見的輸入框形狀設計：
① 方型輸入框：這是最常見的輸入框形狀，它以方形的形式呈現，可以在其中輸入文本或信息。這種設計簡單明了，易于使用，適用于大多數場景。
② 圓角矩形輸入框：這種輸入框在四個角上采用了圓角設計，使得整個輸入框看起來更加柔和、友好。這種設計在一些需要強調用戶輸入的場景下較為常見。
③ 下拉菜單輸入框：這種輸入框可以讓用戶從下拉菜單中選擇一個選項，而不是直接在文本框中輸入。這種設計適用于一些固定選項的場景，可以減少用戶的輸入操作。
④ 按鈕式輸入框：這種輸入框將輸入框和按鈕結合在一起，用戶可以點擊按鈕來輸入信息。這種設計適用于一些需要強調點擊操作的場景，例如站酷的登錄。
⑤ 語音識別輸入框：這種輸入框允許用戶通過語音來輸入信息，而不是手動輸入。這種設計適用于一些需要快速輸入或不方便手動輸入的場景，例如駕車、寫字等。
總的來說，輸入框的形狀設計應根據實際需求和設計風格來進行選擇，同時也要考慮用戶的使用習慣和操作體驗。
4、導航欄設計
導航欄是UI設計中重要的組成部分之一。它幫助用戶在不同的頁面之間進行切換和導航。在設計導航欄時，應考慮其位置、顏色和形狀等因素。以下是一些常見的導航欄形狀設計：
① 頂部導航欄：這是最常見的導航模式，位于頁面頂部，可以包含網站的名稱、主要的導航選項、搜索框等元素。這種設計簡單明了，易于使用，適用于大多數場景。
② 側邊導航欄：這種導航模式位于頁面左側，通常用于二級導航或輔助導航。側邊導航欄可以以垂直或水平方向呈現，根據實際需求進行選擇。
③ 底部導航欄：這種導航模式位于頁面底部，通常用于一級目錄的導航。底部導航欄可以包含網站的名稱、主要的導航選項、搜索框等元素。這種設計操作方便，用戶體驗好，適用于大多數場景。
④ 彈出式導航欄：這種導航模式通常用于移動端應用，通過點擊或滑動屏幕上的按鈕或圖標來喚出導航菜單。彈出式導航欄可以以垂直或水平方向呈現，根據實際需求進行選擇。
總的來說，導航欄的形狀設計應根據實際的導航模式和設計風格來進行選擇，同時也要考慮用戶的使用習慣和操作體驗。好的導航設計應該簡單明了、易于使用，能夠提供清晰的信息架構和層級關系，幫助用戶快速找到所需內容。
5、作為底紋設計
將形狀用作底紋，可以增加圖形的視覺層次感和趣味性。尤其是當使用如圓圈、條紋、曲線等形狀時，可以使底紋呈現出動態感和動感。
也可以強調文字或圖片中的某些元素，用來引導觀者的視線，以創造出視覺焦點。比如，在一個沉悶的黑色背景上使用鮮艷的彩色形狀作為底紋，可以將觀者的注意力集中在那些形狀上。
但是，必須著重強調的是，底紋的使用應當與整體的設計風格和主題相得益彰。若應用不當，可能會對畫面的整體美感產生破壞性的影響。因此，在決定是否使用底紋時，必須慎重考慮其與整體設計的和諧度。
1、動態形狀設計
隨著技術的不斷發展，動態形狀設計已經成為一種趨勢。通過使用動畫和過渡效果，可以創建更具吸引力和互動性的界面。例如，使用漸變效果來平滑地轉換不同的頁面或狀態。
2、3D和立體形狀設計
3D和立體形狀設計為UI設計師提供了更多的可能性。通過使用陰影、光照和深度效果，可以創建更立體、更有層次感的界面。例如，使用3D旋轉效果來突出主要內容或使用陰影效果來增加界面的深度感。
3、可定制形狀設計
隨著用戶對個性化需求的不斷增加，可定制的形狀設計變得越來越重要。用戶希望根據自己的喜好和需求來調整界面。例如，允許用戶自定義選擇自己喜歡的頁面主題風格。
在UI設計中，精美形狀設計的關鍵是深入理解用戶需求，注重細節，保持一致性，勇于創新，不斷提高技能水平。這樣才能創造符合用戶口味的界面，提升用戶體驗。簡潔地說，好的形狀設計來源于用戶需求、細節、一致性、創新和自我提升。
以上總結僅代表個人觀點，如有不足歡迎大家補充互相進步。
藍藍設計的小編 http://m.gerard.com.cn
<button id="k2u2i"></button>