首先說明，競(jìng)品調(diào)研的方法有很多，本文只提供一種方法供參考，建議大家活學(xué)活用。
建議從下面4個(gè)方面入手：
1）調(diào)研背景
主要說一些為什么要調(diào)研，希望通過調(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)研目的來確定，例如如果是為了視覺升級(jí)，那么調(diào)研維度主要就集中在視覺效果上，如果是體驗(yàn)升級(jí)，那么調(diào)研維度主要集中在交互體驗(yàn)層面。
所以維度的選擇一定是和此次調(diào)研的目的緊密相關(guān)的，不過，倒也不是說如果是視覺升級(jí)就只調(diào)研視覺方面的內(nèi)容，而是咱們要有一個(gè)主要的調(diào)研方向，啥都想要，最后啥都做不好。
4）結(jié)論
結(jié)論是最重要的，畢竟，做這次的調(diào)研不就是為了這份結(jié)論嗎？所以最后一定要有結(jié)論，也就是咱們通過調(diào)研得到了什么結(jié)論。
我公司這個(gè)項(xiàng)目是做一個(gè)官網(wǎng)的改版，官網(wǎng)主要就改版主要目標(biāo)有兩個(gè)：
第一個(gè)目標(biāo)是視覺體驗(yàn)升級(jí)，拆解下來就是界面更好看，內(nèi)容更好找。
第二個(gè)目標(biāo)是提升用戶轉(zhuǎn)化率，更細(xì)致的拆解一下就是讓更多的用戶點(diǎn)擊【咨詢】按鈕。
可以得到關(guān)鍵詞：界面更好看、內(nèi)容更好找、咨詢客服的人數(shù)更多。
好，咱們繼續(xù)，下一步是找樣本。
前面提到過，樣本最好是直接競(jìng)品+間接競(jìng)品（主要是一線大廠競(jìng)品）。
所以這次調(diào)研我選擇了幾個(gè)直接競(jìng)品的官網(wǎng)，以及華為、飛書等這樣的做的比較優(yōu)秀的產(chǎn)品進(jìn)行輔助分析。
調(diào)研維度又可以分為兩大部分：整體結(jié)構(gòu)、內(nèi)容拆解。
了解整體架構(gòu)是每個(gè)競(jìng)品調(diào)研都離不開的步驟，可以幫助我們快速了解行業(yè)內(nèi)的通識(shí)性做法，畢竟站在巨人的肩膀上才能看得更遠(yuǎn)嘛。
1）整體架構(gòu)
我當(dāng)時(shí)的做法是把主要競(jìng)品的官網(wǎng)都截圖下來，然后一個(gè)模塊一個(gè)模塊的去分析，其實(shí)看下來你會(huì)發(fā)現(xiàn)，大家的做法都是有跡可循的。
看下面的圖片，我把他們類似的模塊用同樣的顏色框出來，框出來后就會(huì)發(fā)現(xiàn)，哦，原來，這就是行業(yè)內(nèi)的通識(shí)性做法。
然后我把這種通識(shí)性做法歸納總結(jié)出來，發(fā)現(xiàn)，其實(shí)官網(wǎng)首頁可以劃分為四大板塊：
你看，看似有很多復(fù)雜內(nèi)容的官網(wǎng)， 其實(shí)也就這幾個(gè)模塊，這樣看是不是就清晰多了。
既然咱們通過架構(gòu)梳理來了官網(wǎng)的內(nèi)容，下一步就進(jìn)行內(nèi)容的拆解了，拆解什么內(nèi)容？就是拆解上面總結(jié)出來的規(guī)律呀。
2）內(nèi)容拆解
為啥要拆解內(nèi)容呢？
因?yàn)樵蹅兏?jìng)品分析的目的不就是要做到“人有我優(yōu)”嘛，咱們競(jìng)品分析是為了青出于藍(lán)而勝于藍(lán)呀，所以咱們不能直接抄人家的內(nèi)容，這是無效設(shè)計(jì)，咱們要做的是分析他們的優(yōu)點(diǎn)，然后借鑒，然后超越。
進(jìn)行內(nèi)容拆解的時(shí)候，建議先定幾個(gè)拆解維度，不然會(huì)沒有方向，這里我分了三個(gè)維度來進(jìn)行拆解：
我就拿【建立認(rèn)知】板塊來舉例。
官網(wǎng)首頁的建立認(rèn)知是什么？
是讓進(jìn)來的用戶對(duì)整個(gè)網(wǎng)站有一個(gè)基礎(chǔ)的認(rèn)知，顧客來了，對(duì)店鋪總要有一個(gè)第一印象吧。
通過前面的架構(gòu)拆解我們發(fā)現(xiàn)，首頁一般使用4種方法來對(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)知的過程。
那么咱們?nèi)绾稳シ治瞿兀?br />
我的做法是一個(gè)個(gè)板塊分析，有些麻煩啊，但是相信我，值得。
下面我就拿建立認(rèn)知里面的“產(chǎn)品介紹”來舉例子，看看如何去分析產(chǎn)品介紹這個(gè)板塊。
使用3個(gè)維度來分析：
維度1：用戶訴求（用戶進(jìn)來之后的訴求）
產(chǎn)品介紹內(nèi)容是否有我需要的產(chǎn)品和功能？是否滿足我的需求？
維度2：業(yè)務(wù)策略（針對(duì)用戶訴求，業(yè)務(wù)是怎么解決的）
講清楚三個(gè)問題，即“我們的產(chǎn)品是什么”、“我們能做什么”、“我們有什么優(yōu)勢(shì)“
維度3：常用表達(dá)形式（用什么樣的表達(dá)方式來實(shí)現(xiàn)策略）
拆解下來，是不是對(duì)產(chǎn)品介紹板塊很了解了，產(chǎn)品介紹板塊主要的目的就是為了講清楚咱們是誰，咱們的優(yōu)勢(shì)啊。王婆賣瓜，瓜雖好，但是咱們得讓來的人知道咱們的瓜好呀，所以表達(dá)方式也是至關(guān)重要的，用什么形式去表達(dá)這個(gè)板塊呢？其實(shí)競(jìng)品已經(jīng)有了很好的解決方案，那就是上面描述的。
你看，這樣一通分析，其實(shí)你的方案就自然而出來了，你知道往哪個(gè)方向去使勁了，而不是看別人有啥咱們就做啥。
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(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)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( ssll180.com )是一家專注而深入的界面設(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ù)、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í)說話，更愿意以數(shù)據(jù)講話。數(shù)據(jù)作為結(jié)果的直接衡量指標(biāo)，更真實(shí)、也更具有說服力，那如何直觀的展示數(shù)據(jù)，幫助決策者做出正確決策或行動(dòng)，發(fā)揮數(shù)據(jù)最大的價(jià)值？可視化數(shù)據(jù)大屏應(yīng)運(yùn)而生，讓我們一起來談?wù)劙?
說到數(shù)據(jù)大屏的時(shí)候，我們要先了解一下數(shù)據(jù)可視化，那什么叫做數(shù)據(jù)可視化呢？比較專業(yè)的解釋是利用計(jì)算機(jī)圖形學(xué)和圖像處理技術(shù)，將數(shù)據(jù)轉(zhuǎn)換成圖形或圖像在屏幕上顯示出來，并進(jìn)行交互處理的一種理論、方法和技術(shù)，它為我們研究、處理、分析數(shù)據(jù)提供了理論依據(jù)。
我們?nèi)说拇竽X處理視覺信息的速度比文字快幾萬倍，將抽象的數(shù)據(jù)轉(zhuǎn)化成圖表、圖形能更快速幫助我們更快理解數(shù)據(jù)中的含義，趨勢(shì)以及相關(guān)性。
簡(jiǎn)單來說，可視化數(shù)據(jù)大屏，將我們難以理解的抽象的數(shù)據(jù)概念以圖形化的形式展現(xiàn)，方便我們快速理解這些數(shù)據(jù)的含義，也方便這些重要的信息在最短的時(shí)間內(nèi)傳給最重要的人。
數(shù)據(jù)大屏可分為信息展示類、數(shù)據(jù)分析類、監(jiān)控預(yù)警類，多展示酷炫的效果，數(shù)據(jù)之間有層次區(qū)分，好的數(shù)據(jù)大屏是布局、色彩、圖表、動(dòng)效的綜合運(yùn)用。
數(shù)據(jù)可視化，讓很多員工從繁瑣復(fù)雜的數(shù)據(jù)工作中解脫過來，那它到底有什么優(yōu)點(diǎn)呢？
近幾年來，國家的相關(guān)法律政策相繼出臺(tái)，大數(shù)據(jù)企業(yè)的技術(shù)研發(fā)水平不斷提高，促使大數(shù)據(jù)行業(yè)市場(chǎng)規(guī)模從 2014 年的 212.5 億元增長(zhǎng)至 2020 年的 548.5 億元，數(shù)據(jù)可視化對(duì)于公司發(fā)現(xiàn)解鎖數(shù)據(jù)潛在價(jià)值意義重大。
有研究表明，人類可以用比處理文字快60000倍的速度來處理圖像，可視化能直觀呈現(xiàn)大量數(shù)據(jù)，以前企業(yè)員工檢測(cè)到數(shù)據(jù)進(jìn)行匯總分析需要數(shù)小時(shí)，可視化通過特定的格式來呈現(xiàn)大量數(shù)據(jù)幾乎不費(fèi)時(shí)間。
視覺形式的數(shù)據(jù)更易理解，數(shù)據(jù)可視化能快速顯示操作、運(yùn)營與結(jié)果之間的關(guān)系。企業(yè)管理不是憑空作決定，正確的方式應(yīng)該是，依據(jù)所獲得的數(shù)據(jù)信息來做輔助分析，數(shù)據(jù)可視化內(nèi)容能讓管理人員和決策者清楚看清數(shù)據(jù)趨勢(shì)，快速制定及消化關(guān)鍵指標(biāo)。
比如當(dāng)上圖科學(xué)決策平臺(tái)的網(wǎng)絡(luò)總數(shù)特別時(shí)多，決策者可以快速調(diào)取相關(guān)數(shù)據(jù)找出異常原因 —— 是上次活動(dòng)運(yùn)營推廣到位，故增加了很多用戶？也就是決策者可以通過異常數(shù)據(jù)快速鉆取數(shù)據(jù)，用來解釋正在發(fā)揮作用的運(yùn)營條件或決策與所遇到的指標(biāo)之間的關(guān)系。
根據(jù)Aberdeen報(bào)告收集的信息，利用數(shù)據(jù)可視化的組織能夠及時(shí)訪問信息的可能性比其他組織高28％。數(shù)據(jù)可視化有助于我們以客戶和投資者能理解的方式向他們提供信息，它比PPT更容易讓人理解，也能吸引那些對(duì)企業(yè)內(nèi)容運(yùn)作了解甚少的人。
比如上方的區(qū)域經(jīng)濟(jì)地圖，通過地圖與定位街道區(qū)域內(nèi)容、顏色結(jié)合的展示樣式，很容易看出各街道產(chǎn)值、稅收等，也更有場(chǎng)景感；居民可支配收入版塊，通過顏色區(qū)分、大小圓形、時(shí)間線來直觀展示居民收入變化內(nèi)容，形象且清晰。
制作數(shù)據(jù)可視化的工具有很多，最常見的就是Excel工具，非常容易上手，基本人人都會(huì)，操作簡(jiǎn)單，但它的缺點(diǎn)也很明顯，沒什么特色，靜態(tài)數(shù)據(jù)展示過于死板，樣式老舊。第二類是Python等編程類工具，這類優(yōu)點(diǎn)是碼數(shù)據(jù)速度快，自動(dòng)獲取，看起來很高端，但缺點(diǎn)也很明顯，如：學(xué)習(xí)成本高、學(xué)習(xí)比較困難、很難比較熟練的掌握等。
第三類就是SAAS類可視化工具，這類工具容易上手，操作簡(jiǎn)單、動(dòng)態(tài)數(shù)據(jù)自動(dòng)獲取、動(dòng)態(tài)效果無敵炫酷，不需要下載安裝，缺點(diǎn)就是部分渲染組件比較耗費(fèi)電腦配置。那我們今天就來推薦幾款常用的SAAS工具。
網(wǎng)易有數(shù)大數(shù)據(jù)是一個(gè)企業(yè)級(jí)的大屏大數(shù)據(jù)可視化展示系統(tǒng)平臺(tái)，具有深度的交互式數(shù)據(jù)探索。它有豐富的使用場(chǎng)景，支持?jǐn)?shù)據(jù)接入、數(shù)據(jù)導(dǎo)入處理、數(shù)據(jù)分析生成報(bào)告等，用戶無需編程，簡(jiǎn)單拖拽即可生成可視化圖表。缺點(diǎn)是數(shù)據(jù)探索性分析能力有限。
網(wǎng)易有數(shù)可視化實(shí)戰(zhàn)案例——業(yè)務(wù)安全大屏。通過大屏進(jìn)行業(yè)務(wù)安全監(jiān)控，清晰的展示各業(yè)務(wù)分布要點(diǎn)的數(shù)據(jù)情況，頂部實(shí)時(shí)更新各重要區(qū)域數(shù)據(jù)情況，銷量對(duì)比、售后情況，產(chǎn)品產(chǎn)比，以及用戶分布也有清晰的直觀展示。
FineBI作為一款商業(yè)智能（BI）軟件，擁有豐富的報(bào)表編輯和數(shù)據(jù)分析功能，同時(shí)它也支持可視化大屏的編輯。決策報(bào)表采用了畫布式操作界面，通過拖拉拽可以想成一個(gè)強(qiáng)大的、全面的可視化大屏，能實(shí)現(xiàn)在一個(gè)頁面整合不同的數(shù)據(jù)，完美的展示各類業(yè)務(wù)指標(biāo)，實(shí)現(xiàn)數(shù)據(jù)多維度分析。缺點(diǎn)是大屏組件不夠豐富，開發(fā)拓展性不強(qiáng)，不支持云端托管等。
帆軟可視化實(shí)戰(zhàn)案例——銀行大屏駕駛艙。通過大屏直觀展示銀行存款、貸款數(shù)據(jù)，業(yè)務(wù)辦理詳情等，圖表形式展示內(nèi)部管理、外部管理情況，分行放貸統(tǒng)計(jì)情況等，便于數(shù)據(jù)管理查看及決策制定參考。
Data V是阿里云內(nèi)部的可視化大屏開發(fā)平臺(tái)，同時(shí)面向開發(fā)者和零基礎(chǔ)用戶，支持大屏圖形化編輯和在線編程開發(fā)，可幫助非專業(yè)的工程師通過圖形化的界面搭建專業(yè)水準(zhǔn)的可視化應(yīng)用。
它有海量行業(yè)模板，DataV數(shù)據(jù)可視化設(shè)計(jì)團(tuán)隊(duì)會(huì)定期從大量真實(shí)項(xiàng)目中尋找優(yōu)質(zhì)場(chǎng)景，制作為模板，涵蓋媒體、零售、工業(yè)、電商、金融、防疫、氣象等多個(gè)行業(yè)，為用戶提供會(huì)議展覽、業(yè)務(wù)監(jiān)控、風(fēng)險(xiǎn)預(yù)警、地理信息分析等各種設(shè)計(jì)參考。
產(chǎn)品功能方面，它有豐富的可視化編輯工具，提供多種業(yè)務(wù)模塊級(jí)的非圖表組件，只要通過拖拉拽便可創(chuàng)造出專業(yè)的可視化應(yīng)用，另外豐富的組件庫與模板庫包含多種場(chǎng)景模板，簡(jiǎn)單修改即可快速投入使用。智能化工具擁有主題配色，一鍵美化、大屏智能生成等工具，快速解決在搭建可視化應(yīng)用時(shí)遇到的整體樣式配置困難。專業(yè)的地理信息可視化，支持地理軌跡、飛線、熱力分布、3D地球等效果，同時(shí)數(shù)據(jù)驅(qū)動(dòng)三維世界生成，低代碼交互配置將復(fù)雜邏輯可視化呈現(xiàn)，整體效果更炫酷。它還有靈活開放的部署方式，支持多種發(fā)布方式，如：鏈接分享、二維碼發(fā)布；支持自定義組件接入；支持云上部署，也支持線上開發(fā)。
DataV數(shù)據(jù)可視化實(shí)戰(zhàn)案例——智慧工廠生產(chǎn)控制大屏，綜合呈現(xiàn)了每個(gè)生產(chǎn)階段的生產(chǎn)狀態(tài)參數(shù)，將整個(gè)車間的情況匯總到一個(gè)調(diào)度控制中心，方便管理人員了解各階段的工作情況。
袋鼠云數(shù)據(jù)可視化EAsyV，擁有業(yè)內(nèi)領(lǐng)先的數(shù)據(jù)可視化大屏故事策劃、視覺設(shè)計(jì)、前端和數(shù)據(jù)開發(fā)技術(shù)實(shí)力，尤其擅長(zhǎng)3D模型展示，基于GIS地理信息展示等。它里面有豐富的組件，樣式制作精美，支持多種不同類型的數(shù)據(jù)導(dǎo)入，還有動(dòng)態(tài)面板和交互功能，讓大屏看起來更靈動(dòng)。
EasyV數(shù)據(jù)可視化實(shí)戰(zhàn)案例——寧波圖書館可視化平臺(tái)。大屏包含人流分析監(jiān)測(cè)、讀者畫像分析、借閱行為洞察等，從多角度全面的幫助用戶及時(shí)把握?qǐng)鲳^運(yùn)營效果，為其提供館內(nèi)建設(shè)與活動(dòng)運(yùn)營的監(jiān)控分析服務(wù)。
深色的大屏設(shè)計(jì)能讓其數(shù)據(jù)顯示更明顯，也方便營造科技感，另外大屏設(shè)計(jì)圖表文字的顏色要統(tǒng)一，避免出挑的內(nèi)容分散用戶注意力，使用圖片或者是動(dòng)態(tài)的背景，也可以讓大屏更有氛圍感。那除了這些，好的大屏還有哪些特質(zhì)呢？
首先是策劃有故事。從客戶的真實(shí)需求去梳理數(shù)據(jù)可視化內(nèi)部的視覺傳達(dá)，確保內(nèi)容傳達(dá)克制有條理，有重點(diǎn)、有故事。盡可能讓用戶花費(fèi)更少的時(shí)間獲取更多信息，完成數(shù)據(jù)空間到圖形空間的映射，讓數(shù)據(jù)的價(jià)值被看見。
如上方的品牌銷售數(shù)據(jù)大屏，銷售額與門店數(shù)，數(shù)據(jù)明顯，與銷售額相關(guān)內(nèi)容有季度線上線下銷售額，會(huì)員數(shù)、款式數(shù)量、爆款排行等，故這塊內(nèi)容排在左側(cè)。右側(cè)就是區(qū)域訂單、毛利統(tǒng)計(jì)。中間放用戶關(guān)心的地圖區(qū)域分布、爆款分析等內(nèi)容。
其次是可視化要有效率。通過工具軟件，數(shù)據(jù)可視化變得更簡(jiǎn)單高效，變得靈活易實(shí)現(xiàn)，多端適配，加入組件化的拖拉拽操作，加入了多種交互和遠(yuǎn)程控制，能有效率的實(shí)現(xiàn)海量數(shù)據(jù)實(shí)時(shí)同步，實(shí)現(xiàn)高效率、高質(zhì)量大屏交付。
最后是大屏要有數(shù)據(jù)價(jià)值。數(shù)據(jù)可視化最重要的還是要落實(shí)到數(shù)據(jù)上，脫離數(shù)據(jù)談美觀是不切實(shí)際的空想，數(shù)據(jù)可視化就是要充分利用并方大數(shù)據(jù)的價(jià)值，保證數(shù)據(jù)實(shí)時(shí)、全域、精準(zhǔn)、讓數(shù)據(jù)講話。
設(shè)計(jì)可視化數(shù)據(jù)大屏?xí)r我們?cè)O(shè)計(jì)師要抓住問題的重點(diǎn)，即這樣設(shè)計(jì)出來的內(nèi)容能不能真的讓數(shù)據(jù)產(chǎn)生價(jià)值，能否經(jīng)得起業(yè)務(wù)部門推敲？是否為企業(yè)經(jīng)營提供了幫助？思考完這些再去做的大屏更有價(jià)值，大屏做的酷炫是其次，能夠讓人一目了然的看見關(guān)鍵信息，聯(lián)想到業(yè)務(wù)實(shí)際，才是我們?cè)O(shè)計(jì)師最需要關(guān)注的方向。
文章來源：站酷 作者：知果日記YRrui
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( ssll180.com )是一家專注而深入的界面設(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ù)
費(fèi)茨定律(Fitts'sLw)是一個(gè)描述人類運(yùn)行學(xué)的經(jīng)驗(yàn)公式，用于計(jì)算人們移動(dòng)手指或鼠標(biāo)等設(shè)備到某個(gè)目標(biāo)的時(shí)間，以考慮目標(biāo)大小和距離為主。
費(fèi)茨定律的公式是T=a+blog2(D/S+1)，其中T是時(shí)間，a和b是實(shí)驗(yàn)測(cè)得的常數(shù)，D是目標(biāo)的距離，S是目標(biāo)的大小。說明了在給定目標(biāo)情況下，目標(biāo)距離越遠(yuǎn)，需要的時(shí)間越長(zhǎng)；在給定距離的情況下，目標(biāo)越小，需要的時(shí)間越長(zhǎng)。
費(fèi)茨定律廣泛地用于人機(jī)交互界面設(shè)計(jì)中，例如在B端常用的設(shè)計(jì)按鈕上，可根據(jù)該定律來選擇適當(dāng)?shù)哪繕?biāo)大小和間距，以使用戶更好地達(dá)到業(yè)務(wù)目標(biāo)。
比如在B端產(chǎn)品彈窗界面設(shè)計(jì)中，確定和取消按鈕都會(huì)放在右下角，使得用戶更容易點(diǎn)擊。確定按鈕更高頻故放在最右邊，視覺表現(xiàn)更明顯，使其更容易一眼點(diǎn)擊。此外，兩個(gè)按鈕之間的距離也很重要，因?yàn)樗鼤?huì)影響到用戶的點(diǎn)擊時(shí)間，為了讓用戶更容易進(jìn)行選擇，按 鈕間保持12px距離，避免用戶誤觸。
1956年美國心理學(xué)家喬治·米勒對(duì)短時(shí)記憶能力進(jìn)行了定量研究，他發(fā)現(xiàn)人的短時(shí)記憶能力廣度為7±2個(gè)信息塊，記憶信息超過了該范圍就容易出錯(cuò)。因此心理學(xué)家把這個(gè)神奇的記憶容量規(guī)律稱為“7±2法則”。 在人機(jī)交互設(shè)計(jì)界面中，如果要引入新的元素或操作，應(yīng)該盡可能地減少其數(shù)量和復(fù)雜性，以便用戶更容易理解和記憶。
比如在B端卡片設(shè)計(jì)中的操作按鈕一般會(huì)控制在7-2法則即5個(gè)操作按鈕，若有其它操作會(huì)隱藏在更多按鈕里面，把頻次較高的按鈕放在一級(jí)展示中，頻次較少的按鈕放在二級(jí)浮窗展示中。通過分解復(fù)雜的任務(wù)和信息，減少冗余內(nèi)容使得用戶更容易理解且更快完成業(yè)務(wù)過程。
格式塔原理是心理學(xué)的一個(gè)概念，也廣泛應(yīng)用于設(shè)計(jì)領(lǐng)域中。該原理認(rèn)為人類大腦在處理感知信息時(shí)，會(huì)自動(dòng)將信息組織成具有整體性、完整性和結(jié)構(gòu)性的形態(tài)，即所謂的“格式塔”。
在設(shè)計(jì)中，格式塔原理有幾個(gè)常見應(yīng)用：
1.相似性原則：相似的事物更容易被視為一組，與不同的事物分離。因此，設(shè)計(jì)師可以使用相似的顏色、形狀、大小等元素來將相關(guān)的信息組織在一起，提高信息的可讀性和易用性。
2.接近性原則：接近的事物更容易被視為一組，與遠(yuǎn)離的事物分離。因此，設(shè)計(jì)師可以使用空間布局來將相關(guān)的信息組織在一起，提高信息的可讀性和易用性。
3.對(duì)稱性原則：人類大腦喜歡對(duì)稱和平衡的形態(tài)。因此，設(shè)計(jì)師可以使用對(duì)稱的布局來吸引用戶的注意力，提高視覺吸引力和美感。
4.閉合性原則：人類大腦傾向于將不完整的形狀視為完整的形狀。因此，設(shè)計(jì)師可以使用封閉的形狀來強(qiáng)調(diào)信息，使用戶更容易理解和記憶。
相似性原則的應(yīng)用比如在B端的卡片設(shè)計(jì)中，所有的卡片樣式相似在人腦理解中默認(rèn)會(huì)視為相同的一組數(shù)據(jù)。
接近性原則比如在B端的表單設(shè)計(jì)中，常常會(huì)將一組數(shù)據(jù)通過接近性原則組織在一起，提高信息易讀性。
對(duì)稱性原則常用在大屏與報(bào)表設(shè)計(jì)中，通過對(duì)稱性布局提高視覺美感，吸引用戶注意力。
閉合性原則常用于連續(xù)性表格或圖形等設(shè)計(jì)中，通過不連續(xù)性來讓用戶大腦形成封閉路徑強(qiáng)調(diào)后續(xù)可讀信息。
比如在下面的表格中通過形狀的不連續(xù)性反而讓用戶大腦更快感知到還有信息可以滾動(dòng)查看。
雅各布定律(Jacob'sLaw)是一條常被引用的交互設(shè)計(jì)法則，它由美國心理學(xué)家Donald Norman提出。該定律指出，人們?cè)谑褂萌魏涡孪到y(tǒng)時(shí)，都會(huì)將他們以前所經(jīng)驗(yàn)過的類似系統(tǒng)的知識(shí)應(yīng)用于新系統(tǒng)。
雅各布定律的核心思想是，在設(shè)計(jì)新系統(tǒng)時(shí)，應(yīng)該考慮到用戶的現(xiàn)有經(jīng)驗(yàn)和期望，并盡量避免創(chuàng)造完全不同的界面模式。這樣可以使用戶更容易理解和掌握新系統(tǒng)，并減少學(xué)習(xí)成本。
比如在B端設(shè)計(jì)中常用到的圖表編輯快鍵可以延用用戶在其他系統(tǒng)常用到的快捷鍵，如win或mac系統(tǒng)都常用到的快捷指令可復(fù)用到B端產(chǎn)品的快捷操作中。
防錯(cuò)原則(Principle of Fail--Safe or Fault-Tolerance)是一種設(shè)計(jì)思想，其目的是減少或避免因錯(cuò)誤或故障而導(dǎo)致的不良后果。它通常被用于設(shè)計(jì)高度可靠的系統(tǒng)或設(shè)備，以確保在錯(cuò)誤事故發(fā)生時(shí)，系統(tǒng)或設(shè)備仍然能夠繼續(xù)正常運(yùn)行，或者能夠平穩(wěn)地停止運(yùn)行，以避免進(jìn)一步的損害或危險(xiǎn)。
在界面設(shè)計(jì)中如設(shè)計(jì)可撤銷操作，通過系統(tǒng)中允許用戶執(zhí)行可撤銷操作，以避免因誤操作而導(dǎo)致的不良后果。
或在界面設(shè)計(jì)中常用到的反饋和提醒彈窗等操作，以幫助用戶及時(shí)發(fā)現(xiàn)錯(cuò)誤或故障，并采取適當(dāng)?shù)拇胧?
泰思勒基本定律(Tesler’sLaw)由Larry Tesler于l984年明確提出，也稱 「復(fù)雜性質(zhì)量守恒」。
該基本定律覺得：該定律認(rèn)為每一個(gè)過程都有其固定的復(fù)雜性，存在一個(gè)臨界點(diǎn)，超過這個(gè)點(diǎn)過程就不能再簡(jiǎn)化了，你只能將固有的復(fù)雜性從一個(gè)地方移動(dòng)到另外一個(gè)地方。
可以通過簡(jiǎn)約至上的隱藏、轉(zhuǎn)移、刪除等原則進(jìn)行用戶體驗(yàn)的提升。
早在14世紀(jì)，哲學(xué)家、圣方濟(jì)各會(huì)修士奧卡姆的威廉提出來了奧卡姆剃刀原理，這個(gè)原理說的是“切勿浪費(fèi)較多東西去做較少的東西同樣可以做好的事情”，后來以一種更為廣泛的形式被人們知曉“如無必要，勿增實(shí)體”。
奧卡姆剃刀常用于兩種假說的取舍上：如果對(duì)于同一現(xiàn)象有兩種不同的假說，我們應(yīng)該采取比較簡(jiǎn)單的那一種。對(duì)于幾個(gè)功能相同的設(shè)計(jì)，在設(shè)計(jì)都可用的情況下，則選擇視覺干擾較少的設(shè)計(jì)。
在設(shè)計(jì)上則能夠指導(dǎo)我們對(duì)產(chǎn)品做減法，去減少不必要的元素，在進(jìn)行設(shè)計(jì)的時(shí)候，先分析用戶的的主流程是什么，流程內(nèi)的引導(dǎo)盡量弱化，沒有必要?jiǎng)t不增加。
比如在B端產(chǎn)品設(shè)計(jì)中的登錄頁面以登錄流程為核心，不需要增加其它沒必要的流程。
除了以上七大定律外，也有尼爾森的10大設(shè)計(jì)原則，與以上定律基本一致。總而言之，交互設(shè)計(jì)規(guī)律的宗旨都是幫助設(shè)計(jì)師創(chuàng)造易用、高效、愉悅的用戶體驗(yàn)。在B端產(chǎn)品設(shè)計(jì)中，將交互定律貫穿于產(chǎn)品設(shè)計(jì)中可以提升產(chǎn)品易用性，降低學(xué)習(xí)成本，使產(chǎn)品更規(guī)范，對(duì)企業(yè)用戶的工作效率與商業(yè)價(jià)值都有積極的影響
文章來源：優(yōu)設(shè)網(wǎng) 作者：麗創(chuàng)輕文
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( ssll180.com )是一家專注而深入的界面設(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ù)
六、B端C化未來的設(shè)計(jì)方向
文章來源：優(yōu)設(shè)網(wǎng) 作者：酷家樂UED
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( ssll180.com )是一家專注而深入的界面設(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ì)師同學(xué)都接觸過B端產(chǎn)品，對(duì)于很多設(shè)計(jì)師而言，遇上B端產(chǎn)品是一件令人又愛又恨的事情，愛是因?yàn)槟壳笆袌?chǎng)上大多數(shù)的公司主要經(jīng)營的都是B端系統(tǒng)，B端系統(tǒng)相對(duì)于C端來說UI界面顯得并沒有那么的重要，所以設(shè)計(jì)師的責(zé)任也相對(duì)沒有那么重，而恨是因?yàn)槟壳按蠖鄶?shù)B端系統(tǒng)頁面都是由前端UI框架搭建的，前端同學(xué)很多時(shí)候直接套用組件即可，所以UI設(shè)計(jì)師對(duì)于整個(gè)系統(tǒng)來講也顯得可有可無，導(dǎo)致設(shè)計(jì)師話語權(quán)也特別的低，甚至有些做B端系統(tǒng)的公司壓根不用UI設(shè)計(jì)師也能完成項(xiàng)目開發(fā)。
但是作為交互設(shè)計(jì)師(小公司一般是產(chǎn)品經(jīng)理)在B端卻特別吃香，并且擁有主要的話語權(quán)，因?yàn)槲覀冎鲗?dǎo)這整個(gè)系統(tǒng)的基礎(chǔ)邏輯與業(yè)務(wù)邏輯設(shè)計(jì)，所以無論是前端還是后端同學(xué)都需要根據(jù)我們的設(shè)計(jì)進(jìn)行開發(fā)，最終完成整個(gè)系統(tǒng)。
因此，今天這篇文章并不是告訴大家有哪些前端UI框架或后臺(tái)組件等..（相信這些大家也看得太多了，工作中都是套框架，能用得上的沒幾個(gè)），而是從交互上如何去看懂B端后臺(tái)的基礎(chǔ)邏輯以及以后自己晉升成產(chǎn)品經(jīng)理或者交互設(shè)計(jì)師時(shí)，怎樣去設(shè)計(jì)一個(gè)完整閉環(huán)的系統(tǒng)。
B端產(chǎn)品和C端不同，C端產(chǎn)品大多數(shù)都是針對(duì)個(gè)人用戶，設(shè)計(jì)的關(guān)系結(jié)構(gòu)相對(duì)來說比較簡(jiǎn)單，每一個(gè)用戶擁有的權(quán)限都是一樣的，例如微信、淘寶等，我能看到的頁面你都能看得到，很少不存在權(quán)限差異問題。
而B端產(chǎn)品的用戶一般都是企業(yè)，企業(yè)用戶一般會(huì)管理著多個(gè)角色，也就是角色多元化（例如一些校園系統(tǒng)角色就分為：普通教師、級(jí)長(zhǎng)、主任等角色），不同的角色對(duì)系統(tǒng)的需求和職能也不一樣，我們需要根據(jù)角色的需求去劃分不同的權(quán)限，讓他們互不干擾但又滿足他們的需求問題，因此B端產(chǎn)品的基礎(chǔ)邏輯比C端產(chǎn)品相對(duì)復(fù)雜。
看完上面文字的同學(xué)可能蒙了，又角色又權(quán)限的，能不能說點(diǎn)人話？
行！其實(shí)很簡(jiǎn)單，B端系統(tǒng)無非三個(gè)邏輯（也是三個(gè)頁面）：用戶管理、角色管理以及菜單管理。（有些系統(tǒng)因?yàn)闃I(yè)務(wù)需求可能有部門管理，那么算上部門管理就四個(gè)）
為什么我把菜單放到最前面跟大家講？是因?yàn)椴藛喂芾肀惹懊鎯蓚€(gè)相對(duì)簡(jiǎn)單，而什么是菜單也特別好解釋，大家可以直接認(rèn)為系統(tǒng)左側(cè)的頁面列表就是菜單，系統(tǒng)中擁有多少個(gè)頁面那么就有多少個(gè)菜單，你的菜單越多就以為著你的權(quán)限就越多。
菜單管理的作用就是用于管理員對(duì)整個(gè)系統(tǒng)頁面的管理（管理最主要就是增刪改查），而有一些公司為了減少開發(fā)工作量會(huì)直接不要菜單管理，有多少個(gè)頁面都由代碼直接寫死，管理員不能通過頁面進(jìn)行人工配置，這樣會(huì)導(dǎo)致以后擴(kuò)展會(huì)非常麻煩，當(dāng)然了，有一些系統(tǒng)的菜單幾乎不改的話，代碼寫死也沒問題。
在講解用戶之前我需要提前跟大家講一下什么是權(quán)限，準(zhǔn)確來講應(yīng)該是權(quán)限分為哪些？
在目前的后臺(tái)系統(tǒng)中，權(quán)限一共分為三種權(quán)限，分別是菜單權(quán)限（也就是上面介紹的）、數(shù)據(jù)權(quán)限以及操作權(quán)限。
菜單權(quán)限決定了用戶有沒有這個(gè)頁面，例如學(xué)校系統(tǒng)中，主任有看到所有教師的教學(xué)數(shù)據(jù)的界面，而教師卻沒有這個(gè)功能，那么在給主任新增賬號(hào)的時(shí)候就應(yīng)該把對(duì)應(yīng)菜單賦予進(jìn)去。看上去很復(fù)雜，其實(shí)具體操作就是新增的時(shí)候把對(duì)應(yīng)的菜單勾選上就可以了。
數(shù)據(jù)權(quán)限則決定用戶能不能看到對(duì)應(yīng)的數(shù)據(jù)。還是學(xué)校系統(tǒng)的例子，初中部主任只能看到初中部所有教師的教學(xué)數(shù)據(jù)，而高中部主任也只能看到高中部教師的教學(xué)數(shù)據(jù)，不同用戶能看到的數(shù)據(jù)也是不同的，所以在新增的時(shí)候需要給用戶配置（一般配置就是勾選）好對(duì)應(yīng)的數(shù)據(jù)權(quán)限。
但是這里有一個(gè)問題，配置數(shù)據(jù)權(quán)限時(shí)我們?nèi)绻粋€(gè)一個(gè)人去勾選配置的話會(huì)特別的麻煩，假如初中部主任只能看到初中部的老師，那么我在給他配置賬號(hào)的時(shí)候需要一個(gè)一個(gè)的初中老師勾選上，張三、李四、王五..等等，如果人多的話可能需要勾選成百上千次，用戶體驗(yàn)就會(huì)變得特別差，因此現(xiàn)在的系統(tǒng)在配置數(shù)據(jù)權(quán)限時(shí)都是以部門為單位進(jìn)行配置，也就是說，直接選擇部門就代表著擁有整個(gè)部門的數(shù)據(jù)權(quán)限。
最后操作權(quán)限即決定了用戶有沒有對(duì)數(shù)據(jù)進(jìn)行操作（一般是增刪改查）的功能。還是上面的例子，初中部主任擁有查看教師的頁面以及數(shù)據(jù)，那么他能不能對(duì)教師們的數(shù)據(jù)進(jìn)行增刪改查或者導(dǎo)入導(dǎo)出呢？這就取決于操作權(quán)限的配置了。目前很多的后臺(tái)系統(tǒng)在配置菜單權(quán)限的時(shí)候同時(shí)需要把操作權(quán)限進(jìn)行配置（因?yàn)橹荒芟扔许撁娌拍苓M(jìn)行操作），操作權(quán)限一般就是增加、刪除、修改以及查詢，當(dāng)然如果頁面還有導(dǎo)入導(dǎo)出或者其他功能，這些也需要在操作權(quán)限中進(jìn)行配置。
用戶其實(shí)也很容易理解，B端系統(tǒng)的用戶其實(shí)就是需要登錄進(jìn)系統(tǒng)的賬號(hào)，所以有一些系統(tǒng)的用戶管理也叫賬號(hào)管理。
因此用戶管理的作用就是對(duì)登錄進(jìn)系統(tǒng)的賬號(hào)進(jìn)行增刪改查等，當(dāng)我們需要對(duì)別人提供一個(gè)賬號(hào)時(shí)，我們就新增一個(gè)用戶的賬號(hào)密碼給他們，直到他們用完了再把他們的賬號(hào)進(jìn)行刪除。
那么問題來了，上面我們說到，不同的用戶可能有不同的需求問題，那么就意味著我們每一個(gè)用戶給要他們分配不同的菜單去做他們的事情。
例如在學(xué)校系統(tǒng)中：普通教師只負(fù)責(zé)自己班級(jí)學(xué)生的成績(jī)錄入，所以普通教師只有班級(jí)成績(jī)錄入的菜單，但是學(xué)校主任卻不一樣，他不僅僅能看到各班學(xué)生成績(jī)，還能根據(jù)各班成績(jī)進(jìn)行對(duì)比分析，年級(jí)學(xué)生排名等等..
因此在剛開始的傳統(tǒng)權(quán)限系統(tǒng)中，我們會(huì)直接把相應(yīng)的菜單權(quán)限、數(shù)據(jù)權(quán)限、操作權(quán)限賦予給用戶，每新增一個(gè)用戶我們就選擇好所有的權(quán)限都勾選上賦予給用戶，最后提供給用戶進(jìn)行操作。
然而這種操作方式有一個(gè)弊端，就是如果每新增一個(gè)用戶，系統(tǒng)管理員就需要重復(fù)進(jìn)行勾選相同的權(quán)限，那么就會(huì)耗費(fèi)大量的精力（一個(gè)用戶要配置的權(quán)限特別多，如果用這個(gè)方式操作的話新增一個(gè)用戶可能就需要花費(fèi)很長(zhǎng)時(shí)間）。因此，為了解決這個(gè)問題，我們?cè)谟脩襞c權(quán)限之間建立了角色管理。
系統(tǒng)中角色的定義其實(shí)跟生活中是一樣的，我們把固定的權(quán)限集合到一起從而形成了角色。例如，生活中UI角色就負(fù)責(zé)頁面的視覺設(shè)計(jì)，而交互設(shè)計(jì)師則負(fù)責(zé)了產(chǎn)品的邏輯或者用戶體驗(yàn)設(shè)計(jì)，這些角色擁有的權(quán)限一般很少變化，也幾乎不會(huì)進(jìn)行刪除或者修改，就好像UI設(shè)計(jì)師或者交互設(shè)計(jì)師這些角色不會(huì)一時(shí)半刻就被完全消滅一樣。
有了角色，我們可以先把對(duì)應(yīng)的權(quán)限集合賦予給角色，然后新增用戶時(shí)，再選擇用戶對(duì)應(yīng)的角色即可。
這樣做的好處是什么呢？好處就是當(dāng)我們新增用戶的時(shí)候，如果是相同角色的用戶，我們不再需要重復(fù)去大量勾選相應(yīng)的權(quán)限了，只需選擇好該用戶是那個(gè)角色就可以間接對(duì)用戶賦予權(quán)限，并且后續(xù)要對(duì)用戶進(jìn)行權(quán)限的修改也十分便捷。因此，在現(xiàn)在的后臺(tái)系統(tǒng)中，大多數(shù)都是采用權(quán)限賦予角色，然后新增用戶時(shí)再選擇用戶對(duì)應(yīng)的角色的方式。
如果看完上面的知識(shí)點(diǎn)還有點(diǎn)懵的話也沒關(guān)系，這部分給大家展示在后臺(tái)系統(tǒng)中菜單管理、角色管理與用戶管理的實(shí)際應(yīng)用是怎樣的。
第一步先查看菜單管理有哪些內(nèi)容，一般情況下，一個(gè)成熟系統(tǒng)的菜單頁面幾乎是已經(jīng)固定不變的，那么也就是說菜單管理列表中所擁有的菜單都不需要怎么操作，列表中有多少數(shù)據(jù)就代表著系統(tǒng)總體有多少菜單。
第二步進(jìn)行角色管理，如果是成熟系統(tǒng)的話，角色管理的角色也早已經(jīng)分配好了，我們并不需要過多的進(jìn)行操作，但如果是剛研發(fā)完成的系統(tǒng)，那么我們就需要根據(jù)現(xiàn)實(shí)的用戶需求進(jìn)行角色的設(shè)置，具體添加角色的主要參數(shù)包括角色名稱、菜單權(quán)限、數(shù)據(jù)權(quán)限以及操作權(quán)限（其實(shí)也就是上文介紹的三種權(quán)限），其他的參數(shù)都是根據(jù)自身業(yè)務(wù)進(jìn)行添加。
最后一步就是用戶管理，配置好角色后，我們就可以根據(jù)需求進(jìn)行用戶的新增操作，例如現(xiàn)在我們需要新增一個(gè)賬號(hào)進(jìn)行登錄系統(tǒng)，那么在用戶管理頁面中點(diǎn)擊新增按鈕，隨后填寫用戶名稱與密碼，最后選擇用戶角色，點(diǎn)擊確定按鈕即可完成（因此，新增用戶的三個(gè)必要參數(shù)是用戶名、密碼以及角色，有部門的需要填寫所屬部門，其他參數(shù)根據(jù)系統(tǒng)業(yè)務(wù)進(jìn)行添加）。添加完成后你們可以試一試使用自己所填寫的用戶名密碼登錄后臺(tái)系統(tǒng)，隨后體驗(yàn)一下作為其他角色是否能完成自身需要的業(yè)務(wù)。
用戶管理、角色管理以及菜單管理是B端系統(tǒng)最基礎(chǔ)的邏輯，也是同學(xué)們將來需要轉(zhuǎn)崗B端交互設(shè)計(jì)師或者產(chǎn)品設(shè)計(jì)師所必須掌握的知識(shí)，上面所介紹的僅僅是RBAC模型中最簡(jiǎn)單的一種，現(xiàn)實(shí)設(shè)計(jì)中可能出現(xiàn)各種情況，因此關(guān)于這次的B端產(chǎn)品設(shè)計(jì)我想給大家?guī)c(diǎn)Tips：
1、在現(xiàn)實(shí)開發(fā)中，后臺(tái)系統(tǒng)并不一定像我上面所說的那么完善，有些系統(tǒng)并不需要菜單管理，老板要求直接代碼寫死就好了，又或者有些系統(tǒng)就只有一個(gè)角色，那么角色管理也不需要了，這些情況都是有可能發(fā)生的，所有我們做設(shè)計(jì)的時(shí)候除了運(yùn)用自己的知識(shí)以外，更多的是工作經(jīng)驗(yàn)，知識(shí)是死的，人是活的，永遠(yuǎn)別忘了設(shè)計(jì)的本質(zhì)是解決用戶需求問題。
2、很多時(shí)候后臺(tái)的邏輯管理會(huì)比我上面說的要復(fù)雜的多，例如一個(gè)用戶可以擁有多個(gè)角色嗎？不同角色能不能有相同的權(quán)限？如果有角色被刪除了，那么該角色關(guān)聯(lián)的所有用戶應(yīng)該怎么處理？可能你認(rèn)為這些并不是自己目前需要考慮的問題，但是除非你以后并不想晉升到更高的位置，不然這些問題以后肯定會(huì)遇到的。
3、上面介紹的管理操作都是基于超級(jí)管理員賬號(hào)（admin）進(jìn)行操作的，如果你拿一個(gè)普通賬號(hào)的話一般是沒有對(duì)應(yīng)的菜單權(quán)限，我擔(dān)心有同學(xué)看完文章后馬上登錄自己的后臺(tái)系統(tǒng)進(jìn)行操作，接著登錄進(jìn)去找了半天都沒有找到對(duì)應(yīng)的菜單在哪里。
好了，最后希望文章能讓大家有所收獲，如果大家有不明白或者其他想法的話，歡迎大家一起探討，共勉。
文章來源：優(yōu)設(shè)網(wǎng) 作者：北沐而川
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( ssll180.com )是一家專注而深入的界面設(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ù)
先問你一個(gè)問題。
拼多多、淘寶、京東這三家購物平臺(tái)，你認(rèn)為它們的區(qū)別是什么？
或者換個(gè)方式問你。
買電器你去哪個(gè)平臺(tái)？
買衣服你去哪個(gè)平臺(tái)？ 買垃圾袋你去哪個(gè)平臺(tái)？
是不是有了答案了？
沒猜錯(cuò)的話， 大部分人的答案是：買電器去京東、買衣服去淘寶、買垃圾袋去拼多多。
你看，這就是一個(gè)購物心智模型，你的心里對(duì)這三家平臺(tái)已經(jīng)產(chǎn)生了固有的心智，如果讓你去京東買衣服，你會(huì)不會(huì)覺得，有些別扭？
沒錯(cuò)，這就是心智模型。
百度百科對(duì)心智模型的定義是：
“深植我們心中關(guān)于我們自己、別人、組織及周圍世界每個(gè)層面的假設(shè)、形象和故事。并深受習(xí)慣思維、定勢(shì)思維、已有知識(shí)的局限。”
關(guān)鍵詞是：故事、習(xí)慣、局限。
淘寶一開始就我們講了一個(gè)故事，一個(gè)萬能的集市，我們習(xí)慣在上面買衣服，但是也產(chǎn)生了局限性，那就是，當(dāng)我們想買大額電器的時(shí)候，還是會(huì)選擇京東。
我個(gè)人對(duì)心智模型的理解是：
我們內(nèi)心深處對(duì)一個(gè)事物的看法。
空口聊天多沒意思，下面舉個(gè)例子。
這是一尊陶俑，第一眼你覺得她像什么？
是不是覺得像米老鼠？
為什么？
因?yàn)樘召傅念^上的發(fā)髻和米老鼠標(biāo)志性的耳朵很像。
如果你從沒見過米老鼠，你還會(huì)覺得她像米老鼠嗎？
一定不會(huì)。
這就是心智模型，你對(duì)頭頂?shù)拇髨A形的心智是“米老鼠”，所以一旦你看到類似的形狀，米老鼠的形象就會(huì)浮現(xiàn)出來，這個(gè)發(fā)髻的形狀和你心里對(duì)米老鼠的形象產(chǎn)生了匹配。
對(duì)心智模型有沒有一點(diǎn)印象了？
下面我們接著聊。
我不想用具體的界面來聊，那樣的話太散，我認(rèn)為要想理解一個(gè)概念，最好還是從“面”的角度來說，所以下面我會(huì)舉一些商業(yè)上的案例來輔助理解。
心智模型有哪三種運(yùn)用方式？
第一種：創(chuàng)建新的心智模型
第二種：改變舊的心智模型
第三種：匹配現(xiàn)有的心智模型
可以理解成一件事情的新生、改變和延續(xù)。
下面咱們一個(gè)個(gè)來。
第一種：創(chuàng)建新的心智模型
難度指數(shù)：難啊。
記得《盜夢(mèng)空間》里最難的是什么嗎？
最難的不是盜夢(mèng)，而是植入一個(gè)想法。
創(chuàng)建新的心智模型有異曲同工之妙，都是讓別人內(nèi)心接收一個(gè)事物，需要刻意培養(yǎng)。
舉幾個(gè)例子。
當(dāng)年外賣剛開始的時(shí)候，家家搞補(bǔ)貼，很多時(shí)候幾乎不花錢就可以點(diǎn)外賣，后來這些福利沒有了，為啥？
因?yàn)辄c(diǎn)外賣的心智已經(jīng)培養(yǎng)好了，你離不開它了，所以平臺(tái)可以“不慣著你了”。
還有唯品會(huì)的正品低價(jià)、瑞幸一開始的星巴克平替，這些都是他們想要植入到用戶大腦中的心智。
為什么要費(fèi)勁植入一個(gè)新的想法？
因?yàn)橐坏┲踩肓耍秃茈y改變。
現(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à)比，后來想往高端路線走，很難，大家心里已經(jīng)認(rèn)準(zhǔn)了小米就是“性價(jià)比之王”，也就是你的產(chǎn)品不僅要好還要便宜。
這就導(dǎo)致小米一漲價(jià)，大家就罵他們忘了初心……所以小米拆分出了紅米主攻性價(jià)比，小米往高端發(fā)展，但是仍舊很難。
拼多多的百億補(bǔ)貼也是一樣的道理，一開始的砍一刀深入人心，大家對(duì)拼多多的心智已經(jīng)成型：便宜，質(zhì)量一般。拼多多想改變這個(gè)心智，推出百億補(bǔ)貼，并承諾假一賠十，就是想告訴大家，我拼多多，也是有正品好貨的。不過，效果嘛，見仁見智。
第三種：匹配現(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種用法：
新建：創(chuàng)建新的心智模型
改變：改變舊的心智模型
延續(xù)：匹配現(xiàn)有的心智模型
下面聊聊，咱們?cè)趺醋霾拍芨悠ヅ溆脩舻男闹悄Ｐ停?
同樣的，我不會(huì)拿具體頁面來舉例，還是希望把思考方式分享給大家，而不是某一個(gè)頁面的設(shè)計(jì)。
要想匹配用戶的心智模型其實(shí)就三步：
了解業(yè)務(wù)、了解用戶、競(jìng)品調(diào)研。
或者可以這么說， 在懂業(yè)務(wù)、懂用戶的基礎(chǔ)上，還要了解行業(yè)內(nèi)的通用做法。
1）了解業(yè)務(wù)
一定要了解業(yè)務(wù)，為什么？
因?yàn)楹玫脑O(shè)計(jì)方案千千萬，但是匹配你的業(yè)務(wù)的方案才是好方案，如果不了解業(yè)務(wù)，可能設(shè)計(jì)出來的方案就是自嗨，例如網(wǎng)上很多的dribble風(fēng)設(shè)計(jì)。
又比如說手機(jī)瀏覽器一般都把搜索框放到屏幕頂部，而夸克瀏覽器卻把搜索框放到了下面。
為什么？
因?yàn)榭淇讼胪品瓊鹘y(tǒng)的瀏覽器，想打造一款更年輕更好用的瀏覽器，把搜索框放到下面也是滿足他們的業(yè)務(wù)訴求，現(xiàn)在手機(jī)屏幕越來越大，搜索框放在下面手指操作更加方便。
所以，一定要先去了解業(yè)務(wù)。
拼多多和淘寶同樣都是電商平臺(tái)，可它們的用戶心智相差甚大，因?yàn)樽詈蠓桨冈O(shè)計(jì)是服務(wù)于最初的業(yè)務(wù)目標(biāo)的，業(yè)務(wù)不同，呈現(xiàn)的方案也不一樣，最后讓用戶形成的心智也不同。
2）了解用戶
為啥？給老人和小孩設(shè)計(jì)的界面能一樣嗎？
就拿顏色和文字來說。
小孩喜歡高飽和、豐富的顏色，而老人則需要考慮在各種場(chǎng)景下都能看得清楚信息的顏色。
小孩喜歡圓潤的卡通字體，而老人需要識(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)過市場(chǎng)驗(yàn)證的符合用戶心智模型的方案。
你看，既然競(jìng)品已經(jīng)給咱們打了個(gè)樣，為何還要自己悶頭造輪子呢？
咱們目的是解決問題，又不是為了證明自己很厲害。
但是，不要誤解，我不是說照著競(jìng)品抄，而是取長(zhǎng)補(bǔ)短，所以不僅要調(diào)研，還要分析，分析就是把競(jìng)品的優(yōu)劣勢(shì)找出來，好的地方咱們可以酌情借鑒，不好的地方，咱們也要避個(gè)雷嘛。
好了，小結(jié)一下，要想匹配用戶的心智模型，一定要了解業(yè)務(wù)、了解用戶，還要做競(jìng)品調(diào)研了解市場(chǎng)的通識(shí)性做法。
以上。
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(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)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( ssll180.com )是一家專注而深入的界面設(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ù)、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ì)公司。
進(jìn)入喜茶小程序的時(shí)候給我的感受是簡(jiǎn)潔、時(shí)尚、極致的設(shè)計(jì)風(fēng)格，截了兩張小程序內(nèi)的兩個(gè)界面。 確實(shí)做的還挺不錯(cuò)的，為什么給人感受不一樣？接下來我們分析分析
1.首先從下面的頁面我們能發(fā)現(xiàn)，界面的排版只有卡片左邊距留了20的安全距離，而卡片右邊安全距離為0，這樣特別的版式設(shè)計(jì)給人不對(duì)稱的感覺，這樣的設(shè)計(jì)能讓用戶記住，同時(shí)又有一點(diǎn)時(shí)尚范的感覺，很符合喜茶目標(biāo)用戶年輕人的審美。
2.同時(shí)產(chǎn)品的banner是3:2的比例，較為靠近黃金比例的尺寸。
1.點(diǎn)單頁面，喜茶新增了新品推廣位，一些新上的產(chǎn)品都會(huì)在推廣位呈現(xiàn)，尺寸比例4:3，給人的感受像是線下海報(bào)一樣，同時(shí)第三個(gè)廣告位露出部分，讓用戶知道后面還可以左滑查看。同時(shí)推廣頁的右下角有個(gè)箭頭指引，告知用戶可點(diǎn)擊。
2.看完這幾個(gè)頁面會(huì)發(fā)現(xiàn)，喜茶的基本上都是純直角的設(shè)計(jì)語言，推廣頁是直角、標(biāo)簽是直角、按鈕微圓角，直角的設(shè)計(jì)語言給人的感受是時(shí)尚、極致、極簡(jiǎn)的設(shè)計(jì)感受，個(gè)人非常喜歡。
3.但是點(diǎn)單頁面的有點(diǎn)亂，標(biāo)簽的顏色過多，不夠統(tǒng)一，圖標(biāo)的也非常的多，這樣給人的感受就會(huì)比較凌亂，盡可能少的去表現(xiàn)，這樣更加能提高用戶的效率。
1.在點(diǎn)單頁面用戶上滑，推廣位漸漸的往上消失，這樣產(chǎn)品的展示會(huì)更多，利于用戶挑選和尋找。
2.用戶在選口味界面，發(fā)現(xiàn)每一個(gè)標(biāo)簽的內(nèi)的文字左右的安全距離一致，依次排列，具有節(jié)奏感，頁面給人感受簡(jiǎn)潔、易操作，同時(shí)用戶可以選自己的口味，可進(jìn)行保存，下次點(diǎn)直接就可以選擇自己的口味。
在喜茶的百貨界面能清晰發(fā)現(xiàn)每一個(gè)模塊的都是不一樣的，很多產(chǎn)品的商場(chǎng)頁面都是一致的，而喜茶在產(chǎn)品的展示會(huì)以不一樣的形式出現(xiàn)，每一個(gè)模塊都有尺寸和排版的差異，這樣給用戶有種落錯(cuò)感，更加有設(shè)計(jì)。
1.喜茶的會(huì)員頁給我眼前一亮的感覺，會(huì)員的背景用色都是明度高、純度低的漸變給人的感受清新、淡雅的感覺。
2.會(huì)員頁用戶在切換的同時(shí)圖標(biāo)的顏色會(huì)跟著會(huì)員的顏色變化，特權(quán)的內(nèi)容也會(huì)有不一樣的變化，讓用戶有明顯的等級(jí)感知。
3.切換到“黑卡”的時(shí)候，會(huì)發(fā)現(xiàn)會(huì)員頁的“喜”字加上了質(zhì)感。
4.會(huì)員卡上“喜”字提取了“喜茶”中的“喜”，跟其他產(chǎn)品的會(huì)員做了區(qū)分的同時(shí)又加深了品牌印象。
喜茶有兩種不同風(fēng)格的圖標(biāo)，一種是比較極簡(jiǎn)，線性，差異性沒有那么強(qiáng)，而另一種則是插畫風(fēng)格的圖標(biāo)，給人感受比較有趣，更有差異，極簡(jiǎn)則符合喜茶整體小程序的調(diào)性，而插畫又豐富了頁面的單調(diào)性。
1.喜茶頂部的banner做非常不錯(cuò)，例如跟FENDI合作的會(huì)在首屏加入視頻，用戶一進(jìn)入小程序就能看到能很好的吸引用戶的注意。
2.用戶在左右切換banner時(shí)，文字會(huì)先出現(xiàn)然后底部的圖片漸漸出現(xiàn)，給用戶感受自然、流暢的感受，好的動(dòng)畫效果能給產(chǎn)品加分，給用戶留下好的感受。
1.喜茶的數(shù)字字體是NeutraText-DemiAlt，每次進(jìn)去喜茶看到他們的數(shù)字字體非常有獨(dú)特性，給人的感受時(shí)尚、極致、有設(shè)計(jì)。
2.部分界面和海報(bào)喜茶會(huì)用上方正悠宋，有點(diǎn)中國風(fēng)、古風(fēng)的韻味在里面，而且也非常有獨(dú)特的設(shè)計(jì)美感，喜茶會(huì)應(yīng)用在國風(fēng)的海報(bào)以及會(huì)員頁的“喜”字上，突出風(fēng)格化。
3.好的字體能很好的提高產(chǎn)品的品牌感和設(shè)計(jì)美感，更能傳達(dá)該品牌想傳達(dá)的東西。
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(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)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( ssll180.com )是一家專注而深入的界面設(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ù)、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ì)公司。
從產(chǎn)品經(jīng)理處獲取項(xiàng)目原型圖，當(dāng)獲取到原型圖后不要盲目的去進(jìn)行設(shè)計(jì)，要先分析了解整個(gè)項(xiàng)目的功能、特性、用戶群體、項(xiàng)目的定位等等，特別是對(duì)功能的疑惑處一定要找產(chǎn)品經(jīng)理溝通，只有做到對(duì)項(xiàng)目了熟于胸才能做出優(yōu)秀的設(shè)計(jì)。
當(dāng)我們對(duì)項(xiàng)目的功能、特性、用戶群體、項(xiàng)目的定位都有所了解后，還是不能馬上進(jìn)入設(shè)計(jì)環(huán)節(jié)。我們需要先對(duì)市面上同類型的產(chǎn)品進(jìn)行分析和對(duì)比，包括設(shè)計(jì)風(fēng)格、配色、排版、功能樣式等等，了解其優(yōu)劣勢(shì)，做到取長(zhǎng)補(bǔ)短，思考如何讓我們的產(chǎn)品更加的完善，這時(shí)候我們的腦海里面基本上對(duì)自己要設(shè)計(jì)的東西已經(jīng)有了一個(gè)大概的雛形。
這篇文章內(nèi)所有的數(shù)值均以2倍圖為例，使用1倍圖的同學(xué)請(qǐng)自行除以2。
現(xiàn)在UI設(shè)計(jì)通常使用的是全面屏的設(shè)計(jì)規(guī)范，全面屏的設(shè)計(jì)稿更加美觀，且做作品集的時(shí)候搭配全面屏樣機(jī)視覺效果也更加突出。通常只設(shè)計(jì)一套蘋果全面屏的設(shè)計(jì)稿，不需要另外設(shè)計(jì)安卓端設(shè)計(jì)稿，安卓端由安卓工程師自行適配。
界面：750px1624px
狀態(tài)欄：750x88px
導(dǎo)航欄：750x88px
菜單欄：750x98px
指示器：750x68px
左右邊距：32px或24px
*其中狀態(tài)欄和指示器不需要進(jìn)行額外的設(shè)計(jì)，是系統(tǒng)默認(rèn)控件，除顏色外不可改變。
頂部功能：48x48px
底部菜單欄（有文字）：48x48px
底部菜單欄（無文字）：64x64px
尺寸：36px、32px、28px、24px
顏色：正常（#333333）、輔助（#999999）、未輸入提示（#CCCCCC）
*利用文字尺寸對(duì)比和顏色對(duì)比可以得到不錯(cuò)的效果。也可以給文字顏色添加少量的藍(lán)色，讓顏色不那么呆板。
組建控件系統(tǒng)可以讓我們的設(shè)計(jì)稿更加的規(guī)范，也便于修改，可以極大的提高我們的工作效率。
所有的圖標(biāo)都需要做成控件，方便我們切圖。然后就是會(huì)重復(fù)使用的狀態(tài)欄、導(dǎo)航欄、菜單欄、指示器、列表、彈框、按鈕等控件。
除了我們常用的控件以外，顏色、投影等特殊效果、文字大小都可以保存樣式，把項(xiàng)目的配色、特殊效果、文字尺寸都保存下來，不同的設(shè)計(jì)工具有不同的保存方式，大家可以根據(jù)自己使用的設(shè)計(jì)工具進(jìn)行設(shè)置。
我們需要讓項(xiàng)目保持一個(gè)統(tǒng)一的設(shè)計(jì)風(fēng)格，讓項(xiàng)目更加的整體、統(tǒng)一、協(xié)調(diào)。不同的風(fēng)格有不同的優(yōu)勢(shì)，選對(duì)與項(xiàng)目屬性相符的設(shè)計(jì)風(fēng)格可以讓項(xiàng)目更加的出彩。
這種風(fēng)格沒找到合適的名稱，我個(gè)人一般叫它傳統(tǒng)風(fēng)格。這種設(shè)計(jì)風(fēng)格使用分割線分割小的模塊，用背景色塊分割大的模塊，特別適合列表信息。雖然給人感覺沒有特別強(qiáng)烈的設(shè)計(jì)感，但簡(jiǎn)單實(shí)用、樸實(shí)無華，層級(jí)劃分清晰明了。
卡片式風(fēng)格是借用現(xiàn)實(shí)世界中卡片的特征和概念，將一個(gè)模塊或同類型元素放到一個(gè)卡片容器類，可以增加內(nèi)容的獨(dú)立性，讓模塊劃分關(guān)系變得非常的清晰，是現(xiàn)在非常常用的一種設(shè)計(jì)方式。
常用做法是采用淺灰的背景+白色卡片的方式，卡片都帶有一定的圓角，類似于將撲克牌一張張的放在桌子上，桌面是灰色背景，每一張撲克牌就是一個(gè)卡片。也不排除暗夜模式的卡片式設(shè)計(jì)，背景會(huì)更暗一些，卡片略亮。
在傳統(tǒng)UI風(fēng)格的基礎(chǔ)上去除背景色塊和分割線，單以間距來區(qū)分模塊和元素，對(duì)親密性的應(yīng)用有較高的要求。有時(shí)候單以間距來區(qū)分模塊和元素時(shí)，可能會(huì)導(dǎo)致模塊層級(jí)不分明，所以會(huì)使用將標(biāo)題加大的形式，讓模塊與模塊之間的區(qū)分更加明顯。因?yàn)槿コ朔指罹€，留白就更多，會(huì)顯得界面更加的干凈、清爽。
新擬態(tài)是19年底在追波開始出現(xiàn)的一種設(shè)計(jì)風(fēng)格，特點(diǎn)是使用統(tǒng)一的光源做出立體的浮雕效果，元素有厚度但沒有紋理和材質(zhì)的輕擬物風(fēng)。
常規(guī)做法是假設(shè)一個(gè)統(tǒng)一的左上方光源，給元素分別添加一個(gè)左上角和右下角的投影，左上角（被光源照射的一側(cè)）投影使用亮色，右下角投影使用暗色，讓元素可以浮起來。而在按下或選中狀態(tài)時(shí)則使用兩個(gè)內(nèi)陰影，左上角暗色右下角亮色讓元素凹下去。需要注意的是界面模塊和背景色一般是同一個(gè)顏色，所以顏色不能使用純白或純黑，否則有一側(cè)的投影就會(huì)看不見，通常是使用藍(lán)灰色或深灰色背景。
新擬態(tài)風(fēng)格視覺效果新穎、柔和，對(duì)比度低，看得久了會(huì)產(chǎn)生一定的視覺疲勞，研發(fā)成本也較高，所以現(xiàn)在更多的還是處于概念稿，實(shí)際項(xiàng)目中應(yīng)用較少。可以作為一種練習(xí)或部分功能的使用。
設(shè)計(jì)稿完成之后我們需要將圖標(biāo)等元素切圖導(dǎo)出交付給開發(fā)，IOS和安卓需要根據(jù)要求導(dǎo)出不同倍數(shù)的png格式切圖文件。
IOS：現(xiàn)在通常是輸出2套，以@2x、@3X為后綴，也就是2倍圖、3倍圖；
Android：現(xiàn)在通常是輸出3套，xhdpi（超清，對(duì)應(yīng)IOS的2倍圖）、xxhdpi（超超清，對(duì)應(yīng)IOS的3倍圖）、xxxhdpi（超超超清），安卓切圖不需要將倍數(shù)加到切圖命名內(nèi)，而是每種尺寸單獨(dú)建立一個(gè)文件夾。
png：最常用的切圖文件格式，背景無底透明，所以在導(dǎo)出切圖文件時(shí)需要先去掉背景色（figma將畫板填充色隱藏，sketch畫板不要勾選“包含于導(dǎo)出項(xiàng)”）；
svg：矢量切圖，需要背景無底透明，部分網(wǎng)頁端項(xiàng)目可能需要svg格式的切圖文件；
bmp：部分硬件機(jī)器的項(xiàng)目需要使用的圖片格式，需要注意的是bmp無法實(shí)現(xiàn)背景透明，如果背景是透明的會(huì)自動(dòng)帶上白色，需要切圖文件把背景帶上一起切，而且figma和sketch等UI設(shè)計(jì)軟件無法直接導(dǎo)出bmp格式，需要先導(dǎo)出為png或jpg格式，再使用ps或其他工具轉(zhuǎn)換一次。
只能使用英文、下滑線、數(shù)字進(jìn)行命名，不要使用中文和特殊字符。命名方式一般是類別_位置_功能_狀態(tài)（有些切圖沒有多種狀態(tài)則不需要添加狀態(tài)命名）。
以蘋果端舉例：如底部菜單欄的首頁圖標(biāo)命名則是ico_bottom_home_nor@2x（圖標(biāo)_底部_首頁_未選中狀態(tài)）和ico_bottom_home_sel@2x（圖標(biāo)_底部_首頁_選中狀態(tài)）。
頂部的搜索圖標(biāo)沒有多個(gè)狀態(tài)，命名是ico_nav_search@2x（圖標(biāo)_頂部_搜索）。
類別一般只有3種：圖標(biāo)（icon）、圖片（image）、按鈕（button），我們通常會(huì)簡(jiǎn)寫為ico、img、btn。
狀態(tài)一般只有4種：正常（normal）、按下（press）選中（selected）、禁用（disabled），我們通常會(huì)簡(jiǎn)寫為nor、pre、sel、dis。pc端會(huì)多一種狀態(tài)：懸停（hover）。
sketch和figma等UI設(shè)計(jì)軟件可以同時(shí)導(dǎo)出多個(gè)尺寸的切圖文件和前綴/后綴，所以我們只需要設(shè)置圖標(biāo)本身的命名如ico_bottom_home_sel，而不需要每個(gè)切圖都去手動(dòng)的添加IOS后綴的@2x和@3X，以及安卓的前綴xhdpi等，在導(dǎo)出設(shè)置中設(shè)置好每個(gè)尺寸的文件夾名稱和后綴，再統(tǒng)一導(dǎo)出即可。
軟件內(nèi)部導(dǎo)出：現(xiàn)在的UI設(shè)計(jì)軟件Sketch、Figma、Mstergo等都可以直接導(dǎo)出切圖文件，只需要設(shè)置好相應(yīng)的倍數(shù)和前綴、后綴，就可以快速的導(dǎo)出切圖文件；
上傳第三方：最常用的就是將設(shè)計(jì)文件上傳至藍(lán)湖，研發(fā)人員可以在藍(lán)湖上下載自己需要的切圖文件，但在上傳藍(lán)湖之前需要把設(shè)計(jì)稿中需要切圖的元素設(shè)置為切片。
和切圖文件一起交付給開發(fā)的還有設(shè)計(jì)稿的標(biāo)注文件，讓研發(fā)人員可以清楚地知道界面內(nèi)元素的顏色、尺寸、對(duì)齊方式、距離、透明度，文字的字體、字號(hào)、行高等。
很多設(shè)計(jì)文件都可以安裝藍(lán)湖插件，再通過插件將設(shè)計(jì)稿導(dǎo)出到藍(lán)湖，研發(fā)人員就可以便捷的查看界面的標(biāo)注。
Figma、Mastergo等在線設(shè)計(jì)軟件都可以切換為開發(fā)者模式，只需要將研發(fā)人員邀請(qǐng)到自己的設(shè)計(jì)文件所在團(tuán)隊(duì)內(nèi)，研發(fā)人就可以查看到界面的標(biāo)注；
有部分公司有一定的保密措施，會(huì)禁止設(shè)計(jì)師使用第三方平臺(tái)或是聯(lián)網(wǎng)操作，這種情況設(shè)計(jì)也無法使用Figma、Mastergo等在線設(shè)計(jì)軟件，只能使用Sketch等客戶端，輸出標(biāo)注就需要使用相應(yīng)的插件，Sketch可以使用Sketch Measure導(dǎo)出HTML格式的標(biāo)注文件。
在項(xiàng)目上線的階段UI設(shè)計(jì)需要輔助研發(fā)提供上線應(yīng)用商店需要的項(xiàng)目預(yù)覽圖、啟動(dòng)LOGO，也需要設(shè)計(jì)補(bǔ)充出APP的啟動(dòng)頁、閃屏頁等。
上線應(yīng)用商店需要的預(yù)覽圖，通常是使用項(xiàng)目中比較有特色的幾個(gè)UI界面加以設(shè)計(jì)。
上線應(yīng)用商店必須提供的LOGO，手機(jī)中啟動(dòng)APP的入口，但不同的應(yīng)用商店有不同的尺寸，華為、蘋果、小米、三星、應(yīng)用寶等所需要的啟動(dòng)LOGO都有所不同，所以輸出多個(gè)尺寸。以蘋果App Store為例，需要以下尺寸：
啟動(dòng)頁和引導(dǎo)頁一般是和UI界面一起設(shè)計(jì)，不過需要項(xiàng)目上線后才會(huì)有其價(jià)值，所以可以先設(shè)計(jì)完項(xiàng)目的界面，在研發(fā)開發(fā)的過程中再去設(shè)計(jì)啟動(dòng)頁和引導(dǎo)頁，只要在項(xiàng)目上線前提供給研發(fā)就可以。
當(dāng)一個(gè)項(xiàng)目上線后，只能代表我們的現(xiàn)階段的工作已經(jīng)全部完成。每個(gè)項(xiàng)目上線后都會(huì)收集用戶反饋，根據(jù)用戶反饋的信息優(yōu)化功能和界面設(shè)計(jì)，通過持續(xù)不斷的優(yōu)化、迭代讓我們的產(chǎn)品越來越好，這個(gè)過程中也需要我們UI設(shè)計(jì)不斷的去進(jìn)行調(diào)整和優(yōu)化。
藍(lán)藍(lán)設(shè)計(jì)( ssll180.com )是一家專注而深入的界面設(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ù)、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è)計(jì)，就是不改稿的設(shè)計(jì)，甲方買單的設(shè)計(jì)，這句話多大多數(shù)設(shè)計(jì)師來說是沒錯(cuò)的。因?yàn)樵O(shè)計(jì)師也要吃飯的、要生活。只要客戶買單了，我們就能達(dá)到經(jīng)濟(jì)上的收益。
但是僅僅客戶買單就足夠了嗎？我覺得對(duì)于一個(gè)想要提升自己的設(shè)計(jì)師來說并不足夠。這個(gè)客戶買單了說明你在一定程度上，在當(dāng)前滿足了這個(gè)需求層次或者審美的客戶群體。
當(dāng)客戶發(fā)現(xiàn)設(shè)計(jì)并沒有在實(shí)際宣傳中達(dá)到目的，買完單的客戶也沒辦法回頭再找設(shè)計(jì)師退款，但是，可想而知這個(gè)客戶就流失了。而且如果只滿足于應(yīng)對(duì)這一需求層次的客戶，當(dāng)面對(duì)要求更高的客戶的時(shí)候，我們也會(huì)變得無能為力。只能看著客戶流失，或者勉強(qiáng)接下項(xiàng)目，卻在不斷的改稿中疲于奔命。
想了解什么是好的設(shè)計(jì)，首先需要要了解什么是設(shè)計(jì)，設(shè)計(jì)的目的是什么。
設(shè)計(jì)是有目的的策劃，平面設(shè)計(jì)是這些策劃將要采取的形式之一，在平面設(shè)計(jì)中你需要用視覺元素來傳播你的設(shè)想和計(jì)劃，用文字和圖形把信息傳達(dá)給受眾，讓人們通過這些視覺元素了解你想表達(dá)的信息，這才是我們?cè)O(shè)計(jì)的定義。平面設(shè)計(jì)的目的不僅是視覺表層的美觀度，更重要的、最根本的是信息的傳達(dá)。
所以好的設(shè)計(jì)就是，能準(zhǔn)確直觀的傳播設(shè)計(jì)目的，被受眾更有效、更愿意接收信息的設(shè)計(jì)。簡(jiǎn)單來講，信息（包括內(nèi)容信息和情感信息）傳達(dá)的是設(shè)計(jì)的基礎(chǔ)，是設(shè)計(jì)中一切行為的第一準(zhǔn)則，是對(duì)的設(shè)計(jì)。在此基礎(chǔ)上具備良好的美感傳達(dá)就是好的設(shè)計(jì)。
我們可能在設(shè)計(jì)學(xué)習(xí)過程中學(xué)到了很多的設(shè)計(jì)法則，形式美法則、創(chuàng)意思維、排版原則、色彩原則、字體運(yùn)用原則。但是很多時(shí)候用到的時(shí)候就想不起來，用了也沒達(dá)到效果？
我理解更多的是因?yàn)闆]有從根本上理解這些法則存在的意義、運(yùn)用的目的。設(shè)計(jì)師應(yīng)該做最吝嗇的人，過程中每一個(gè)視覺元素的運(yùn)用都要有其目的性。這個(gè)目的性就應(yīng)該是信息傳達(dá)和美感傳達(dá)。以此為標(biāo)準(zhǔn)反復(fù)檢驗(yàn)自己的設(shè)計(jì)作品，相信我們能做出好的設(shè)計(jì)。
（一）客戶對(duì)設(shè)計(jì)的期待信息準(zhǔn)確有效傳遞，受眾對(duì)信息要求直觀、易讀。
這是一個(gè)高效時(shí)代，時(shí)間就是金錢。同時(shí)是一個(gè)信息大爆炸的時(shí)代，每天我們會(huì)面對(duì)各種不同媒介的信息，不斷沖擊這我們的視覺。我們不能要求受眾有時(shí)間和耐心完整仔細(xì)的觀看閱讀整個(gè)設(shè)計(jì)。這就要求我們的設(shè)計(jì)，即便一眼，就能判斷設(shè)計(jì)究竟在表現(xiàn)什么信息，而不被其他不重要信息干擾。當(dāng)客戶對(duì)表達(dá)信息有一個(gè)直觀的概念后，希望繼續(xù)閱讀下去的話，我們就要在易讀方面進(jìn)行深化。
明確最重要的信息
對(duì)于設(shè)計(jì)需求的分析得出最重要的信息，最想傳達(dá)的信息
突出最重要的信息
將它擺放在突出的位置，整體的烘托，對(duì)比的凸顯，合適的構(gòu)圖
次要信息
相對(duì)最重要的信息較弱
信息的篩選
設(shè)計(jì)中包含的信息必須有明確的效用，而不被不必要的信息干擾導(dǎo)致失去閱讀興趣
設(shè)置重要等級(jí)
針對(duì)內(nèi)容設(shè)置重要性等級(jí)，然后根據(jù)相應(yīng)等級(jí)進(jìn)行設(shè)計(jì)。
信息分組
這是受眾感知多條信息的前題，將相關(guān)的信息放置或整合為一體，這樣就可以實(shí)現(xiàn)分組。大多數(shù)情況下三至四個(gè)信息組已經(jīng)足夠了。
閱讀性文字排版 （閱讀性文字指的是需要受眾閱讀的，而非裝飾性、不需要識(shí)別性的）
在文字排版當(dāng)中易讀是必須追求的。
對(duì)齊：為了達(dá)到易讀效果，首先要從對(duì)齊開始。
檢索：易于檢索目標(biāo)內(nèi)容，精心處理檢索方式。（依據(jù)版式設(shè)計(jì)原則中的對(duì)比，重復(fù)原則實(shí)現(xiàn)）
記憶：要點(diǎn)便于記憶，突出主要內(nèi)容。（依據(jù)版式設(shè)計(jì)原則中的對(duì)比，重復(fù)原則實(shí)現(xiàn)）
文字：文字大小、字間距、行距、字體、文字的排布五個(gè)方面。過小的字體、過大的字體，過度裝飾的字體，不符合視覺流程，不合理的版式布局。都是會(huì)影響閱讀的易讀性。
（二）客戶對(duì)設(shè)計(jì)的期待能引人注意、獲得好的反饋，受眾希望從設(shè)計(jì)中收到某種刺激、有所收獲。
人們每天沒數(shù)量驚人的信息淹沒，面對(duì)潮水涌來的信息。我們的頭腦中會(huì)形成一個(gè)過濾器，只會(huì)對(duì)能引發(fā)我們興趣的信息，能夠得到某種刺激的信息，才能順利通過并留下清晰的印象。因此，想要設(shè)計(jì)從眾多信息中脫穎而出并抓住受眾的實(shí)現(xiàn)。就必須引人注目、傳遞刺激，讓受眾在你的設(shè)計(jì)上逗留。
美的視覺效果比較容易給人帶來刺激
這時(shí)候我們學(xué)習(xí)的各種原則知識(shí)，構(gòu)成知識(shí)（點(diǎn)線面，平衡、對(duì)比、調(diào)和、節(jié)奏、變異.....）、版式知識(shí)（位置、比例、分割、留白、網(wǎng)格.....）等都可以充分發(fā)揮作用了。
滿足期待
人們希望沖設(shè)計(jì)只能夠得到收獲，包括有用的文字信息和情感上的。反過來如果已經(jīng)知道了，沒有興趣，無我無關(guān)的信息，是無法吸引受眾的。選用一種能夠傳達(dá)設(shè)計(jì)內(nèi)容及主題思想的吸睛元素就很有必要。可以是文字（禮物、服務(wù)、免費(fèi)、抽獎(jiǎng)、限時(shí)、折扣等）或者圖形元素、圖片。
吸睛元素與設(shè)計(jì)需求要匹配
選取吸睛元素必須與設(shè)計(jì)主題信息密切相關(guān)。例如，在定位是高品質(zhì)的項(xiàng)目設(shè)計(jì)中，放置一個(gè)花哨刺眼的打折；在畫面中一個(gè)無關(guān)的美女。這確實(shí)很可能在短時(shí)間內(nèi)贏得受眾的注意，但是當(dāng)文字或圖片與設(shè)計(jì)需要傳達(dá)的信息完全無關(guān)的情況下。也會(huì)很快的失去他們的關(guān)注。
情感刺激
一個(gè)好的吸睛元素往往能激發(fā)受眾的情感——受眾會(huì)覺得驚喜，感覺自己的情感獲得了認(rèn)可，也可能會(huì)對(duì)設(shè)計(jì)產(chǎn)生共鳴。一旦感情上拉近了受眾與設(shè)計(jì)的距離，就有可能增加受眾良好的反饋行動(dòng)達(dá)到商業(yè)目的（購買產(chǎn)品、產(chǎn)生消費(fèi)等）。
消極情感
人們被設(shè)計(jì)激發(fā)的情感并非總是積極正面的。更重要的是有針對(duì)性的激發(fā)觀眾的情感。應(yīng)該根據(jù)不同的設(shè)計(jì)目的，激發(fā)觀眾內(nèi)心相應(yīng)的情感。例如一個(gè)減肥中心的宣傳設(shè)計(jì)，畫面營造一種胖人失落的畫面（沒有偏見我自己也是個(gè)胖子~），從而激發(fā)受眾不安的消極情緒。這也可能引起受眾的關(guān)注，并愿意深入了解。
受眾反應(yīng)的不確定性
視覺會(huì)給人帶來一連串的生理上的、心理上的、情感上的、行動(dòng)上的反應(yīng)，設(shè)計(jì)是視覺經(jīng)驗(yàn)的科學(xué)。他包括兩個(gè)方面，一個(gè)是不以人為而改變的即生理感受的人的基本反應(yīng)，另一個(gè)是隨即的或不確定因素構(gòu)成。如個(gè)人喜好，性格等等、等等，導(dǎo)致我們無法完全確定受眾在面對(duì)設(shè)計(jì)時(shí)候的情感等反應(yīng)。
相對(duì)穩(wěn)定的方面： 主要是生理上的視知覺，人們的一些視覺習(xí)慣、視覺流程、視覺邏輯，如從上到下，從左到右，喜歡連貫的、重復(fù)，喜歡有對(duì)比的，還有在顏色方面人們最喜歡的其實(shí)是有對(duì)比的互補(bǔ)色等等。這都是跟人們的生理上的習(xí)慣有關(guān)，都是人生理機(jī)能的本能反應(yīng)。作為設(shè)計(jì)師應(yīng)該對(duì)這些知識(shí)能充分了解、靈活運(yùn)用，設(shè)計(jì)是對(duì)人本的關(guān)注，首先應(yīng)對(duì)文化與人的感知方式這些相對(duì)穩(wěn)定的方面進(jìn)行研究，并且需要我們?cè)趯?shí)踐中去總結(jié)。
不穩(wěn)定的方面： 不穩(wěn)定的方面主要是指情感、素質(zhì)、品位、閱歷上的不同，在設(shè)計(jì)過程中你需要具備一定的判斷和把握能力，你需要客觀和克制，才能完成卓越的設(shè)計(jì)。
設(shè)計(jì)思維的科學(xué)： 設(shè)計(jì)是必須具有科學(xué)的思維方法，能在相同中找到差別，能在不同當(dāng)中找到共同之處，能掌握運(yùn)用各種思維方法，如縱向關(guān)聯(lián)思維和橫向關(guān)聯(lián)思維以及發(fā)散式的思維，善于運(yùn)用科學(xué)的思維方式找到奇特的新的視覺形象，才能不斷發(fā)現(xiàn)新的可能。
設(shè)計(jì)學(xué)習(xí)過程中的總結(jié)和整理，有些內(nèi)容來自網(wǎng)絡(luò)，如有冒犯請(qǐng)聯(lián)系我刪改！僅為自身學(xué)習(xí)提升的記錄，如果對(duì)內(nèi)容有更好的理解，歡迎交流探討。
藍(lán)藍(lán)設(shè)計(jì)( ssll180.com )是一家專注而深入的界面設(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ù)、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ì)公司
近年來，行業(yè)內(nèi)不斷探索廣告的新玩法，激勵(lì)視頻廣告成為一種愈加流行的廣告形式，當(dāng)前已經(jīng)是媒體主流變現(xiàn)模式之一，以滿足廣告主營銷效果、媒體變現(xiàn)效率最大化。對(duì)用戶而言，觀看激勵(lì)視頻廣告能夠獲得相應(yīng)獎(jiǎng)勵(lì)；對(duì)于客戶，激勵(lì)視頻廣告通過獎(jiǎng)勵(lì)機(jī)制，得到更長(zhǎng)時(shí)間的曝光來提升轉(zhuǎn)化率；對(duì)于平臺(tái)，有更高的變現(xiàn)效率能帶來更高的收益。
百度激勵(lì)視頻廣告承載著百度APP任務(wù)系統(tǒng)、權(quán)益場(chǎng)景、活動(dòng)場(chǎng)景等的重要變現(xiàn)任務(wù)，本文將從激勵(lì)視頻廣告的框架、提升轉(zhuǎn)化效果兩個(gè)方面，來闡述容器結(jié)構(gòu)設(shè)計(jì)與提升轉(zhuǎn)化效果的設(shè)計(jì)思考。
框架：建立場(chǎng)景核心轉(zhuǎn)化流程
激勵(lì)視頻廣告是獨(dú)立的視頻場(chǎng)景，場(chǎng)景內(nèi)的元素布局、容器結(jié)構(gòu)不依賴于所在的宿主場(chǎng)景，在整個(gè)交互鏈路中能夠采用更有創(chuàng)新的設(shè)計(jì)形式。
1、布局跨場(chǎng)景橫向一致
基于激勵(lì)視頻廣告的元素來明確內(nèi)容分區(qū)，考慮元素作用與通用性可分為頂部框架區(qū)、附加掛載區(qū)、內(nèi)容信息區(qū)、轉(zhuǎn)化決策區(qū)，在結(jié)構(gòu)設(shè)計(jì)上，將核心獎(jiǎng)勵(lì)計(jì)時(shí)組件置于頂部框架區(qū)并保持穩(wěn)定展現(xiàn)，保證百度APP內(nèi)的視頻廣告在布局上橫向一致性，同時(shí)也有利于場(chǎng)景之間創(chuàng)意交叉驗(yàn)證與復(fù)用。
2、容器、元素組件選型
從激勵(lì)視頻的鏈路流程出發(fā)，結(jié)合主動(dòng)交互行為的各類組件狀態(tài)：獎(jiǎng)勵(lì)計(jì)時(shí)與完成、視頻播放與完播、瀏覽落地頁、退出挽留四種核心狀態(tài)。
1）獎(jiǎng)勵(lì)計(jì)時(shí)與完成：考慮獎(jiǎng)勵(lì)計(jì)時(shí)器會(huì)存在于多種不同場(chǎng)景情況，需要具備橫向統(tǒng)一的計(jì)時(shí)形式來穩(wěn)定用戶預(yù)期，以及通過視覺反饋給予用戶明確的狀態(tài)變化感知，來降低不同場(chǎng)景下的理解成本，通過ABtest的方式，最終選用場(chǎng)景元素圖標(biāo)與文本計(jì)時(shí)形式，圖標(biāo)能夠根據(jù)獎(jiǎng)勵(lì)的不同支持靈活配置，滿足多元化場(chǎng)景的適配訴求，同時(shí)選用視覺感知較弱的樣式與動(dòng)畫形式，盡可能避免與點(diǎn)擊、轉(zhuǎn)化無關(guān)的元素動(dòng)畫稀釋用戶對(duì)內(nèi)容的注意力，從而影響廣告效果。
2）視頻播放與完播：播放狀態(tài)下，為盡量降低對(duì)視頻內(nèi)容的遮擋，在轉(zhuǎn)化組件的呈現(xiàn)上，采用“延遲展現(xiàn)吸引觀看，漸進(jìn)式增強(qiáng)吸引點(diǎn)擊”的手段，視頻完播狀態(tài)下呈現(xiàn)視頻尾幀，尾幀增加再看一個(gè)視頻功能，為想要獲得金幣的用戶縮短操作步長(zhǎng)，提升激勵(lì)視頻廣告的分發(fā)。
3）瀏覽落地頁：瀏覽落地頁過程中也需明示獎(jiǎng)勵(lì)計(jì)時(shí)，為了保證視頻場(chǎng)景和落地頁場(chǎng)景的計(jì)時(shí)延續(xù)與組件統(tǒng)一性，采用避讓計(jì)時(shí)組件的面板化落地頁容器。
4）退出挽留：當(dāng)用戶在不同獎(jiǎng)勵(lì)狀態(tài)下會(huì)在退出的主動(dòng)行為，挽留彈窗承載挽留與再看功能的重要作用，彈窗作為前后鏈路場(chǎng)景的共性組件，在彈窗設(shè)計(jì)上頂部承載所在場(chǎng)景主視覺IP，以滿足多元化場(chǎng)景的下活動(dòng)主視覺的延續(xù)，使激勵(lì)視頻廣告更契合所在活動(dòng)場(chǎng)景。
3、轉(zhuǎn)化鏈路降步長(zhǎng)
在原有的基礎(chǔ)路徑上，獎(jiǎng)勵(lì)計(jì)時(shí)與倒計(jì)時(shí)結(jié)束的兩個(gè)環(huán)節(jié)僅有計(jì)時(shí)器形態(tài)的變化，元素變化是容易起到聚焦視覺的作用的，以倒計(jì)時(shí)結(jié)束為節(jié)點(diǎn)，將用戶從"視頻場(chǎng)景"帶入到"決策場(chǎng)景"，通過容器結(jié)構(gòu)形態(tài)的變化來解放停留在計(jì)時(shí)器上的視覺焦點(diǎn)，面板結(jié)構(gòu)能承載更多的增益內(nèi)容，延展信息載量，視頻完播是判斷用戶對(duì)內(nèi)容感興趣的重要契機(jī)，在視頻完播狀態(tài)自動(dòng)調(diào)起落地頁，通過縮短轉(zhuǎn)化步長(zhǎng)提升轉(zhuǎn)化效率。
激勵(lì)視頻廣告容器每一步迭代都伴隨大量的前置思考、歸因分析、嚴(yán)謹(jǐn)實(shí)驗(yàn)，經(jīng)歷多輪迭代最終完成流程框架搭建，后面我們?nèi)砸伎既绾瓮ㄟ^設(shè)計(jì)方法，在現(xiàn)有的框架上進(jìn)一步提升轉(zhuǎn)化效果。
提轉(zhuǎn)：內(nèi)容化與獎(jiǎng)勵(lì)玩法助決策
在廣告創(chuàng)意視角下，通過內(nèi)容信息命中用戶訴求、滿足心理期望能夠提升轉(zhuǎn)化效果；在用戶目標(biāo)視角下，我們希望充分發(fā)揮激勵(lì)機(jī)制，給予用戶更多豐富的獎(jiǎng)勵(lì)交互與玩法，持續(xù)獲取收益與滿足感。
1、增益信息前置，助力轉(zhuǎn)化決策
輪播推薦詞：推薦詞輪播的形式來營造場(chǎng)景內(nèi)互動(dòng)氛圍，在一些節(jié)日期間通過契合節(jié)日的情感化文案，讓內(nèi)容更貼合節(jié)日營銷氛圍，同時(shí)將落地頁中的優(yōu)質(zhì)廣告賣點(diǎn)、數(shù)據(jù)生成的熱度等多元的營銷信息前置，助力用戶決策。
行動(dòng)號(hào)召詞：不同廣告內(nèi)容之間的轉(zhuǎn)化文案存在差異化的表達(dá)，通過符合廣告內(nèi)容的決策性文案披露，將固定文案升級(jí)為營銷目標(biāo)及類型特征文案，輔助轉(zhuǎn)化決策，在容器內(nèi)每一個(gè)元素都應(yīng)該作為廣告創(chuàng)意的一部分。
2、分段獎(jiǎng)勵(lì)計(jì)時(shí)，引導(dǎo)視頻完播
點(diǎn)擊率、轉(zhuǎn)化率隨視頻播放時(shí)長(zhǎng)的數(shù)據(jù)變化，發(fā)現(xiàn)呈現(xiàn)正相關(guān)的趨勢(shì)，我們希望用戶能夠選擇看完視頻，核心思路是將用戶從低變現(xiàn)效率場(chǎng)景，引導(dǎo)至高變現(xiàn)效率的場(chǎng)景，由此我們通過兩段計(jì)時(shí)獎(jiǎng)勵(lì)的設(shè)計(jì)形式，激勵(lì)用戶可以拿到更多獎(jiǎng)勵(lì)并將視頻看完，考慮多種不同場(chǎng)景以及理解成本的問題，最終選用兩段獎(jiǎng)勵(lì)計(jì)時(shí)組件的方式。
3、彩蛋營造驚喜，提升轉(zhuǎn)化
為了更好的匹配各大電商平臺(tái)調(diào)起類廣告的預(yù)算，大促期間的突然出現(xiàn)的禮物彩蛋為用戶營造節(jié)日驚喜感，在點(diǎn)擊行為后，紅包元素的彈窗與彩帶動(dòng)畫形式來承載金幣獎(jiǎng)勵(lì)與氛圍，獎(jiǎng)勵(lì)感知的觸達(dá)能夠提升用戶的獲得感，同時(shí)在獎(jiǎng)勵(lì)彈窗上進(jìn)一步承載調(diào)起任務(wù)，從而更好的滿足客戶營銷訴求。
4、強(qiáng)化轉(zhuǎn)化組件，增強(qiáng)獎(jiǎng)勵(lì)觸達(dá)
延續(xù)以上驚喜感獎(jiǎng)勵(lì)滿足促轉(zhuǎn)化的思路，針對(duì)下載類廣告，我們?cè)谵D(zhuǎn)化組件上進(jìn)行與獎(jiǎng)勵(lì)內(nèi)容的結(jié)合，在任務(wù)計(jì)時(shí)完成但并沒有形成轉(zhuǎn)化的時(shí)機(jī)下，通過變色與光效視覺吸引來傳遞獎(jiǎng)勵(lì)信息，通過強(qiáng)化獎(jiǎng)勵(lì)感知和轉(zhuǎn)化組件來助力轉(zhuǎn)化決策。
寫在最后
激勵(lì)視頻廣告至今經(jīng)歷了多個(gè)不同的階段，如何在商業(yè)效果與用戶感知之間選取一個(gè)平衡點(diǎn)，一直都是激勵(lì)視頻廣告的長(zhǎng)久的設(shè)計(jì)課題，目前也只是一個(gè)開始，還有很多的設(shè)計(jì)提轉(zhuǎn)機(jī)會(huì)點(diǎn)等待我們?nèi)ド钔冢嘈旁诓痪玫膶砟軌蛱剿鞲佣嘣募?lì)玩法，發(fā)現(xiàn)更多契合用戶訴求的場(chǎng)景，為更好的價(jià)值生產(chǎn)不斷迭代功能與體驗(yàn)，我們希望能夠給予用戶、客戶、平臺(tái)更多的價(jià)值增益，做用戶喜歡、客戶滿意、平臺(tái)有利的商業(yè)設(shè)計(jì)。
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(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)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( ssll180.com )是一家專注而深入的界面設(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ù)、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ì)的小編 http://ssll180.com