會員體系建設(shè)的價值在于以體系化機制培育用戶對產(chǎn)品的忠誠度，同時提供給高價值用戶更有價值的權(quán)益服務(wù)。百度APP DU會員體系搭建整合百度內(nèi)部資訊專欄、小說、文庫、網(wǎng)盤、咨詢、生活服務(wù)、裝扮、工具、小度學(xué)堂等多業(yè)務(wù)權(quán)益，多維度滿足用戶學(xué)習(xí)、生活服務(wù)、效率升級、個性表達(dá)、娛樂訴求深度，成為用戶留存的關(guān)鍵。
為了將百度體系下眾多跨業(yè)務(wù)權(quán)益整合為DU會員權(quán)益，搭建百度APP DU會員權(quán)益服務(wù)體系，設(shè)計從建立獨特、統(tǒng)一的品牌印記、搭建豐富高價值權(quán)益聚合新場域、對用戶轉(zhuǎn)化全鏈路精細(xì)設(shè)計3個方向開展。
一、通過獨特和統(tǒng)一的DU會員品牌設(shè)計語言建立品牌印記
1、DU會員LOGO圖形與百度體系其他業(yè)務(wù)會員差異化設(shè)計，目標(biāo)建立明確清晰印象和認(rèn)知。
LOGO圖形采用皇冠+V結(jié)合100度傾斜角度設(shè)計，與其他業(yè)務(wù)會員LOGO圖形差異化。LOGO以用戶為中心，百分百為用戶提供百度體系豐富優(yōu)質(zhì)的權(quán)益，提供尊享服務(wù)。
2、界面設(shè)計以簡潔清晰、年輕精致、豐富尊享的設(shè)計定位，從色、形、質(zhì)、構(gòu)、字多維度滲透年輕化設(shè)計語言，增強品牌識別性和記憶點，凸顯會員尊享感，搭建全新視覺體驗。
色：清透明快、年輕活潑
視覺降噪，以高飽和高明度黃金為主色，搭配白底輔助色，強對比、高明度形成鮮明清晰的視效層次，頭部背景采用鎏金漸變色，整體色彩搭配給用戶年輕、確定、活潑輕快的視覺感受。
形：溫潤親和、直觀清晰
ICON圖形采用肯定包容的面型，以提升權(quán)益辨識度、圖形更大、留白更多，幫助用戶更直觀更高效區(qū)分權(quán)益類型。ICON圖形疊加部分采用毛玻璃質(zhì)感，品質(zhì)細(xì)膩精致，ICON親和明確。
質(zhì)：細(xì)膩吸睛、精致尊享
采用高光立體感材質(zhì)設(shè)計，突出會員品質(zhì)感和吸引力，增強會員權(quán)益獲得感。
構(gòu)：簡潔突出、清晰統(tǒng)一
卡片、圖片、按鈕超大圓角，年輕親和，內(nèi)容與卡片間距大留白，多模塊瀏覽舒適，提升頁面節(jié)奏感和呼吸感，白底與內(nèi)容形成鮮明層級關(guān)系，視覺降噪簡潔。
字：層次清晰、高辨識度
收斂字號減少層級、標(biāo)題、數(shù)字字體特殊處理展示，辨識度更高、氣質(zhì)更年輕。
二、整合百度高價值權(quán)益搭建豐富的權(quán)益聚合新場域
搭建聯(lián)合會員聚合、流暢播等高價值權(quán)益聚合場景，權(quán)益顯性化設(shè)計。采用3D元素設(shè)計，增強會員權(quán)益獲得感，突出會員服務(wù)品質(zhì)感和吸引力。
1、聯(lián)合會員高價值場域視覺強化提吸引
會員中心聯(lián)合會員模塊、聯(lián)合會員聚合和權(quán)益詳情，封面運用3D玻璃材質(zhì)設(shè)計，強化聯(lián)合會員權(quán)益高品質(zhì)和吸引力。
2、會員熱門權(quán)益場域視覺品牌統(tǒng)一強感知
流暢播、視頻備份、裝扮（掛件、個人主頁背景、頭像、換膚）、小度特權(quán)等高價值權(quán)益，在觸點場景入口和開通面板中，DU會員品牌和3D元素設(shè)計顯性化，強化DU會員權(quán)益感知和吸引力，提轉(zhuǎn)化。
3、下沉用戶場域視覺顯性化設(shè)計
針對百度APP極速版下沉用戶，會員中心開通前打造省賺看享4大權(quán)益，視覺強化大標(biāo)題突出賺錢，省錢認(rèn)知，結(jié)合極速版任務(wù)系統(tǒng)和故事會，豐富權(quán)益和省錢感知顯性化設(shè)計，提升會員轉(zhuǎn)化。
三、對用戶轉(zhuǎn)化全鏈路精細(xì)設(shè)計促轉(zhuǎn)化
設(shè)計驅(qū)動前瞻構(gòu)建會員開通前、中、后支付全鏈路系統(tǒng)打法，每個環(huán)節(jié)給用戶強感知、易操作、快核銷的操作體驗，強化會員開通和權(quán)益核銷引導(dǎo)，提升會員續(xù)費率，做好用戶激勵和轉(zhuǎn)化。
1、開通前認(rèn)知階段-強感知
增價值吸引，擴入口規(guī)模，增動效強引導(dǎo)提吸引，權(quán)益整合大標(biāo)題突出賺錢、省錢認(rèn)知。
建規(guī)范-規(guī)?；厝肟?/strong>
會員滲透場景持續(xù)擴面，統(tǒng)一和規(guī)范DU會員導(dǎo)流控件等入口模塊視覺語言，開通導(dǎo)流條、會員標(biāo)簽、會員按鈕等會員元素在百度APP主端和極速版26場景規(guī)?；瘽B透，強化統(tǒng)一的DU會員認(rèn)知。
增動效-強引導(dǎo)提吸引
會員中心權(quán)益圖標(biāo)、開通會員按鈕、運營圖增動效提吸引，權(quán)益整合大標(biāo)題突出賺錢、省錢認(rèn)知，權(quán)益區(qū)打通動態(tài)圖標(biāo)配置能力，圖標(biāo)動態(tài)化擴容提升權(quán)益感知，周年和節(jié)日大促烘托活動氛圍，提升吸引力。
2、開通中行動階段-易操作
減步長強優(yōu)惠促決策，動效提優(yōu)惠感知和吸引力，優(yōu)惠抵扣任務(wù)新玩法，提升優(yōu)惠感知。
支付方式前置，減支付步長
減少用戶支付的阻礙，支付渠道前置購買面板中，根據(jù)用戶操作習(xí)慣智能排序顯示常用支付方式，縮短支付步長提升轉(zhuǎn)化率。
強化優(yōu)惠感知，提決策效率
通過突出優(yōu)惠信息和權(quán)益豐富，增強吸引力，讓用戶買得值。
1）支付面板凸顯連續(xù)包月套餐和續(xù)費信息、外露買就送附贈優(yōu)惠信息，重要信息動效設(shè)計提吸引力。
2）支付面板增優(yōu)惠抵扣模塊，任務(wù)余額抵扣會員費用，提升優(yōu)惠感知。
3）支付增挽留彈窗外露優(yōu)惠信息，動效提優(yōu)惠感知促會員轉(zhuǎn)化率。
3、開通后留存階段-快核銷
開通后差異設(shè)計引導(dǎo)不同階段用戶核銷，突出會員獲得感。
新開通用戶-引導(dǎo)提核銷
儀式感強動效引導(dǎo)熱門權(quán)益核銷，沉浸式動畫引導(dǎo)秒殺，給用戶會員超值感受，帶動會員券使用率提升。
沉默用戶 - 喚醒引導(dǎo)使用
從強到弱交叉推送，強動效強視效引導(dǎo)高頻權(quán)益，喚起使用核銷，弱打擾Push產(chǎn)品化設(shè)計引導(dǎo)權(quán)益核銷。
臨期/過期用戶-引導(dǎo)促續(xù)費
通過用戶已使用專屬權(quán)益與優(yōu)惠福利到期，在個人中心、掛件商城、會員中心等場景以優(yōu)惠福利、專屬權(quán)益強化等多手段引導(dǎo)續(xù)費。
藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請加微信ban_lanlan，報下信息，藍(lán)小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計( tweetduck.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司。
前言
如果你要設(shè)計以真實場景為主的banner或者主視覺，往往都會在各大網(wǎng)站圖庫里找半天，挑挑選選可能都找不到滿意的，或是容易和別人用到一樣的圖片。想要找到一張?zhí)貏e的又獨一無二的難上加難，而且自己也沒時間建模和拍攝
AI圖片的生成為這個痛點找到了更好的解決方案，這篇文章就是要和大家分享一下使用AI制作好用的圖庫素材照片，我將會按照真實工作場景搭配設(shè)計落地方案來和大家分享AI使用經(jīng)驗，讓你看了就學(xué)會，學(xué)會就馬上能用
用結(jié)構(gòu)化方式思考咒語
以下需求是我設(shè)計中要用到的素材，我希望可以有一張【穿西裝并且手提公文包的男士站在摩天大樓前】的寫實照片當(dāng)作首圖，首先先想一下我們需要的素材大概畫面的呈現(xiàn)，思考的框架可以參考以下，以下內(nèi)容為了方便關(guān)鍵詞我會用中文，但是實際操作中Prompt都必須使用英語
通過結(jié)構(gòu)化思維來描述這樣就不會有遺漏，也更能使畫面完整，另外像我的英語并不是很好，就會把寫好的內(nèi)容通過Deep L或是chatgpt來進(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)鍵詞的時候，我通常會把重要的內(nèi)容放在前面，有時加在后面的關(guān)鍵詞不容易被機器人識別。個人的一點小經(jīng)驗，在描述的最后一定要加上需要的參數(shù)，為了在后續(xù)的設(shè)計中更好適配尺寸需求，所以我選擇加上尺寸參數(shù)16:9，以下就是我通過關(guān)鍵詞生成的圖片
如果覺得結(jié)果都不滿意，可以重新用相同的Prompt再生成。AI好玩的地方就是它的隨機性，像是Promp就不建議非常詳細(xì)，因為這樣反而會有意想不到的優(yōu)質(zhì)圖片產(chǎn)出
機器人生成以后就要開始挑選圖片了，如果對左上的結(jié)果比較滿意，就點擊v1，讓機器人針對這個圖片再去生成四張新的圖片，雖然左上效果不錯，但是手部有些奇怪，所以需要通過在該基礎(chǔ)上再次生成，來挑選沒有問題的圖片
這里說明一下U（upscaler）和V(variation)的區(qū)別，U就是選擇這張圖，然后會放大這張圖片畫質(zhì)更加清晰，V則是會針對你選擇的圖片再生成四張圖，與你選擇的圖片做輕微的調(diào)整。1-4的排序為：1是左上，2是右上，3是左下，4是右下
重新生成的左上圖可以看到手部還是有問題，但是右上那張就還不錯，可以選擇這張來用或是再重新生成一遍
prompt：A man in a suit with a briefcase ,standing in front of a skyscraper ,stock image style，shot on 16mm, —ar16:9
這里我想要換一個畫面角度，所以選擇使用【shot on 16mm】,這種通常是電影、紀(jì)錄片、廣告拍攝使用的，所以使用這個關(guān)鍵字去生成圖片畫面會有一種電影感，角度上我覺得更好一點。
最后說一下，我是用的版本是V5，產(chǎn)出的1024??1024高解析圖片，但是我個人感覺還是不夠清晰，所以會搭配圖片放大工具來一起使用。我常用的圖片放大工具h(yuǎn)ttp://replicate.com/sczhou/codeformer，放大效果清晰度都非常好，而且處理速度也很快，重點是免費?。。≈苯由蟼鲌D片無需更改任何參數(shù)，使用默認(rèn)預(yù)設(shè)清晰度絕對夠用，畫質(zhì)太高也沒有太大意義，反而會影響網(wǎng)站加載速
藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請加微信ban_lanlan，報下信息，藍(lán)小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計( tweetduck.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司。
平臺一致性的問題
按鈕的位置非常重要
為什么"確定"按鈕在右側(cè)效果更好
按鈕放置在角落還是放在一起？
結(jié)論
大家好，我是西瓜～
這次我們聊一個設(shè)計知識點，這個知識點平日會被設(shè)計師忽視，因為它太過于默許，但我們應(yīng)該知道的是，很多默認(rèn)的東西也是有自身的知識結(jié)構(gòu)支撐，久而久之被人忽視了。
大家應(yīng)該都見到過彈窗、表單里的"確定"和"取消"按鈕吧，這兩個按鈕大家還記得會放在頁面中的哪個位置嗎？"確定"按鈕是完成任務(wù)的主要操作，而"取消"按鈕是輔助操作，它主要的作用是用于返回到起點屏幕而放棄任務(wù)。那么，根據(jù)它們的功能，最佳的按鈕順序是什么？"確定"按鈕應(yīng)該放在"取消"按鈕之前還是之后呢？
可能這時候很多設(shè)計師會按照習(xí)慣，選擇遵循一致性，采用一些常見的組件樣式進(jìn)行操作。雖然這看起來似乎是解決問題的方法，但實際上并非如此。這并沒有回答哪種位置對用戶更有效以及為什么，單純遵循已有組件并不足以讓設(shè)計師有更好的思維和主動思考的意識。
"一致性"是設(shè)計師中常用的一個詞。然而，這常常也被用作一個借口，讓設(shè)計師不深入思考用戶面臨的設(shè)計問題，如果一個設(shè)計師都不知道為什么一致性的規(guī)則存在，那么遵循這種設(shè)計慣例又有什么意義呢？
如果某種設(shè)計慣例對用戶來說是有害的，那么設(shè)計師是否應(yīng)該盲目遵循它，僅僅因為要追求一致性？體驗極差的設(shè)計樣式和結(jié)果是否應(yīng)該因為設(shè)計師希望迎合大家都默認(rèn)的設(shè)計一致性而繼續(xù)存在？這其實本質(zhì)就是個問題...
現(xiàn)在網(wǎng)上有很多組建和參考，都被設(shè)計師天天借鑒和廣泛使用，因為它們適用于用戶。但關(guān)鍵在于，設(shè)計師永遠(yuǎn)不應(yīng)該滿足于墨守成規(guī)的選擇設(shè)計的一致性，將其作為做設(shè)計的唯一理由，我們關(guān)鍵還是要理解為什么應(yīng)該以某種方式而不是其他方式來設(shè)計用戶界面。
這時候有的設(shè)計師可能會主張通過賦予操作按鈕更多的視覺重量和清晰明了的標(biāo)簽來突出界面中的操作按鈕，而不是僅關(guān)注按鈕的位置，雖然操作按鈕的視覺重量和標(biāo)簽是需要考慮的重要設(shè)計方面，但它們并不是唯一的方面。
真正一名有思想，會獨立思考的設(shè)計師會綜合考慮每個設(shè)計方面對用戶的影響，而不只是關(guān)注其中的一個方面，對于設(shè)計師來說，最難的是確定主要操作和次要操作的最佳放置方式。這就是我為什么關(guān)于"確定"/"取消"按鈕的位置進(jìn)行說明的原因。
當(dāng)我們在使用設(shè)計組建框架前進(jìn)行考慮時，你可能會開始明白哪個位置會對用戶效果更好一些，我們可以通過分析設(shè)計對用戶的影響來解決這個問題。
有些設(shè)計師認(rèn)為，將主要操作放在左側(cè)，在次要操作之前，對用戶來說更好，因為它更近，所以點擊所需時間更少，這看起來好像有點道理，但我們不能忽視一個問題，即在選擇要執(zhí)行的操作之前，用戶會查看所有選項，這意味著大多數(shù)用戶不會在不查看旁邊的次要操作按鈕的情況下盲目地點擊主要操作按鈕。
他們將首先看到左側(cè)的主要操作，然后再看右側(cè)的次要操作，然后他們會將視線轉(zhuǎn)回主要操作按鈕進(jìn)行點擊。這里總共涉及到三個視覺注視點，在多個方向上分散了用戶的注意力。
與將主要操作放在左側(cè)相比，將主要操作放在對話框的右側(cè)，將次要操作放在左側(cè)，用戶只需注視每個按鈕一次，并在主要操作按鈕上結(jié)束。這樣一來，視覺注視的數(shù)量就減少了，并且在一個方向上產(chǎn)生了更流暢的視覺流動。
用戶只關(guān)注每個按鈕一次，并最終停留在主要操作按鈕上，將主要操作放在左側(cè)可能會使用戶更容易點擊，但從用戶的心理過程和視覺注視速度來看，將主要操作放在對話框的右側(cè)實際上更快。
當(dāng)用戶點擊“取消”操作按鈕時，他們期望的是產(chǎn)品不進(jìn)行任何操作，而是將他們返回到起始屏幕位置，因此，"取消"按鈕的功能類似于"返回"按鈕。
當(dāng)用戶點擊“確定”操作按鈕時，他們期望產(chǎn)品進(jìn)行按鈕所表示的操作，并將他們帶到下一個屏幕。因此，"確定"按鈕的功能類似于"下一步"按鈕，將次要操作按鈕放在左側(cè)，將主要操作按鈕放在右側(cè)，可以與用戶期望的"后退"和"下一步"按鈕功能相匹配。
這類似于分頁按鈕的放置方式，將用戶帶到下一頁的按鈕位于右側(cè)，將用戶帶回先前頁面的按鈕位于左側(cè)。這種按鈕位置的安排是有效的，因為它與用戶從左到右的閱讀和導(dǎo)航方向相吻合，其中右側(cè)是前進(jìn)方向，左側(cè)是后退方向。
對話框中的"確定"和"取消"按鈕應(yīng)該遵循類似的交互模式，因為它們的功能類似于分頁按鈕，另外這種左右方向模式也是用戶熟悉的。將主要操作放在右側(cè)，將次要操作放在左側(cè)，可以使對話框按鈕對用戶更易于理解和使用。
將按鈕放置在對話框的右下角更容易被用戶點擊，因為這符合【古騰堡圖表】。在古騰堡圖表中，右下角區(qū)域是終端區(qū)域，用戶在掃視后的最終目的地。
將按鈕放在終端區(qū)域可以使用戶在視覺掃描時看到他們最后需要執(zhí)行的主要操作，這不僅改善了視覺流動，還改善了任務(wù)流程。用戶在掃視過程中不會錯過主要操作按鈕，當(dāng)他們經(jīng)過時，他們的目光會停留在上面，從而可以立即點擊它。
掃視對話框并采取行動變得更快更容易，因為用戶的目光最終會落在主要操作按鈕上。
我們需要考慮另一個問題，那就是我們應(yīng)該將按鈕放在角落還是放在一起，當(dāng)將主要操作和次要操作放在對話框的角落時，這與左右導(dǎo)航方向相吻合，這是很好的映射。然而，由于"確定"和"取消"按鈕并不是導(dǎo)航按鈕，因此并不需要遵循方向映射，有時候這樣做可能帶來更多的弊端。
較大的視覺分離使得比較操作變得困難，并將一個操作與另一個操作隔離開來 如果產(chǎn)品頁面即將執(zhí)行用戶無法撤銷的關(guān)鍵操作，那么用戶可以看到"取消"按鈕和"確定"按鈕是很重要的。在這種情況下，"取消"按鈕的功能可能類似于"上一步"按鈕，但它更重要，因為它充當(dāng)安全按鈕以防止任何更改。
將"取消"按鈕放置在最左下角的危險在于，由于兩個按鈕之間的視覺分離較大，可能會導(dǎo)致用戶忽略它。將"取消"按鈕與"確定"按鈕放在一起可以讓用戶更輕松地在一次注視中查看和比較這兩個操作，以選擇最佳操作。
藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請加微信ban_lanlan，報下信息，藍(lán)小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計( tweetduck.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司。
先問你一個問題。
拼多多、淘寶、京東這三家購物平臺，你認(rèn)為它們的區(qū)別是什么？
或者換個方式問你。
買電器你去哪個平臺？
買衣服你去哪個平臺？ 買垃圾袋你去哪個平臺？
是不是有了答案了？
沒猜錯的話， 大部分人的答案是：買電器去京東、買衣服去淘寶、買垃圾袋去拼多多。
你看，這就是一個購物心智模型，你的心里對這三家平臺已經(jīng)產(chǎn)生了固有的心智，如果讓你去京東買衣服，你會不會覺得，有些別扭？
沒錯，這就是心智模型。
百度百科對心智模型的定義是：
“深植我們心中關(guān)于我們自己、別人、組織及周圍世界每個層面的假設(shè)、形象和故事。并深受習(xí)慣思維、定勢思維、已有知識的局限?！?br />
關(guān)鍵詞是：故事、習(xí)慣、局限。
淘寶一開始就我們講了一個故事，一個萬能的集市，我們習(xí)慣在上面買衣服，但是也產(chǎn)生了局限性，那就是，當(dāng)我們想買大額電器的時候，還是會選擇京東。
我個人對心智模型的理解是：
我們內(nèi)心深處對一個事物的看法。
空口聊天多沒意思，下面舉個例子。
這是一尊陶俑，第一眼你覺得她像什么？
是不是覺得像米老鼠？
為什么？
因為陶俑的頭上的發(fā)髻和米老鼠標(biāo)志性的耳朵很像。
如果你從沒見過米老鼠，你還會覺得她像米老鼠嗎？
一定不會。
這就是心智模型，你對頭頂?shù)拇髨A形的心智是“米老鼠”，所以一旦你看到類似的形狀，米老鼠的形象就會浮現(xiàn)出來，這個發(fā)髻的形狀和你心里對米老鼠的形象產(chǎn)生了匹配。
對心智模型有沒有一點印象了？
下面我們接著聊。
我不想用具體的界面來聊，那樣的話太散，我認(rèn)為要想理解一個概念，最好還是從“面”的角度來說，所以下面我會舉一些商業(yè)上的案例來輔助理解。
心智模型有哪三種運用方式？
第一種：創(chuàng)建新的心智模型
第二種：改變舊的心智模型
第三種：匹配現(xiàn)有的心智模型
可以理解成一件事情的新生、改變和延續(xù)。
下面咱們一個個來。
第一種：創(chuàng)建新的心智模型
難度指數(shù)：難啊。
記得《盜夢空間》里最難的是什么嗎？
最難的不是盜夢，而是植入一個想法。
創(chuàng)建新的心智模型有異曲同工之妙，都是讓別人內(nèi)心接收一個事物，需要刻意培養(yǎng)。
舉幾個例子。
當(dāng)年外賣剛開始的時候，家家搞補貼，很多時候幾乎不花錢就可以點外賣，后來這些福利沒有了，為啥？
因為點外賣的心智已經(jīng)培養(yǎng)好了，你離不開它了，所以平臺可以“不慣著你了”。
還有唯品會的正品低價、瑞幸一開始的星巴克平替，這些都是他們想要植入到用戶大腦中的心智。
為什么要費勁植入一個新的想法？
因為一旦植入了，就很難改變。
現(xiàn)在我身邊的很多朋友想買一些低價的品牌都會上唯品會，買咖啡會喝瑞幸，一旦用戶的習(xí)慣養(yǎng)成就很難改變，意味著什么？
意味著留存和轉(zhuǎn)化的成本更低了。
第二種：改變舊的心智模型
難度指數(shù)：也難。
《盜夢空間》里小李子的妻子被他植入了一個想法“你不在現(xiàn)實世界里”，當(dāng)他和他妻子回到現(xiàn)實世界后，他妻子仍舊認(rèn)為自己不在現(xiàn)實世界里，這個被植入的想法已經(jīng)根深蒂固，很難改變。
所以改變舊的心智也不簡單。
例如小米最初主打極致性價比，后來想往高端路線走，很難，大家心里已經(jīng)認(rèn)準(zhǔn)了小米就是“性價比之王”，也就是你的產(chǎn)品不僅要好還要便宜。
這就導(dǎo)致小米一漲價，大家就罵他們忘了初心……所以小米拆分出了紅米主攻性價比，小米往高端發(fā)展，但是仍舊很難。
拼多多的百億補貼也是一樣的道理，一開始的砍一刀深入人心，大家對拼多多的心智已經(jīng)成型：便宜，質(zhì)量一般。拼多多想改變這個心智，推出百億補貼，并承諾假一賠十，就是想告訴大家，我拼多多，也是有正品好貨的。不過，效果嘛，見仁見智。
第三種：匹配現(xiàn)有的心智模型
難度指數(shù)：相對簡單。
其實匹配現(xiàn)有的心智模型，是相對最簡單的方法，市場已經(jīng)幫你把用戶習(xí)慣培養(yǎng)好了，你直接使用，那肯定事半功倍，省時省力啊。
舉個例子，大家最近有關(guān)注小米的 13 Ultra 嗎？
小米和徠卡聯(lián)合研發(fā)的，主打徠卡調(diào)色的相機。
我有一個同事就直接把手里的微單換成了 13 Ultra ，因為拍照足夠好看而且便攜。
這里不是要推銷手機啊，是想讓你們了解 13 Ultra 是個什么東西。
然后給大家看看它的手柄（一個配角，可以拆卸）。
是不是有些熟悉？
和相機像不像？
這個手柄就是沿用了相機的心智模式。
小結(jié)一下：
心智模型有3種用法：
新建：創(chuàng)建新的心智模型
改變：改變舊的心智模型
延續(xù)：匹配現(xiàn)有的心智模型
下面聊聊，咱們怎么做才能更加匹配用戶的心智模型？
同樣的，我不會拿具體頁面來舉例，還是希望把思考方式分享給大家，而不是某一個頁面的設(shè)計。
要想匹配用戶的心智模型其實就三步：
了解業(yè)務(wù)、了解用戶、競品調(diào)研。
或者可以這么說， 在懂業(yè)務(wù)、懂用戶的基礎(chǔ)上，還要了解行業(yè)內(nèi)的通用做法。
1）了解業(yè)務(wù)
一定要了解業(yè)務(wù)，為什么？
因為好的設(shè)計方案千千萬，但是匹配你的業(yè)務(wù)的方案才是好方案，如果不了解業(yè)務(wù)，可能設(shè)計出來的方案就是自嗨，例如網(wǎng)上很多的dribble風(fēng)設(shè)計。
又比如說手機瀏覽器一般都把搜索框放到屏幕頂部，而夸克瀏覽器卻把搜索框放到了下面。
為什么？
因為夸克想推翻傳統(tǒng)的瀏覽器，想打造一款更年輕更好用的瀏覽器，把搜索框放到下面也是滿足他們的業(yè)務(wù)訴求，現(xiàn)在手機屏幕越來越大，搜索框放在下面手指操作更加方便。
所以，一定要先去了解業(yè)務(wù)。
拼多多和淘寶同樣都是電商平臺，可它們的用戶心智相差甚大，因為最后方案設(shè)計是服務(wù)于最初的業(yè)務(wù)目標(biāo)的，業(yè)務(wù)不同，呈現(xiàn)的方案也不一樣，最后讓用戶形成的心智也不同。
2）了解用戶
為啥？給老人和小孩設(shè)計的界面能一樣嗎？
就拿顏色和文字來說。
小孩喜歡高飽和、豐富的顏色，而老人則需要考慮在各種場景下都能看得清楚信息的顏色。
小孩喜歡圓潤的卡通字體，而老人需要識別度更高的字體，更大的字號。
不同的用戶，采用的設(shè)計一定是不同的，只有了解了他們的喜好和痛點，才能做出符合他們心智模型的設(shè)計。
3）競品調(diào)研
為啥要競品調(diào)研呢？
因為競品和我們的產(chǎn)品類似，那么意味著用戶大概率重合度也高，甚至業(yè)務(wù)上都有一定相似度，那么意味著，競品的方案，大概率是經(jīng)過市場驗證的符合用戶心智模型的方案。
你看，既然競品已經(jīng)給咱們打了個樣，為何還要自己悶頭造輪子呢？
咱們目的是解決問題，又不是為了證明自己很厲害。
但是，不要誤解，我不是說照著競品抄，而是取長補短，所以不僅要調(diào)研，還要分析，分析就是把競品的優(yōu)劣勢找出來，好的地方咱們可以酌情借鑒，不好的地方，咱們也要避個雷嘛。
好了，小結(jié)一下，要想匹配用戶的心智模型，一定要了解業(yè)務(wù)、了解用戶，還要做競品調(diào)研了解市場的通識性做法。
以上。
藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請加微信ban_lanlan，報下信息，藍(lán)小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計( tweetduck.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司。
藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請加微信ban_lanlan，報下信息，藍(lán)小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計( tweetduck.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司。
一、弧形輪播的 Banner 圖設(shè)計
在移動端 Banner 圖通常以左右輪播居多，也有個別產(chǎn)品會在輪播形式上創(chuàng)新，比如上下輪播、分層輪播、漸隱輪播、Z 軸輪播等。
最近在體驗態(tài)棒 App 時，其 Banner 圖采用弧形輪播的形式。利用弧度的形式展示商品提高了 Banner 位的利用率，有助于展示更多推薦商品，直觀的表達(dá)也使得商品更加突出。自動輪播類似于滾動的櫥窗，表現(xiàn)形式非常新穎，帶給用戶更好的感官體驗。
二、默認(rèn)頭像的多種預(yù)設(shè)選擇
隨著產(chǎn)品感官體驗的提升，很多產(chǎn)品在默認(rèn)頭像的設(shè)計層面變得更豐富，不一定需要用戶上傳照片，自定義的選擇也更靈活。
除了通過 IP 形象強化默認(rèn)頭像的視覺感以外，最近在使用智行火車票 App 時，其默認(rèn)頭像以矢量插畫風(fēng)為主。用戶進(jìn)行頭像設(shè)置時無需上傳照片，產(chǎn)品提供了多個默認(rèn)頭像，方便用戶根據(jù)自己的喜好作出預(yù)設(shè)。多種預(yù)設(shè)讓自定義選擇更靈活，也能讓默認(rèn)頭像更美觀，提升用戶對產(chǎn)品的好感度。
三、趣味性的心情打卡設(shè)計
對于職場人來說壓力是難以避免的，總會遇到一些煩心的事或者壓力，就會因此影響我們的情緒。我們要試著釋放壓力，治愈我們的情緒才能迎接美好的明天。
最近體驗到一個幫你記錄心情，治愈心事的產(chǎn)品-歲歲。整個產(chǎn)品設(shè)計風(fēng)格清新可愛，看著就有種治愈感?？梢詫ψ约寒?dāng)前的心情進(jìn)行打卡，類似于儀表盤一樣的心情打卡設(shè)計也是趣味性十足，表情設(shè)計風(fēng)格非?？蓯郏呐率遣婚_心也能通過這樣趣味性的打卡形式而治愈。設(shè)計風(fēng)格觀賞性很高，值得大家體驗。
四、五一主題氛圍設(shè)計
眾多產(chǎn)品都會在五一假期期間進(jìn)行系列主題活動，如何充分利用好當(dāng)前布局結(jié)構(gòu)，是產(chǎn)品設(shè)計師進(jìn)行設(shè)計發(fā)揮的關(guān)鍵。
在五一期間使用嘀嗒出行 App 時，多個主界面結(jié)合了五一主題氛圍設(shè)計，青春活潑的插畫風(fēng)渲染出歡快的節(jié)奏。整個界面被裝扮得非常有氛圍感，既傳播了主題活動，也帶給用戶非常新穎的視覺享受。
五、場景化的積分兌換設(shè)計
為了提高用戶黏性，通過簽到積分、消費積分、任務(wù)積分等，再結(jié)合積分兌換提高用戶參與度，是提升黏性轉(zhuǎn)化的有效形式。
麥當(dāng)勞 App 在積分兌換的設(shè)計中結(jié)合了兌換套餐的實物照片，讓用戶對于兌換商品更有直觀感受。也可以切換不同積分兌換的差異，提高用戶參與積分的積極性。通過場景化的積分兌換設(shè)計，不僅提高用戶參與度，設(shè)計感官度也非常棒。
六、動態(tài)賣點強化關(guān)注度
需要強化功能的關(guān)注度時，除了在視覺表現(xiàn)層體現(xiàn)差異以外，動靜結(jié)合也能起到突出作用。
比如智行火車票 App 首頁設(shè)計中，以動效的形式演變賣點，以此突出酒店欄目。動效表達(dá)的形式形成動靜對比，以差異化的形式突出業(yè)務(wù)重點，提高用戶的關(guān)注度。
七、播放按鈕的品牌氛圍營造
越來越多的產(chǎn)品開始注重立足于品牌的設(shè)計，強化品牌曝光度和產(chǎn)品差異化，品牌基因的融入可以一舉多得。
最近在使用汽水音樂 App 聽歌時，播放按鈕暫停狀態(tài)背景會有氣泡漂浮，還原了汽水帶給用戶的視覺感。通過小小的動效表達(dá)不僅強化了品牌感，也提高了播放按鈕的點擊欲，帶給用戶不錯的感官體驗。
八、登錄設(shè)計中的動態(tài)背景
登錄已經(jīng)逐步成為體驗產(chǎn)品的必備步驟，很多產(chǎn)品都需要用戶登錄才可以體驗，如何提高用戶的登錄意愿度變得至關(guān)重要。
吃貨筆記 App 在登錄設(shè)計中采用動態(tài)背景增強視覺感，有種炫酷的感覺。動態(tài)背景結(jié)合炫酷的圖形設(shè)計，營造出不錯的氛圍感，以此降低登錄帶來的排斥感，提高用戶登錄體驗產(chǎn)品的意愿度。
九、導(dǎo)航結(jié)束的人性化設(shè)計
導(dǎo)航算是這個時代最便民的工具之一，讓大家的出行更便捷和安全。隨著導(dǎo)航產(chǎn)品的不斷完善，使用體驗也越來越人性化。
五一期間使用高德地圖導(dǎo)航時，抵達(dá)目的地結(jié)束導(dǎo)航的設(shè)計中，會根據(jù)目的地屬性進(jìn)行場景表達(dá)。比如目的地是古鎮(zhèn)類景區(qū)，會以古鎮(zhèn)代表的圖標(biāo)設(shè)計替代默認(rèn)圖標(biāo)，也會顯示景區(qū)購票信息，方便用戶進(jìn)行購票和了解相關(guān)信息。結(jié)合場景打造人性化的設(shè)計，讓用戶時刻感受到產(chǎn)品的溫度。
十、不一樣的點贊設(shè)計
點贊設(shè)計已經(jīng)很普遍，通常以伸大拇指和愛心圖標(biāo)為主，點擊變化過程中也會結(jié)合動效和衍生設(shè)計。
最近在體驗歲歲 App 時，在樹洞欄目中點贊設(shè)計采用動效結(jié)合卡通形象。點贊時以動效表達(dá)卡通形象送愛心的過程，呈現(xiàn)出不一樣的點贊效果，帶給用戶差異化的點贊體驗。
藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請加微信ban_lanlan，報下信息，藍(lán)小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計( tweetduck.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司。
這個頁面第一眼最突兀的地方首先是“知道了”這3個字，因為在這個界面中，橙色產(chǎn)品色，而突然出現(xiàn)的藍(lán)色會讓你覺得特別醒目，所以我們第一眼會看到這三個字以及這一行的內(nèi)容，這里只涉及到了UI層面上的視覺表現(xiàn)就可以將用戶的注意力吸引過來，但提示欄的視覺優(yōu)先級并不應(yīng)該設(shè)計的這么高。
這里的業(yè)務(wù)規(guī)則是，用戶必須將保險內(nèi)容全部瀏覽完才可以進(jìn)入到下一階段，也就是說一共4頁內(nèi)容，如果你在擊下方的checkbox或者下一步時時，內(nèi)容沒有定位在4/4的分頁狀態(tài)時，就會被判定沒有閱讀完保險內(nèi)容。但是這里的文案只是告訴用戶，請向下滑動瀏覽全部內(nèi)容。
底部有3個條款按鈕，在視覺表現(xiàn)上是3個統(tǒng)一樣式的幽靈按鈕，點擊后會出現(xiàn)彈窗讓用戶閱讀條款內(nèi)容，并在一定時間內(nèi)允許關(guān)閉，用戶點擊閱讀完后樣式不變，但這里的規(guī)則是必須閱讀條款且全部閱讀。
必須閱讀完三個條款與說明，才可進(jìn)入下一步。所以這里就會出現(xiàn)多種問題，比如用戶閱讀完保單內(nèi)容但沒有注意到中間的條款按鈕，在視覺沒有給出“必讀”的意符的情況下，用戶會先點擊下一步，但是被告知需要閱讀條款，用戶點擊閱讀完第一條條款，認(rèn)為自己已經(jīng)完成要求后繼續(xù)點擊下一步，但發(fā)現(xiàn)需要閱讀完三個條款才能完成要求。
這樣的交互與信息設(shè)計讓用戶在該頁面的操作效率大幅度下降，所以面對這種情況，我們是否可以用一些交互優(yōu)化的手段來解決這些問題呢？在選擇策略和方案之前，我們需要思考一些問題：
1.條款的必讀性、風(fēng)險控制
2.效率與法律責(zé)任的權(quán)衡
3.面對多文本、文檔的操作、閱讀的便利性
其實這些問題一部分是業(yè)務(wù)規(guī)則，如果業(yè)務(wù)上的要求不是必須的那么在效率上的操作空間就會比較大。比如我們經(jīng)?？吹降臈l款和說明的閱讀，幾乎沒有人會去全部一字不落的看完，但是為了讓用戶充分了解條款、協(xié)議的內(nèi)容，以防后續(xù)帶來的風(fēng)險，現(xiàn)在產(chǎn)品的設(shè)計策略就是給用戶一個5秒的閱讀倒計時，倒計時結(jié)束前無法關(guān)閉彈窗，但說實話這種設(shè)計也是雞肋的很，不想看的人你給60秒也不會去看，想看的人不設(shè)計倒計時也會很仔細(xì)的看。所以現(xiàn)在很多產(chǎn)品也做了簡化處理，例如在這個保險條款的交互方式中，我們也可以這樣設(shè)計。在底部直接將條款做成鏈接的形式，和checkbox一同做在一個欄里方便用戶操作，想看自己點，不想看就直接勾選后下一步即可。
關(guān)于風(fēng)險揭示、知曉以及同意協(xié)議這個步驟有很多種做法，還有下方的3種例子：
1.將所有風(fēng)險平鋪讓用戶勾選并同意，這樣的方式比做在一個模塊里打鉤其實形式上是一樣的，因為都可以全選后確認(rèn)，一種同構(gòu)異型的做法。將風(fēng)險需知面積展示的更多，希望用戶能對其重視，但是為了效率起見還是做了一個全選，也是在形式上尊重了“風(fēng)險”。
2.用標(biāo)簽選擇的形式將合同、條款披露給用戶，這種形式在本質(zhì)上也和上面的差不多，甚至很多用戶可能不回去點第二個標(biāo)簽。
3.現(xiàn)在很多產(chǎn)品因為政策的關(guān)系都會在登錄頁面中加上用戶協(xié)議和隱私政策的說明，需要用戶自己去點擊，很多用戶都覺得在登錄前點擊該協(xié)議非常的麻煩，有時也會忽略，所以一些聰明的產(chǎn)品就在用戶點擊登錄后再彈出彈框讓用戶同意該協(xié)議。
最后，話又說回來，領(lǐng)導(dǎo)非讓用戶點擊完3個按鈕，才可以點擊下一步，該怎么設(shè)計呢？首先在視覺樣式層面，用常規(guī)的色塊、線條樣式的按鈕肯定是不行的，因為在這里我們要考慮幾個點：
1.如何讓用戶知道這3個條款是必須點擊閱讀的
2.讓用戶知道只有全部閱讀完才可以進(jìn)行下一步。所以做成常規(guī)按鈕，用戶無法知道該點哪個，先點哪個，要點幾個。
那可以做成勾選嗎？也不行，感覺比做成按鈕還要離譜。
那我們可以考慮這樣做，在這個步驟中也無法單獨將閱讀條款列為一個界面，所以只能繼續(xù)在頁面下方用列表的形式讓用戶去閱讀。通過這樣的設(shè)計可以讓用戶明確我該點哪個，哪個還沒有閱讀，當(dāng)用戶沒有完成閱讀要求時，底部按鈕置灰。
藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請加微信ban_lanlan，報下信息，藍(lán)小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計( tweetduck.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司。
用戶體驗設(shè)計流程
由于系統(tǒng)軟件糟糕的UI設(shè)計（菜單排布問題）所導(dǎo)致的誤操作，美國居民受到導(dǎo)彈襲擊的驚嚇
· 美國Forester的一項研究發(fā)現(xiàn)，針對UX投入的每1美元，能夠帶來2~100美元的收益。
· Amazon把按鈕文字從“注冊（register）”改成“繼續(xù)（continue）”之后，銷售增長了3億元。
· McAfee重新設(shè)計UI之后，客服電話減少了90%?！?Airbnb的Mike Gebbia認(rèn)為，公司從接近失敗到獲得100億美元市值，最大因素要歸功于UX
UX究竟在設(shè)計些什么
廣義的用戶體驗設(shè)計，是包含了內(nèi)容功能設(shè)計，信息架構(gòu)設(shè)計，用戶界面設(shè)計，交互設(shè)計，視覺設(shè)計，語言設(shè)計，動效設(shè)計，音效設(shè)計，在一定程度上涵蓋了產(chǎn)品物理外觀設(shè)計（工業(yè)設(shè)計），平面/包裝設(shè)計，空間設(shè)計，服務(wù)流程設(shè)計等。它意味著一個高度交叉綜合的領(lǐng)域，涉及到人與產(chǎn)品系統(tǒng)或服務(wù)發(fā)生關(guān)系并產(chǎn)生體驗的所有觸點。一般或狹義的UX Design，則主要作為與UI Design區(qū)分，多用于互聯(lián)網(wǎng)軟件（或消費電子等）行業(yè)基于屏幕的設(shè)計，包含信息框架設(shè)計，用戶交互設(shè)計，可用性研究等。這里的UI Design偏重于視覺上的設(shè)計。而在現(xiàn)實中我們也經(jīng)常把UX等同于“交互”。
用戶體驗設(shè)計的核心和本質(zhì)，就是研究目標(biāo)用戶在特定場景下的思維方式和行為模式，通過設(shè)計提供產(chǎn)品或服務(wù)的完整流程，去影響用戶的主觀體驗。可見用戶研究在整個UX流程當(dāng)中的重要性。而認(rèn)知心理學(xué)（Cognitive Psychology）則是用戶體驗設(shè)計的理論基礎(chǔ)和科學(xué)依據(jù)。它是一門研究認(rèn)知及行為背后之心智處理（包括思維、 決定、推理和一些動機和情感的程度）的心理科學(xué)。這門科學(xué)包括了廣泛的研究領(lǐng)域，旨在研究記憶、注意、感知、知識表征、推理、創(chuàng)造力，及問題解決的運作。相關(guān)的還有人體工學(xué)（Ergonomics）與人因工程學(xué)（Human Factors Engineering），是研究人和機器、環(huán)境的相互作用及其合理結(jié)合，使設(shè)計的機器和環(huán)境系統(tǒng)適合人的生理及心理等特點，達(dá)到提高效率、安全、健康和舒適目的的一門科學(xué)?？捎眯裕║sability）的概念最早出現(xiàn)于1979年，遠(yuǎn)比唐·諾曼在1993年提出的“用戶體驗”概念要早。可用性的ISO定義是“用戶在特定環(huán)境下完成指定目標(biāo)的效果、效率和滿意度”(ISO 9241-11)，而用戶體驗指“用戶與產(chǎn)品、服務(wù)、設(shè)備或環(huán)境交互時各方面的體驗和感受”?？捎眯缘姆懂牨扔脩趔w驗窄，它聚焦于任務(wù)完成。而用戶體驗是外觀呈現(xiàn)、功能組合、系統(tǒng)性能和交互行為等因素的綜合結(jié)果。
上圖將用戶體驗細(xì)分為工具性(Utility)、可用性(Usability)、合意性(Desirability)和品牌體驗(Brand Experience)，最內(nèi)部的圓代表最基礎(chǔ)的用戶體驗。
用戶體驗 / 產(chǎn)品設(shè)計的流程與方法
以用戶為中心的設(shè)計（User-Centered Design，簡稱UCD）概括了用戶體驗設(shè)計的典型流程和方法學(xué)。以用戶為中心的設(shè)計思想非常簡單：在設(shè)計開發(fā)產(chǎn)品的每一個步驟中，都要把用戶列入考慮范圍。從前期的用戶研究需求挖掘，到后期的用戶測試設(shè)計驗證，都要圍繞目標(biāo)用戶群來進(jìn)行。
在UCD設(shè)計流程的每個階段，都有多種不同的方法來幫助我們達(dá)到目的。
用研分析：
· 單獨訪談（Individual Interviews）：一對一的用戶討論，讓你了解某個用戶是如何工作，使你知道用戶的感受，想要什么和他的經(jīng)歷。
· 焦點小組（Focus Groups）：組織一組的用戶進(jìn)行討論，讓你更了解用戶的理解、想法、態(tài)度和想要什么。
· 關(guān)鍵利益人訪談（Stakeholders Interview）
· 情境訪談（Contextual Inquiry or Field Study）：走進(jìn)用戶的現(xiàn)實環(huán)境，讓你了解你的用戶的工作方式，生活環(huán)境等等情況。
· 日記研究（Diary Study）：日記研究可以讓用戶記錄自己的進(jìn)程，研究者以非打擾的視角探查用戶的體驗。
· 問卷調(diào)研（Questionnaire Study）：利用網(wǎng)上或紙張的問題list對用戶進(jìn)行發(fā)放填寫，從而收集用戶對產(chǎn)品的需求建議。
· 任務(wù)分析（Task Analysis）：通過任務(wù)分析了解用戶使用產(chǎn)品時的目標(biāo)和操作方式，習(xí)慣（GOMS模型）。
· 用例分析（Use Case Analysis）
· 卡片分類（Card Sorting）、樹形圖測試（Tree Testing）：觀察用戶是如何理解內(nèi)容和組織信息，用來幫助你的產(chǎn)品更合理地組織信息?！?競品分析（Competitive Analysis）、標(biāo)桿分析法（Benchmarking）· 桌面研究（Desktop Research）、市場研究（Market Research）· 用戶角色模型（Personas）：構(gòu)建一個虛構(gòu)的人來代表特定目標(biāo)用戶群組，設(shè)計團(tuán)隊圍繞這個虛擬人物設(shè)計開發(fā)產(chǎn)品。
· 用戶體驗旅程圖（User/Customer Journey Mapping or Experience Mapping）：從用戶角度出發(fā)，以敘述故事的方式描述用戶使用產(chǎn)品或接受服務(wù)的體驗情況，以可視化圖形的方式展示，從中發(fā)現(xiàn)用戶在整個使用過程中的痛點和滿意點，最后提煉出產(chǎn)品或服務(wù)中的優(yōu)化點、設(shè)計的機會點。
· 態(tài)度研究（Attitudinal Research）和行為研究（Behavioural Research）
· 定性研究（Qualitative Research）和定量研究（Quantitative Research）
設(shè)計階段：
· 腦力風(fēng)暴（Brainstorming Ideation）
· 概念草圖（Concept Sketching）
· 思維導(dǎo)圖（Mind Mapping）· 交互流程（User Interaction Flow）
· 信息架構(gòu)（Information Architecture）：對功能內(nèi)容進(jìn)行高度概括的統(tǒng)籌規(guī)劃、設(shè)計安排。
· 情景與故事版設(shè)計（Scenario & Storyboard Design）：情景是指特定用戶如何使用產(chǎn)品完成特定目標(biāo)的簡短故事。故事板是連續(xù)的一系列草圖，用視覺的方式表現(xiàn)用戶如何使用產(chǎn)品，形式上類似漫畫分鏡。
· 線框圖（Wireframing）
· 低保真原型與高保真原型（Lo-fi & Hi-fi Prototyping）
· 紙質(zhì)原型（Paper Prototype）
· 視頻原型（Video Prototype）：通過視頻來演示用戶如何與產(chǎn)品系統(tǒng)進(jìn)行交互。
· 綠野仙蹤原型（Wizard of oz Prototype）：使用角色扮演來模擬用戶如何與產(chǎn)品系統(tǒng)進(jìn)行交互。
· 可交互原型（Interactive Prototype）
· 視覺設(shè)計（Visual Design）
· 設(shè)計模式（Design Patterns）、設(shè)計語言（Design Language）、設(shè)計規(guī)范（Design Guidelines）與設(shè)計體系（Design System）
· 標(biāo)注文檔（Design Spec）
· 動效設(shè)計（Animation Design）
· 參與式設(shè)計（Participatory Design）：將終端使用者或利益相關(guān)者帶入設(shè)計流程中。
· 共情/移情/同理心設(shè)計（Empathic Design）：將設(shè)計師帶入使用者情境中進(jìn)行觀察設(shè)計。
· 平行設(shè)計（Parallel Design）：對同一個產(chǎn)品進(jìn)行分開的設(shè)計，從而比較選擇一個最佳方案。
評估驗證：
· 啟發(fā)式評估（Heuristic Evaluation）：由一組行內(nèi)專家依據(jù)尼爾森十大原則對產(chǎn)品進(jìn)行可用性檢查。
· 專家評審（Expert Inspection）
· 可用性測試（Usability Testing）：邀請用戶來試用你的產(chǎn)品，有任務(wù)性的完成測試，從而達(dá)到評估的目的。分為Moderated和Unmoderated，In-person或Remote。
· 組內(nèi)測試（Within-Subject Testing）與組間測試（Between-Subject Testing）
· 游擊式調(diào)研（Guerrilla Research）：便宜、快速地得到大致的用戶反饋。
· 問卷調(diào)查（Surveys）：利用網(wǎng)上或紙張的問題list對用戶進(jìn)行發(fā)放填寫，從而收集用戶對產(chǎn)品的反饋意見。
· CSAT（Customer Satisfaction Score）與NPS（Net Promoter Score）
· 眼動追蹤（Eye Tracking）和熱力圖（Heat Map）
· 點擊流分析（Clickstream Analysis）
· 產(chǎn)品漏斗（Product Funnel）和使用情況分析（Usage Analytics）
· 統(tǒng)計學(xué)分析（Statistical Analysis）
· A/B測試：在同一時間維度，分別讓相似的目標(biāo)人群隨機的訪問產(chǎn)品的不同版本，收集各群組的用戶體驗數(shù)據(jù)和業(yè)務(wù)數(shù)據(jù)，最后分析、評估出最好版本，正式采用。
藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請加藍(lán)小助，微信號:ben_lanlan，報下信息，藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計( tweetduck.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司
看完本篇文章，你會學(xué)到以下內(nèi)容：
1、什么是詳情頁
2、詳情頁設(shè)計原則
3、詳情頁的構(gòu)成
4、詳情頁設(shè)計要點拆解
一、什么是詳情頁？
詳情頁向用戶展示一個對象的完整信息，主要用于信息瀏覽，允許對該對象發(fā)起編輯等操作。如電商的訂單詳情，OA的審批詳情等等。
二、詳情頁設(shè)計原則？
1、直接了當(dāng)
信息盡量平鋪展示，如沒有必要不要做隱藏折疊。
2、層次分明
按照接近原則，對信息分層分組展示，降低單個頁面內(nèi)信息復(fù)雜度。
3、化繁為簡
減少復(fù)雜結(jié)構(gòu)的使用，盡量使用相似的結(jié)構(gòu)和模塊，降低結(jié)構(gòu)差異對用戶進(jìn)行干擾，讓用戶聚焦信息本身。
三、詳情頁構(gòu)成
詳情頁由標(biāo)題、標(biāo)簽頁、圖片、文字詳情、按鈕、可視化、列表、表格、篩選、數(shù)據(jù)統(tǒng)計、進(jìn)度軸、標(biāo)簽構(gòu)成
詳情頁的特點：1、內(nèi)容雜，什么元素/模塊都可能出現(xiàn)。2、布局多，布局沒有套路，核心是做好內(nèi)容分塊和視覺引導(dǎo)。3、差異大，頁面與頁面巨大差異
四、詳情頁設(shè)計要點拆解
1.容器
由內(nèi)容由少到多劃分為原位展開、氣泡卡片、彈窗、抽屜、頁面。能優(yōu)先滿足內(nèi)容收納的同時，容易盡可能輕量。
2.布局
根據(jù)內(nèi)容從簡單到復(fù)雜可分為基礎(chǔ)樣式、標(biāo)題分組、色塊/分割線/卡片分組、錨點定位/標(biāo)簽頁、自由布局。核心是做好內(nèi)容分區(qū)、視覺引導(dǎo)符合用戶操作習(xí)慣。
布局注意事項：把用戶最關(guān)心的內(nèi)容放在最顯眼的地方
3.交互操作
交互操作可分為編輯（原位/氣泡/彈窗/頁面），查看詳情（內(nèi)容不多的話可以少用頁面容器，減少套娃），業(yè)務(wù)操作（層級清晰，符合用戶操作習(xí)慣）。
企業(yè)級B端產(chǎn)品具有行業(yè)壁壘高、業(yè)務(wù)復(fù)雜、服務(wù)角色多等特點，在大型迭代項目中，如何做好設(shè)計協(xié)同，把握設(shè)計一致性和還原度常常讓很多設(shè)計團(tuán)隊感覺無從下手，找不到切入點。在長期的項目實踐中我們發(fā)現(xiàn)，做好設(shè)計規(guī)范能規(guī)范可以幫助個人、團(tuán)隊以及整個企業(yè)提高效率和產(chǎn)出質(zhì)量，保障用戶體驗統(tǒng)一。
那么，我們該如何做好體驗標(biāo)準(zhǔn)化，保障基礎(chǔ)體驗一致性？下面將和大家分享我們公司在構(gòu)建設(shè)計規(guī)范的實踐案例。
以我們設(shè)計團(tuán)隊為例，隨著業(yè)務(wù)不斷擴大，定制化需求不斷增加，大型迭代項目做不好設(shè)計和開發(fā)協(xié)同，導(dǎo)致出現(xiàn)“體驗一致性差”“設(shè)計效率低”“還原度不可控”等問題。如何有效解決這些問題呢？可以通過構(gòu)建設(shè)計規(guī)范，以保證一致性，實現(xiàn)工作提效。
從不同角度出發(fā)，構(gòu)建設(shè)計規(guī)范都能發(fā)揮積極的作用。
對企業(yè)來說：有利于實現(xiàn)產(chǎn)品經(jīng)理、設(shè)計和研發(fā)的輸出一致。設(shè)計側(cè)主動建立產(chǎn)品設(shè)計規(guī)范，很大程度上是為了做好設(shè)計管控，實現(xiàn)原型、設(shè)計稿到線上頁面統(tǒng)一的設(shè)計語言，從根本上提升設(shè)計質(zhì)量和還原度，提高用戶滿意度。
對個人來說：當(dāng)多個設(shè)計師共同協(xié)作同一項目時，由于設(shè)計理解不一致等原因，容易出現(xiàn)設(shè)計控件使用混亂等問題。若有詳細(xì)的設(shè)計規(guī)范作為引導(dǎo)，有利于實現(xiàn)產(chǎn)品各個模塊間的一致性。組件化的工具也能減少機械重復(fù)性的工作，讓設(shè)計師將更多精力投入到用戶研究和提升用戶體驗上。
產(chǎn)品有不同發(fā)展階段，設(shè)計規(guī)范同樣也有，不同階段下的產(chǎn)品目標(biāo)和規(guī)范需要覆蓋的內(nèi)容都不盡相同。我們要既要避免做多，保證投入產(chǎn)出比最大化；同時也要構(gòu)建一個合理的規(guī)范迭代思路。
該階段的產(chǎn)品核心目標(biāo)是「驗證產(chǎn)品或商業(yè)模型」，業(yè)務(wù)需求都是小步快跑、頻繁迭代。產(chǎn)品處于從0到1的野蠻生長狀態(tài)，存在著“先滿足功能，再優(yōu)化體驗”的情況，導(dǎo)致該階段的產(chǎn)品體驗往往不太過關(guān)。
搭建目的：通過定義原則，梳理關(guān)鍵頁面和流程，搭建基本的規(guī)范框架。既讓團(tuán)隊對產(chǎn)品有統(tǒng)一的設(shè)計價值觀和認(rèn)知判斷；從頁面到流程，又能對應(yīng)設(shè)計參照標(biāo)準(zhǔn)；同時業(yè)務(wù)可以在規(guī)定的框架下發(fā)展，不僅讓產(chǎn)品體驗的根基牢固，而且不會限制功能設(shè)計自由。
搭建范圍：「全局說明」「頁面布局」「通用流程」
該階段的產(chǎn)品基本形態(tài)已穩(wěn)定，也形成了初步的模型結(jié)構(gòu)。后續(xù)迭代是在現(xiàn)有結(jié)構(gòu)的基礎(chǔ)上，進(jìn)行增加或優(yōu)化功能。雖然探索期定義了產(chǎn)品原則、布局和流程，但探索期產(chǎn)品的自由生長，會導(dǎo)致不少設(shè)計細(xì)節(jié)不一致，從而影響了產(chǎn)品整體的體驗和效率。
搭建目的：通過回溯整理過往設(shè)計，沉淀優(yōu)化成完整的交互規(guī)范。再根據(jù)規(guī)范統(tǒng)一產(chǎn)品體驗，進(jìn)一步優(yōu)化流程和效率， 讓整個產(chǎn)品體驗達(dá)到相對穩(wěn)定的狀態(tài)。
搭建范圍：「全局說明」「頁面布局」「通用流程」「基礎(chǔ)組件」「業(yè)務(wù)組件」
好的設(shè)計規(guī)范有很多優(yōu)秀的例子，例如Google、Apple、Microsoft這些引領(lǐng)全球設(shè)計風(fēng)尚的公司，設(shè)計規(guī)范已經(jīng)上升為設(shè)計語言，指導(dǎo)旗下所有產(chǎn)品的設(shè)計。國內(nèi)做的優(yōu)秀的案例，比如Ant Design，Element，arco.design等，像這類的產(chǎn)品已經(jīng)實現(xiàn)了端到端的體驗一致，把交互、前端和視覺的事情一并解決了，是值得學(xué)習(xí)的典范。這些優(yōu)秀的設(shè)計規(guī)范都包含以下幾個特點：靈活性，可擴展性，系統(tǒng)性和標(biāo)準(zhǔn)性。
一般團(tuán)隊內(nèi)部構(gòu)建的設(shè)計規(guī)范都源于某一產(chǎn)品或者業(yè)務(wù)，因為主要是團(tuán)隊內(nèi)部成員使用，追求的是投入產(chǎn)出比最大化。所以可在行業(yè)通用設(shè)計規(guī)范的基礎(chǔ)上，適度參考行業(yè)設(shè)計規(guī)范，能復(fù)用的直接參考，同時專注于業(yè)務(wù)本身，具有業(yè)務(wù)特性的再集合業(yè)務(wù)綜合考慮，使整個規(guī)范制定效率更高，科學(xué)性、指導(dǎo)性更強。
設(shè)計規(guī)范的執(zhí)行和推動主要分為四大步驟：
類型梳理：分析業(yè)務(wù)場景，整理和歸類組件，評估具體組件優(yōu)先級和迭代計劃；
全局說明：統(tǒng)一布局，色板，字體，常用樣式，規(guī)范設(shè)計語言；
抽象設(shè)計：將設(shè)計共性抽象出來，構(gòu)建組件通用方案；
效果驗證：通過定性/定量數(shù)據(jù)追蹤效果，分析原因，迭代改進(jìn)；
收集現(xiàn)有設(shè)計頁面，分析業(yè)務(wù)場景，再參考行業(yè)通用規(guī)范的定義，整理和歸類組件，可以先羅列完整，再根據(jù)產(chǎn)品實際業(yè)務(wù)需要進(jìn)行增刪改。
全局說明：明確影響整站各個模塊、各個頁面設(shè)計的原則和規(guī)范，指導(dǎo)我們后續(xù)各種規(guī)范的定義和設(shè)計。包括統(tǒng)一布局，色板，字體，樣式等設(shè)計規(guī)則。
基礎(chǔ)組件：可參考行業(yè)通用規(guī)范中的基礎(chǔ)組件分類和組成，因為大部分基礎(chǔ)組件都具有一定的通用性，站在巨人的肩膀上更高效。這里我們根據(jù)實際情況，將基礎(chǔ)組件分為導(dǎo)航，通用，數(shù)據(jù)展示，數(shù)據(jù)錄入，反饋5個大模塊，每個模塊下再細(xì)分各小類，構(gòu)成基礎(chǔ)組件的類目。
業(yè)務(wù)組件：根據(jù)業(yè)務(wù)需求，可以定義屬于自己的業(yè)務(wù)組件，這也是區(qū)別于其他通用行業(yè)組件庫的一個核心部分。
因為在大體量產(chǎn)品設(shè)計中，每個模塊都由不同的同學(xué)負(fù)責(zé)，這樣全局產(chǎn)品的把握就會降低，需要去補充全局規(guī)范說明去維持產(chǎn)品全局通用部分的一致性。包括布局，色彩規(guī)范，字體，樣式等；
抽象設(shè)計是設(shè)計規(guī)范中最核心，工作量最大，難度最高的一個環(huán)節(jié)。我們可以將它拆解成幾個部分，先做出基礎(chǔ)組件，再基于基礎(chǔ)組件和業(yè)務(wù)需求抽象設(shè)計業(yè)務(wù)組件，最后抽象成頁面模板。
基礎(chǔ)組件
組件庫的搭建，就一定要提到原子思維。道爾頓原子論認(rèn)為，物質(zhì)世界的最小單位是原子，原子是單一的，獨立的，不可被分割的，在化學(xué)變化中保持著穩(wěn)定的狀態(tài)。這個原子理論同樣適用于設(shè)計系統(tǒng)中。
其中，最小單位設(shè)計元素就是基礎(chǔ)組件。我們在做設(shè)計系統(tǒng)的時候希望當(dāng)你改動任何一個原子，你有自信其他所有依賴于這個原子的部件全部自動更新。只有滿足了這一點，設(shè)計系統(tǒng)設(shè)想中的效率、解放生產(chǎn)力才會真正實現(xiàn)。例如，在sketch中，分享樣式和嵌套符號的使用。
業(yè)務(wù)組件
在構(gòu)建完基礎(chǔ)組件后，可以根據(jù)業(yè)務(wù)需求，將使用頻率較高的組件進(jìn)行評估，抽象成業(yè)務(wù)組件。
一般業(yè)務(wù)組件可分成兩大類：
一類是由多個基礎(chǔ)組件組成的帶有業(yè)務(wù)需求復(fù)合組件，如：復(fù)合標(biāo)簽，快捷時間選擇器等；
另一類是針對特定業(yè)務(wù)場景的業(yè)務(wù)組件：如地圖，站點等；
頁面模版
在完成基礎(chǔ)組件和業(yè)務(wù)組件的構(gòu)建后，我們可以根據(jù)全局說明，利用組件搭建頁面模板。頁面模版不僅能有效的提升組件的使用效率，也能提供很好的組件使用示范效應(yīng)，加強設(shè)計說明和組件之間的結(jié)合。
組件質(zhì)量評估：從物理到行為層，包括樣式、組件、框架、組件交互 共4個維度。通過一致性評分衡量標(biāo)準(zhǔn)化覆蓋的好壞。
系統(tǒng)應(yīng)用層面的評價：
系統(tǒng)是否幫助業(yè)務(wù)提效；
當(dāng)業(yè)務(wù)不能直接應(yīng)用系統(tǒng)，能否靈活改動；
系統(tǒng)是否幫助業(yè)務(wù)變得更有競爭力、更創(chuàng)新；
迭代機制
當(dāng)我們完成設(shè)計規(guī)范的整體構(gòu)建后，對于新需求，通過評估復(fù)用性、通用性和優(yōu)先級，低級別的走定制設(shè)計完成交付。高級別的通過抽象設(shè)計、內(nèi)審、沉淀到組件庫中。
機制提效
在完成設(shè)計規(guī)范的構(gòu)建后，我們可以聯(lián)合產(chǎn)品經(jīng)理和前端工程師，幫助每個環(huán)節(jié)的人員快速搭建產(chǎn)出物，推動上下游機制提效。
例如，我們會基于設(shè)計規(guī)范，為產(chǎn)品經(jīng)理提供符合設(shè)計規(guī)范的Axure元件庫，產(chǎn)品經(jīng)理使用元件庫，可以快速搭建原型，產(chǎn)出prd，與設(shè)計師、開發(fā)的溝通也更加順暢。簡單的修改可以跳過設(shè)計師出圖這一步驟，直接和開發(fā)溝通，極大加快前期的節(jié)奏。甚至通過借助元件庫，產(chǎn)品經(jīng)理可以搭建出高保真原型，用于直接和用戶確認(rèn)或者給客戶進(jìn)行demo的演示。
基于設(shè)計規(guī)范，推動研發(fā)實現(xiàn)組件代碼化，通過設(shè)計標(biāo)準(zhǔn)化可以達(dá)到研發(fā)工業(yè)化。通過定義標(biāo)準(zhǔn)規(guī)范，提高流程、組件的復(fù)用率，開發(fā)側(cè)就可以制定相應(yīng)組件，形成前端腳手架，方便后期迭代的組件化使用，有效地避免不必要的分歧點和重復(fù)造輪子，同時減少上線前設(shè)計走查、測試的工作量，保證落地效果，提升生產(chǎn)力。
以上就是我們在構(gòu)建自己的企業(yè)設(shè)計規(guī)范的流程，最后，給大家展示一下，我們目前的企業(yè)設(shè)計規(guī)范和部分應(yīng)用情況。
藍(lán)藍(lán)設(shè)計的小編 http://tweetduck.com