會(huì)員體系建設(shè)的價(jià)值在于以體系化機(jī)制培育用戶對(duì)產(chǎn)品的忠誠(chéng)度，同時(shí)提供給高價(jià)值用戶更有價(jià)值的權(quán)益服務(wù)。百度APP DU會(huì)員體系搭建整合百度內(nèi)部資訊專欄、小說(shuō)、文庫(kù)、網(wǎng)盤、咨詢、生活服務(wù)、裝扮、工具、小度學(xué)堂等多業(yè)務(wù)權(quán)益，多維度滿足用戶學(xué)習(xí)、生活服務(wù)、效率升級(jí)、個(gè)性表達(dá)、娛樂訴求深度，成為用戶留存的關(guān)鍵。
為了將百度體系下眾多跨業(yè)務(wù)權(quán)益整合為DU會(huì)員權(quán)益，搭建百度APP DU會(huì)員權(quán)益服務(wù)體系，設(shè)計(jì)從建立獨(dú)特、統(tǒng)一的品牌印記、搭建豐富高價(jià)值權(quán)益聚合新場(chǎng)域、對(duì)用戶轉(zhuǎn)化全鏈路精細(xì)設(shè)計(jì)3個(gè)方向開展。
一、通過(guò)獨(dú)特和統(tǒng)一的DU會(huì)員品牌設(shè)計(jì)語(yǔ)言建立品牌印記
1、DU會(huì)員LOGO圖形與百度體系其他業(yè)務(wù)會(huì)員差異化設(shè)計(jì)，目標(biāo)建立明確清晰印象和認(rèn)知。
LOGO圖形采用皇冠+V結(jié)合100度傾斜角度設(shè)計(jì)，與其他業(yè)務(wù)會(huì)員LOGO圖形差異化。LOGO以用戶為中心，百分百為用戶提供百度體系豐富優(yōu)質(zhì)的權(quán)益，提供尊享服務(wù)。
2、界面設(shè)計(jì)以簡(jiǎn)潔清晰、年輕精致、豐富尊享的設(shè)計(jì)定位，從色、形、質(zhì)、構(gòu)、字多維度滲透年輕化設(shè)計(jì)語(yǔ)言，增強(qiáng)品牌識(shí)別性和記憶點(diǎn)，凸顯會(huì)員尊享感，搭建全新視覺體驗(yàn)。
色：清透明快、年輕活潑
視覺降噪，以高飽和高明度黃金為主色，搭配白底輔助色，強(qiáng)對(duì)比、高明度形成鮮明清晰的視效層次，頭部背景采用鎏金漸變色，整體色彩搭配給用戶年輕、確定、活潑輕快的視覺感受。
形：溫潤(rùn)親和、直觀清晰
ICON圖形采用肯定包容的面型，以提升權(quán)益辨識(shí)度、圖形更大、留白更多，幫助用戶更直觀更高效區(qū)分權(quán)益類型。ICON圖形疊加部分采用毛玻璃質(zhì)感，品質(zhì)細(xì)膩精致，ICON親和明確。
質(zhì)：細(xì)膩吸睛、精致尊享
采用高光立體感材質(zhì)設(shè)計(jì)，突出會(huì)員品質(zhì)感和吸引力，增強(qiáng)會(huì)員權(quán)益獲得感。
構(gòu)：簡(jiǎn)潔突出、清晰統(tǒng)一
卡片、圖片、按鈕超大圓角，年輕親和，內(nèi)容與卡片間距大留白，多模塊瀏覽舒適，提升頁(yè)面節(jié)奏感和呼吸感，白底與內(nèi)容形成鮮明層級(jí)關(guān)系，視覺降噪簡(jiǎn)潔。
字：層次清晰、高辨識(shí)度
收斂字號(hào)減少層級(jí)、標(biāo)題、數(shù)字字體特殊處理展示，辨識(shí)度更高、氣質(zhì)更年輕。
二、整合百度高價(jià)值權(quán)益搭建豐富的權(quán)益聚合新場(chǎng)域
搭建聯(lián)合會(huì)員聚合、流暢播等高價(jià)值權(quán)益聚合場(chǎng)景，權(quán)益顯性化設(shè)計(jì)。采用3D元素設(shè)計(jì)，增強(qiáng)會(huì)員權(quán)益獲得感，突出會(huì)員服務(wù)品質(zhì)感和吸引力。
1、聯(lián)合會(huì)員高價(jià)值場(chǎng)域視覺強(qiáng)化提吸引
會(huì)員中心聯(lián)合會(huì)員模塊、聯(lián)合會(huì)員聚合和權(quán)益詳情，封面運(yùn)用3D玻璃材質(zhì)設(shè)計(jì)，強(qiáng)化聯(lián)合會(huì)員權(quán)益高品質(zhì)和吸引力。
2、會(huì)員熱門權(quán)益場(chǎng)域視覺品牌統(tǒng)一強(qiáng)感知
流暢播、視頻備份、裝扮（掛件、個(gè)人主頁(yè)背景、頭像、換膚）、小度特權(quán)等高價(jià)值權(quán)益，在觸點(diǎn)場(chǎng)景入口和開通面板中，DU會(huì)員品牌和3D元素設(shè)計(jì)顯性化，強(qiáng)化DU會(huì)員權(quán)益感知和吸引力，提轉(zhuǎn)化。
3、下沉用戶場(chǎng)域視覺顯性化設(shè)計(jì)
針對(duì)百度APP極速版下沉用戶，會(huì)員中心開通前打造省賺看享4大權(quán)益，視覺強(qiáng)化大標(biāo)題突出賺錢，省錢認(rèn)知，結(jié)合極速版任務(wù)系統(tǒng)和故事會(huì)，豐富權(quán)益和省錢感知顯性化設(shè)計(jì)，提升會(huì)員轉(zhuǎn)化。
三、對(duì)用戶轉(zhuǎn)化全鏈路精細(xì)設(shè)計(jì)促轉(zhuǎn)化
設(shè)計(jì)驅(qū)動(dòng)前瞻構(gòu)建會(huì)員開通前、中、后支付全鏈路系統(tǒng)打法，每個(gè)環(huán)節(jié)給用戶強(qiáng)感知、易操作、快核銷的操作體驗(yàn)，強(qiáng)化會(huì)員開通和權(quán)益核銷引導(dǎo)，提升會(huì)員續(xù)費(fèi)率，做好用戶激勵(lì)和轉(zhuǎn)化。
1、開通前認(rèn)知階段-強(qiáng)感知
增價(jià)值吸引，擴(kuò)入口規(guī)模，增動(dòng)效強(qiáng)引導(dǎo)提吸引，權(quán)益整合大標(biāo)題突出賺錢、省錢認(rèn)知。
建規(guī)范-規(guī)?；厝肟?/strong>
會(huì)員滲透場(chǎng)景持續(xù)擴(kuò)面，統(tǒng)一和規(guī)范DU會(huì)員導(dǎo)流控件等入口模塊視覺語(yǔ)言，開通導(dǎo)流條、會(huì)員標(biāo)簽、會(huì)員按鈕等會(huì)員元素在百度APP主端和極速版26場(chǎng)景規(guī)模化滲透，強(qiáng)化統(tǒng)一的DU會(huì)員認(rèn)知。
增動(dòng)效-強(qiáng)引導(dǎo)提吸引
會(huì)員中心權(quán)益圖標(biāo)、開通會(huì)員按鈕、運(yùn)營(yíng)圖增動(dòng)效提吸引，權(quán)益整合大標(biāo)題突出賺錢、省錢認(rèn)知，權(quán)益區(qū)打通動(dòng)態(tài)圖標(biāo)配置能力，圖標(biāo)動(dòng)態(tài)化擴(kuò)容提升權(quán)益感知，周年和節(jié)日大促烘托活動(dòng)氛圍，提升吸引力。
2、開通中行動(dòng)階段-易操作
減步長(zhǎng)強(qiáng)優(yōu)惠促?zèng)Q策，動(dòng)效提優(yōu)惠感知和吸引力，優(yōu)惠抵扣任務(wù)新玩法，提升優(yōu)惠感知。
支付方式前置，減支付步長(zhǎng)
減少用戶支付的阻礙，支付渠道前置購(gòu)買面板中，根據(jù)用戶操作習(xí)慣智能排序顯示常用支付方式，縮短支付步長(zhǎng)提升轉(zhuǎn)化率。
強(qiáng)化優(yōu)惠感知，提決策效率
通過(guò)突出優(yōu)惠信息和權(quán)益豐富，增強(qiáng)吸引力，讓用戶買得值。
1）支付面板凸顯連續(xù)包月套餐和續(xù)費(fèi)信息、外露買就送附贈(zèng)優(yōu)惠信息，重要信息動(dòng)效設(shè)計(jì)提吸引力。
2）支付面板增優(yōu)惠抵扣模塊，任務(wù)余額抵扣會(huì)員費(fèi)用，提升優(yōu)惠感知。
3）支付增挽留彈窗外露優(yōu)惠信息，動(dòng)效提優(yōu)惠感知促會(huì)員轉(zhuǎn)化率。
3、開通后留存階段-快核銷
開通后差異設(shè)計(jì)引導(dǎo)不同階段用戶核銷，突出會(huì)員獲得感。
新開通用戶-引導(dǎo)提核銷
儀式感強(qiáng)動(dòng)效引導(dǎo)熱門權(quán)益核銷，沉浸式動(dòng)畫引導(dǎo)秒殺，給用戶會(huì)員超值感受，帶動(dòng)會(huì)員券使用率提升。
沉默用戶 - 喚醒引導(dǎo)使用
從強(qiáng)到弱交叉推送，強(qiáng)動(dòng)效強(qiáng)視效引導(dǎo)高頻權(quán)益，喚起使用核銷，弱打擾Push產(chǎn)品化設(shè)計(jì)引導(dǎo)權(quán)益核銷。
臨期/過(guò)期用戶-引導(dǎo)促續(xù)費(fèi)
通過(guò)用戶已使用專屬權(quán)益與優(yōu)惠福利到期，在個(gè)人中心、掛件商城、會(huì)員中心等場(chǎng)景以優(yōu)惠福利、專屬權(quán)益強(qiáng)化等多手段引導(dǎo)續(xù)費(fèi)。
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加微信ban_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.wnxcall.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司。
UI設(shè)計(jì)3天時(shí)間完成~
這個(gè)界面不難的，按照我的交互稿上個(gè)色就好了~
簡(jiǎn)單設(shè)計(jì)一下，馬上給我~
再調(diào)幾個(gè)顏色給我選一下~
模塊先設(shè)計(jì)，顏色最后調(diào)一下也很快的~
…
熟悉吧，以上是作為UI設(shè)計(jì)師的你，幾乎每天都能聽到的把。拜托，就算是路邊打印店，讓人家?guī)湍阍O(shè)計(jì)個(gè)名片，你也會(huì)問(wèn)人家什么時(shí)候能做好吧。難不成設(shè)計(jì)這么好做?要不你行你上?我做不了~
慢著，我做，我做，誰(shuí)讓你給我發(fā)錢，給錢就是老大，要做就做吧~
于是出現(xiàn)了以下設(shè)計(jì)稿
常說(shuō)設(shè)計(jì)是一個(gè)用戶接觸產(chǎn)品的第一道門。從應(yīng)用市場(chǎng)的圖標(biāo)開始到用戶下載打開app的啟動(dòng)頁(yè)，再到用戶進(jìn)入app后看到的首頁(yè)。難道設(shè)計(jì)師真的不考慮什么嗎?真的按照產(chǎn)品或交互設(shè)計(jì)稿做嗎。從圖標(biāo)在應(yīng)用市場(chǎng)的吸引力，到用戶使用app后的留存率，請(qǐng)問(wèn)哪一個(gè)不是和UI設(shè)計(jì)師有關(guān)系！業(yè)績(jī)好，業(yè)務(wù)好是產(chǎn)品的營(yíng)銷和自然增長(zhǎng)率。業(yè)務(wù)差就是設(shè)計(jì)不吸引人沒有感染力，嗯哼？？？
在此呼吁廣大項(xiàng)目管理者，請(qǐng)給我們的設(shè)計(jì)師一些思考的時(shí)間，一些打磨設(shè)計(jì)的時(shí)間。
好了，廢話不多說(shuō)，進(jìn)入正題。假設(shè)有一天，公司給了你足夠的時(shí)間設(shè)計(jì)。你該如何思考？你要怎么不受約束的將自己的產(chǎn)品觀融入你的設(shè)計(jì)中？從現(xiàn)在開始，即使產(chǎn)品給你的設(shè)計(jì)時(shí)間很短，你也要學(xué)著思考，學(xué)著加入自己的思維，做一個(gè)有思想的設(shè)計(jì)師。做到這一點(diǎn)很難，但是你必須學(xué)著這樣做，跟我沒關(guān)系，但對(duì)你有益。
1.學(xué)著像產(chǎn)品經(jīng)理一樣思考(THINKING LIKE PM)
產(chǎn)品經(jīng)理是怎么思考的。產(chǎn)品經(jīng)理是產(chǎn)品的CEO，手握著產(chǎn)品的生殺大權(quán)?？紤]的會(huì)更偏像于產(chǎn)品的核心觀。幫助用戶解決什么痛點(diǎn)，通過(guò)什么方式解決這個(gè)痛點(diǎn)，怎么為公司提高贏利、如何提高轉(zhuǎn)化、如何提升留存…當(dāng)然你并不需要完全知道所有的東西，因?yàn)槟阌心阕约旱膶ｉL(zhǎng)(UI設(shè)計(jì))。
但是，必須留意的幾點(diǎn)就是:(1)用戶群體(2)相關(guān)競(jìng)品(3)主要商業(yè)模式
（1）對(duì)于用戶群體的了解，你能夠通過(guò)這部分用戶群體找到相關(guān)的用戶畫像。這一點(diǎn)很重要（因?yàn)閺哪闳肼殲閁I設(shè)計(jì)師的那天開始，你的設(shè)計(jì)是幫助公司服務(wù)于用戶的，并不是為了表達(dá)你崇高的藝術(shù)涵養(yǎng)的）。通過(guò)用戶畫像，你能找到這部分人的主要特征，這將會(huì)有助于你選擇設(shè)計(jì)中使用的顏色、字體大小。
打個(gè)比方來(lái)說(shuō)，總不能為服務(wù)于紅綠色盲人群設(shè)計(jì)的產(chǎn)品，UI做出了綠色界面+紅色按鈕吧？你以為你通過(guò)顏色對(duì)比突出了按鈕，實(shí)際…對(duì)吧？你可以用顏色來(lái)讓界面產(chǎn)生差異，單不能僅依賴于顏色提升設(shè)計(jì)效果，因?yàn)椴⒉皇敲總€(gè)人都能精確的分辨出各種顏色。
(2)產(chǎn)品的競(jìng)品，對(duì)于相關(guān)競(jìng)品的研究，也是目前UI設(shè)計(jì)師設(shè)計(jì)過(guò)程中常用的一種方法。好處呢當(dāng)然顯而易見，競(jìng)品的顏色用取，設(shè)計(jì)風(fēng)格…這些都是已經(jīng)線上經(jīng)過(guò)驗(yàn)證了的。有很多設(shè)計(jì)師是在看完競(jìng)品后恍然大悟，顏色該用啥，按鈕用啥色。但這是萬(wàn)萬(wàn)不可取的。這會(huì)導(dǎo)致你們的產(chǎn)品沒有任何競(jìng)爭(zhēng)力，上線比人家晚，看著有和人家差不多。怎么打差異化的戰(zhàn)?取其優(yōu)，去其差。思考人家設(shè)計(jì)師為什么這么做，他們是怎么想的，如果我設(shè)計(jì)會(huì)設(shè)計(jì)成什么樣？
（3）你必須要了解你的商業(yè)模式。作為設(shè)計(jì)師有權(quán)知道公司的基本商業(yè)模式，這也是考慮在整體設(shè)計(jì)里程里面。霧里看花管中窺豹，你永遠(yuǎn)看不到你所設(shè)計(jì)的產(chǎn)品本質(zhì)。再打個(gè)比方：假設(shè)你的產(chǎn)品是通過(guò)用戶購(gòu)買相關(guān)服務(wù)進(jìn)行盈利的，那么設(shè)計(jì)前你得思考整個(gè)產(chǎn)品其實(shí)是需要安全、信任、服務(wù)作為設(shè)計(jì)主旨，其中突出“服務(wù)”作為亮點(diǎn)，需要傳遞給用戶一種安全可靠的情感，最終引導(dǎo)消費(fèi)者完成支付購(gòu)買。
2.學(xué)著像交互設(shè)計(jì)師一樣思考(THINKING LIKE UE)
用戶體驗(yàn)、使用場(chǎng)景、信息優(yōu)先級(jí)、轉(zhuǎn)場(chǎng)、使用習(xí)慣…對(duì)于交互設(shè)計(jì)師來(lái)說(shuō)這是多么熟悉的名詞。確實(shí)，交互設(shè)計(jì)師考慮更多的是怎么讓用戶在app上操作的爽了，最符合用戶的操作習(xí)慣，將產(chǎn)品經(jīng)理傳達(dá)下來(lái)的商業(yè)模式/邏輯變?yōu)榱鞒痰男问揭龑?dǎo)用戶進(jìn)行使用。通過(guò)數(shù)據(jù)的分析，不斷優(yōu)化上線后產(chǎn)品的相關(guān)體驗(yàn)。
作為設(shè)計(jì)師的你，怎么像交互設(shè)計(jì)師一樣思考呢?
(1)用戶體驗(yàn)=顏色是否和諧。顏色的使用，之前已經(jīng)說(shuō)過(guò)了，考慮用戶群體的基礎(chǔ)上，看你顏色的配比是否讓人舒適，是否準(zhǔn)確的傳遞出了產(chǎn)品想給用戶的那種感覺。產(chǎn)品正式設(shè)計(jì)前，通常會(huì)進(jìn)行所謂的風(fēng)格探索階段。是允許設(shè)計(jì)師根據(jù)提供的用戶群體發(fā)揮自己的創(chuàng)意進(jìn)行設(shè)計(jì)的。當(dāng)找到那種適合的顏色搭配后，接下去的設(shè)計(jì)會(huì)顯得游刃有余。但是目前很多公司都是略過(guò)探索這一步的。為追求產(chǎn)品的快速上線，基本都是領(lǐng)導(dǎo)找競(jìng)品給顏色，設(shè)計(jì)師根據(jù)這個(gè)顏色（衍生色）進(jìn)行設(shè)計(jì)。缺乏用色的專業(yè)性。
(2)使用場(chǎng)景=顏色使用是否符合用戶使用產(chǎn)品時(shí)的場(chǎng)景。這個(gè)就比較好理解了，產(chǎn)品到底是晚上用的還是白天用的，到底是地鐵上用的還是書房里用戶。不同的使用場(chǎng)景在設(shè)計(jì)時(shí)也應(yīng)該考慮在內(nèi)。例如，晚上使用的產(chǎn)品顏色一定會(huì)偏暗一些、白天熱鬧場(chǎng)所使用的產(chǎn)品一定會(huì)是偏簡(jiǎn)潔、書房使用的產(chǎn)品一定是偏溫和…
(3)信息優(yōu)先級(jí)=如何通過(guò)設(shè)計(jì)的方法(大小、位置、形狀、顏色、動(dòng)畫)突出產(chǎn)品重點(diǎn)。通過(guò)對(duì)比、突出等手法，將重要信息直接展示給用戶。做到簡(jiǎn)單直接有效。
(4)轉(zhuǎn)場(chǎng)=如何通過(guò)動(dòng)效的方式便于用戶理解邏輯跳轉(zhuǎn)。這一點(diǎn)特別是在相對(duì)復(fù)雜的產(chǎn)品的時(shí)候較為常用，例如層級(jí)相對(duì)比較深，則會(huì)通過(guò)轉(zhuǎn)場(chǎng)的引導(dǎo)告知用戶從哪來(lái)到哪兒去。引領(lǐng)用戶使用你的產(chǎn)品，不至于在產(chǎn)品使用過(guò)程中迷失。
(5)使用習(xí)慣=相關(guān)設(shè)計(jì)規(guī)范。用戶長(zhǎng)時(shí)間使用完你的產(chǎn)品后，已養(yǎng)成了使用習(xí)慣。知道哪個(gè)位置是重要的內(nèi)容。如果用戶已經(jīng)建立了產(chǎn)品工作原理的心理模型，他們可能會(huì)有非常強(qiáng)烈的觀點(diǎn)，認(rèn)為某些東西就應(yīng)該在某些特定的位置，通常設(shè)計(jì)師可以利用這一特點(diǎn)來(lái)引導(dǎo)用戶發(fā)現(xiàn)重要功能。
3.學(xué)著像用戶一樣思考(THINKING LIKE UESR)
（1）用戶在使用產(chǎn)品的時(shí)候，最優(yōu)考慮的是，這個(gè)產(chǎn)品是不是能幫我解決我的問(wèn)題(賺錢、記賬、提醒…)，產(chǎn)品的核心功能一定是用戶最先考慮的。
（2）你的設(shè)計(jì)是不是好看，他會(huì)考慮說(shuō)，這個(gè)東西怎么看著這么low，是不是公司不正規(guī)啊?前文也提到了，每個(gè)產(chǎn)品都有自己的目標(biāo)人群，那么研究這部分目標(biāo)人群的相關(guān)喜好，通過(guò)設(shè)計(jì)的方式將其重現(xiàn)給用戶。
（3）這個(gè)產(chǎn)品用起來(lái)爽不爽，怎么這么卡頓、怎么看起來(lái)能點(diǎn)實(shí)際不能點(diǎn)、怎么功能這么多都沒用、怎么…
當(dāng)然用戶有千千萬(wàn)萬(wàn)，你不可能完全都能像所有用戶那樣思考，滿足大部分用戶就可以了。
4.學(xué)著像你自己一樣思考(THINKING LIKE YOURSELF)
是否在為產(chǎn)品設(shè)計(jì)的過(guò)程中，已經(jīng)忘了像自己一樣思考了。滿腦子都是產(chǎn)品經(jīng)理想要什么樣的，用戶想要什么樣的。這也會(huì)讓你喪失自己的思考能力。
(1)學(xué)著像自己一樣思考，不是說(shuō)按照自己的喜好來(lái)，而是你在設(shè)計(jì)的過(guò)程中是否偏離了自己的設(shè)計(jì)觀。對(duì)于明顯是錯(cuò)誤的設(shè)計(jì)，你選擇接受。
(2)以調(diào)研或用戶研究結(jié)果為準(zhǔn)則，完全喪失你自己對(duì)這個(gè)產(chǎn)品應(yīng)有的樣子的判斷。做個(gè)半理性半感性的設(shè)計(jì)師，會(huì)讓你的設(shè)計(jì)既符合用戶口味，又有自己的韻味。
總結(jié)
記住設(shè)計(jì)產(chǎn)品的人是你，對(duì)產(chǎn)品美化體驗(yàn)的是你，如果你的設(shè)計(jì)和使用不再適用于用戶，他們可以毫不留情的轉(zhuǎn)向其他產(chǎn)品，而作為設(shè)計(jì)師的你不能這么做。用戶不知道你的設(shè)計(jì)是怎么來(lái)的是怎么想的，但是你了解這一點(diǎn)。用戶不知道你是通過(guò)調(diào)研或研究得出他們的相關(guān)喜好最終選擇了這樣的設(shè)計(jì)，但是你很清楚。真正受制于產(chǎn)品設(shè)計(jì)的人是你，因此要確保它仍是你值得付出，引以為傲的東西。
藍(lán)藍(lán)設(shè)計(jì)( www.wnxcall.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
藍(lán)藍(lán)設(shè)計(jì)( www.wnxcall.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
前言
如果你要設(shè)計(jì)以真實(shí)場(chǎng)景為主的banner或者主視覺，往往都會(huì)在各大網(wǎng)站圖庫(kù)里找半天，挑挑選選可能都找不到滿意的，或是容易和別人用到一樣的圖片。想要找到一張?zhí)貏e的又獨(dú)一無(wú)二的難上加難，而且自己也沒時(shí)間建模和拍攝
AI圖片的生成為這個(gè)痛點(diǎn)找到了更好的解決方案，這篇文章就是要和大家分享一下使用AI制作好用的圖庫(kù)素材照片，我將會(huì)按照真實(shí)工作場(chǎng)景搭配設(shè)計(jì)落地方案來(lái)和大家分享AI使用經(jīng)驗(yàn)，讓你看了就學(xué)會(huì)，學(xué)會(huì)就馬上能用
用結(jié)構(gòu)化方式思考咒語(yǔ)
以下需求是我設(shè)計(jì)中要用到的素材，我希望可以有一張【穿西裝并且手提公文包的男士站在摩天大樓前】的寫實(shí)照片當(dāng)作首圖，首先先想一下我們需要的素材大概畫面的呈現(xiàn)，思考的框架可以參考以下，以下內(nèi)容為了方便關(guān)鍵詞我會(huì)用中文，但是實(shí)際操作中Prompt都必須使用英語(yǔ)
通過(guò)結(jié)構(gòu)化思維來(lái)描述這樣就不會(huì)有遺漏，也更能使畫面完整，另外像我的英語(yǔ)并不是很好，就會(huì)把寫好的內(nèi)容通過(guò)Deep L或是chatgpt來(lái)進(jìn)行翻譯
關(guān)鍵詞的使用
prompt：A man in a suit with a briefcase ,standing in front of a skyscraper ,stock image style，the whole body of the figure is presented, —ar16:9
在輸入關(guān)鍵詞的時(shí)候，我通常會(huì)把重要的內(nèi)容放在前面，有時(shí)加在后面的關(guān)鍵詞不容易被機(jī)器人識(shí)別。個(gè)人的一點(diǎn)小經(jīng)驗(yàn)，在描述的最后一定要加上需要的參數(shù)，為了在后續(xù)的設(shè)計(jì)中更好適配尺寸需求，所以我選擇加上尺寸參數(shù)16:9，以下就是我通過(guò)關(guān)鍵詞生成的圖片
如果覺得結(jié)果都不滿意，可以重新用相同的Prompt再生成。AI好玩的地方就是它的隨機(jī)性，像是Promp就不建議非常詳細(xì)，因?yàn)檫@樣反而會(huì)有意想不到的優(yōu)質(zhì)圖片產(chǎn)出
機(jī)器人生成以后就要開始挑選圖片了，如果對(duì)左上的結(jié)果比較滿意，就點(diǎn)擊v1，讓機(jī)器人針對(duì)這個(gè)圖片再去生成四張新的圖片，雖然左上效果不錯(cuò)，但是手部有些奇怪，所以需要通過(guò)在該基礎(chǔ)上再次生成，來(lái)挑選沒有問(wèn)題的圖片
這里說(shuō)明一下U（upscaler）和V(variation)的區(qū)別，U就是選擇這張圖，然后會(huì)放大這張圖片畫質(zhì)更加清晰，V則是會(huì)針對(duì)你選擇的圖片再生成四張圖，與你選擇的圖片做輕微的調(diào)整。1-4的排序?yàn)椋?是左上，2是右上，3是左下，4是右下
重新生成的左上圖可以看到手部還是有問(wèn)題，但是右上那張就還不錯(cuò)，可以選擇這張來(lái)用或是再重新生成一遍
prompt：A man in a suit with a briefcase ,standing in front of a skyscraper ,stock image style，shot on 16mm, —ar16:9
這里我想要換一個(gè)畫面角度，所以選擇使用【shot on 16mm】,這種通常是電影、紀(jì)錄片、廣告拍攝使用的，所以使用這個(gè)關(guān)鍵字去生成圖片畫面會(huì)有一種電影感，角度上我覺得更好一點(diǎn)。
最后說(shuō)一下，我是用的版本是V5，產(chǎn)出的1024??1024高解析圖片，但是我個(gè)人感覺還是不夠清晰，所以會(huì)搭配圖片放大工具來(lái)一起使用。我常用的圖片放大工具h(yuǎn)ttp://replicate.com/sczhou/codeformer，放大效果清晰度都非常好，而且處理速度也很快，重點(diǎn)是免費(fèi)?。。≈苯由蟼鲌D片無(wú)需更改任何參數(shù)，使用默認(rèn)預(yù)設(shè)清晰度絕對(duì)夠用，畫質(zhì)太高也沒有太大意義，反而會(huì)影響網(wǎng)站加載速
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加微信ban_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.wnxcall.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司。
平臺(tái)一致性的問(wèn)題
按鈕的位置非常重要
為什么"確定"按鈕在右側(cè)效果更好
按鈕放置在角落還是放在一起？
結(jié)論
大家好，我是西瓜～
這次我們聊一個(gè)設(shè)計(jì)知識(shí)點(diǎn)，這個(gè)知識(shí)點(diǎn)平日會(huì)被設(shè)計(jì)師忽視，因?yàn)樗^(guò)于默許，但我們應(yīng)該知道的是，很多默認(rèn)的東西也是有自身的知識(shí)結(jié)構(gòu)支撐，久而久之被人忽視了。
大家應(yīng)該都見到過(guò)彈窗、表單里的"確定"和"取消"按鈕吧，這兩個(gè)按鈕大家還記得會(huì)放在頁(yè)面中的哪個(gè)位置嗎？"確定"按鈕是完成任務(wù)的主要操作，而"取消"按鈕是輔助操作，它主要的作用是用于返回到起點(diǎn)屏幕而放棄任務(wù)。那么，根據(jù)它們的功能，最佳的按鈕順序是什么？"確定"按鈕應(yīng)該放在"取消"按鈕之前還是之后呢？
可能這時(shí)候很多設(shè)計(jì)師會(huì)按照習(xí)慣，選擇遵循一致性，采用一些常見的組件樣式進(jìn)行操作。雖然這看起來(lái)似乎是解決問(wèn)題的方法，但實(shí)際上并非如此。這并沒有回答哪種位置對(duì)用戶更有效以及為什么，單純遵循已有組件并不足以讓設(shè)計(jì)師有更好的思維和主動(dòng)思考的意識(shí)。
"一致性"是設(shè)計(jì)師中常用的一個(gè)詞。然而，這常常也被用作一個(gè)借口，讓設(shè)計(jì)師不深入思考用戶面臨的設(shè)計(jì)問(wèn)題，如果一個(gè)設(shè)計(jì)師都不知道為什么一致性的規(guī)則存在，那么遵循這種設(shè)計(jì)慣例又有什么意義呢？
如果某種設(shè)計(jì)慣例對(duì)用戶來(lái)說(shuō)是有害的，那么設(shè)計(jì)師是否應(yīng)該盲目遵循它，僅僅因?yàn)橐非笠恢滦?？體驗(yàn)極差的設(shè)計(jì)樣式和結(jié)果是否應(yīng)該因?yàn)樵O(shè)計(jì)師希望迎合大家都默認(rèn)的設(shè)計(jì)一致性而繼續(xù)存在？這其實(shí)本質(zhì)就是個(gè)問(wèn)題...
現(xiàn)在網(wǎng)上有很多組建和參考，都被設(shè)計(jì)師天天借鑒和廣泛使用，因?yàn)樗鼈冞m用于用戶。但關(guān)鍵在于，設(shè)計(jì)師永遠(yuǎn)不應(yīng)該滿足于墨守成規(guī)的選擇設(shè)計(jì)的一致性，將其作為做設(shè)計(jì)的唯一理由，我們關(guān)鍵還是要理解為什么應(yīng)該以某種方式而不是其他方式來(lái)設(shè)計(jì)用戶界面。
這時(shí)候有的設(shè)計(jì)師可能會(huì)主張通過(guò)賦予操作按鈕更多的視覺重量和清晰明了的標(biāo)簽來(lái)突出界面中的操作按鈕，而不是僅關(guān)注按鈕的位置，雖然操作按鈕的視覺重量和標(biāo)簽是需要考慮的重要設(shè)計(jì)方面，但它們并不是唯一的方面。
真正一名有思想，會(huì)獨(dú)立思考的設(shè)計(jì)師會(huì)綜合考慮每個(gè)設(shè)計(jì)方面對(duì)用戶的影響，而不只是關(guān)注其中的一個(gè)方面，對(duì)于設(shè)計(jì)師來(lái)說(shuō)，最難的是確定主要操作和次要操作的最佳放置方式。這就是我為什么關(guān)于"確定"/"取消"按鈕的位置進(jìn)行說(shuō)明的原因。
當(dāng)我們?cè)谑褂迷O(shè)計(jì)組建框架前進(jìn)行考慮時(shí)，你可能會(huì)開始明白哪個(gè)位置會(huì)對(duì)用戶效果更好一些，我們可以通過(guò)分析設(shè)計(jì)對(duì)用戶的影響來(lái)解決這個(gè)問(wèn)題。
有些設(shè)計(jì)師認(rèn)為，將主要操作放在左側(cè)，在次要操作之前，對(duì)用戶來(lái)說(shuō)更好，因?yàn)樗?，所以點(diǎn)擊所需時(shí)間更少，這看起來(lái)好像有點(diǎn)道理，但我們不能忽視一個(gè)問(wèn)題，即在選擇要執(zhí)行的操作之前，用戶會(huì)查看所有選項(xiàng)，這意味著大多數(shù)用戶不會(huì)在不查看旁邊的次要操作按鈕的情況下盲目地點(diǎn)擊主要操作按鈕。
他們將首先看到左側(cè)的主要操作，然后再看右側(cè)的次要操作，然后他們會(huì)將視線轉(zhuǎn)回主要操作按鈕進(jìn)行點(diǎn)擊。這里總共涉及到三個(gè)視覺注視點(diǎn)，在多個(gè)方向上分散了用戶的注意力。
與將主要操作放在左側(cè)相比，將主要操作放在對(duì)話框的右側(cè)，將次要操作放在左側(cè)，用戶只需注視每個(gè)按鈕一次，并在主要操作按鈕上結(jié)束。這樣一來(lái)，視覺注視的數(shù)量就減少了，并且在一個(gè)方向上產(chǎn)生了更流暢的視覺流動(dòng)。
用戶只關(guān)注每個(gè)按鈕一次，并最終停留在主要操作按鈕上，將主要操作放在左側(cè)可能會(huì)使用戶更容易點(diǎn)擊，但從用戶的心理過(guò)程和視覺注視速度來(lái)看，將主要操作放在對(duì)話框的右側(cè)實(shí)際上更快。
當(dāng)用戶點(diǎn)擊“取消”操作按鈕時(shí)，他們期望的是產(chǎn)品不進(jìn)行任何操作，而是將他們返回到起始屏幕位置，因此，"取消"按鈕的功能類似于"返回"按鈕。
當(dāng)用戶點(diǎn)擊“確定”操作按鈕時(shí)，他們期望產(chǎn)品進(jìn)行按鈕所表示的操作，并將他們帶到下一個(gè)屏幕。因此，"確定"按鈕的功能類似于"下一步"按鈕，將次要操作按鈕放在左側(cè)，將主要操作按鈕放在右側(cè)，可以與用戶期望的"后退"和"下一步"按鈕功能相匹配。
這類似于分頁(yè)按鈕的放置方式，將用戶帶到下一頁(yè)的按鈕位于右側(cè)，將用戶帶回先前頁(yè)面的按鈕位于左側(cè)。這種按鈕位置的安排是有效的，因?yàn)樗c用戶從左到右的閱讀和導(dǎo)航方向相吻合，其中右側(cè)是前進(jìn)方向，左側(cè)是后退方向。
對(duì)話框中的"確定"和"取消"按鈕應(yīng)該遵循類似的交互模式，因?yàn)樗鼈兊墓δ茴愃朴诜猪?yè)按鈕，另外這種左右方向模式也是用戶熟悉的。將主要操作放在右側(cè)，將次要操作放在左側(cè)，可以使對(duì)話框按鈕對(duì)用戶更易于理解和使用。
將按鈕放置在對(duì)話框的右下角更容易被用戶點(diǎn)擊，因?yàn)檫@符合【古騰堡圖表】。在古騰堡圖表中，右下角區(qū)域是終端區(qū)域，用戶在掃視后的最終目的地。
將按鈕放在終端區(qū)域可以使用戶在視覺掃描時(shí)看到他們最后需要執(zhí)行的主要操作，這不僅改善了視覺流動(dòng)，還改善了任務(wù)流程。用戶在掃視過(guò)程中不會(huì)錯(cuò)過(guò)主要操作按鈕，當(dāng)他們經(jīng)過(guò)時(shí)，他們的目光會(huì)停留在上面，從而可以立即點(diǎn)擊它。
掃視對(duì)話框并采取行動(dòng)變得更快更容易，因?yàn)橛脩舻哪抗庾罱K會(huì)落在主要操作按鈕上。
我們需要考慮另一個(gè)問(wèn)題，那就是我們應(yīng)該將按鈕放在角落還是放在一起，當(dāng)將主要操作和次要操作放在對(duì)話框的角落時(shí)，這與左右導(dǎo)航方向相吻合，這是很好的映射。然而，由于"確定"和"取消"按鈕并不是導(dǎo)航按鈕，因此并不需要遵循方向映射，有時(shí)候這樣做可能帶來(lái)更多的弊端。
較大的視覺分離使得比較操作變得困難，并將一個(gè)操作與另一個(gè)操作隔離開來(lái) 如果產(chǎn)品頁(yè)面即將執(zhí)行用戶無(wú)法撤銷的關(guān)鍵操作，那么用戶可以看到"取消"按鈕和"確定"按鈕是很重要的。在這種情況下，"取消"按鈕的功能可能類似于"上一步"按鈕，但它更重要，因?yàn)樗洚?dāng)安全按鈕以防止任何更改。
將"取消"按鈕放置在最左下角的危險(xiǎn)在于，由于兩個(gè)按鈕之間的視覺分離較大，可能會(huì)導(dǎo)致用戶忽略它。將"取消"按鈕與"確定"按鈕放在一起可以讓用戶更輕松地在一次注視中查看和比較這兩個(gè)操作，以選擇最佳操作。
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加微信ban_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.wnxcall.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司。
如果軟件操作速度提升了，那么在相同時(shí)間內(nèi)，我們可以有更多時(shí)間和精力用于方案的思考，提升工作效率。這也是我們經(jīng)?？吹胶芏郆端產(chǎn)品，在系統(tǒng)做快捷鍵的原因之一。在日常軟件的使用中，我們要盡可能的多使用快捷鍵，減少鼠標(biāo)操作。舉個(gè)實(shí)例：
比如，“保存” 用鼠標(biāo)操作：點(diǎn)擊界面開始菜單 - 調(diào)出下拉菜單 - 找到“保存”按鈕再點(diǎn)擊，這一系列動(dòng)作需要點(diǎn)擊 3 次鼠標(biāo)，花費(fèi)3～4 秒。如果使用快捷鍵，光靠下意識(shí)的動(dòng)作，就可以在 0.1 秒內(nèi)完成操作。
下面整理了一些常用的 Figma 快捷鍵使用技巧，幫助我們提升Figma的操作效率，更快更好的完成工作，節(jié)省時(shí)間，以便更專注地思考方案。
文章末尾附 Axure RP9、 Sketch提高效率的常用技巧。
快捷鍵：【Ctrl + Shift + ?】 ，打開 Figma 的快捷鍵面板，可查看 Figma 的所有快捷鍵，方便快速查找。
快捷鍵是【K】，在設(shè)計(jì)中縮放是經(jīng)常要用到的功能，在 Figma 中，按一下【K】鍵進(jìn)行縮放，就可以完全保證比例。
快速畫出環(huán)形進(jìn)度條的方法，先畫一個(gè)圓，然后鼠標(biāo)拖動(dòng)兩下就完成了。如下圖：
在桌面或文件夾，選擇需要填充的圖片【Command + C】。點(diǎn)選Figma中待填充元素【Command + V】。填充成功，如下圖：
選中一個(gè)已經(jīng)調(diào)整好樣式的元素（圖形或文字），第一步：【Command + option + C】，第二步：【Command + option + V】就可以把樣式復(fù)制粘貼下來(lái)。如下圖：
對(duì)于使用組件的元素，在調(diào)整的時(shí)候需要修改組件母版，才會(huì)對(duì)每個(gè)組件生效。當(dāng)有很多組件時(shí)，我們可以通過(guò)任意組件，點(diǎn)選右側(cè)“跳轉(zhuǎn)回組件母版”icon，快速定位至母版。如下圖：
第一步：點(diǎn)選右側(cè)“跳轉(zhuǎn)到組件母版”icon，右側(cè)紅框處
第二步：自動(dòng)定位到該組件母版
選擇一組陣列中的多個(gè)元素之后，可以隨意交換任意兩個(gè)元素之間的位置，其他的不受影響，還能直接拖動(dòng)調(diào)整它們的間距。如下圖：
快速批量修改顏色。比如下面九個(gè)元素中有三個(gè)是紅色，當(dāng)我想要批量修改這三個(gè)紅色元素的時(shí)候，我不需要一個(gè)個(gè)選擇這三個(gè)元素，只需要批量選擇，然后在右側(cè)屬性欄那里，選擇想修改的那個(gè)紅色，直接改顏色，三個(gè)元素的顏色就會(huì)一起修改了。
快捷鍵【Alt+L】，可以直接將所有圖層折疊起來(lái)，這樣，不管之前展開了多少層，都能直接折疊，方便快速瀏覽整個(gè)系統(tǒng)的全貌。
使用鍵盤快捷鍵快速瀏覽圖層。快捷鍵【Tab】快速向 下 切換選中圖層，【Shift+Tab】快速向 上 切換選中圖層。
使用顏色樣式時(shí)，這里有一個(gè)小按鈕（下圖紅框標(biāo)出），可以快速得在列表樣式和網(wǎng)格樣式之間進(jìn)行切換，使用列表樣式能夠更方便瀏覽使用了哪些顏色，方便進(jìn)行管理。
吸色工具的快捷鍵是【i】，當(dāng)你按住【i】鍵不動(dòng)時(shí)，移動(dòng)光標(biāo)，就能預(yù)覽顏色，而不是直接取色了，預(yù)覽的顏色就如下圖，是展示在右上角的。
快捷鍵是 【cmd/ctrl + D】，如下圖所示，向右下方復(fù)制一個(gè)元素，然后使用【cmd/ctrl + D】，會(huì)繼續(xù)向右下角復(fù)制元素，重復(fù)的是相關(guān)對(duì)象和操作中設(shè)計(jì)到的所有元素。
如果設(shè)計(jì)時(shí)輸入了一些文本，行高有問(wèn)題，但是暫時(shí)又沒有很明確的行高參數(shù)，這個(gè)時(shí)候，只需要在行高這里輸入 auto，點(diǎn)擊回車，就可以把這些文字設(shè)置成自動(dòng)行高了。如下圖紅框位置：
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加微信ban_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.wnxcall.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司。 著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。
先問(wèn)你一個(gè)問(wèn)題。
拼多多、淘寶、京東這三家購(gòu)物平臺(tái)，你認(rèn)為它們的區(qū)別是什么？
或者換個(gè)方式問(wèn)你。
買電器你去哪個(gè)平臺(tái)？買衣服你去哪個(gè)平臺(tái)？ 買垃圾袋你去哪個(gè)平臺(tái)？
是不是有了答案了？
沒猜錯(cuò)的話， 大部分人的答案是：買電器去京東、買衣服去淘寶、買垃圾袋去拼多多。
你看，這就是一個(gè)購(gòu)物心智模型，你的心里對(duì)這三家平臺(tái)已經(jīng)產(chǎn)生了固有的心智，如果讓你去京東買衣服，你會(huì)不會(huì)覺得，有些別扭？沒錯(cuò)，這就是心智模型。
百度百科對(duì)心智模型的定義是：
“深植我們心中關(guān)于我們自己、別人、組織及周圍世界每個(gè)層面的假設(shè)、形象和故事。并深受習(xí)慣思維、定勢(shì)思維、已有知識(shí)的局限?！?
關(guān)鍵詞是：故事、習(xí)慣、局限。
淘寶一開始就我們講了一個(gè)故事，一個(gè)萬(wàn)能的集市，我們習(xí)慣在上面買衣服，但是也產(chǎn)生了局限性，那就是，當(dāng)我們想買大額電器的時(shí)候，還是會(huì)選擇京東。
我個(gè)人對(duì)心智模型的理解是：
我們內(nèi)心深處對(duì)一個(gè)事物的看法。
空口聊天多沒意思，下面舉個(gè)例子。
這是一尊陶俑，第一眼你覺得她像什么？
是不是覺得像米老鼠？
為什么？
因?yàn)樘召傅念^上的發(fā)髻和米老鼠標(biāo)志性的耳朵很像。
如果你從沒見過(guò)米老鼠，你還會(huì)覺得她像米老鼠嗎？
一定不會(huì)。
這就是心智模型，你對(duì)頭頂?shù)拇髨A形的心智是“米老鼠”，所以一旦你看到類似的形狀，米老鼠的形象就會(huì)浮現(xiàn)出來(lái)，這個(gè)發(fā)髻的形狀和你心里對(duì)米老鼠的形象產(chǎn)生了匹配。
對(duì)心智模型有沒有一點(diǎn)印象了？下面我們接著聊。
我不想用具體的界面來(lái)聊，那樣的話太散，我認(rèn)為要想理解一個(gè)概念，最好還是從“面”的角度來(lái)說(shuō)，所以下面我會(huì)舉一些商業(yè)上的案例來(lái)輔助理解。
心智模型有哪三種運(yùn)用方式？
第一種：創(chuàng)建新的心智模型
第二種：改變舊的心智模型
第三種：匹配現(xiàn)有的心智模型
可以理解成一件事情的新生、改變和延續(xù)。
下面咱們一個(gè)個(gè)來(lái)。
第一種：創(chuàng)建新的心智模型
難度指數(shù)：難啊。
記得《盜夢(mèng)空間》里最難的是什么嗎？
最難的不是盜夢(mèng)，而是植入一個(gè)想法。
創(chuàng)建新的心智模型有異曲同工之妙，都是讓別人內(nèi)心接收一個(gè)事物，需要刻意培養(yǎng)。
舉幾個(gè)例子。
當(dāng)年外賣剛開始的時(shí)候，家家搞補(bǔ)貼，很多時(shí)候幾乎不花錢就可以點(diǎn)外賣，后來(lái)這些福利沒有了，為啥？
因?yàn)辄c(diǎn)外賣的心智已經(jīng)培養(yǎng)好了，你離不開它了，所以平臺(tái)可以“不慣著你了”。
還有唯品會(huì)的正品低價(jià)、瑞幸一開始的星巴克平替，這些都是他們想要植入到用戶大腦中的心智。
為什么要費(fèi)勁植入一個(gè)新的想法？
因?yàn)橐坏┲踩肓?，就很難改變。
現(xiàn)在我身邊的很多朋友想買一些低價(jià)的品牌都會(huì)上唯品會(huì)，買咖啡會(huì)喝瑞幸，一旦用戶的習(xí)慣養(yǎng)成就很難改變，意味著什么？
意味著留存和轉(zhuǎn)化的成本更低了。
第二種：改變舊的心智模型
難度指數(shù)：也難。
《盜夢(mèng)空間》里小李子的妻子被他植入了一個(gè)想法“你不在現(xiàn)實(shí)世界里”，當(dāng)他和他妻子回到現(xiàn)實(shí)世界后，他妻子仍舊認(rèn)為自己不在現(xiàn)實(shí)世界里，這個(gè)被植入的想法已經(jīng)根深蒂固，很難改變。
所以改變舊的心智也不簡(jiǎn)單。
例如小米最初主打極致性價(jià)比，后來(lái)想往高端路線走，很難，大家心里已經(jīng)認(rèn)準(zhǔn)了小米就是“性價(jià)比之王”，也就是你的產(chǎn)品不僅要好還要便宜。
這就導(dǎo)致小米一漲價(jià)，大家就罵他們忘了初心……所以小米拆分出了紅米主攻性價(jià)比，小米往高端發(fā)展，但是仍舊很難。
拼多多的百億補(bǔ)貼也是一樣的道理，一開始的砍一刀深入人心，大家對(duì)拼多多的心智已經(jīng)成型：便宜，質(zhì)量一般。拼多多想改變這個(gè)心智，推出百億補(bǔ)貼，并承諾假一賠十，就是想告訴大家，我拼多多，也是有正品好貨的。不過(guò)，效果嘛，見仁見智。
第三種：匹配現(xiàn)有的心智模型
難度指數(shù)：相對(duì)簡(jiǎn)單。
其實(shí)匹配現(xiàn)有的心智模型，是相對(duì)最簡(jiǎn)單的方法，市場(chǎng)已經(jīng)幫你把用戶習(xí)慣培養(yǎng)好了，你直接使用，那肯定事半功倍，省時(shí)省力啊。
舉個(gè)例子，大家最近有關(guān)注小米的 13 Ultra 嗎？
小米和徠卡聯(lián)合研發(fā)的，主打徠卡調(diào)色的相機(jī)。
我有一個(gè)同事就直接把手里的微單換成了 13 Ultra，因?yàn)榕恼兆銐蚝每炊冶銛y。
這里不是要推銷手機(jī)啊，是想讓你們了解 13 Ultra 是個(gè)什么東西。
然后給大家看看它的手柄（一個(gè)配角，可以拆卸）。
是不是有些熟悉？和相機(jī)像不像？
這個(gè)手柄就是沿用了相機(jī)的心智模式。
小結(jié)一下：
心智模型有 3 種用法：
下面聊聊，咱們?cè)趺醋霾拍芨悠ヅ溆脩舻男闹悄Ｐ停?
同樣的，我不會(huì)拿具體頁(yè)面來(lái)舉例，還是希望把思考方式分享給大家，而不是某一個(gè)頁(yè)面的設(shè)計(jì)。
要想匹配用戶的心智模型其實(shí)就三步：
了解業(yè)務(wù)、了解用戶、競(jìng)品調(diào)研。
或者可以這么說(shuō)， 在懂業(yè)務(wù)、懂用戶的基礎(chǔ)上，還要了解行業(yè)內(nèi)的通用做法。
1. 了解業(yè)務(wù)
一定要了解業(yè)務(wù)，為什么？
因?yàn)楹玫脑O(shè)計(jì)方案千千萬(wàn)，但是匹配你的業(yè)務(wù)的方案才是好方案，如果不了解業(yè)務(wù)，可能設(shè)計(jì)出來(lái)的方案就是自嗨，例如網(wǎng)上很多的 dribble 風(fēng)設(shè)計(jì)。
又比如說(shuō)手機(jī)瀏覽器一般都把搜索框放到屏幕頂部，而夸克瀏覽器卻把搜索框放到了下面。
為什么？
因?yàn)榭淇讼胪品瓊鹘y(tǒng)的瀏覽器，想打造一款更年輕更好用的瀏覽器，把搜索框放到下面也是滿足他們的業(yè)務(wù)訴求，現(xiàn)在手機(jī)屏幕越來(lái)越大，搜索框放在下面手指操作更加方便。
所以，一定要先去了解業(yè)務(wù)。
拼多多和淘寶同樣都是電商平臺(tái)，可它們的用戶心智相差甚大，因?yàn)樽詈蠓桨冈O(shè)計(jì)是服務(wù)于最初的業(yè)務(wù)目標(biāo)的，業(yè)務(wù)不同，呈現(xiàn)的方案也不一樣，最后讓用戶形成的心智也不同。
2. 了解用戶
為啥？給老人和小孩設(shè)計(jì)的界面能一樣嗎？
就拿顏色和文字來(lái)說(shuō)。
小孩喜歡高飽和、豐富的顏色，而老人則需要考慮在各種場(chǎng)景下都能看得清楚信息的顏色。
小孩喜歡圓潤(rùn)的卡通字體，而老人需要識(shí)別度更高的字體，更大的字號(hào)。
不同的用戶，采用的設(shè)計(jì)一定是不同的，只有了解了他們的喜好和痛點(diǎn)，才能做出符合他們心智模型的設(shè)計(jì)。
3. 競(jìng)品調(diào)研
為啥要競(jìng)品調(diào)研呢？
因?yàn)楦?jìng)品和我們的產(chǎn)品類似，那么意味著用戶大概率重合度也高，甚至業(yè)務(wù)上都有一定相似度，那么意味著，競(jìng)品的方案，大概率是經(jīng)過(guò)市場(chǎng)驗(yàn)證的符合用戶心智模型的方案。
你看，既然競(jìng)品已經(jīng)給咱們打了個(gè)樣，為何還要自己悶頭造輪子呢？
咱們目的是解決問(wèn)題，又不是為了證明自己很厲害。
但是，不要誤解，我不是說(shuō)照著競(jìng)品抄，而是取長(zhǎng)補(bǔ)短，所以不僅要調(diào)研，還要分析，分析就是把競(jìng)品的優(yōu)劣勢(shì)找出來(lái)，好的地方咱們可以酌情借鑒，不好的地方，咱們也要避個(gè)雷嘛。
好了，小結(jié)一下，要想匹配用戶的心智模型，一定要了解業(yè)務(wù)、了解用戶，還要做競(jìng)品調(diào)研了解市場(chǎng)的通識(shí)性做法。
以上。
文章來(lái)源：優(yōu)設(shè)網(wǎng) 作者：餿面包
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.wnxcall.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
首先說(shuō)明，競(jìng)品調(diào)研的方法有很多，本文只提供一種方法供參考，建議大家活學(xué)活用。建議從下面 4 個(gè)方面入手：
1. 調(diào)研背景
主要說(shuō)一些為什么要調(diào)研，希望通過(guò)調(diào)研答達(dá)到什么樣的目的？是視覺升級(jí)、體驗(yàn)升級(jí)還是為了提升轉(zhuǎn)化率？只有了解為什么做調(diào)研這件事情，才能知道從哪幾個(gè)維度調(diào)研。
2. 調(diào)研樣本
建議選幾個(gè)直接競(jìng)品，再選幾個(gè)優(yōu)秀的次要競(jìng)品也是可以的，可以幫助補(bǔ)齊盲點(diǎn)。
3. 調(diào)研維度
調(diào)研維度要根據(jù)調(diào)研目的來(lái)確定，例如如果是為了視覺升級(jí)，那么調(diào)研維度主要就集中在視覺效果上，如果是體驗(yàn)升級(jí)，那么調(diào)研維度主要集中在交互體驗(yàn)層面。所以維度的選擇一定是和此次調(diào)研的目的緊密相關(guān)的，不過(guò)，倒也不是說(shuō)如果是視覺升級(jí)就只調(diào)研視覺方面的內(nèi)容，而是咱們要有一個(gè)主要的調(diào)研方向，啥都想要，最后啥都做不好。
4. 結(jié)論
結(jié)論是最重要的，畢竟，做這次的調(diào)研不就是為了這份結(jié)論嗎？所以最后一定要有結(jié)論，也就是咱們通過(guò)調(diào)研得到了什么結(jié)論。
1. 調(diào)研背景
我公司這個(gè)項(xiàng)目是做一個(gè)官網(wǎng)的改版，官網(wǎng)主要就改版主要目標(biāo)有兩個(gè)：
第一個(gè)目標(biāo)是視覺體驗(yàn)升級(jí)，拆解下來(lái)就是界面更好看，內(nèi)容更好找。
第二個(gè)目標(biāo)是提升用戶轉(zhuǎn)化率，更細(xì)致的拆解一下就是讓更多的用戶點(diǎn)擊「咨詢」按鈕。
可以得到關(guān)鍵詞：界面更好看、內(nèi)容更好找、咨詢客服的人數(shù)更多。
好，咱們繼續(xù)，下一步是找樣本。
2. 調(diào)研樣本
前面提到過(guò)，樣本最好是直接競(jìng)品+間接競(jìng)品（主要是一線大廠競(jìng)品）。所以這次調(diào)研我選擇了幾個(gè)直接競(jìng)品的官網(wǎng)，以及華為、飛書等這樣的做的比較優(yōu)秀的產(chǎn)品進(jìn)行輔助分析。
3. 選取調(diào)研維度
調(diào)研維度又可以分為兩大部分：整體結(jié)構(gòu)、內(nèi)容拆解。
了解整體架構(gòu)是每個(gè)競(jìng)品調(diào)研都離不開的步驟，可以幫助我們快速了解行業(yè)內(nèi)的通識(shí)性做法，畢竟站在巨人的肩膀上才能看得更遠(yuǎn)嘛。
①整體架構(gòu)
我當(dāng)時(shí)的做法是把主要競(jìng)品的官網(wǎng)都截圖下來(lái)，然后一個(gè)模塊一個(gè)模塊的去分析，其實(shí)看下來(lái)你會(huì)發(fā)現(xiàn)，大家的做法都是有跡可循的。
看下面的圖片，我把他們類似的模塊用同樣的顏色框出來(lái)，框出來(lái)后就會(huì)發(fā)現(xiàn)，哦，原來(lái)，這就是行業(yè)內(nèi)的通識(shí)性做法。
然后我把這種通識(shí)性做法歸納總結(jié)出來(lái)，發(fā)現(xiàn)，其實(shí)官網(wǎng)首頁(yè)可以劃分為四大板塊：
你看，看似有很多復(fù)雜內(nèi)容的官網(wǎng)， 其實(shí)也就這幾個(gè)模塊，這樣看是不是就清晰多了。
既然咱們通過(guò)架構(gòu)梳理來(lái)了官網(wǎng)的內(nèi)容，下一步就進(jìn)行內(nèi)容的拆解了，拆解什么內(nèi)容？就是拆解上面總結(jié)出來(lái)的規(guī)律呀。
②內(nèi)容拆解
為啥要拆解內(nèi)容呢？因?yàn)樵蹅兏?jìng)品分析的目的不就是要做到“人有我優(yōu)”嘛，咱們競(jìng)品分析是為了青出于藍(lán)而勝于藍(lán)呀，所以咱們不能直接抄人家的內(nèi)容，這是無(wú)效設(shè)計(jì)，咱們要做的是分析他們的優(yōu)點(diǎn)，然后借鑒，然后超越。
進(jìn)行內(nèi)容拆解的時(shí)候，建議先定幾個(gè)拆解維度，不然會(huì)沒有方向，這里我分了三個(gè)維度來(lái)進(jìn)行拆解：
我就拿「建立認(rèn)知」板塊來(lái)舉例。
官網(wǎng)首頁(yè)的建立認(rèn)知是什么？
是讓進(jìn)來(lái)的用戶對(duì)整個(gè)網(wǎng)站有一個(gè)基礎(chǔ)的認(rèn)知，顧客來(lái)了，對(duì)店鋪總要有一個(gè)第一印象吧。
通過(guò)前面的架構(gòu)拆解我們發(fā)現(xiàn)，首頁(yè)一般使用 4 種方法來(lái)對(duì)用戶建立認(rèn)知，哪四種？banner、產(chǎn)品介紹、解決方案、產(chǎn)品優(yōu)勢(shì)
一個(gè)用戶看了 banner，瀏覽了產(chǎn)品介紹和解決方案，看了產(chǎn)品優(yōu)勢(shì)，是不是對(duì)咱們的產(chǎn)品有了一個(gè)認(rèn)知了，這就是建立認(rèn)知的過(guò)程。
那么咱們?nèi)绾稳シ治瞿兀?
我的做法是一個(gè)個(gè)板塊分析，有些麻煩啊，但是相信我，值得。
下面我就拿建立認(rèn)知里面的“產(chǎn)品介紹”來(lái)舉例子，看看如何去分析產(chǎn)品介紹這個(gè)板塊。
使用 3 個(gè)維度來(lái)分析：
維度 1：用戶訴求（用戶進(jìn)來(lái)之后的訴求）
產(chǎn)品介紹內(nèi)容是否有我需要的產(chǎn)品和功能？是否滿足我的需求？
維度 2：業(yè)務(wù)策略（針對(duì)用戶訴求，業(yè)務(wù)是怎么解決的）
講清楚三個(gè)問(wèn)題，即“我們的產(chǎn)品是什么”、“我們能做什么”、“我們有什么優(yōu)勢(shì)“
維度 3：常用表達(dá)形式（用什么樣的表達(dá)方式來(lái)實(shí)現(xiàn)策略）
分點(diǎn)描述：減少大段落文字，分點(diǎn)描述，增強(qiáng)閱讀性，降低理解成本
提煉賣點(diǎn)：將核心功能提煉出來(lái)，吸引用戶注意力，精準(zhǔn)打擊，結(jié)合圖標(biāo)提升可讀性
試用入口：視覺上強(qiáng)化按鈕，引導(dǎo)轉(zhuǎn)化
圖文結(jié)合：圖＞文，可視化表達(dá)降低理解成本，增強(qiáng)臨場(chǎng)感
拆解下來(lái)，是不是對(duì)產(chǎn)品介紹板塊很了解了，產(chǎn)品介紹板塊主要的目的就是為了講清楚咱們是誰(shuí)，咱們的優(yōu)勢(shì)啊。王婆賣瓜，瓜雖好，但是咱們得讓來(lái)的人知道咱們的瓜好呀，所以表達(dá)方式也是至關(guān)重要的，用什么形式去表達(dá)這個(gè)板塊呢？其實(shí)競(jìng)品已經(jīng)有了很好的解決方案，那就是上面描述的。
你看，這樣一通分析，其實(shí)你的方案就自然而出來(lái)了，你知道往哪個(gè)方向去使勁了，而不是看別人有啥咱們就做啥。
文章來(lái)源：優(yōu)設(shè)網(wǎng) 作者：餿面包
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.wnxcall.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
如果想知道某個(gè)網(wǎng)站配色方式，除了打開開發(fā)人員工具或是檢視源碼，也有第三方服務(wù)可以使用，即使無(wú)法完整復(fù)制別人的配色，也能快速得知網(wǎng)站使用的顏色代碼或配色模式，取得顏色的色碼或色彩名稱。有沒有任何更直覺、簡(jiǎn)單的方式來(lái)完成這些工作呢？若你有類似的需求，接下來(lái)要介紹的服務(wù)或許可以滿足，這項(xiàng)服務(wù)會(huì)提取特定網(wǎng)頁(yè)使用的顏色，讓顏色相關(guān)信息更一目了然。
本文要介紹的「Alwane」是一個(gè)網(wǎng)頁(yè)色彩提取工具，可以在使用者輸入特定的網(wǎng)址后取得該網(wǎng)站使用的顏色代碼或描述，產(chǎn)生為調(diào)色盤鏈接，重新分類、編排各種顏色，最簡(jiǎn)單的使用方式是輸入網(wǎng)站網(wǎng)址就能提取，也能顯示其他相關(guān)色彩，如果想分析、保存某個(gè)網(wǎng)站或品牌使用的顏色，Alwane 是個(gè)非常方便而且好用的工具。
除了將提取的顏色代碼以可視化方式呈現(xiàn)，還能夠以調(diào)色盤或是程序代碼方式呈現(xiàn)，包括 CSS 和 SASS 兩種顯示程序代碼，對(duì)于要取得特定的網(wǎng)站顏色來(lái)說(shuō)很有用，若有類似需求的話不妨打開 Alwane 網(wǎng)站試試看。
網(wǎng)站鏈接：https://alwane.io/
使用教學(xué)
開啟 Alwane 網(wǎng)站后直接在左上角「Extract CSS Colors」輸入要提取顏色的網(wǎng)址，預(yù)設(shè)情況下會(huì)從 HTML 和 CSS 樣式表單取得顏色，如果某些情境下需要從 JavaScript 獲取顏色可在「Advanced」設(shè)定選項(xiàng)找到。
從提取后的色彩結(jié)果可以看到各種顏色分布，包括顏色的預(yù)覽、變量名稱和色碼（hex code），從左側(cè)可選擇為顏色重新分組、排序或是切換 CSS、SASS 色碼。
從上方選項(xiàng)切換調(diào)色盤或程序代碼模式，也能快速將所有 CSS 代碼復(fù)制到剪貼簿。
如果想要保存或分享網(wǎng)站的配色、調(diào)色盤、CSS 等信息，點(diǎn)選右上角「Generate」就能產(chǎn)生鏈接咯！
值得一試的三個(gè)理由：
文章來(lái)源：優(yōu)設(shè)網(wǎng) 作者：PSERIC
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.wnxcall.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.wnxcall.com
