前言概述

百度教育“好詩連連”是一款輕松有趣又別具中國古典美韻的學習平臺，在2022年先后榮獲設計界三項國際知名大獎：德國紅點品牌與傳達設計獎、美國Muse Creative Awards 金獎、韓國K-design 設計獎。本文分享設計團隊是如何通過精湛的多維設計打造詩詞視聽盛宴，讓用戶感受到傳承千年的詩詞魅力，喚起用戶對古典文化的熱愛。

一、設計主旨：沉浸式國風視聽盛宴，傳承詩詞文化之美一  唯美意境 詩詞悟得到 · 打造沉浸式國風視聽盛宴

王勃《滕王閣序》中千古名句 “落霞與孤鶩齊飛，秋水共長天一色” ，勾勒出一幅寧靜致遠的畫面讓人動容，中華古詩詞之美，含蓄而生動。我們在設計上營造唯美意境，體現(xiàn)詩詞的韻味之美。通過提取中國傳統(tǒng)文化中的古典色彩及傳統(tǒng)紋樣、琵琶與古箏的音韻，將傳統(tǒng)元素與現(xiàn)代審美融合，重組詩詞新國風設計語言，還原詩詞意境，構(gòu)建全新【寓教于樂】的游戲化學習體驗，賦予詩詞新的文化魅力。

1.視覺語言體系

1.1 從東方古典色中提煉色板

我們從壁畫丹青、紫禁紅墻中汲取色彩靈感，采用低飽和度、柔和而優(yōu)雅的配色，使東方色彩美學的悠然、自然與詩意自洽融合；同時還采用山水碧綠中的翠濤、醽醁，紅墻中的海天霞、十樣錦，壁畫中的青鸞、檀唇，構(gòu)成整個畫面中的古典色彩秩序。

1.2  提煉中國風視覺語言符號，形意結(jié)合，傳情達意

通過借形法、取意法、形意結(jié)合法提煉國風元素與圖騰、傳統(tǒng)文化中寓意吉祥的紋樣，傳達美好寓意；東方古老的鳳凰展翅高飛，指代源遠流長的中華文化；烏紗帽與宮殿寓意學業(yè)精進、金榜題名；寄情山水與出淤泥而不染的荷花，更為文人雅士所鐘愛。

1.3  確立繪畫手法

運用類工筆的繪畫手法，白描勾線，結(jié)合筆墨丹青的暈染，來營造詩詞如畫卷般的唯美意境。

2. 聽覺語言

古代詩歌最早是用來吟唱，它注重聲律、音韻、平仄、對仗，講究韻律和諧、抑揚頓挫；白居易《琵琶行》中描寫 “轉(zhuǎn)軸撥弦三兩聲，未成曲調(diào)先有情”，沈約《詠箏》“秦箏吐絕調(diào)，玉柱揚清曲” 中描寫箏曲抑揚自如，清妙悠揚；在音效的選擇上，采用古箏、琵琶的音色來營造古風意境，音符配合點擊、滑動、任務完成等反饋，讓人沉浸于詩詞的氛圍中。

二  趣味學習 詩詞背得快 · 搭建趣味玩法及激勵機制

趣味化游戲機制，基于心流理論設計，解決了詩詞學習體驗中用戶常見的枯燥、挫敗的負面體驗，構(gòu)成了詩詞知識獲取、學習和背誦的完整學習機制。設計了詩詞連線、詩詞對戰(zhàn)、成語填空三種多元游戲模式，加強詩詞背誦和相關(guān)知識的扎實記憶，讓學習更快更有趣。

傳承古典詩詞文化之美

通過百度教育好詩連連，我們讓沉睡在紙質(zhì)典籍中，以詩詞為代表的文化遺產(chǎn)煥發(fā)時代光彩與蓬勃生機，鼓勵用戶學習和感受傳承千年的詩詞魅力，重新喚起當代年輕用戶對傳統(tǒng)詩詞文化的熱愛和理解，也使便捷輕松地獲得詩詞知識樂趣成為可能。

作者：文教互娛用戶體驗

轉(zhuǎn)載請注明：學UI網(wǎng)》打造詩詞視聽盛宴，傳承古典文化之美 | 百度教育

藍藍設計建立了UI設計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設計，如果有興趣的話，可以進入一起成長學習，請加藍小助，微信號:ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯(lián)系01063334945。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍藍設計( sillybuy.com )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數(shù)據(jù)可視化設計公司、UI交互設計公司、高端網(wǎng)站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

用戶體驗設計首先字面意思是用戶+體驗。

01 座艙內(nèi)的用戶除了駕駛員還要考慮非駕駛員， 非駕駛員也有多種角色：老人/兒童/青年。

02 體驗：用戶發(fā)生使用操作的感受。

但實際用戶體驗一定是脫離不了場景的，場景是用戶發(fā)生行為的一個大環(huán)境。

03 考慮場景的時候除了考慮的當下現(xiàn)實場景還有未來場景。

場景案例：充電全屏展示充電信息

場景案例：導航交互體驗，先展開詳細信息，然后再收起信息

場景案例：蔚來的360泊車系統(tǒng)開啟時不能喚醒nomi

而且產(chǎn)品的研發(fā)和功能創(chuàng)新，用戶的體驗都是依據(jù)場景體系建立的。所以HMI設計過程當中，場景體系化的建立尤為重要。

二、智能座艙的場景體系化搭建

1、搭建流程

01 場景發(fā)掘：競品分析、用戶畫像定位、產(chǎn)品定位、用戶旅程圖

場景發(fā)掘首先要把場景和使用的用戶做定位，結(jié)合實際項目進行用戶畫像定位，確定場景主題，尋找到目標用戶進行實車訪談和拍攝。

02 場景數(shù)據(jù)細化：網(wǎng)絡數(shù)據(jù)、用戶訪談、實車測評數(shù)據(jù)、常見高頻數(shù)據(jù)

這一步主要是把用戶訪談收集上來的數(shù)據(jù)，進行拆分和細化，然后篩選出有價值的數(shù)據(jù)進行錄入。

用戶訪談數(shù)據(jù)錄入到數(shù)據(jù)庫里，產(chǎn)品經(jīng)理和設計師會針對收集上來的用戶反饋，進行痛點/和爽點的挖掘。提出需求解決方案。

03 場景應用設計：原型設計、界面設計

基于場景的應用設計會分為兩個步驟、一個是原型設計、一個界面設計、原型設計時我們更多是組內(nèi)評估、找專家來提供指導性意見，到了界面設計時候除了專家評審、可以做出demo給用戶進行測試來獲得反饋。

04 場景走查：還原場景

在設計方案產(chǎn)出完成之后，給用戶還原到我們發(fā)掘的場景去進行走查，根據(jù)用戶旅程圖查看有沒有遺漏的用戶場景和不同的用戶反饋。

2、搭建工具

整個智能座艙的場景體系化搭建需要幾個工具，競品分析、用戶畫像定位、產(chǎn)品定位、用戶旅程圖。

用戶調(diào)研方法有很多，我們需要掌握（調(diào)查問卷、用戶畫像、用戶體驗地圖、用戶訪談、焦點小組、）

今天核心介紹使用頻率最高的三種用研方法。

2.1 用戶旅程圖

關(guān)注用戶在駕駛階段的行為、方式、心情、痛點、期待。

關(guān)鍵步驟：

① 設定場景、目標、期望（用戶畫像）

② 確定行為路徑

③ 建立核心地圖

④ 包裝地圖

⑤ 繪制故事板

2.2 可用性測試

可用性測試已經(jīng)成為獲得用戶反饋的流行手段，主要因為他們上手快，能快速反應出問題。

關(guān)鍵步驟：

① 明確測試目的

② 問卷框架的設計

③ 投放調(diào)研問卷

④ 組織測試

⑤ 整理輸出結(jié)論

2.3 5W+1H法則

5W+1H 是選定的項目、工序或操作，可以從原因(Why)、對象(What)、地點(Where)、人員(Who）、時間（When）、方法(How)等六個面進行思考。

① 原因—立項背景？

② 對象—什么功能？

③ 地點— 什么場景下？

④ 人員–駕駛員？/非駕駛員？

⑤ 時間–什么時機？哪個流程之后？

⑥ 如何–什么方式操作？

三、細化座艙用戶體驗的三階段

1、用戶體驗的三階段

體驗的時間性有三個主要組成成分，及熟悉程度、功能依賴和情感依賴。

1.1 初識體驗：

我們在產(chǎn)品使用初期的階段，都會對產(chǎn)品有個使用預期。例如期望產(chǎn)品能提供一個好的體驗，或者怕產(chǎn)生不好的體驗。

1.2 使用體驗：

使用體驗分為兩個階段：使用產(chǎn)品初期和使用產(chǎn)品深度期

進入到車內(nèi)試駕或者試乘，試駕員和銷售除了會讓用戶體驗車機的基礎功能外，主要介紹的就是和競品車型的競爭功能。

產(chǎn)品深度體驗期的時候，長期的可用性變得更加重要，而不是最初的易學性。從而產(chǎn)品的實用性成為影響我們整體評估判斷的主要因素。

1.3 獲得體驗：

最后，當我們接受了產(chǎn)品，在我們的日程生活中它參與了我們的社交活動。成為了生活當中的固定解決問題的工具，這個階段產(chǎn)品體驗就具有可識別性了。

2、體驗的三條路線

2.1 體驗線路是感官線

我們現(xiàn)在座艙內(nèi)的交互感官有、觸感、聽感、視覺、嗅覺、語音。用戶在人機交互的時候第一時間獲得直觀感受。

2.2 體驗線路是情感線

情感線是諾曼強調(diào)感情在塑造體驗中的重要性。比如燈光秀、寵物模式、和擬人化的汽車助手。帶給用戶都是情感上的滿足。這些情感構(gòu)成了與汽車的首次互動體驗。

2.3 體驗線路的流暢

就像C端和B端一樣，我們交互體驗的線路效率和流暢程度，能給用戶增強駕駛樂趣?；蛘咦畲笙薅葴p少信息元素的干擾，讓駕駛員沉浸在當下。

3、把握用戶體驗的多樣性

3.1 個人價值觀的差異

首先個人的因素，因為我們成長的環(huán)境不同，造成了對價值觀的差異，有的人喜歡刺激新穎的產(chǎn)品，有的人喜歡乏善可陳的產(chǎn)品。

3.2 產(chǎn)品屬性問題

第二可能是產(chǎn)品屬性的問題，游戲產(chǎn)品帶給用戶就是不斷的快感刺激，工具類型的產(chǎn)品用戶使用流程流暢會更好。

3.3 跟隨時間線的體重心變化

用戶的使用體驗對于時間的變化，通過用戶旅程圖，他們對產(chǎn)品的關(guān)注點會產(chǎn)生變化，例如用戶剛開始對產(chǎn)品互動中更關(guān)注新的功能和刺激的體驗。但在使用過一段時間后他們可能不會再關(guān)注他的新穎程度，更關(guān)注產(chǎn)品的實用性和效率。所以需要我們在不同的使用階段重新幫助用戶提升體驗。

原文地址：七醬設計筆記

轉(zhuǎn)載請注明：學UI網(wǎng)》基于智能座艙場景的用戶體驗設計

藍藍設計建立了UI設計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設計，如果有興趣的話，可以進入一起成長學習，請加藍小助，微信號:ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯(lián)系01063334945。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍藍設計( sillybuy.com )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數(shù)據(jù)可視化設計公司、UI交互設計公司、高端網(wǎng)站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

一、什么是“有駕在現(xiàn)場”

有駕是百度旗下汽車信息與服務平臺，累計用戶超5.3億，致力于為用戶提供真實、可靠的看選買車服務，以及為車企和經(jīng)銷商提供從品牌到效果的一站式互聯(lián)網(wǎng)營銷解決方案。

車展對有駕來說是一個流量爆發(fā)的大事件，2021年廣州車展期間有駕品牌全網(wǎng)曝光累計6.3億次，創(chuàng)歷史新高。而【有駕在現(xiàn)場】是百度有駕歷年車展系列活動沉淀下來的品牌IP，已經(jīng)成為活動固定的品牌標識。

二、借勢大事件，打造車展品牌全案

借勢車展的關(guān)注度與影響力，我們想要通過分析調(diào)研總結(jié)，對本次車展進行視覺定調(diào)，建立品牌識別體系，沉淀專屬有駕車展活動的品牌符號和印記；進行線上線下聯(lián)合推廣來打造有駕車展品牌全案，提升有駕的品牌影響力；優(yōu)化活動體驗來為平臺進行引流，讓用戶對有駕產(chǎn)品有更明確的認知。

同時由于車展項目涉及跨部門合作，我們希望可以通過車展品牌全案，統(tǒng)一不同分工輸出的設計物料視覺一致性，以達到提質(zhì)增效的目的。

以打造品牌全案為出發(fā)點，我們梳理了以下項目計劃。

同時，通過有駕用戶畫像分析，建立用戶標簽，分析用戶屬性及偏好，以更好的觸達用戶。數(shù)據(jù)顯示有駕APP大部分用戶為常駐中高線城市的年輕男性，經(jīng)歷著數(shù)字化信息時代的便利，同時也受到更好的教育和各界多元的文化影響，更大膽更容易被新的東西所吸引。

三、分析項目現(xiàn)狀總結(jié)優(yōu)化點

根據(jù)過往車展項目分析，總結(jié)發(fā)現(xiàn)存在品牌識別度較弱且沒有統(tǒng)一規(guī)范、品牌統(tǒng)一性較弱導致用戶認知成本較高等問題。

四、提煉品牌關(guān)鍵詞

根據(jù)用戶畫像及現(xiàn)狀分析，明確業(yè)務需求，通過腦暴的形式羅列品牌關(guān)鍵詞，基于品牌DNA對有駕車展進行視覺升級需挖掘符合核心用戶的語境語言和視覺偏好，提煉出品牌關(guān)鍵詞，根據(jù)關(guān)鍵詞規(guī)范可延續(xù)的品牌元素，打造清晰的品牌全案以更清晰的指導后續(xù)視覺設計工作。

五、視覺定調(diào)

根據(jù)關(guān)鍵詞確定了以賽博朋克風格為視覺基調(diào)，通過三維建模搭建北京地標建筑場景，搭配大膽的配色和新穎的元素樣式打造潮流個性且具有未來感的視覺畫面，匹配車展品牌的創(chuàng)新理念。

同時，在活動玩法方面，通過優(yōu)化活動玩法，多條件激勵用戶給予用戶沉浸式的體驗。

六、建立品牌體系

確定基礎視覺調(diào)性后，我們通過形色質(zhì)構(gòu)來規(guī)范和輸出有駕車展品牌vi規(guī)范，建立有駕車展品牌體系，以提升視覺的產(chǎn)出效率，確保線上線下視覺輸出的一致性。

七、品牌LOGO

【有駕在現(xiàn)場】是有駕多年延續(xù)下來的品牌基因，本次車展也將繼續(xù)夯實品牌資產(chǎn)，進行優(yōu)化升級傳遞品牌調(diào)性。

由于舊版的字體圓角等設計樣式相對柔和，不能準確表現(xiàn)本次車展視覺調(diào)性。為了傳遞有駕車展的潮酷、未來感，設計上將舊版文字加粗，圓角調(diào)整為直角，并進行一定的傾斜處理，使字體展現(xiàn)更加果斷硬朗；同時，我們將部分筆畫進行連接，讓字體充滿動感或速度感；最終的字型效果運用有駕品牌藍綠色光效以更好的與畫面結(jié)合。

八、色彩嘗試

由于整體風格參考賽博朋克，配色方面基于有駕品牌色進行延展，輔助色起到平衡主色的沖擊效果、活躍視覺，釋放潮流激情，突出重點模塊；元素上嘗試漸變色豐富元素樣式。

九、組件化通用元素

通過組件化通用元素，不同物料可以快速復用，節(jié)約設計成本，解決整個活動的視覺一致性，同時可以沉淀設計資產(chǎn)。

十、車展主KV

根據(jù)關(guān)鍵詞【未來感】【年輕化】分析適合有駕的設計風格和調(diào)性，通過三維建模的畫面表現(xiàn)形式，構(gòu)建充滿科技感的賽博朋克畫面，打造潮流科技的有駕車展基礎場景。

主視覺場景設定為高樓聳立的公路上，有駕跑車向“有駕在現(xiàn)場”北京車展活動現(xiàn)場飛馳。充滿速度感的跑車、霓虹燈牌、高樓大廈色調(diào)和質(zhì)感的碰撞，傳遞出一種直觀的科技感，引領新時代年輕用戶和有駕一起駛向未來。

根據(jù)上述的內(nèi)容進行車展主kv的場景設定，輸出了草圖方案。

整個場景圍繞“有駕在現(xiàn)場”進行設計，融合車展相關(guān)元素，滲透品牌標識。

采用3D和2D相結(jié)合的形式，用C4D進行場景搭建，OC渲染器進行燈光材質(zhì)的渲染，反復修改調(diào)整場景布局、元素等，最終輸出三維設計圖后進行PS后期，輸出最終的主視覺。

根據(jù)以上內(nèi)容，輸出了對應的車展VI規(guī)范。

十一、車展專題頁

根據(jù)主KV及VI規(guī)范進行專題頁的延展，部分內(nèi)容復用過往車展框架模塊。

新增了導航欄設計，便于用戶快速跳轉(zhuǎn)到感興趣的內(nèi)容模塊，導航圖標大膽創(chuàng)新嘗試漸變色融合的配色形式，讓扁平的圖標有更加豐富的呈現(xiàn)。在保證閱讀效果的前提下，標題樣式、頁面元素及配色上更加潮酷。

十二、集卡分百萬 引流活動

過往集卡活動不僅與產(chǎn)品、車展契合度高，并且收益明顯，因此本次北京車展活動將復用、優(yōu)化集卡類活動，讓用戶沉浸式集卡，從而提升用戶活躍及量級。

在玩法方面，本次集卡活動延續(xù)過往活動做任務得車卡的主玩法，優(yōu)化活動體驗，新增了合成稀有卡可參與大轉(zhuǎn)盤抽獎的玩法以激勵用戶集卡，同時設立了車展大眾日，在當天進入活動的用戶可以獲得現(xiàn)金紅包，以此來激勵用戶回流，豐富活動玩法。

集車卡活動的主視覺元素及配色是依據(jù)vi規(guī)范，保證整體品牌調(diào)性的統(tǒng)一；普通靚車卡背景延續(xù)主視覺背景，稀有卡嘗試不同配色和場景凸顯其特殊性。

除了專題頁和集卡活動，線上還包括端內(nèi)社區(qū)活動設計，整體視覺調(diào)性都與我們輸出的車展品牌vi保持統(tǒng)一。

十三、倒計時海報

為了給車展開幕造勢，我們嘗試復用主KV的三維建筑模型，將倒計時1、2、3與不同視角、不同配色的場景相結(jié)合，整體風格和車展主視覺保持一致，輸出了三張倒計時海報，豐富了整個項目的宣傳內(nèi)容。

整個車展項目除了線上運營活動、造勢海報，還有線下展會宣傳物料及其他第三方輸出的設計物料，整體視覺調(diào)性都是基于我們輸出的車展品牌VI進行視覺延展，保持統(tǒng)一性的同時，又各自有不同的視覺傳播效果。

十四、總結(jié)

【有駕在現(xiàn)場】作為百度有駕車展品牌活動，我們通過未來感、年輕化、體驗感三個維度來塑造有駕車展系列活動的品牌調(diào)性，搭建了基礎風格，建設三維賽博朋克高品質(zhì)主視覺，視覺元素細節(jié)驚喜感打磨，通過優(yōu)化活動玩法進行引流，沉淀出新的大事件視覺設計思路，打造了有駕車展品牌設計全案。

未來我們的思考不僅僅只局限在視覺的表現(xiàn)上，還要繼續(xù)挖掘品牌系列化活動的延續(xù)性與獨特性，同時更要通過合理的情感互動建立和用戶的鏈接，為品牌長線發(fā)展提供更多價值。

作者：設計中臺

轉(zhuǎn)載請注明：學UI網(wǎng)》有駕在現(xiàn)場 車展品牌全案設計【百度】

藍藍設計建立了UI設計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設計，如果有興趣的話，可以進入一起成長學習，請加藍小助，微信號:ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯(lián)系01063334945。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍藍設計( sillybuy.com )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數(shù)據(jù)可視化設計公司、UI交互設計公司、高端網(wǎng)站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

臨摹是新手學習任何技能都需要經(jīng)歷的階段，學字體設計自然也不例外。即你要去收集一些優(yōu)秀的字體設計作品，然后照著它們來臨摹。

很多人會瞧不上臨摹，認為照著參考一模一樣做誰都會，事實上真要做起來，很多人都臨摹不好，而且臨摹的方法也不對。那么，如何正確地臨摹呢？

1、不要像摳圖一樣，用鋼筆工具直接沿著參考的外輪廓描摹。

而是要照著參考畫出文字中的主要筆畫，諸如：橫、豎、撇、捺、點、提、勾等，然后，用這些筆畫照著參考的樣子一筆一筆把文字搭建出來。

2、如果遇到相同的筆劃，不要重新畫。

而應該把已有的筆畫直接復制過去，有時可能需要做一點簡單的變化，這么做可以最大程度上保證筆畫的統(tǒng)一性。

3、剛開始可以直接在參考的基礎上用筆畫來搭建文字。

就好似描摹一樣，與參考一一對應，等熟練之后可以自行繪制筆畫，通過視覺來確定筆畫的粗細、長短、結(jié)構(gòu)、擺放的位置等等。

舉個例子，如果要臨摹下圖的字體設計，我們可以先把它的筆劃畫出來，如果抓不住筆劃的特點，或者線條畫不流暢，可以在原參考上把筆劃描摹出來。

然后，照著參考在字框里用筆畫把文字組合出來。

最后，再仔細觀察文字筆劃的尺寸和位置是否正確，盡量做到與參考一模一樣。

經(jīng)過一段時間的臨摹練習，你不僅可以更熟練地使用鋼筆工具，同時也能掌握一些字體設計的風格、筆畫特征、字體設計的流程等等。

二、通過參考，舉一反三

當臨摹做得已經(jīng)很熟練以后，就可以開始第二步的練習了，即遵照參考中字體設計的風格、特點，設計自己想要的其他文字。其實在實際工作中、很多設計師也會用這種方式來設計字體。想要做好這項練習，首先你要做的是對參考作品進行深度的分析。

諸如對字體類型、字形、字體風格、重心位置、中宮松緊、筆畫粗細、筆畫結(jié)構(gòu)、筆畫的對齊關(guān)系、有哪些特殊的處理技巧等特點進行分析。

比如我想根據(jù)下圖的字體來設計文字：起來嗨。那么我就先要對參考中的字體設計進行分析：

該字體為無襯線體，風格簡約而現(xiàn)代，筆劃并沒有講究嚴格的對齊，甚至刻意做了錯位處理，各文字的字面大小也不統(tǒng)一，呈現(xiàn)出靈活多變的感覺、筆劃較粗，橫豎筆劃的粗細一樣、橫筆劃右端有類似直角三角形的襯線、部分筆劃交匯處會把橫筆劃做斷開處理、點筆劃和個別捺筆劃被設計成圓點、口部首被設計成圓圈等等。

把參考的設計特點分析出來以后，緊接著需要把我們想設計的文字，用一個常規(guī)的字體呈現(xiàn)出來，由于參考中的字體設計是無襯線體，所以我們可以選擇黑體作為字體設計的觀察對象，看看該文字中有哪些筆劃可以直接挪用參考中的，有哪些則需要自己來設計。

接下來就要著手畫草圖了，需要注意的是，參考中的文字做了整體垂直向上傾斜，在設計字體的時候如果直接設計成傾斜狀態(tài)，那么很多筆劃處理起來會不方便，所以最好先設計成水平狀態(tài)的，等確認無誤后再做傾斜扭曲。

另外，在畫草圖的時候要多做嘗試，對于原參考中沒有的筆畫，我們要從現(xiàn)有的筆畫中找到規(guī)律，這些部分的設計沒有絕對的標準，關(guān)鍵是要好看、要協(xié)調(diào)、要與整體的風格相符。比如“起”字下邊的“人”筆劃，可以借鑒參考中“辶”的處理方式。

草圖畫好后就可以去電腦上做最后的執(zhí)行了，在執(zhí)行的過程中需要注意以下幾點：

1、草圖不是標準，只是執(zhí)行的思路。

所以在執(zhí)行的過程中仍可以進行調(diào)整、修改。

2、一邊設計一邊規(guī)范。

如果你不是在專業(yè)的創(chuàng)作本上繪制的草圖，那么你的草圖通常是很不嚴謹?shù)?，那么在電腦上操作的時候就要邊設計邊規(guī)范，比如統(tǒng)一筆劃的粗細和結(jié)構(gòu)、統(tǒng)一筆劃斷開部分的間距、注意某些筆劃之間的對齊關(guān)系等等。

3、與參考對比。

字體初步設計完以后，要把其與參考放在一起進行比較，看看還有沒有處理不到位、看起來不夠舒服的地方，水平狀態(tài)調(diào)整完以后，再把文字按照參考的樣子往右上方做傾斜處理，然后繼續(xù)觀察以及做最后的完善。

三、原創(chuàng)字體設計

如果你能熟練地做到通過參考舉一反三，那么你的字體設計能力已經(jīng)初步形成，接下來就可以做原創(chuàng)了。做原創(chuàng)字體設計時我們要注意以下幾點：

1、做原創(chuàng)也可以找參考。

只不過不要完全按著一個參考來做，我們可以結(jié)合好幾個參考，也可以在參考的基礎上加入自己的想法、做出一些改變等等。

2、設計的流程

A.根據(jù)要設計的文字、找到符合設計需求的參考。比如我需要設計的文字是：奇遇驚喜，并想設計成有種浪漫、古風的感覺。所以我找了下圖的字體來做參考(造字工房逸鋒體)，該字體字形修長、結(jié)合了宋體和黑體的特性，筆劃橫細數(shù)粗但沒有襯線，現(xiàn)代而優(yōu)雅。

B.加入自己的想法。用常規(guī)的的字庫字體把要設計的文字呈現(xiàn)出來，與參考放在一起進行構(gòu)思。參考中的字體雖然現(xiàn)代而優(yōu)雅、但是作為字庫字體，獨特性自然會有所欠缺，另外筆畫還是略過復雜，沒有古風和浪漫的感覺，所以我想把筆畫繼續(xù)做一些簡化，并加入祥云圖形。

C.畫草圖。

可以先畫文字的骨骼部分，以確定文字的基本架構(gòu)，文字的骨骼決定了文字的基本氣質(zhì)，比如高矮胖瘦、中宮松緊、重心高低、筆畫走勢等等，這也是設計師可以大做文章的地方，很多優(yōu)秀的字體，在骨骼上就與普通字體有著很大的差異。這里我把文字的骨架設計得比參考更為修長。

骨骼畫好以后，再添加字體的肉身，即筆形，筆形決定了筆劃的粗細、端點、襯線、筆劃交匯處的處理等細節(jié)效果，這些部分的變化也非常多，設計師可以根據(jù)文字本身的特點和參考進行多種嘗試。

作為字體設計師，了解一些不同筆形的處理技法也很有必要。

▲ 部分橫筆畫的筆形表現(xiàn)。

D.把草圖導入到設計軟件中執(zhí)行。草圖畫好以后就可以去電腦上執(zhí)行了，執(zhí)行的步驟和注意事項與“舉一反三”里提到的差不多。

3、注意文字的統(tǒng)一性。

在設計字體時，要注意整體的統(tǒng)一性，要讓人感覺到這是一套字體，所以原則上來說，每個字的字面大小、重心位置、中宮、相同的筆畫等等，都要統(tǒng)一起來，當然，不包括某些為了效果靈活而刻意作出的一些特殊處理。

臨摹、舉一反三、原創(chuàng)，簡單的三步就能幫你從一個新手變成一個熟手，其實除了字體設計，很多其他類型的設計同樣是這個道理。當然，最重要的是你要能走出第一步，先做起來，然后要堅持下去。

作者：蔥爺

轉(zhuǎn)載請注明：學UI網(wǎng)》新手學習字體設計的高效三步法

藍藍設計建立了UI設計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設計，如果有興趣的話，可以進入一起成長學習，請加藍小助，微信號:ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯(lián)系01063334945。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍藍設計( sillybuy.com )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數(shù)據(jù)可視化設計公司、UI交互設計公司、高端網(wǎng)站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

可以看出來第一版和最終版的效果對比是非常大的，第一版給人感覺如同一個半成品，場景輕飄飄的，顏色上幾乎沒有什么明暗對比，太過統(tǒng)一沒有分清處層次，而且細節(jié)不夠豐富。

通過第一版我們可以看出可以通過一下幾個方面去做層次方面的優(yōu)化：

一、增加主體細節(jié)

1.刻畫熊熊主體

2.優(yōu)化鴨子的造型

二、加強明暗對比

1.加強主體和椅子的明暗對比

2.加強背景和前景的明暗對比

一.增加主體細節(jié)

1、刻畫熊熊主體

之前的熊熊作為主體本身刻畫的細節(jié)層次和背景的刻畫程度近似，我們要把主體變得有看點才能分清前后的關(guān)系，可以在熊的五官和服裝上進一步添加一些細節(jié)。

例如給熊的五官添加表情，把墨鏡添加一些裝飾元素，讓視覺可以集中在熊的五官上。

同樣我們還可以在服裝上添加一些花紋的裝飾讓整個熊熊的主體看起來更加細致。

同時要注意熊的姿勢是頭部在前，胳膊在后，可以在刻畫的時候加入一些投影，加深胳膊的暗部，區(qū)分一下頭部和胳膊的層級關(guān)系。

2、優(yōu)化鴨子的造型

鴨子的造型我們把游泳圈直接改成了小黃鴨漂浮物，游泳圈中間的鏤空讓視覺看起來不夠緊湊，同時我們也優(yōu)化了鴨子的眼睛和嘴巴，讓鴨子看起來更精致一些。

然后去加強頭部和鴨子身體的前后區(qū)分，加入投影，讓它更加立體。

二.加強明暗對比

我們可以把整個小場景的明暗做一個區(qū)分，最亮的是熊，然后是鴨子，然后是地毯，最后是椅子，椅子作為地毯和熊之間的一個暗部，可以讓畫面有一個明暗的節(jié)奏，同時和熊的主體形成對比。

接下來要做的就是加強暗部和亮部之間的一個對比，體現(xiàn)整個空間的前后關(guān)系。

1、加強主體和椅子的明暗對比

我們把熊和椅子的明暗區(qū)分的更加明確一些，把椅子的飽和度和色相進行紫色調(diào)和低飽和度的一個調(diào)整，用對比色來拉開兩個物體的區(qū)別，加深熊的整個暗部，交代熊在床上清晰的投影。

2.加強背景和前景的明暗對比

優(yōu)化以后發(fā)現(xiàn)背景的植物和星星比較跳 我們?nèi)ミM一步加深背景讓背景往后退，同時把地毯的顏色提亮一些讓整個后景有一個區(qū)分。

然后我們?nèi)ノ⒄{(diào)一下椅子的顏色讓椅子的顏色不要那么臟，把地毯顏色也調(diào)的明亮一些，形成對比，就到了咱們的第二版畫面：

第二版畫面再往后優(yōu)化就是細節(jié)的調(diào)整和進一步加強明暗的區(qū)分。

我們從以下幾個方面再去進一步區(qū)分畫面：

一、明暗的進一步區(qū)分

1.背景區(qū)分

2.椅子自身的明暗區(qū)分

3.椅子和地毯的區(qū)分

二、添加正確的投影

三、添加環(huán)境光

一．明暗的進一步區(qū)分

1、背景區(qū)分

背景明暗的區(qū)分需要把植物部分去壓暗，同時把比較跳的星星稍微壓下去一些，做一個顏色上的過渡，加地毯的反光，讓星星的顏色退到后面去，然后給植物加上床的部分投影，空間關(guān)系更加明確一些。

2、椅子自身的明暗區(qū)分

下一步我們要對椅子進行優(yōu)化，目前的椅子沒有區(qū)分開明暗面，反而暗部的反光太強，亮部的顏色飽和度又很低，導致立體度出現(xiàn)了反向效果。

我們要做的是把椅子面向光的面亮起來，背陰面暗下去，而不是亮部暗，暗部亮。

然后我們又發(fā)現(xiàn)，現(xiàn)在椅子的顏色對比度不夠，并且椅子腿上透視有一些問題。

我們繼續(xù)去把椅子的顏色調(diào)暗，同時要在亮部去加入椅子受光的顏色變化，我們可以加入一些偏亮的純色，暗部做一些小的反光的變化，讓椅子更加有光澤度。

注意這里椅子腿也是有前后關(guān)系所以靠后的椅子腿要更加的暗一些，受光也少一些，同時給椅子腿上加入床的一個陰影。

但這還不夠我們要進一步去加強整個畫面的對比。

3、椅子和地毯的區(qū)分

我們接著去把地毯的顏色提亮，同時把亮部光照的地方做一個暖色光照的處理，加深床的投影把投影交代的更加清晰一些，讓有顏色對比的同時也要有上下關(guān)系的對比。

二、添加明確的投影

在整個過程中投影的進一步明確是增強一個立體和層級關(guān)系的關(guān)鍵，我們以鴨子、床、以及熊在床上的投影做一個前后的對比。我們要注意的有三點：

1、統(tǒng)一投影的方向

每個物體上都要有明暗的一個對比，如鴨子之前幾乎看不到暗面和投影，我們要去分析事物和鴨子的一個前后關(guān)系，再去添加植物后面的投影，讓鴨子看起來更加立體。

2、投影落地的形態(tài)

注意落地點，不要讓影子浮在半空中，就像之前床的影子和星星的影子過于飄，整個物體看起來都沒有落地。

三、添加環(huán)境光

1、減掉整體的內(nèi)發(fā)光

雖然在這種輕擬物畫風上有很多的物體有一些輪廓光和反光，但并不是統(tǒng)一直接去加一個內(nèi)發(fā)光，我們要重點做的是通過環(huán)境光來加強對比，整個的內(nèi)發(fā)光會讓物體失去明暗。

拿鴨子舉例子，過強的光源會讓鴨子顯得很平。

我們可以加強暗部，在暗部做一些微弱的反光，在亮部加入一點輪廓光。讓整體更加的飽滿立體。

2、根據(jù)不同的物體添加環(huán)境光

熊熊主要的環(huán)境光是床的紫色反光，我們在添加的時候注意不要把床反光的顏色過于后厚重或者沒有顏色傾向。

調(diào)整好一個環(huán)境光后我們再去整個添加熊環(huán)境光。這樣整個畫面的優(yōu)化就完成了。

我們來最后看一下第二版和第三版的對比效果

整個畫面明暗對比更強，而且顏色上更加通透，光影和諧統(tǒng)一，也具有更好的完整度。

本次文章可以吸收的知識點有很多，希望大家可以和我一起在總結(jié)中收獲知識，取得進步，一個小場景塑造的立體有層次涉及到的點方方面面都會有，我們要注意繪制時多去做比較，同時保證整體明暗的對比效果和細節(jié)的刻畫調(diào)整。

希望大家以后在繪制輕擬物場景插畫上道路不迷茫，一起去打造令人眼前一亮的畫面吧！

作者：牙牙

轉(zhuǎn)載請注明：學UI網(wǎng)》好難啊，一遇到場景插畫，我就廢了！

藍藍設計建立了UI設計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設計，如果有興趣的話，可以進入一起成長學習，請加藍小助，微信號:ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯(lián)系01063334945。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍藍設計( sillybuy.com )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數(shù)據(jù)可視化設計公司、UI交互設計公司、高端網(wǎng)站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

作者：程鑫

轉(zhuǎn)載請注明：學UI網(wǎng)》中后臺產(chǎn)品的產(chǎn)研協(xié)同提效調(diào)研

藍藍設計建立了UI設計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設計，如果有興趣的話，可以進入一起成長學習，請加藍小助，微信號:ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯(lián)系01063334945。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍藍設計( sillybuy.com )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數(shù)據(jù)可視化設計公司、UI交互設計公司、高端網(wǎng)站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

這個叫做太陽花的logo，一經(jīng)面世就引起了社會強烈關(guān)注，除了傳說中的設計費用打破歷史紀錄以外，該設計方案也確實讓人眼前一亮，完全顛覆了英國石油以往的logo。

該花朵采用對稱構(gòu)圖，從里到外一共分三層，顏色從白色到黃色再到綠色，呈現(xiàn)出綻放的姿態(tài)，寓意生機勃勃，永不凋落。這個誕生于2000年的logo，至今看來依然時尚、美麗。

二、索愛logo

2001年索尼與愛立信聯(lián)姻，于是誕生了索尼愛立信這個品牌，新的logo也在這個時候應運而生，該logo一反主流的扁平風，采用了立體的漸變風，在當時可謂是獨樹一幟，十分驚艷，從logo上我們就能感受到強烈的動感和科技感。當時的設計需求中有兩個兩個關(guān)鍵點：“流動的形象”和“另一個自我”，流動的形象是指logo本身要具有強烈的動感，讓人感覺它是活的；另一個自我指的是要有個性，這兩點都在這個logo上得到了體現(xiàn)。

三、墨爾本城市會徽

墨爾本是澳大利亞的第二大城市，該logo以墨爾本的英文Melbourne的首字母“M”為原型，圖形內(nèi)眾多幾何色塊相比穿插，配合從藍色到綠色的漸變色，展現(xiàn)了該城市活力、新潮、多元、現(xiàn)代化、重視生態(tài)的城市形象。

該logo的延展圖形也很驚艷，展現(xiàn)了該logo極高的延展性。

四、美國航空logo

該logo更新于2013年，在過往形象的基礎上做了重大突破，圖形由老鷹、品牌首字母A、飛機尾翼，以及星星組成，顏色來源美國國旗中的紅、白、藍，傾斜的尾翼圖形極具動感和速度感，簡單而明了，又沒有盲目跟風扁平化，漸變以及立體效果并沒有讓該logo顯得老氣，反而增添了一份品質(zhì)感。

▲ 美國航空過往logo形象

五、beats耳機logo

該品牌以售賣耳機為主，所以在logo設計上，設計師采用品牌首字母“b”與紅色圓形結(jié)合，得到一個類似人在戴著耳機聽音樂的圖形，簡單而直接，讓人一看就懂且印象深刻，其中字母b的下半部分被抽象地處理成一個正圓，與外面的大圓形成同心圓關(guān)系，所以在視覺上非常和諧、美觀。

六、北京申奧標志

該個logo由知名設計師陳紹華設計，圖形為采用具有中國特色的書法筆刷組合成打太極的人形，而且筆刷剛好為五筆，分別使用奧運五環(huán)的顏色，代表奧運，該logo把動感和中國文化展現(xiàn)得淋漓盡致，且簡單、獨特，一經(jīng)面世，好評如潮，最終也為北京成功申奧貢獻了一份力量。

七、廣州亞運會標志

該logo由設計師張強設計，圖形由廣州極具代表性的建筑：五羊雕像與火炬結(jié)合而成，五羊雕像的靈感則來源于古老的五羊傳說，象征著豐收、福瑞，以及廣州人民知恩圖報、勤儉樸實的品質(zhì)，火炬象征著奧運以及熱情，最下邊的四個色塊形似跑道，象征著運動和競技 。

八、杭州G20峰會logo

該logo的圖形部分為一座拱橋與水中倒影組合在一起的形態(tài)，橋是杭州很有代表性的元素，同時也象征了開放、包容、溝通和連接。橋的圖形是由20根同等粗細的線條組成，體現(xiàn)了參會的20個國家地位平等。另外，該logo在形式和排版上也是個性鮮明，logo的輪廓比較狹長，文字疊加在圖形上，使其融為一體，而不是像大多數(shù)logo那樣把文字與圖形完全區(qū)分開。整個logo從形式到配色都給人一種典雅、現(xiàn)代的感覺，廣受大家的喜愛。

九、蔚來汽車logo

蔚來是一家智能電動車企業(yè)，該logo的設計理念為：blue  sky coming，圖形設計上主要呈現(xiàn)了三個元素：上面的弧形代表天空，象征著未來、開放與目標；下面的箭頭圖形代表路面，象征著前進與行動，地面與天空的交界處是地平線，象征著無盡的遠方。整個logo圖形在一個正圓的基礎上設計，簡單而美觀，細節(jié)的雕琢也十分到位，個人覺得是國產(chǎn)汽車品牌logo設計中少有的亮眼之作。

十、廣州城市會徽

該logo由曹雪設計，logo的外形為廣州新時代的標志建筑：廣州塔。該圖形由左邊的弧形色塊和右邊的弧形線條疊加組合而成，二者剛好又是廣州二字，同時我們在該logo中還能看到帆船和飛鳥的影子，寓意廣州海納百川、生機勃勃，整個logo的形態(tài)給人一種現(xiàn)代、時尚、優(yōu)雅的感覺，該logo一經(jīng)公布，引起了廣泛關(guān)注，也收獲了眾多好

評。

當然，21世紀優(yōu)秀的logo還有非常多，但要說比較知名且好評較多的，我對這10個logo的印象比較深，縱觀這些logo設計，我們不難發(fā)現(xiàn)，他們幾乎都具備這么幾個特點：簡單、獨特、調(diào)性與品牌和行業(yè)吻合、符合時代審美等。知名品牌的logo設計具有非常的框架，設計師所面臨的壓力也是巨大的，能夠有如此出品和口碑屬實不易。

作者：黑馬青年

轉(zhuǎn)載請注明：學UI網(wǎng)》2022 UI 設計作品集

藍藍設計建立了UI設計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設計，如果有興趣的話，可以進入一起成長學習，請加藍小助，微信號:ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯(lián)系01063334945。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍藍設計( sillybuy.com )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數(shù)據(jù)可視化設計公司、UI交互設計公司、高端網(wǎng)站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

像情竇初開的你。

漸變的粉色是成長的開始，

折痕的肌理是愛情到來時內(nèi)心的波瀾。

愛心做出半透明的玻璃模糊質(zhì)感，

塵封已久的內(nèi)心已怦然心動。

紫色是浪漫，

像奔赴熱戀的你。

當我們一起仰望星空，

不小心碰到你的手時，我感受到你的心跳。

當我們一起仰望星空，這一次我想走進的你的心扉，

建立屬于我們的橋梁，在你內(nèi)心的最深處直到永遠。

紅色是摯愛，

像真誠而付出的你。

醒目的紅色真誠而又直接，

我們的心也將靠的更近。

模糊的愛心肌理是

我們試探彼此距離的那點小心機。

看似朦朧實則清晰的情感在這一刻印記在我們心中。

藍色是冷靜，

像理想到現(xiàn)實的你

紅色的愛心旋渦久久不能離去，陷入的太深，

無法自拔，找不到自己的方向。

直到看清現(xiàn)實的你，慢慢的像沙漏一樣，

選擇和自己過去的他和解。

當這些色彩融合在一起時，就出現(xiàn)了愛情最真實的滋味，

朦朧又夢幻，真實而脆弱。

只有理解色彩給予的感受，

朦朧又夢幻，真實而脆弱。

做出來的設計就才會有真實的情感體會。

作者：修先森

轉(zhuǎn)載請注明：學UI網(wǎng)》色彩的感知

藍藍設計建立了UI設計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設計，如果有興趣的話，可以進入一起成長學習，請加藍小助，微信號:ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯(lián)系01063334945。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍藍設計( sillybuy.com )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數(shù)據(jù)可視化設計公司、UI交互設計公司、高端網(wǎng)站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

1、CTA按鈕

號召性按鈕(CTA)是界面中的交互元素，用來執(zhí)行特定的操作，例如聯(lián)系我們、訂閱信息、購買產(chǎn)品或加入購物車等。

CTA按鈕作為執(zhí)行重要操作的按鈕，在設計上應該更醒目，能讓用戶快速分辨出來。

2、文字按鈕

文字按鈕是以可點擊的文字作為按鈕，文字底部沒有圖形背景。文字按鈕的操作面積小，突出程度低，多用于不太重要的操作。

3、下拉按鈕

在有的網(wǎng)站導航欄中，單擊選項會出現(xiàn)下拉列表，展示更多二級選項，方便用戶可以查看并選擇更多的操作。

4、描邊按鈕

描邊按鈕是背景透明效果的按鈕，用于輔助操作。當界面中有多個按鈕時，使用描邊按鈕有助于劃分視覺層次結(jié)構(gòu)，高優(yōu)先級的按鈕使用填充效果，輔助按鈕使用描邊按鈕。

5\漢堡按鈕

漢堡按鈕隱藏在菜單欄中，當我們點擊時，菜單將展開并顯示所有的選項。漢堡按鈕廣泛應用于web和移動應用中。

6、懸浮按鈕

懸浮按鈕(FAB)位于界面的最高層級，優(yōu)先級高，通常為圓形，在界面中執(zhí)行最常見的操作。

FAB按鈕常用于創(chuàng)建新項目或者發(fā)表內(nèi)容等操作，F(xiàn)AB的位置應確保按鈕具有較高的可訪問性和可視性。在有的產(chǎn)品中，點擊FAB會出現(xiàn)更多的操作，將常用的操作聚集到一個按鈕中。

二、有效的按鈕設計實踐

1、讓按鈕看起來可點擊

當用戶與界面交互時，他們應該快速明白什么是可點擊，什么是不可點擊的。作為設計師，我們不會希望用戶花很長的時間來理解他們看到的元素，因為用戶花的時間越長，產(chǎn)品的可用性就越差。

為了確保用戶能夠明確知道按鈕是否可點擊，我們可以使用用戶熟悉的按鈕樣式，例如方形邊框的填充按鈕、圓角填充按鈕、帶有陰影的填充按鈕、描邊按鈕等。

其中最為常見和熟悉的設計是帶陰影的彩色填充按鈕，當用戶看到這樣的按鈕時，他們會立刻明白這是一個可點擊的按鈕。

2、考慮按鈕在界面中的位置

按鈕的位置很重要。作為設計師，我們不希望用戶花時間尋找按鈕，而是應該將按鈕放在用戶期望的位置上，方便用戶去操作。

對于按鈕在界面中的位置，首先要了解F型和Z型的瀏覽模式。

F型瀏覽模式

在F型模式中，用戶通過水平移動的方式讀取界面上方的內(nèi)容，構(gòu)成F的頂部欄。然后用戶向下移動頁面，再次水平移動，再以垂直移動的方式瀏覽左側(cè)的內(nèi)容，形成F型的主干。當界面中有大量數(shù)據(jù)時，通常會遵循這樣的瀏覽模式。

Z型瀏覽模式

Z型瀏覽模式模仿了人眼閱讀的路徑——從左到右，從上到下。

用戶首先從左上角到右上角掃描，形成Z的頂部條。然后向左下角掃描，最后再向右看，形成Z型的瀏覽動線。

3、標注按鈕的作用

按鈕應該始終有清晰的注釋，展示點擊時將執(zhí)行的操作。過于通用或者模糊的注釋可能會讓用戶感到困惑。

4、正確調(diào)整按鈕大小

按鈕的大小代表了元素優(yōu)先級的高級。尺寸較大的按鈕表示更重要的操作。

當在一個界面中存在多個操作按鈕時，為了讓最重要的按鈕看起來更突出，可以考慮讓這個按鈕比其他按鈕的尺寸更大，并且利用顏色和對比，讓這個最重要的按鈕更吸引視線。

5、始終提供反饋

每當用戶點擊按鈕時，他們期望界面能有提示或者反饋。在激活按鈕時，按鈕應該改變狀態(tài)，給用戶一個反饋，便于用戶知道點擊按鈕發(fā)生了什么。

最后

以上總結(jié)了設計中按鈕的6種類型以及5種改進按鈕設計的方法，希望通過這些內(nèi)容能讓大家對按鈕設計更重視，對已了解的按鈕設計知識查缺補漏！

慢慢來比較快，如覺得有幫助，

作者： Clippp

轉(zhuǎn)載請注明：學UI網(wǎng)》如何改進UI中的按鈕設計，試試這5個方法！

藍藍設計建立了UI設計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設計，如果有興趣的話，可以進入一起成長學習，請加藍小助，微信號:ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯(lián)系01063334945。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍藍設計( sillybuy.com )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數(shù)據(jù)可視化設計公司、UI交互設計公司、高端網(wǎng)站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司