第一：你對于互聯(lián)網(wǎng)好產(chǎn)品的關(guān)注度。
第二：你是否有足夠好奇心去研究體驗(yàn)產(chǎn)品
第三：你的審美，美感如何？
因此作為一個(gè)設(shè)計(jì)師，必須不斷去把玩使用各種APP才能讓眼界打開。如果說Pin是去構(gòu)建設(shè)計(jì)靈感庫，那么每個(gè)人還需要有一個(gè)App圖書館，當(dāng)你設(shè)計(jì)靈感枯竭時(shí)候；可以去嘗試體驗(yàn)更多好的產(chǎn)品提升自己眼界，今天就分享幾個(gè)小方法幫你打開全球視野。
▲APP的全部頁面狀態(tài)，以及里面各種場景，按照用戶的體驗(yàn)流程一一的截圖展示。
▲點(diǎn)擊后可以查看大圖模式，點(diǎn)擊旁邊的列表標(biāo)簽，能夠搜索很多列表的效果圖。
▲點(diǎn)擊標(biāo)簽后全網(wǎng)所有關(guān)于列表相關(guān)的設(shè)計(jì)截圖，都給你找出來了，然后 你就可以找到你想要的圖片，順藤摸瓜，找到更多的APP。
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請掃碼ben_lanlan，報(bào)下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( m.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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ù)
前言：如何讓你的設(shè)計(jì)更有價(jià)值，設(shè)計(jì)有價(jià)值代表你的方案有價(jià)值，你的方案有價(jià)值代表你的理論有價(jià)值、你的理論有價(jià)值代表你的專業(yè)能力體現(xiàn)，歸根到底，說明了什么人作出什么樣的作品的同時(shí)會帶來相應(yīng)的價(jià)值。站在設(shè)計(jì)師的角度看，在公司里，屬于站在用戶體驗(yàn)上的提出的設(shè)計(jì)建議或者設(shè)計(jì)方案，基于“以用戶為中心”理念和交互設(shè)計(jì)原則，通過自己的設(shè)計(jì)思維與專業(yè)能力，為公司創(chuàng)造更大的價(jià)值，不單只是一個(gè)美觀的輸出。
目錄：
一、設(shè)計(jì)行業(yè)的發(fā)展趨勢
a）設(shè)計(jì)與產(chǎn)品的關(guān)系
b）找到自身價(jià)值的重要性
二、了解設(shè)計(jì)師的價(jià)值分層
a）設(shè)計(jì)協(xié)同
b）推動業(yè)務(wù)增長
c）設(shè)計(jì)驅(qū)動產(chǎn)品
三、設(shè)計(jì)師需要具備的哪些思維？
a）雙鉆模型解決問題
b）“五度”設(shè)計(jì)成果評估模型
c）培養(yǎng)數(shù)據(jù)思維，利用數(shù)據(jù)提升設(shè)計(jì)的價(jià)值
一、設(shè)計(jì)行業(yè)的發(fā)展趨勢
a）設(shè)計(jì)與產(chǎn)品的關(guān)系
以前，設(shè)計(jì)師在團(tuán)隊(duì)里的位置會比較尷尬，因?yàn)闆]法驗(yàn)證自己對業(yè)務(wù)的推動是否產(chǎn)生了什么明確的價(jià)值。而大數(shù)據(jù)的來臨，設(shè)計(jì)的價(jià)值變得顯性化，作為與用戶關(guān)系密切的設(shè)計(jì)師，善用好數(shù)據(jù)，可以發(fā)揮的作用其實(shí)很大。我們可以通過自己的設(shè)計(jì)思維與專業(yè)能力，為公司創(chuàng)造更大的價(jià)值，不單只是一個(gè)美觀的輸出。這就使得設(shè)計(jì)與產(chǎn)品業(yè)務(wù)關(guān)系越來越密切，是整個(gè)行業(yè)發(fā)展的必然趨勢。
舉一個(gè)設(shè)計(jì)以小成提高業(yè)務(wù)的實(shí)例。這是我之前做的分揀軟件迭代首頁的自定義配置組件。在改動前分揀首頁功能多，甚至有時(shí)候需要滑動尋找。尋找點(diǎn)擊率大概是不到16%，改動后提高到了40%，不消耗任何其他人力、物力成本，就可以用設(shè)計(jì)讓CTR翻倍。
設(shè)計(jì)目標(biāo)：減少首頁模塊尋找的時(shí)間，加大成功點(diǎn)擊率，考慮延展性發(fā)展
現(xiàn)有問題：主次功能混淆、視覺點(diǎn)不夠集中、點(diǎn)擊按鈕不明顯
優(yōu)化方案：1、主次布局調(diào)整，主上次下；2、面積放大提高模塊命中率；3、色彩區(qū)分主次按鈕；4、添加“?”自定義配置首頁主功能，加入人性化設(shè)計(jì)理念。
b）找到自身價(jià)值的重要性
自身價(jià)值顧名思義就是你的工作成果會帶來什么價(jià)值，按照公司更看重我們的設(shè)計(jì)能給產(chǎn)品的發(fā)展帶來多大的價(jià)值。雖然職位的性質(zhì)已經(jīng)很明確你的價(jià)值的體現(xiàn)，但是這里注重成果的價(jià)值，設(shè)計(jì)師的成果更多是設(shè)計(jì)方案，方案成果的價(jià)值的接受度也是需要從易到難的漸進(jìn)的。
舉一個(gè)設(shè)計(jì)價(jià)值體現(xiàn)的實(shí)例。這是我之前做的新Station組件庫——GM Design。設(shè)置組件和設(shè)計(jì)規(guī)范不僅保持了產(chǎn)品的統(tǒng)一性，且減少用戶在使用過程中的行為認(rèn)知負(fù)擔(dān)，快速同事達(dá)成合作，還可以減少不必要的操作和排查，提高易用性。
設(shè)計(jì)目標(biāo)：保持產(chǎn)品的統(tǒng)一性，減少認(rèn)知負(fù)擔(dān)，降低時(shí)間和人力成本，提高易用性
現(xiàn)有問題：同個(gè)功能存在組件多樣、組件學(xué)習(xí)成本高、反復(fù)修改，
優(yōu)化方案：1、建立組件庫；2、功能類型劃分，采用同一個(gè)組件的變形處理；3、組件集中化；
二、了解設(shè)計(jì)師的價(jià)值分層
設(shè)計(jì)師的價(jià)值可以分為以下三層：設(shè)計(jì)協(xié)同、設(shè)計(jì)推動業(yè)務(wù)增長、設(shè)計(jì)驅(qū)動產(chǎn)品。
a）設(shè)計(jì)協(xié)同
一個(gè)完美的執(zhí)行者，能夠在拿到需求后高效又完美地實(shí)現(xiàn)落地。簡單地說就是手上功夫好。
做好這個(gè)階段需要有優(yōu)秀的專業(yè)能力，良好的溝通能力，并參與到產(chǎn)品的探索與構(gòu)思中來。
舉一個(gè)設(shè)計(jì)協(xié)調(diào)的實(shí)例。Q2階段的B-Shop商城交互迭代。前期輸出設(shè)計(jì)基礎(chǔ)和設(shè)計(jì)規(guī)范，有助于開發(fā)高效實(shí)現(xiàn)，實(shí)時(shí)跟進(jìn)UI進(jìn)度和設(shè)計(jì)協(xié)助。在產(chǎn)品的探索中發(fā)現(xiàn)數(shù)字鍵盤組件的問題點(diǎn)，由于自己寫的數(shù)字組件具有局限性，導(dǎo)致體驗(yàn)上無法滿足部分需求，如：輸入框的定位在數(shù)字鍵盤之上。基于這個(gè)問題點(diǎn)，我們提出A/B方案，A方案是自己寫的數(shù)字組件，B方案是自己寫的數(shù)字組件延用原生的邏輯，從用戶測試得出，A方案是更符合用戶操作習(xí)慣。
設(shè)計(jì)目標(biāo)：組件高效快捷輸入，側(cè)重交互體驗(yàn)提升，視覺優(yōu)化，提高易用性
現(xiàn)有問題：學(xué)習(xí)成本高、缺少設(shè)計(jì)基礎(chǔ)、信息分層不明顯、體驗(yàn)差
優(yōu)化方案：1、劃分主次信息，閱讀更直觀；2、建立設(shè)計(jì)規(guī)范；3、組件優(yōu)化，符合用戶操作習(xí)慣；4、圖文結(jié)合，按鈕優(yōu)化，加強(qiáng)頁面指導(dǎo)性
b）推動業(yè)務(wù)增長
這個(gè)階段的設(shè)計(jì)師，會比上一個(gè)階段更能體現(xiàn)設(shè)計(jì)師的設(shè)計(jì)價(jià)值，并對產(chǎn)品產(chǎn)生一定的影響力。能在以用戶為中心的基礎(chǔ)上，推動業(yè)務(wù)的增長，所以這個(gè)階段的設(shè)計(jì)也被稱為UGD（User Growth Design）。
需要設(shè)計(jì)師具備用戶洞見力，數(shù)據(jù)分析能力，從這兩個(gè)維度出發(fā)，去熟悉業(yè)務(wù)、分析業(yè)務(wù)，從而推動業(yè)務(wù)。
舉一個(gè)推動業(yè)務(wù)增長的實(shí)例。Q2階段的采購APP的交互迭代。表頭的功能布局與標(biāo)簽欄的“?”添加功能的調(diào)整，其實(shí)在用戶調(diào)研階段的熱力圖數(shù)據(jù)和觀察法分析得出，工具類移動端側(cè)重點(diǎn)在功能區(qū)，需要一目了然知道我的當(dāng)前任務(wù)數(shù)是很重要的信息，且是高頻操作，所以放置頂部；標(biāo)簽欄的添加功能是為了快速添加采購單據(jù)和詢價(jià)為目的，用戶群體特殊性，需要一鍵新建添加的需求。
設(shè)計(jì)目標(biāo)：側(cè)重交互體驗(yàn)提升，提高工作效率，提高易用性
現(xiàn)有問題：學(xué)習(xí)成本高、缺少設(shè)計(jì)基礎(chǔ)、操作路徑長、體驗(yàn)差
優(yōu)化方案：1、操作路徑簡化，采用路徑集合彈框；2、建立設(shè)計(jì)規(guī)范；3、組件優(yōu)化，符合用戶操作習(xí)慣；4、一鍵新建“?”的功能，達(dá)到快速新建
體驗(yàn)連接：http://station.env-bugfix.dev.k8s.guanmai.cn/purchase_assistant/#/login（賬戶/密碼zhangsan0001/ liuge1)
c）設(shè)計(jì)驅(qū)動產(chǎn)品
這個(gè)階段的設(shè)計(jì)師，在團(tuán)隊(duì)中的價(jià)值可以說是非常大了。從被動的需求接收方，轉(zhuǎn)化為從戰(zhàn)略層，能主動提出需求的一方。也是UXD發(fā)展的終極方向。
三、設(shè)計(jì)師需要具備的哪些思維？
a）雙鉆模型解決問題
什么是雙鉆模型?
雙鉆設(shè)計(jì)模型由英國設(shè)計(jì)協(xié)會提出，該設(shè)計(jì)模型的核心是：發(fā)現(xiàn)正確的問題、發(fā)現(xiàn)正確的解決方案。一般應(yīng)用在產(chǎn)品開發(fā)過程中的需求定義和交互設(shè)計(jì)階段。
雙鉆設(shè)計(jì)模型把設(shè)計(jì)過程分成4個(gè)階段：發(fā)現(xiàn)問題（挖掘）、定義問題（創(chuàng)意）、構(gòu)思方案（制作）和交付方案（落地）。
采購APP進(jìn)行雙鉆模型思維構(gòu)建的基礎(chǔ)，提供交互迭代的底層設(shè)計(jì)理論支持，在挖掘需求階段，屬于用戶調(diào)研階段；創(chuàng)意階段，關(guān)注點(diǎn)在于問題梳理、實(shí)現(xiàn)目的、設(shè)計(jì)層面；制作階段，尋找潛在的解決方案；落地階段，解決方案的分析和驗(yàn)證，輸出最適合一個(gè)。
b）“五度”設(shè)計(jì)成果評估模型
用戶體驗(yàn)周期（由阿里巴巴UED提出概念）
用戶體驗(yàn)周期指的是用戶與產(chǎn)品的關(guān)系隨著時(shí)間變化而形成的不同周期階段。用戶體驗(yàn)周期可以分為「當(dāng)前」和「長遠(yuǎn)」兩個(gè)階段，每個(gè)階段中有不同的細(xì)分。
「當(dāng)前」階段，分為 3 個(gè)過程：
觸達(dá)：用戶來訪問網(wǎng)站，包括第一次訪問網(wǎng)站的新用戶和再一次訪問網(wǎng)站的老用戶；
行動：用戶在網(wǎng)站上進(jìn)行相關(guān)操作；
感知：用戶在操作完成后對產(chǎn)品形成的主觀感受。
「長遠(yuǎn)」階段：分為 2 種表現(xiàn)：
回訪：用戶自己再次使用該產(chǎn)品；
傳播：用戶推薦給其他人使用該產(chǎn)品。
如何在具體項(xiàng)目中體現(xiàn)呢？下圖，運(yùn)用一個(gè)具體項(xiàng)目舉例：
c）培養(yǎng)數(shù)據(jù)思維，利用數(shù)據(jù)提升設(shè)計(jì)的價(jià)值
項(xiàng)目與需求上線后，去驗(yàn)證自己的設(shè)計(jì)是否有效地達(dá)成了目標(biāo)。這個(gè)時(shí)候你就需要去看數(shù)據(jù)反饋。沒有數(shù)據(jù)就就沒有比較，沒有比較就不能進(jìn)步。
關(guān)于數(shù)據(jù)的用處有很多，舉個(gè)例子，當(dāng)兩個(gè)人對各自的方案爭執(zhí)不休，分別覺得對方不好，但站在各自的邏輯上似乎都能說得通，那怎么辦呢？分別做一個(gè)A/B測試，數(shù)據(jù)不會說謊，哪一個(gè)方案更有效，一目了然。
那么如何將數(shù)據(jù)結(jié)合到我們的設(shè)計(jì)中呢？首先在設(shè)計(jì)前,我們需要先定一個(gè)目標(biāo)，而每一個(gè)目標(biāo)就應(yīng)有一項(xiàng)對應(yīng)的數(shù)據(jù)指標(biāo)。比如，提高了某一塊的CTR（點(diǎn)擊通過率），提高CVR（轉(zhuǎn)化率），提高商品曝光、1/7/15/30日留存率等等。方便之后去驗(yàn)證自己的的action是否完成了自己的Goal。
拿到了數(shù)據(jù)之后，還需要分析數(shù)據(jù)。不管是有沒有達(dá)到目標(biāo)，都要去分析原因，進(jìn)行復(fù)盤總結(jié)。復(fù)盤的好處是可以讓我們在這一次項(xiàng)目中吸取有價(jià)值的經(jīng)驗(yàn)—失敗了就找失敗的原因，方便以后避開同樣的錯(cuò)誤；成功了就分析成功的原因，并將成功的策略復(fù)制運(yùn)用到今后的工作中，增加以后的成功率。如此，不管有沒有成功，都能給我們帶來最大化的價(jià)值。我們也會更加的接近用戶、接近產(chǎn)品、接近業(yè)務(wù)。從而幫助我們進(jìn)一步洞察用戶、挖掘新的需求。
以上就是今天所要分享的全部內(nèi)容。再帶大家回顧一下，一共分為三部分：第一個(gè)是了解設(shè)計(jì)師的發(fā)展趨勢，第二個(gè)是趨勢下的設(shè)計(jì)師價(jià)值分層（設(shè)計(jì)協(xié)同、設(shè)計(jì)推動增長、設(shè)計(jì)驅(qū)動），第三個(gè)就是在價(jià)值分層的逐步遞升中所需要培養(yǎng)的雙鉆模型、GSA的策略、數(shù)據(jù)增長思維等。
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請掃碼ben_lanlan，報(bào)下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( m.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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ù)
Tab Bar「標(biāo)簽欄」一直是UI設(shè)計(jì)師值得學(xué)習(xí)和研究的內(nèi)容，因?yàn)楫?dāng)設(shè)計(jì)師在構(gòu)建一個(gè)新的應(yīng)用程序時(shí)，都可能需要搭建標(biāo)簽欄，建議設(shè)計(jì)師們根據(jù)實(shí)際情況去判斷是否使用。
流行常見的應(yīng)用程序，如Amazon、Spotify、YouTube、Pinterest、Twitter、Instagram、Snapchat，都在使用標(biāo)簽欄，但這并不意味著你的應(yīng)用程序、你的用戶是真的需要或真心喜歡。像計(jì)算器、日歷等應(yīng)用，就沒有涉及此功能。
為什么應(yīng)用程序會有標(biāo)簽欄？答案顯然是「易于使用」。加入標(biāo)簽欄可以幫助用戶更輕松地導(dǎo)航到頁面，不用再特意點(diǎn)開菜單，選擇想要瀏覽的頁面。帶有標(biāo)簽欄的應(yīng)用程序，通常會與多個(gè)頁面聯(lián)動。而類似計(jì)算器這種工具性質(zhì)的程序，用戶可能會重復(fù)打開使用，所以其展示重點(diǎn)在主屏幕上，點(diǎn)擊后直接進(jìn)入功能頁面。
為什么標(biāo)簽欄不是菜單？有些應(yīng)用會使用菜單羅列頁面，雖然占用的屏幕空間更少（菜單圖標(biāo)），但缺點(diǎn)是用戶點(diǎn)擊菜單進(jìn)行多次跳轉(zhuǎn)。為了更好地使用，設(shè)計(jì)師發(fā)明了靠近拇指的酷炫標(biāo)簽欄， 方便用戶點(diǎn)擊，以獲得更好地導(dǎo)航和更輕松地沖浪體驗(yàn)。接下來我將為大家介紹幾個(gè)應(yīng)用標(biāo)簽欄時(shí)的小技巧：
標(biāo)簽欄應(yīng)只包含最有用的目的地，應(yīng)是被高度精簡過的，避免變得混亂。許多應(yīng)用程序在其標(biāo)簽欄上添加了搜索屏幕，這有助于更好地導(dǎo)航內(nèi)容。結(jié)合自身程序，為用戶針對性地添加一些重要的功能，提升體驗(yàn)。
比如Spotify的標(biāo)簽欄，使用了音樂播放器中常出現(xiàn)的幾種功能：Home，主頁標(biāo)簽用于播放或可能收聽的內(nèi)容；Search，搜索標(biāo)簽用于檢索其他歌曲和播客；Library，庫標(biāo)簽用于播放列表中用戶喜歡和保存的歌曲。Premium則是結(jié)合了公司業(yè)務(wù)，幫助用戶輕松完成費(fèi)用支付。
體量大的應(yīng)用程序，它們更喜歡使用4-5個(gè)標(biāo)簽，不僅讓標(biāo)簽欄變得整潔，還能幫助用戶快速點(diǎn)擊。如果超過5個(gè)圖標(biāo)，用戶受拇指大小的影響會無法準(zhǔn)確地點(diǎn)擊。
Pinterest的標(biāo)簽欄雖然只有4個(gè)標(biāo)簽，但它在通知標(biāo)簽內(nèi)設(shè)計(jì)了置于頂部的標(biāo)簽——消息選項(xiàng)卡，最大程度的拓展了用戶在此標(biāo)簽內(nèi)的應(yīng)用。
任何流行的應(yīng)用程序都在使用標(biāo)簽，因?yàn)樗鼈兦宄卣f明了當(dāng)用戶點(diǎn)擊特定標(biāo)簽時(shí)會做什么。
Youtube和宜家這兩款應(yīng)用復(fù)雜程度各不相同，宜家的內(nèi)容主要是家居家具，YouTube則是不同類型的視頻。YouTube使用的搜索標(biāo)簽，與其他程序相比，也更具自己的特色。
Pinterest的標(biāo)簽欄相對設(shè)計(jì)的專業(yè)一些，會將標(biāo)簽上的文字隱藏起來。當(dāng)用戶習(xí)慣使用后，標(biāo)簽上的內(nèi)容會隨之隱藏，我個(gè)人非常喜歡這種設(shè)計(jì)。不過，我建議大家根據(jù)自己的選擇，再去確定是否要這么做。
標(biāo)簽欄內(nèi)的標(biāo)簽應(yīng)簡短與清晰，就像設(shè)計(jì)按鈕標(biāo)簽時(shí)一樣，請使用準(zhǔn)確的標(biāo)簽。TikTok的所有標(biāo)簽都是短標(biāo)簽，并且還加入了創(chuàng)建按鈕，如果你想吸引用戶的注意力，你也可以這樣做。
避免對用戶隱藏標(biāo)簽欄，因?yàn)槠浒俗钪匾膶?dǎo)航功能。大多數(shù)的應(yīng)用程序都遵循了這條規(guī)則，除非有些是出于測試目的，會選擇隱藏。Pinterest的標(biāo)簽欄在滾動瀏覽圖像時(shí)完全隱藏，我個(gè)人猜測，是希望用戶可以最大幅度的查看感興趣的圖像。
按順序排列標(biāo)簽非常有必要，每個(gè)應(yīng)用程序都會參照清晰度和可用性這兩個(gè)維度去設(shè)計(jì)。用戶喜歡看到排列好的東西，而標(biāo)簽欄就是其中之一，大型的應(yīng)用程序也基本上遵循類似的設(shè)計(jì)規(guī)則。
打開Pinterest會看到瀑布流形式的主頁面，重要的內(nèi)容都被呈現(xiàn)在了主頁上。Spotify、Youtube、Pinterst、TikTok等應(yīng)用程序都比較相似，將重要內(nèi)容放在了主頁上。個(gè)人建議大家可以參考，但最重要的是將內(nèi)容井井有條地呈現(xiàn)，并始終如一地遵循著設(shè)計(jì)規(guī)則。
標(biāo)簽欄幫助用戶輕松導(dǎo)航，如果用戶不知道自己的位置所在，也就無法進(jìn)行有效地瀏覽。比如Duolingo和Headspace的標(biāo)簽欄，就向用戶傳達(dá)了其所在的準(zhǔn)確位置。
如果你想改進(jìn)應(yīng)用內(nèi)的標(biāo)簽欄設(shè)計(jì)，數(shù)據(jù)是關(guān)鍵點(diǎn)。你可以測試用戶最喜歡的、不使用的以及需要增加的標(biāo)簽分別是什么。
一款成功的應(yīng)用是需要持續(xù)迭代優(yōu)化的，就像靈感平臺Pinterest，雖然它不急于測試新事物，但卻與用戶建立了深深的羈絆，慢慢沉淀積累，再去提升應(yīng)用程序的用戶體驗(yàn)。
文章來源：站酷 作者：UX詞典
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( m.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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ù)
無障礙設(shè)計(jì)（accessible design）指設(shè)計(jì)時(shí)必須考慮殘疾人，無論用戶身體是否有殘疾，（產(chǎn)品，場所和服務(wù)）都具備讓其自由使用的能力。
通用性設(shè)計(jì)（universal design）采用單一的解決方案滿足盡可能多的人群的需要。
包容性設(shè)計(jì)（inclusive design）是最廣義的、讓產(chǎn)品可以被不同用戶（包括不同身體能力、語言、文化、性別、年齡、性取向等）使用的追求。
無障礙設(shè)計(jì)、通用設(shè)計(jì)、包容性設(shè)計(jì)似乎意思相近，在網(wǎng)絡(luò)上很難找到完全統(tǒng)一的說法，因而經(jīng)常被混淆。我試著找出它們之間的關(guān)系，從而對這3個(gè)設(shè)計(jì)理念進(jìn)行更好的理解與區(qū)分。
無障礙設(shè)計(jì)是3個(gè)術(shù)語中最容易理解的術(shù)語，它指的是設(shè)計(jì)時(shí)必須考慮殘疾人，無論用戶身體是否有殘疾，（產(chǎn)品，場所和服務(wù)）都具備讓其自由使用的能力。比如法律規(guī)定所有的建筑物都必須方便輪椅進(jìn)出。
（1）對象：殘疾人（也有一些觀點(diǎn)認(rèn)為是針對更大的人群）
（2）解決方法與目的：通過設(shè)計(jì)讓殘疾人能正常使用
然而有時(shí)這樣的設(shè)計(jì)是迫于無奈而為并缺乏人文關(guān)懷。在美國，很多時(shí)候，“無障礙設(shè)計(jì)”在設(shè)計(jì)界只不過代表《美國殘障人士法案》的最低要求，不少設(shè)計(jì)師把《ADA法案》視為約束，而非創(chuàng)造平等共融空間的機(jī)會。因此無障礙設(shè)計(jì)存在的問題可以分為以下幾點(diǎn)：
（1）缺少人文關(guān)懷，經(jīng)常將殘疾人專用的無障礙設(shè)施與健全人使用的設(shè)施分離設(shè)置，造成了使用時(shí)的隔離感；
（2）無障礙設(shè)計(jì)與其他設(shè)計(jì)產(chǎn)生沖突，例如在狹窄的人行道上鋪設(shè)行進(jìn)盲道可能造成輪椅使用的不便；
（3）一些設(shè)施或產(chǎn)品的應(yīng)用人群過窄。
如圖專為盲人設(shè)計(jì)的魔方，普通人很難使用。
通用設(shè)計(jì)最初的想法來源于建筑和室內(nèi)設(shè)計(jì)，是1997 年北卡羅來納州立大學(xué)通用設(shè)計(jì)中心對通用設(shè)計(jì)提出的一個(gè)定義，此定義一直沿用至今：“一種不需適應(yīng)或特別設(shè)計(jì)，而使主流產(chǎn)品和服務(wù)能為盡可能多的用戶所使用的設(shè)計(jì)方法和過程?！蓖ㄓ迷O(shè)計(jì)在生活中的應(yīng)用很多，比如視頻的字幕，就是為了聽力有障礙的人群設(shè)計(jì)的，而聽力正常的人也能夠在嘈雜的環(huán)境下通過字幕受益。
（1）對象：通用設(shè)計(jì)是旨在為所有設(shè)計(jì)的，它超越了無障礙設(shè)計(jì)，除了考慮殘疾之外還考慮其他的因素，包括年齡、性別、種族、語言等。
（2）解決方法與目的：使用單一方案，解決盡可能多的人的需求
（3）重視設(shè)計(jì)的結(jié)果，而不是設(shè)計(jì)過程
因?yàn)槿耸菑?fù)雜多樣的，人身處的環(huán)境也是不斷變化的，采用單一的解決方案，是難以滿足所有人的需求的。通用設(shè)計(jì)旨在使用單一的方法為所有人解決問題，就不可避免的會遺漏一些人群。
如圖的設(shè)計(jì)用一種方式同時(shí)方便了乘坐輪椅和提行李的人，和一些腿腳不便的老人等。
包容性設(shè)計(jì)有時(shí)被視為通用設(shè)計(jì)的同義詞，但是他們之間還是有明顯的區(qū)別的。包容性設(shè)計(jì)是指：“不限于界面和技術(shù)的設(shè)計(jì)過程。在這個(gè)過程中，產(chǎn)品、服務(wù)或環(huán)境會針對有特定需求的特定人群進(jìn)行優(yōu)化?！彼鼇碓从跀?shù)字產(chǎn)品設(shè)計(jì)，是對通用設(shè)計(jì)的進(jìn)一步發(fā)展。
微軟定義：我們的使命，是讓地球上的每個(gè)人獲得更多。設(shè)計(jì)的包容性開啟了用戶體驗(yàn)，反應(yīng)了人們?nèi)绾芜m應(yīng)周圍的環(huán)境
（1）具有以人為本的特點(diǎn)，包容性設(shè)計(jì)認(rèn)為是環(huán)境“殘疾”，而非個(gè)體，并且切實(shí)的將所有人的需求擺在了最前面，而不是假定一個(gè)“平均值”或“規(guī)范”來限定其適用群體。
（2）給予選擇，以多種方式解決不同人群的問題，以避免邊緣化任何人。
（3）重視設(shè)計(jì)過程，而不是結(jié)果
（1）成本較高，在設(shè)計(jì)的所有階段考慮所有人需要花費(fèi)較長的時(shí)間成本與資金
（2）可能會出現(xiàn)一定程度的冗余設(shè)計(jì)
如圖，比如支付寶的老年版設(shè)計(jì)，就是包容性設(shè)計(jì)的例子。用戶可以自由的選擇使用，方便了老年人的同時(shí)不影響普通人的使用。
與通用設(shè)計(jì)中的解決方案對比，這個(gè)樓梯考慮到了不同的腿部殘疾者，并做出了多樣性的設(shè)計(jì)。打球摔斷一條腿的年輕人可以扶著扶手走下臺階，而不是走輪椅的道路。
無障礙設(shè)計(jì)、通用設(shè)計(jì)、包容性設(shè)計(jì)，每一個(gè)設(shè)計(jì)理念都是對前一個(gè)的補(bǔ)充與發(fā)展，都值得理解與學(xué)習(xí)，而其中包容性設(shè)計(jì)相對較優(yōu)，并更適合用于數(shù)字產(chǎn)品的設(shè)計(jì)。
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請掃碼ben_lanlan，報(bào)下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。
文章來源：站酷 作者：o0WO0
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( m.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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ù)
文章大綱：
1. 淘寶為什么不淘了
2. 淘寶的基礎(chǔ)內(nèi)容設(shè)施
3. 淘寶沒有種草經(jīng)濟(jì)
4. 讓人逛下去的產(chǎn)品設(shè)計(jì)
5. 逛逛和小紅書的設(shè)計(jì)區(qū)別
6. 寫在最后
淘寶成立于2003年5月，當(dāng)時(shí)最早的slogan是：“淘你喜歡”，這句話的主體是以平臺角度出發(fā)，對用戶說的，意思是讓用戶來平臺選購商品。
隨后2005年，slogan變成了“淘我喜歡”，主體從平臺轉(zhuǎn)變成了用戶，意思是讓用戶自主選擇來平臺購物。
在最近的2021年，淘寶的slogan變?yōu)榱恕疤霉淞税伞?。代表性的是淘寶app打開的啟動圖從玲瑯滿目的商品圖，換成了新的slogan：
圖：淘寶啟動頁變化
圖：淘寶的slogan變化
淘，又有“篩選”的意思，而篩選行為是要對某具體目標(biāo)進(jìn)行的，不可能憑空篩選，這個(gè)目標(biāo)產(chǎn)生的過程，就是我們常說的“用戶需求”。
“用戶需求”的產(chǎn)生一般分為兩種：有目的的需求和無目的的需求。
有目的的需求：需求產(chǎn)生的過程有戶外廣告、朋友推薦等。以這種方式產(chǎn)生的需求，用戶會帶著明確目標(biāo)，這時(shí)用戶直接打開軟件，通過搜索，直接縮小商品范圍，更快觸達(dá)目標(biāo)商品，在這種場景下，用戶明顯沒有“逛”的心情。
無目的的需求：當(dāng)用戶在沒有明確目標(biāo)的情況下打開軟件時(shí)，用戶購物意向都是比較模糊的，沒有明確選擇區(qū)間。此時(shí)，如何讓用戶產(chǎn)生購買欲望，是產(chǎn)品設(shè)計(jì)時(shí)必須要重點(diǎn)思考的。
圖：需求產(chǎn)生的類型
我們都知道，淘寶最開始的定位是“淘”，主打的是以導(dǎo)購型社區(qū)為目標(biāo)，主要解決“用戶來平臺需要買什么”的問題，也就是有目的的消費(fèi)需求。
針對這類用戶，最簡單的思路就是“讓用戶買到想要的東西”，基于這一思路，淘寶推出了“千人千面”的算法機(jī)制。
隨著淘寶算法越來越精準(zhǔn)，用戶購買越來越效率，導(dǎo)致很多用戶對于淘寶的使用心智固定在了購物平臺，而不是內(nèi)容消費(fèi)平臺。
但是算法是有一定的滯后性的，只有在用戶產(chǎn)生數(shù)據(jù)后才能夠進(jìn)行精準(zhǔn)推薦。（這個(gè)數(shù)據(jù)可以是在淘寶平臺產(chǎn)生的，也可以是在其他平臺產(chǎn)生的，比如說通過搜狗輸入法輸入了某個(gè)商品名）
所以單純的靠精準(zhǔn)的算法推薦，并不能解決用戶的潛在需求。
圖：不同需求類型的解決方案
在淘寶店鋪的運(yùn)營中，有一項(xiàng)重要的指標(biāo)叫UV價(jià)值，指的是平均每個(gè)客戶在店鋪的銷售額，數(shù)字越高說明訪客的轉(zhuǎn)化率越高，轉(zhuǎn)化高就代表最終的GMV會高。
而根據(jù)淘寶的數(shù)據(jù)統(tǒng)計(jì)，店鋪粉絲級別越高，對店鋪的粘性越強(qiáng)，UV價(jià)值也就越高。最終反映在淘寶數(shù)據(jù)上就是GMV高，既利于平臺，也利于商家。
粉絲的積累需要流量，而淘寶店鋪的流量來源一般分為：淘寶站內(nèi)、淘寶站外，其中有包括淘寶推廣、搜索競價(jià)、淘寶客、直通車等方式，但這些流量通常是不穩(wěn)定的，免費(fèi)流量自不用說，付費(fèi)流量的投入成本也對店鋪的資金有一定要求。
所以店鋪需要把這些吸引的流量，轉(zhuǎn)化成店鋪的粉絲。
舉個(gè)例子，在很多電商平臺上，店鋪會有自己的引流款，這些商品不是為了毛利。只是起到為店鋪引流的作用。
因?yàn)閷τ谄脚_的店鋪來說，持續(xù)不斷且穩(wěn)定的流量增長，不僅可以推動銷售的穩(wěn)定增長，也利于長期的發(fā)展方向。
圖：淘寶流量來源
早在2015年，當(dāng)時(shí)淘寶內(nèi)部孵化淘寶頭條，分享優(yōu)質(zhì)的消費(fèi)類資訊內(nèi)容，當(dāng)時(shí)淘頭條的MAU（月活躍用戶）過億。但隨著視頻內(nèi)容的崛起，圖文形式逐漸走下坡路，淘寶看準(zhǔn)了直播帶貨的賽道，開始逐漸布局淘寶直播的內(nèi)容形式。期間也相繼加入了微淘、有好貨、買家秀、好物點(diǎn)評團(tuán)等內(nèi)容形式。
但是這些內(nèi)容一直分散在淘寶各個(gè)功能模塊中，沒有形成一個(gè)整體的社區(qū)化。
圖：淘寶的內(nèi)容矩陣
其中最成功的應(yīng)該就屬淘寶直播了，根據(jù)淘寶直播2021年度報(bào)告：2020年淘寶直播帶來的GMV超過人民幣4000億元。
但是，直播的內(nèi)容形式注定是以主播自上而下中心化的，用戶是跟著主播走的，一旦主播下播以后，這些觀眾也會失去購買目標(biāo)。
并且由于直播屬于一對多的形式，越大的主播，觀眾越多，這時(shí)候主播和觀眾的互動率是很低的，久而久之，用戶的互動積極性也會受打壓。
圖：以主播為中心化的淘寶直播
除了淘寶直播，近年來另一個(gè)改動比較大的應(yīng)該就是微淘的出現(xiàn)了，在逛逛出現(xiàn)之前，一直占據(jù)底部欄的二號位，它的內(nèi)容形式主要以店鋪上新、直播、福利為主。
這也是淘寶在店鋪私域流量運(yùn)營上做的一次嘗試，目的是為了讓用戶更容易和店鋪產(chǎn)生連接。但是實(shí)際上，由于微淘的內(nèi)容形式之間關(guān)聯(lián)性不大，業(yè)務(wù)場景混亂，一些剛起步的商家也沒有資源拓展多業(yè)務(wù)場景，導(dǎo)致內(nèi)容質(zhì)量參差不齊，影響轉(zhuǎn)化。
淘寶做微淘中做內(nèi)容的目的是為了讓用戶有東西可以逛，但是逛內(nèi)容就代表著用戶購買需求不明確，這又與營銷場景相沖突（營銷場景是為了讓用戶快速下單完成購買），所以微淘也一直被詬病轉(zhuǎn)化率低。
圖：微淘主要的三個(gè)問題
后來在2020年年底的時(shí)候，淘寶迎來了另一個(gè)比較大的改版，猜你喜歡變成了縱向的信息流，點(diǎn)擊猜你喜歡進(jìn)入的是一個(gè)流量的中轉(zhuǎn)站。比如說點(diǎn)擊一件衣服，下面全是衣服的推薦。
新版猜你喜歡的特點(diǎn)很明顯，犧牲轉(zhuǎn)化率，增加用戶使用時(shí)長。在實(shí)際點(diǎn)擊進(jìn)入信息流中，用戶總感覺下面有新的內(nèi)容，這時(shí)候用戶的心態(tài)普遍是浮躁的，會使用很短，甚至一兩秒的時(shí)間決定是否深入了解產(chǎn)品。如果不喜歡，就會滑到下一個(gè)產(chǎn)品，無形中增加了用戶在平臺的停留時(shí)長。
據(jù)淘寶官方數(shù)據(jù)表示，此次猜你喜歡的大改版，淘寶用戶的點(diǎn)擊率和用戶時(shí)長都提升了20%。
圖：猜你喜歡改版，通過犧牲轉(zhuǎn)化來提高使用時(shí)長
逛逛是以UGC內(nèi)容形式為主的種草平臺，顧名思義，就是消費(fèi)者在無聊的時(shí)候，可以到處逛逛。
如果說信息流是縱向的內(nèi)容推薦，那么逛逛就是通過大數(shù)據(jù)，橫向的推薦內(nèi)容，最終向商品引流。豐富的內(nèi)容為其他消費(fèi)者帶來沉浸式購物體驗(yàn)，類比線下商圈，就是逛著逛著就把東西買了。
AISAS模型是一種用戶決策分析模型，由電通公司（日本第一大廣告公司）提出，是消費(fèi)者行為學(xué)領(lǐng)域很成熟的理論模型之一。
AISAS模式將消費(fèi)者從產(chǎn)生需求到最終完成購買的路徑分成了五個(gè)階段，既Attention（注意） - Interest（興趣） - Search（搜索） - Action（行動） - Share（分享）。其中消費(fèi)者在注意商品并產(chǎn)生興趣之后的信息搜集（Search），以及產(chǎn)生購買行動之后的信息分享（Share），是當(dāng)下互聯(lián)網(wǎng)消費(fèi)時(shí)代尤其重要的兩個(gè)階段。
搜索就是當(dāng)用戶對某商品產(chǎn)生興趣之后，消費(fèi)者會通過線上或者線下渠道來收集相關(guān)產(chǎn)品的信息，比如說評價(jià)、打分等。分享是在購買路徑完成后，用戶自發(fā)向身邊人推薦商品的階段，也就是口碑裂變，當(dāng)然也有可能變成商品吐槽大會。
但是，在前文也提到了，搜索是在有明確對某個(gè)商品產(chǎn)生興趣之后才會產(chǎn)生的動作，整個(gè)消費(fèi)路徑是單向進(jìn)程的，缺少信息的互動與交換，用戶很難有效辨別信息真?zhèn)?，用戶與商家依然存在信任問題，最終的購買壁壘依然存在。
圖：AISAS消費(fèi)模型的流程
隨后，DCCI（互聯(lián)網(wǎng)數(shù)據(jù)中心）在AISAS的基礎(chǔ)上，提出了新的SICAS行為消費(fèi)模型：
既 Sense（品牌與用戶相互感知） - Interest&Interactive（產(chǎn)生興趣并形成互動） - Connect&Communicate（建立聯(lián)系并交互溝通） - Action（行動） - Share（分享）。
Sense，感知：品牌（商家） - 用戶相互感知，通過多觸點(diǎn)，在商家個(gè)用戶之間建立感知，對用戶來說，關(guān)注、分享、訂閱、推送等，都是有效的感知行為，而商家要做的，就是想辦法，通過什么樣的方式或內(nèi)容，讓用戶有效使用他們的感知行為（分享、點(diǎn)贊、訂閱等行為）。
Interest&Interactive，產(chǎn)生興趣和互動。在產(chǎn)生興趣上，隨著用戶對傳統(tǒng)的廣告曝光和廣告產(chǎn)生的印象的敏感度在降低，理解并響應(yīng)用戶的需求正在成為關(guān)鍵。站在用戶的角度，觀察用戶真正想要的內(nèi)容，衡量內(nèi)容的指標(biāo)不再是廣告的傳播率、曝光率，而是變成了點(diǎn)擊率、點(diǎn)贊數(shù)、好評度等。
Connect&Communication，建立連接和產(chǎn)生溝通。在用戶產(chǎn)生興趣之后，通過平臺提供的服務(wù)：客服，問大家，好評團(tuán)等形式，完成用戶信任的積累，幫助用戶完成購買決策。
剩下的Action（購買行動）和Share（體驗(yàn)分享）與AISAS模式一樣，就不展開說了。
圖：SICAS消費(fèi)模型的流程，以及和AISAS消費(fèi)模型的區(qū)別
綜上，SICAS模式前三點(diǎn)的核心觀點(diǎn)是建立聯(lián)系，也就是互動，這也與時(shí)下流行的種草經(jīng)濟(jì)不謀而合。
種草行為本質(zhì)上是人與人之間的一種互動關(guān)系，互動天然的容易產(chǎn)生強(qiáng)關(guān)系鏈，而強(qiáng)關(guān)系也意味著情感聯(lián)結(jié)和信任，最終會形成社群關(guān)系。隨著越來越多擁有相同消費(fèi)偏好的用戶聚攏，用戶消費(fèi)習(xí)慣逐漸圈層化，在各垂直的消費(fèi)圈層中得到身份認(rèn)同感。
在這種社群氛圍的烘托下，用戶更容易表現(xiàn)出高表達(dá)欲和參與度，既用戶不僅是內(nèi)容的消費(fèi)者，同時(shí)也會發(fā)展為內(nèi)容的生產(chǎn)者。
圖：逛逛想打造的種草生態(tài)
綜上結(jié)合淘寶的問題以及消費(fèi)模式的轉(zhuǎn)變，我們可以得出淘寶近期瘋狂改版的思路：
圖：淘寶改版思路
在了解上述淘寶自身的問題和新消費(fèi)類型帶來的沖擊后，可以總結(jié)淘寶最近經(jīng)常改版的戰(zhàn)略可以分為兩個(gè)方向：轉(zhuǎn)化的歸轉(zhuǎn)化，內(nèi)容的歸內(nèi)容。
淘寶第一個(gè)改版是將原來的微淘升級為了訂閱，并且放在首頁上的tab，與推薦并列。此次改版，最大的改變就是拆分了店鋪運(yùn)營的內(nèi)容，讓不擅長做內(nèi)容的商家可以專注自家的店鋪運(yùn)營。
圖：首頁專注商品轉(zhuǎn)化，逛逛專注內(nèi)容消費(fèi)
新版訂閱的精選一欄中：包括上新、買家、評測等，這些內(nèi)容一起構(gòu)成商家和粉絲的互動模式，吸引新客快速轉(zhuǎn)粉，同時(shí)也增加了老客戶的黏性。
在之前微淘的版本，用戶需要點(diǎn)擊微淘-點(diǎn)擊店鋪-點(diǎn)擊訂閱，升級后的訂閱路徑變成了左滑進(jìn)入訂閱頁面-直接訂閱店鋪。點(diǎn)擊直播可以直接進(jìn)入直播間
更短的觸達(dá)路徑加上私域流量的運(yùn)營，優(yōu)化之前微淘轉(zhuǎn)化率低的問題。
圖：路徑圖，直接進(jìn)入直播間，直接訂閱店鋪
圖：提高直播入口權(quán)重
另一個(gè)重要改版是“買家秀”社區(qū)升級成為“逛逛”，為了弱化逛逛的購物屬性，強(qiáng)化社區(qū)氛圍，逛逛在產(chǎn)品的商業(yè)化設(shè)計(jì)上十分克制，主要圍繞引導(dǎo)用戶進(jìn)行內(nèi)容消費(fèi)和互動為目的進(jìn)行設(shè)計(jì)。
在內(nèi)容分發(fā)形式上，分為了以平臺推薦為主的“發(fā)現(xiàn)流”和以社交關(guān)系鏈主導(dǎo)的“關(guān)注流”，更加注重內(nèi)容垂直和精細(xì)化。
圖：逛逛的內(nèi)容分類
逛逛的發(fā)現(xiàn)模塊與小紅書類似，都屬于種草型內(nèi)容社區(qū)。內(nèi)容主要以穿搭、彩妝等淘寶擅長的領(lǐng)域?yàn)橹鳌?
頁面的布局形式和首頁的商品流一樣，以雙列信息流呈現(xiàn)，和單列相比，一方面，給用戶提供多樣化的選擇，承載不同的內(nèi)容形式（短視頻、圖文），延長用戶在平臺的停留時(shí)長，同時(shí)也為其他內(nèi)容引流，模擬更真實(shí)的線下“逛街”體驗(yàn)。
另一方面，和首頁注重轉(zhuǎn)化率的算法機(jī)制不同，影響發(fā)現(xiàn)流推薦算法的因素除了本身的內(nèi)容質(zhì)量，還會受到用戶瀏覽行為的影響，比如瀏覽內(nèi)容時(shí)產(chǎn)生的關(guān)注、收藏、點(diǎn)贊、評論等互動行為。
圖：表現(xiàn)內(nèi)容互動率的互動指標(biāo)
逛逛相比首頁推薦，去中心化的機(jī)制也更加明顯，舉例來說，小米官方店的號，粉絲量達(dá)到了千萬級，但是內(nèi)容的互動率很低，點(diǎn)贊評論甚至不超過個(gè)位數(shù)。
個(gè)人認(rèn)為是因?yàn)槠放铺烊坏淖詭I銷屬性，用戶在看到品牌賬號時(shí)，很容易形成品牌注冊賬號是為了賣產(chǎn)品給我的刻板印象。
這也反映了逛逛的流量重點(diǎn)落在消費(fèi)者的內(nèi)容上，以消費(fèi)者視角為突破口，擺脫和商品相關(guān)的品牌屬性，注重普通用戶對商品的真實(shí)評價(jià)，而不是圍繞IP賬號產(chǎn)生的內(nèi)容消費(fèi)。
圖：小米賬號和個(gè)人賬號互動率對比
在用戶路徑的引導(dǎo)上，發(fā)現(xiàn)頁并不支持點(diǎn)擊頭像進(jìn)入用戶主頁，只能先點(diǎn)擊進(jìn)入內(nèi)容詳情頁然后才可以進(jìn)行關(guān)注等操作，即先看內(nèi)容，再關(guān)注人。
圖：更關(guān)注內(nèi)容轉(zhuǎn)化率
另外一個(gè)人關(guān)注流的動態(tài)則加強(qiáng)調(diào)社交關(guān)系的轉(zhuǎn)化，因?yàn)槭墙?jīng)過用戶主動“關(guān)注”過后篩選出來的內(nèi)容，是內(nèi)容生產(chǎn)者和內(nèi)容消費(fèi)者相互選擇的關(guān)系，所以在產(chǎn)品設(shè)計(jì)上以單列大圖為展現(xiàn)形式，幫助用戶消費(fèi)內(nèi)容。為了防止讓用戶感受到廣告的營銷感，產(chǎn)品設(shè)計(jì)上特地強(qiáng)調(diào)了分享、點(diǎn)贊、收藏、評論等按鈕，弱化商品鏈接。
和其他的社區(qū)一樣，關(guān)注信息流中也會推薦一些“你可能感興趣的人”，但不同的是，用戶無法直接關(guān)注推薦的博主，需要先“查看TA”，進(jìn)入博主的個(gè)人頁后才可以進(jìn)行關(guān)注操作，這樣的目的主要是為了讓用戶了解達(dá)人的領(lǐng)域內(nèi)容之后，再決定是否關(guān)注，這樣的關(guān)注更加有效，粘性更強(qiáng)。
圖：“關(guān)注流”視覺設(shè)計(jì)的思路
“逛逛”的內(nèi)容形式很好地彌補(bǔ)了淘寶缺乏用戶導(dǎo)購的問題（俗稱種草），依托KOL產(chǎn)出的優(yōu)質(zhì)內(nèi)容，與消費(fèi)者產(chǎn)生情感上的價(jià)值鏈接，創(chuàng)造出用戶的潛在需求。
這次改版之后，很多人說這是小紅書。關(guān)注、發(fā)現(xiàn)、垂直分類欄，都和小紅書很相似。
淘寶和小紅書對內(nèi)容的分發(fā)模式是不同，小紅書默認(rèn)分類欄處于收起狀態(tài)，只有主動下拉的時(shí)候太會出現(xiàn)，由此可以看出小紅書對自己的內(nèi)容推薦還是比較有信心的，由于一開始就是做內(nèi)容起家，所以對自身平臺用戶的喜好是有所了解的。
但是淘寶是一個(gè)電商起家的平臺，在內(nèi)容方面，缺乏對用戶的偏好判斷，所以逛逛的導(dǎo)航欄下方，會加入了“官方話題欄目”和“官方出品的內(nèi)容”，利用精選話題引導(dǎo)社區(qū)內(nèi)容的方向，一定程度上也可以通過話題數(shù)據(jù)了解平臺用戶的偏好。
圖：小紅書比淘寶更懂用戶喜歡什么內(nèi)容
小紅書等平臺不光有購物種草，還有學(xué)習(xí)、音樂、科普等內(nèi)容也相對成熟。和淘寶轉(zhuǎn)型社區(qū)內(nèi)容一樣，小紅書也在進(jìn)行圖文、視頻向直播內(nèi)容擴(kuò)展的戰(zhàn)略方向。所以我們會發(fā)現(xiàn)，在小紅書的編輯內(nèi)容上，視頻和直播是強(qiáng)露出的，且不支持位置更換。
再來看逛逛的內(nèi)容，以穿搭、彩妝為首的消費(fèi)品內(nèi)容，這些都是淘寶擅長的領(lǐng)域，容易產(chǎn)出優(yōu)質(zhì)內(nèi)容，反過來說，這些內(nèi)容最終也都是可以在淘寶上可以消費(fèi)到的，最終還是以平臺商品轉(zhuǎn)化為目的。
圖：內(nèi)容形式對平臺戰(zhàn)略的影響
小紅書在內(nèi)容消費(fèi)形式上，比逛逛更加注重互動：首頁瀑布流點(diǎn)擊進(jìn)入二級的內(nèi)容頁后，可以直觀的看到博主全部的文本簡介，以及下方的用戶評論內(nèi)容，用戶消費(fèi)的不光是圖文本身的內(nèi)容，也是其他用戶評論產(chǎn)生的內(nèi)容，更容易產(chǎn)生社交關(guān)系鏈。
逛逛則更注重內(nèi)容本身的消費(fèi)效率：產(chǎn)品設(shè)計(jì)上使用沉浸式的下滑體驗(yàn)，用戶點(diǎn)擊產(chǎn)品圖后，進(jìn)入的是同系列產(chǎn)品的瀑布流，如果想要查看評論的話，需要點(diǎn)擊評論icon進(jìn)行二次跳轉(zhuǎn)，此時(shí)用戶會一直專注于內(nèi)容的消費(fèi)，容易忽略其他用戶評價(jià)等內(nèi)容。
圖：提高互動率的產(chǎn)品設(shè)計(jì)
此次淘寶做內(nèi)容社區(qū)的優(yōu)勢之處在于，淘寶將社交關(guān)系融入到了商品的消費(fèi)鏈路中，消費(fèi)者通過商品體驗(yàn)、測評、種草等方式，和平臺產(chǎn)生互動，建立聯(lián)系。
而淘寶最不缺的就是商品，并且擁有8億多的消費(fèi)者，和其他平臺相比，更容易產(chǎn)生垂直領(lǐng)域的優(yōu)質(zhì)內(nèi)容和專業(yè)的KOL，但是要想經(jīng)營一個(gè)優(yōu)質(zhì)社群，除了需要一批優(yōu)質(zhì)的內(nèi)容創(chuàng)造者，還需要考慮后續(xù)涌現(xiàn)的用戶是否會對現(xiàn)有社群模式產(chǎn)生沖擊。（比如知乎開放用戶注冊后，導(dǎo)致內(nèi)容注水的現(xiàn)象）
因?yàn)樘詫毐旧硐喈?dāng)于一個(gè)巨型供貨方，大大縮短了帶貨變現(xiàn)的路徑和難度，不同于小紅書這類平臺，它們最開始是沒有帶貨模式的，常常需要通過接推廣給其他商品引流來變現(xiàn)。
過短的變現(xiàn)路徑必然會吸引一些用戶或者機(jī)構(gòu)抱著獲利的心態(tài)涌入社群，這種逐利的心態(tài)，也有可能會影響專業(yè)KOL的創(chuàng)作心態(tài)。
文章來源：站酷 作者：抓馬橋分橋
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( m.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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ì)建立了UI設(shè)計(jì)分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請掃碼ben_lanlan，報(bào)下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。
文章來源：站酷 作者：知果日記
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( m.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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ù)
柵格系統(tǒng)（grid systems）
規(guī)則的網(wǎng)格陣列來指導(dǎo)和規(guī)范網(wǎng)頁中的版面布局以及信息分布。
基本原理
在網(wǎng)頁設(shè)計(jì)中，把寬度為“W”的頁面分割成n個(gè)網(wǎng)格單元“a”，每個(gè)單元與單元之間的間隙設(shè)為“i”,把“a+i”定義“A”。他們之間的關(guān)系如下：
W =（a×n）+（n-1）i
由于a+i=A，
可得：(A×n) – i = W
我們通常把a(bǔ)稱為“柱”，對應(yīng)代碼中的Column；i稱為“水槽”，對應(yīng)代碼中的Gutter；a+i=A稱為“列”
設(shè)計(jì)柵格系統(tǒng)，本質(zhì)就是定義a，i，n的數(shù)值。
UI設(shè)計(jì)中有一個(gè)通用做法，就是元素的寬度盡量是8的倍數(shù)，基于今天的大多數(shù)的網(wǎng)頁設(shè)計(jì)，畫板寬度都為1440px ，此時(shí)我們將a=24,i=24,n=24,這是一組簡單美妙的數(shù)值，可算得W=（24x24）+23x24=47x24=1128px；將柵格居中于畫板(偏置156px)，此時(shí)的柵格系統(tǒng)如下：
1128柵格系統(tǒng)：
得到的這個(gè)柵格布局被廣泛使用，比如站酷網(wǎng)首頁:
觀察計(jì)算公式W=1128=47x24=（24+23）x24，這里的47不是8的倍數(shù)，我們?nèi)菀紫氲桨阉兂?8，
將a=25,i=24,n=24,算得W=（24x24）+（25-1）x24=48x24=1152px；此時(shí)的柵格系統(tǒng)如下：
1152柵格系統(tǒng)：
這個(gè)柵格系統(tǒng)的美感在于，寬度W=48x24=1152px，兩邊的留白為畫板1440px寬度的1/10等于144px。Ant Dseign中運(yùn)用了此柵格：
以上兩個(gè)柵格布局都是24柵格系統(tǒng)，使用24柵格系統(tǒng)的好處是，它可以輕松實(shí)現(xiàn)2等分、3等分、4等分、6等分、8等分、12等分，也可以進(jìn)行1：2：1、 1：3：2、 1：2、 1：3 等不對稱分割的布局。
除了最常見的24柵格布局外，也可進(jìn)行36柵格布局，例如：
a=16，i=16，n=36，W=（16x36）+16x（36-1）=16x（36+35）=1136
1136柵格系統(tǒng)：
a=26，i=24，n=24，W=（26x24）+24x23=24x49=1176px
例如騰訊文檔：
1176柵格系統(tǒng)：
“廠”型布局網(wǎng)頁的柵格布局：
以上的網(wǎng)頁布局都是瀑布式布局，在許多應(yīng)用型網(wǎng)站中，常使用“廠”字布局，對于“廠”布局的網(wǎng)頁，該如何設(shè)計(jì)合適的柵格系統(tǒng)呢？
我們可以先確定左側(cè)菜單欄的寬度，例如飛書管理后臺中左側(cè)菜單欄的寬度為228px，在拉動瀏覽器時(shí)，這部分通常是不動的，再確定主體內(nèi)容去和左側(cè)菜單欄間的間隙，比如12px。
此時(shí)可以計(jì)算W=1440-228-12x2=1188。
使用24柵格系統(tǒng)時(shí)，12a+11i=1188，方程中有兩個(gè)未知數(shù)，我們設(shè)定其中一個(gè)時(shí)，就可計(jì)算出另一個(gè)。另i=12,解
W =（a×n）+（n-1）i
1188=（ax24）+23x12
a=38
是幫助，而非限制
對開發(fā)者而言柵格是實(shí)現(xiàn)動態(tài)布局的手段，而設(shè)計(jì)師對于柵格的理解源自平面設(shè)計(jì)中的柵格，不應(yīng)把柵格系統(tǒng)當(dāng)成一種限制，而是幫助，也不用總是擔(dān)心元素超出柵格。
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請掃碼ben_lanlan，報(bào)下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。
文章來源：站酷 作者：隔岸吃瓜
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( m.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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ù)
對于網(wǎng)頁設(shè)計(jì)來說，柵格系統(tǒng)的使用，不僅可以讓網(wǎng)頁的信息呈現(xiàn)更加美觀易讀，更具可用性。而且，對于前端開發(fā)來說，網(wǎng)頁將更加的靈活與規(guī)范。
最近我們產(chǎn)品做了一次全新改版的項(xiàng)目。作為此次項(xiàng)目的設(shè)計(jì)師，從項(xiàng)目的前期分析、設(shè)計(jì)、交付開發(fā)、驗(yàn)收上線，整個(gè)流程，在項(xiàng)目走查驗(yàn)收階段我們設(shè)計(jì)師投入了30人/天！在我們覺得應(yīng)該設(shè)計(jì)投入最少的階段，卻占了我們大量的工作 且最后還原度也遠(yuǎn)不達(dá)預(yù)期。
在這個(gè)項(xiàng)目中我遇到了哪些問題：
還原問題不單單是設(shè)計(jì)師把設(shè)計(jì)稿做的多精準(zhǔn)，標(biāo)注的多仔細(xì)，這么簡單就能解決的。是設(shè)計(jì)和開發(fā)，團(tuán)隊(duì)之間的合作共識問題。我把整個(gè)和開發(fā)對接工作分為前中后三個(gè)階段，在這里從頭來梳理一下，聊一聊設(shè)計(jì)師和開發(fā)如何高效對接，也是對自己的一次復(fù)盤總結(jié)。
在評審環(huán)節(jié)，設(shè)計(jì)師本人一定要將自己的設(shè)計(jì)稿進(jìn)行宣講、幫助開發(fā)理解。注意給技術(shù)講述一些適配要求、設(shè)計(jì)規(guī)范、交互狀態(tài)及動效等，同時(shí)解答技術(shù)同學(xué)的一些疑問，這樣就能將一些可預(yù)見的問題解決掉，解決后期的溝通成本。
有一些地方有多種實(shí)現(xiàn)方式，如果前期沒有跟開發(fā)溝通清楚，就會導(dǎo)致最終實(shí)現(xiàn)的效果存在誤差，比如：下方這個(gè)tab項(xiàng)，單給一張圖，開發(fā)根本不知道設(shè)計(jì)師想要的實(shí)現(xiàn)方式是什么，固定間距還是固定菜單寬度，還是每項(xiàng)平分寬度，最后很大可能就會按照自己的理解去做了，導(dǎo)致出現(xiàn)重復(fù)返工的現(xiàn)象。
再比如一些點(diǎn)擊熱區(qū)，如果不手動標(biāo)明，有可能就做的很小
下圖是我們手動標(biāo)注的熱區(qū)
每個(gè)開發(fā)負(fù)責(zé)的具體頁面模塊不一樣，別人對具體了解程度也不會不一致，所以在評審會議上，一定要具體開發(fā)者在場，如果對應(yīng)開發(fā)沒有發(fā)表意見，設(shè)計(jì)師可詢問，確保他已經(jīng)理解需求。
設(shè)計(jì)師在講解自己的要求后，開發(fā)也要及時(shí)反饋是否有還原困難，如：是否有技術(shù)限制？是否有組件改動困難（牽一發(fā)而動全身）？實(shí)現(xiàn)成本過高（投入產(chǎn)出的性價(jià)比不夠）？等意見和原因，設(shè)計(jì)師也可拋出之前是否遇到過類似的阻礙，幫助開發(fā)去了解。
評審過程的問題和重要講解點(diǎn)，一定要記錄下來，會議中開發(fā)提出的一些問題及解決方案、或者沒有達(dá)成共識的地方，記錄下來等領(lǐng)導(dǎo)決策，在會議結(jié)束后以郵件形式、或wiki文檔發(fā)送前端們，抄送產(chǎn)品，確保會議內(nèi)容的傳達(dá)到位。后面也好跟蹤。
還有一點(diǎn)就是，我們之前遇到的情況，在宣講會上 講解的一些要求，開發(fā)在做的時(shí)候可能就忘記了，讓開發(fā)改他認(rèn)為設(shè)計(jì)沒有明確要求、會有點(diǎn)難推動，就會搞得雙方都有抱怨。有會議記錄也可避免此類情況發(fā)生
在前面我們做了詳盡的溝通和評審，但有時(shí)也避免不了在開發(fā)過程有些問題才發(fā)現(xiàn)暴露。這個(gè)就需要開發(fā)同學(xué)能重視還原問題，積極溝通反饋，和設(shè)計(jì)確認(rèn)商議 是否有其它可替代方案，切勿自己發(fā)揮，等到后期驗(yàn)收的時(shí)候才說出問題可能會影響進(jìn)度
開發(fā)者在完成自己負(fù)責(zé)的模塊界面時(shí)，可自己對齊設(shè)計(jì)稿自查一遍，參考【3.1驗(yàn)收標(biāo)準(zhǔn)】的表格，可幫助判斷問題，在此階段也可發(fā)給設(shè)計(jì)者確認(rèn)效果。
這里可以提前在項(xiàng)目排期階段，設(shè)計(jì)師將所需的驗(yàn)收工時(shí)同步給技術(shù)和測試，將驗(yàn)收時(shí)間考慮進(jìn)去
為什么要求測試同學(xué)保證還原度至少在70%呢？
因?yàn)槿绻灰鬁y試走查還原度，設(shè)計(jì)驗(yàn)收的時(shí)候就會有大量的問題，最后變成設(shè)計(jì)在測試界面而不是驗(yàn)收。設(shè)計(jì)師不像測試對整個(gè)流程的測試配置那么熟悉方便，反復(fù)驗(yàn)收需要測試和設(shè)計(jì)不斷配合，雙方的工作量都會加大。
理想的狀態(tài)應(yīng)該是測試整個(gè)流程走通，視覺和交互還原問題也要著重測試，設(shè)計(jì)和產(chǎn)品在測試沒什么大問題后再進(jìn)行驗(yàn)收。
參考【驗(yàn)收標(biāo)準(zhǔn)】的表格，可幫助判斷還原問題
最好是提前知道模塊的開發(fā)者，這樣驗(yàn)收的時(shí)候一對一進(jìn)行模塊的打版驗(yàn)收效率更高
技術(shù)對功能上的BUG，可以自己很好的判斷哪些是嚴(yán)重的緊急的，但對于視覺和交互層面的感知就比較低。在提問題單的時(shí)候，我們可以幫他標(biāo)注出優(yōu)先級，告知開發(fā)哪些是比較嚴(yán)重的需要優(yōu)先修改的，不然 開發(fā)自己很難判斷，可能就會挑一些比較好改的先改了，重要的問題反而被擱置了。尤其在項(xiàng)目時(shí)間比較緊張的時(shí)候，有優(yōu)先級標(biāo)注 開發(fā)能夠看出哪些是可以為項(xiàng)目進(jìn)度做出妥協(xié)的，哪些是必須要修改的。
設(shè)計(jì)提BUG單的不能簡單的說這里出錯(cuò)了，請參考設(shè)計(jì)標(biāo)注重新調(diào)整。要直接給出正確的尺寸、增多少、減多少、這樣可幫助技術(shù)提高更高效率，也能避免開發(fā)自己去看又出現(xiàn)誤差、又要返工修改。
設(shè)計(jì)師在驗(yàn)收過程中容易遇到的一個(gè)比較頭疼的問題就是，技術(shù)和產(chǎn)品小伙伴可能因?yàn)轫?xiàng)目上線時(shí)間緊，覺得視覺還原和頁面交互體驗(yàn)上的問題不重要不給予修改，優(yōu)先保障功能上線。
除了這些原因，設(shè)計(jì)側(cè)也在檢討總結(jié)，自己有哪些做的不足的地方，所以 以上文檔也是對接下來工作的優(yōu)化方案。設(shè)計(jì)還原度也是日常考核之一，需要大家重視，好的產(chǎn)品要嚴(yán)格把控精心打磨，希望這次的總結(jié)、相關(guān)流程和經(jīng)驗(yàn)，在接下來工作中能夠提升設(shè)計(jì)驗(yàn)收效率和還原度。
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請掃碼ben_lanlan，報(bào)下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。
文章來源：站酷 作者：飛行的考拉
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( m.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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ù)
對于一家做項(xiàng)目型的公司而言（今天主要講的是項(xiàng)目性質(zhì)的設(shè)計(jì)工作，產(chǎn)品可以繞道哦），時(shí)間就是成本這句話體現(xiàn)的淋漓盡致?；旧辖o到UI設(shè)計(jì)的時(shí)間，是少之又少，那么如何在一個(gè)有限的時(shí)間里，設(shè)計(jì)出優(yōu)秀的作品呢？這是接下來我想跟大家一起討論的～
我們都知道用戶體驗(yàn)五要素（戰(zhàn)略層、范圍層、結(jié)構(gòu)層、框架層、表現(xiàn)層），這五大點(diǎn)是一個(gè)個(gè)遞進(jìn)的過程，是一個(gè)從初步的想法到最后落地的過程。也就是說我們最后看到的表現(xiàn)層（UI界面）是如何做出來的，都需要靠前面一點(diǎn)點(diǎn)的去研究、細(xì)化、分析。所以這么一個(gè)強(qiáng)大而繁瑣的過程，我們?nèi)绾我谝粋€(gè)有限的時(shí)間內(nèi)去完成，下面跟大家聊一聊我在實(shí)際工作中的例子。
一、溝通
溝通是一切事物的前提和基礎(chǔ)，這個(gè)溝通一定是要跟客戶的直接溝通，不管是遠(yuǎn)程還是面對面也好。中間人的傳達(dá)會加上個(gè)人思想理解的轉(zhuǎn)化，到你這里就不再是一手消息，也許就不會那么準(zhǔn)確。拿到一個(gè)項(xiàng)目之后，我們要了解項(xiàng)目，所以需要對項(xiàng)目的背景、目標(biāo)用戶、產(chǎn)品目標(biāo)、核心競爭力進(jìn)行分別分析。
項(xiàng)目背景
為什么設(shè)計(jì)師的背后總是有一群指點(diǎn)江山的人，因?yàn)槲覀兊脑O(shè)計(jì)沒有被體現(xiàn)在產(chǎn)品上，只是表層，每次給別人解釋設(shè)計(jì)理念的時(shí)候總是說“我覺得這樣好看”、“我認(rèn)為這塊應(yīng)該用這個(gè)顏色”，卻沒有說出這個(gè)項(xiàng)目本身想要表達(dá)的是一個(gè)什么理念。
本次項(xiàng)目是需要把手機(jī)版的內(nèi)容改版成PC端，原有需求邏輯不變。那么問題來了，現(xiàn)在是一個(gè)移動互聯(lián)網(wǎng)的天下，為什么客戶卻需要將手機(jī)端的內(nèi)容移到PC上呢？因?yàn)檫@個(gè)產(chǎn)品的使用環(huán)境之一就是在工作中，試想一下，工作中一直拿著手機(jī)刷來刷去，不知道的人還以為你在劃水。考慮到用戶使用環(huán)境的因素，就需要有PC端的設(shè)計(jì)。
目標(biāo)用戶
產(chǎn)品的核心是用戶。所以一切要從用戶的角度出發(fā)，做用戶滿意的產(chǎn)品。在用戶調(diào)研這塊，常見的用戶分析有：用戶畫像、一對一訪談、問卷調(diào)查、焦點(diǎn)小組、眼動測試、測評以及埋點(diǎn)數(shù)據(jù)分析，但是項(xiàng)目型工作周期短，時(shí)間緊，沒有那么多的成本去做大量的分析，所以我們基本上采用三種方式去解決這個(gè)問題。1、與我們的客戶（甲方）去溝通，他們肯定更了解自己的用戶群體；2、通過現(xiàn)在市場上比較知名的網(wǎng)站（艾瑞網(wǎng)）中提供的大數(shù)據(jù)分析出的結(jié)果；3、如果身邊有這種用戶群體可以對他們進(jìn)行簡單訪談。通過以上三種辦法也是可以得到一個(gè)較為準(zhǔn)確的調(diào)研數(shù)據(jù)的。
在跟客戶的溝通中了解到，我們的主要用戶是基中層領(lǐng)導(dǎo)，目的為提升領(lǐng)導(dǎo)力。下面會有我對這部分人群的用戶畫像分析。
項(xiàng)目目標(biāo)
知己知彼，要了解我們此次設(shè)計(jì)的主要目的是什么？需要解決什么問題？
因?yàn)檫@已經(jīng)是一個(gè)已經(jīng)上線一年的產(chǎn)品，我在跟客戶的溝通中很明確了目前有兩大問題：第一是：如何提高完成率；第二是：國外市場用戶使用不習(xí)慣。
這兩個(gè)信息很重要，為后面的設(shè)計(jì)提供了一個(gè)明確的方向。
核心競爭力
這是體現(xiàn)我們產(chǎn)品優(yōu)勢的地方，我們需要盡量的把產(chǎn)品強(qiáng)有力的能力展現(xiàn)出來，從而獲得目標(biāo)用戶的信賴。把產(chǎn)品的能力、優(yōu)勢，可以給用戶帶來的價(jià)值，要體現(xiàn)在比價(jià)明顯一些的地方。
此次是一個(gè)本身有強(qiáng)大的體系支撐，有一個(gè)成熟的結(jié)構(gòu)，在此基礎(chǔ)上開發(fā)研制的一套產(chǎn)品，所以產(chǎn)品的目標(biāo)用戶量，獲得的成就就可以直接展示在首頁上，并且把正在學(xué)習(xí)人數(shù)或者為多少人帶來成就都體現(xiàn)出來。讓用戶感受到有這么多人都在努力，有這么多努力的人已經(jīng)完成了自己的目標(biāo)。
二、分析
我首先把手機(jī)版的功能都體驗(yàn)了一遍，隨時(shí)記錄了在使用過程中不喜歡的地方并且可以優(yōu)化的點(diǎn)，這都是點(diǎn)點(diǎn)滴滴的隨記，可以為后面設(shè)計(jì)中提供一些方向或靈感。根據(jù)上面了解到的信息。
可以得到此次設(shè)計(jì)的主要方向，第一：針對目標(biāo)用戶進(jìn)行用戶畫像分析，以此來確定如何才能更好的提升完成率；第二：針對國外同類產(chǎn)品分析，對國外市場用戶使用不習(xí)慣的了解，并且還要結(jié)合國內(nèi)市場優(yōu)化交互體驗(yàn)。
用戶畫像分析
在上面一個(gè)階段了解到我們的用戶群體是基中層領(lǐng)導(dǎo)者。根據(jù)市場數(shù)據(jù)分析，一般基中層領(lǐng)導(dǎo)者主要以男性居多，年齡大概在28-35歲之間，以需要提升領(lǐng)導(dǎo)力為目的，那么從這幾個(gè)特征中我們看出，這些人都有哪些特點(diǎn)呢？首先28-35歲的年齡段，基本上是已經(jīng)結(jié)婚的比較多，并且有很大一部分人群也有了孩子，這個(gè)年齡段的孩子還比較小，基本也是在2-6歲之間較多。對于這種類型家庭而言，無論是在工作上還是生活上都較為忙碌。并且因?yàn)槭穷I(lǐng)導(dǎo)者的原因，時(shí)間上也較為分散，一天下來沒有辦法集中去做一件事情，開會、匯報(bào)、溝通需求、分布任務(wù)等。由于不像在學(xué)校，事情太多也太雜，很多時(shí)候沒有辦法安心去做一件事情，導(dǎo)致規(guī)劃能力不強(qiáng)，需要借助平臺可以有個(gè)推力。
國外同類產(chǎn)品分析
其次是針對國外市場用戶使用不習(xí)慣這個(gè)問題，我對國外幾個(gè)大型的相關(guān)網(wǎng)站做了了解。edX、Coursera、Udacity這三個(gè)網(wǎng)站是國外市場使用較多，知名度較大的幾個(gè)網(wǎng)站。分別從內(nèi)容上和視覺上進(jìn)行分析，去了解國外市場的設(shè)計(jì)方式，用戶使用習(xí)慣等。
從以上的分析中最終得出了以下三個(gè)結(jié)論：
1、操作習(xí)慣：這個(gè)與國內(nèi)的差不多，都是從上到下，從左到右呈Z字形排列布局的方式，視覺的落腳點(diǎn)都會在畫面的左上方，所以我們在設(shè)計(jì)的時(shí)候，要把重要或者想要表達(dá)的內(nèi)容放在這個(gè)位置，使用戶進(jìn)入頁面后就可以很快看到它。
2、采用Complexion Reduction設(shè)計(jì)語言：將標(biāo)題放大，制造視覺上的沖擊力，拉開頁面的層級關(guān)系，這種設(shè)計(jì)方式也是國外較喜歡、較常用的一種設(shè)計(jì)方式。
3、視覺風(fēng)格：國外網(wǎng)站的設(shè)計(jì)整體留白較多，讓頁面更有呼吸感，頁面上幾乎沒有無用的裝飾性元素，非常簡潔，顏色使用也比較簡單，不會用過多的顏色去擾亂用戶，簡單的設(shè)計(jì)對于教育類的行業(yè)來說，可以減少視覺疲勞，讓眼睛放在有用的事物上去。
通過以上對用戶畫像和國外同類產(chǎn)品分析，總結(jié)出：我們要從多維度考慮，以優(yōu)化交互為目的讓頁面更有層次感，從而給用戶帶來輕松的體驗(yàn)感。是這次設(shè)計(jì)的核心思想。
1、從用戶的時(shí)間分散且忙碌的特點(diǎn)，得到我們需要盡量優(yōu)化交互邏輯，減少用戶學(xué)習(xí)成本，讓用戶可以快速找到自己想要的東西；并且要讓用戶在本身就較為忙碌的情況下盡量輕松的學(xué)習(xí)，不要再給用戶增加壓力。
2、通過用戶規(guī)劃能力不夠強(qiáng)的特點(diǎn)，得到我們可以給用戶定制一個(gè)“學(xué)習(xí)計(jì)劃”，幫助用戶規(guī)劃自己的學(xué)習(xí)能力，并且在學(xué)習(xí)中增加互動性，比如隨堂筆記、收藏、標(biāo)記這種小功能，隨時(shí)給用戶帶來互動，讓用戶更有參與感。
3、從國外同類產(chǎn)品分析中總結(jié)出，整體國外市場的喜好是簡潔、少裝飾、以大面積留白來增加頁面的呼吸感，采用盡量簡單的卡片式的設(shè)計(jì)方式來拉開頁面的層級關(guān)系。
三、設(shè)計(jì)
現(xiàn)在就到了設(shè)計(jì)階段了，上面了解分析了那么多，給我們設(shè)計(jì)提供了那么多基礎(chǔ)材料，這個(gè)時(shí)候就派上了用場。上面的最后提到說：我們要從維度考慮，以優(yōu)化交互為目的讓頁面更有層次感，從而給用戶帶來輕松的體驗(yàn)感。接下來我就要講述，如何在設(shè)計(jì)去運(yùn)用了。
輕松-這個(gè)很重要。
如何讓用戶在生活和工作那么繁忙的情況下，還要努力的去學(xué)習(xí)，努力的提升自己呢？所以我們這里就采用插畫的形式，插畫像是動畫片，讓我們回到了小時(shí)候，并且融入了AI人機(jī)對話，沉浸式的體驗(yàn)更是可以讓用戶在一個(gè)輕松的氛圍內(nèi)完成自己的學(xué)習(xí)。
增加互動性
原有手機(jī)端的功能缺少與用戶之間的互動，看視頻就是看視頻，做題就是做題。讓用戶在使用的時(shí)候不能按照自己的意愿去支配，這種感覺不好，一定要讓用戶有參與感，讓用戶占到主導(dǎo)性，而不是那么強(qiáng)硬的讓用戶跟著你走。所以在課程這塊的設(shè)計(jì)上第一采用了全屏的方式，讓用戶不用返回，在當(dāng)前就完成本階段的所有的課程，增加效率。第二在原有的功能上增加“課堂筆記”、“收藏”和“學(xué)習(xí)計(jì)劃”等一些小功能，讓用戶隨時(shí)按照自己的意愿去學(xué)習(xí)，實(shí)時(shí)跟產(chǎn)品進(jìn)行互動。
層次感的表達(dá)
教育類型的網(wǎng)站，頁面相對來說比較干凈、整潔一些，可以有效減少用戶視覺疲勞，避免不必要的干擾元素出現(xiàn)影響用戶的體驗(yàn)。
在本次的設(shè)計(jì)中，學(xué)習(xí)了國外同類網(wǎng)站的設(shè)計(jì)風(fēng)格，采用卡片式的方式，將元素與標(biāo)題包裹在一起，有效與其他元素進(jìn)行區(qū)分，增加投影設(shè)計(jì)，讓頁面更加有層次感和空間感。標(biāo)題上面采用了Complexion Reduction的設(shè)計(jì)語言，將標(biāo)題放大，制造視覺上的沖擊力，拉開元素之間的層級關(guān)系，豐富頁面的設(shè)計(jì)。這也是國外網(wǎng)站較喜歡的一種設(shè)計(jì)方式。
四、走查
設(shè)計(jì)完成之后，切圖交到開發(fā)手里之后，不能算就完成了，最后走查這一步很重要，要保證實(shí)現(xiàn)出來的效果跟設(shè)計(jì)稿保持一致。不然前面說的再多，設(shè)計(jì)的再炫都是白搭，實(shí)際使用的用戶可不知道你前面都做了什么，他只感受他現(xiàn)在感受到的。
我一般的方法是用Word的方式，將有問題的頁面截圖并標(biāo)記出來問題點(diǎn)，并且按照菜單進(jìn)行分類。這樣開發(fā)對照看起來就特別明確，只用文字不配圖的表達(dá)都是耍流氓，誰知道你說的是哪個(gè)頁面的哪個(gè)點(diǎn)。用Word進(jìn)行歸類最重要后面追蹤也特別容易，可以很明確看到你哪塊問題還沒有修改，不用再反復(fù)提交。
總結(jié)一下：
一般我的設(shè)計(jì)流程就是：了解-分析-設(shè)計(jì)-走查，因?yàn)椴皇钱a(chǎn)品性質(zhì)的，所以最后的迭代或者驗(yàn)證這一步驟就會不那么重要，如果是做產(chǎn)品型的后面的驗(yàn)證也會是非常重要，因?yàn)槭琼?xiàng)目型的所以這里就不多做說明。以上就是我個(gè)人在設(shè)計(jì)中的案例分析，大家有想法的可以多溝通，多交流。
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請掃碼ben_lanlan，報(bào)下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。
文章來源：站酷 作者：醬油不咸
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( m.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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ù)
「合理預(yù)設(shè)」是指系統(tǒng)提供默認(rèn)選項(xiàng)，這些默認(rèn)選項(xiàng)不需要用戶做任何操作，可以節(jié)省用戶完成表單的時(shí)間和精力。
這些默認(rèn)選項(xiàng)來的數(shù)據(jù)源包括: 先前輸入的會話數(shù)據(jù)、來自用戶帳戶的信息、當(dāng)前位置、當(dāng)前數(shù)據(jù)和時(shí)間等等。
案例 釘釘?shù)摹按k事項(xiàng)”設(shè)置功能，可以自動抓取到語句中的時(shí)間信息，自動幫助用戶默認(rèn)填寫時(shí)間，減少用戶的操作時(shí)長：
相關(guān)模式 ：語句填空
系統(tǒng)通過提供合理的默認(rèn)信息和答案，分擔(dān)了用戶思考和輸入信息的工作，減少時(shí)間，提高效率。
而就算預(yù)設(shè)信息不是用戶想要的，也為用戶提供了一個(gè)示例來說明答案應(yīng)該是什么樣子的。這一點(diǎn)也可以節(jié)約用戶幾秒的思考時(shí)間，或者避免輸入錯(cuò)誤的信息。
另外，合理的默認(rèn)值還可以幫助用戶應(yīng)對一些“難題”。如果用戶跳過了一塊字段，那么可能是這個(gè)問題沒有引起他的注意。用戶可能是不理解這個(gè)問題、或是默認(rèn)值的含義。輸入答案，選擇值，或單擊按鈕的動作會迫使用戶有意識地面對這個(gè)問題。
比如疫情期間，大部分公司都需要做健康打卡，下圖中有一些選項(xiàng)是直接填了默認(rèn)值，但是有些就沒有填。比如下圖的左圖中，有關(guān)于“請假未到崗”這些問題，因?yàn)闆]有填默認(rèn)值，用戶就會對這個(gè)問題有印象。然后比如“今日是否有發(fā)熱癥狀”，“是否有咳嗽”這些，因?yàn)楸幌到y(tǒng)默認(rèn)填了，用戶很容易就忽略過去了。
所以一些刻意希望被關(guān)注的問題，其實(shí)最好不要提供預(yù)設(shè)值，這樣可以讓用戶感知到這個(gè)重要信息的存在，進(jìn)而加深對內(nèi)容的認(rèn)知。
當(dāng)產(chǎn)品要求用戶提供類似表單的信息輸入（例如文本框或單選按鈕），并希望減少用戶填寫時(shí)長時(shí)，可以使用提供默認(rèn)設(shè)置。
但是當(dāng)問題的答案會很敏感或是與政治相關(guān)時(shí)，最好不要提供默認(rèn)值，例如密碼、性別或公民身份等。最好也不要為用戶擅自訂閱非必要的內(nèi)容信息，如“請給我發(fā)送廣告郵件”等。
使用條件
· 用戶需要做類似表單的信息輸入操作；
· 系統(tǒng)希望減少用戶需要做的工作；
· 系統(tǒng)希望確保用戶填寫的準(zhǔn)確性和一致性；
· 可能用戶并不知道或者不關(guān)心答案，不需要引起用戶的重視；
· 問題的答案不屬于敏感信息或是與政治無關(guān)。
設(shè)定「合理預(yù)設(shè)」有兩種普遍的用法：
1、使用一個(gè)通用的、常識性的、滿足大部分用戶需求的默認(rèn)值，預(yù)先填寫輸入框；
2、可以調(diào)用用戶早些時(shí)候提供給系統(tǒng)的信息來動態(tài)地設(shè)置默認(rèn)值。例如，某個(gè)用戶提供了一個(gè)中國的郵政編碼，系統(tǒng)可以從這個(gè)編碼推導(dǎo)出用戶所在的省，甚至市和區(qū)的名稱。
除此之外要注意幾點(diǎn)應(yīng)用原則：
· 使用預(yù)設(shè)的默認(rèn)值不僅僅是為了防止用戶留下空白的輸入?yún)^(qū)域；
· 要充分的了解你的用戶，默認(rèn)值的設(shè)定要有絕對合理的理由 —— 否則，系統(tǒng)會給所有人帶來額外的工作量。
用戶需求：購買服裝時(shí)需要選擇尺碼
唯品會小程序在購買服飾類選擇 SKU 時(shí)，每個(gè)尺碼點(diǎn)擊后會顯示對應(yīng)的衣服參數(shù)，用戶不再需要去商品描述中的尺碼表格中再找，也可以是設(shè)置好自己的身材數(shù)據(jù)，平臺會默認(rèn)選中適合你的尺碼。
用戶需求：需要根據(jù)表單內(nèi)容填寫和上傳文件
螞蟻鏈實(shí)人認(rèn)證在上傳證件時(shí)會根據(jù)用戶所在國家和地區(qū)，幫助用戶默認(rèn)選擇概率最大的選項(xiàng)，不需要用戶自己操作。
用戶需求：創(chuàng)建新文件，調(diào)整畫布大小
在 Photoshop CC 中創(chuàng)建新的圖像文件時(shí)，默認(rèn)情況下會從操作系統(tǒng)剪切板開始。這里的假設(shè)是用戶剛剛創(chuàng)建了一個(gè)屏幕截圖，并且正在編輯該圖像。因此，Photoshop 在剪貼板中獲取圖像的寬度和高度，并使用它們來預(yù)先填充創(chuàng)建新文件的尺寸，這是一種節(jié)省時(shí)間的聰明方法。不用擔(dān)心圖像和畫布會有尺寸不匹配的情況。
當(dāng)用戶想要調(diào)整畫布大小時(shí)，原先畫布的長寬尺寸會預(yù)設(shè)出現(xiàn)在新的畫布大小里面，方便用戶進(jìn)一步進(jìn)行尺寸調(diào)整。
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請掃碼ben_lanlan，報(bào)下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。
文章來源：站酷 作者：Ant_Design
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( m.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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://m.yvirxh.cn