看完本篇文章，你會(huì)學(xué)到以下內(nèi)容：
1、什么是詳情頁(yè)
2、詳情頁(yè)設(shè)計(jì)原則
3、詳情頁(yè)的構(gòu)成
4、詳情頁(yè)設(shè)計(jì)要點(diǎn)拆解
一、什么是詳情頁(yè)？
詳情頁(yè)向用戶展示一個(gè)對(duì)象的完整信息，主要用于信息瀏覽，允許對(duì)該對(duì)象發(fā)起編輯等操作。如電商的訂單詳情，OA的審批詳情等等。
二、詳情頁(yè)設(shè)計(jì)原則？
1、直接了當(dāng)
信息盡量平鋪展示，如沒(méi)有必要不要做隱藏折疊。
2、層次分明
按照接近原則，對(duì)信息分層分組展示，降低單個(gè)頁(yè)面內(nèi)信息復(fù)雜度。
3、化繁為簡(jiǎn)
減少?gòu)?fù)雜結(jié)構(gòu)的使用，盡量使用相似的結(jié)構(gòu)和模塊，降低結(jié)構(gòu)差異對(duì)用戶進(jìn)行干擾，讓用戶聚焦信息本身。
三、詳情頁(yè)構(gòu)成
詳情頁(yè)由標(biāo)題、標(biāo)簽頁(yè)、圖片、文字詳情、按鈕、可視化、列表、表格、篩選、數(shù)據(jù)統(tǒng)計(jì)、進(jìn)度軸、標(biāo)簽構(gòu)成
詳情頁(yè)的特點(diǎn)：1、內(nèi)容雜，什么元素/模塊都可能出現(xiàn)。2、布局多，布局沒(méi)有套路，核心是做好內(nèi)容分塊和視覺(jué)引導(dǎo)。3、差異大，頁(yè)面與頁(yè)面巨大差異
四、詳情頁(yè)設(shè)計(jì)要點(diǎn)拆解
1.容器
由內(nèi)容由少到多劃分為原位展開(kāi)、氣泡卡片、彈窗、抽屜、頁(yè)面。能優(yōu)先滿足內(nèi)容收納的同時(shí)，容易盡可能輕量。
2.布局
根據(jù)內(nèi)容從簡(jiǎn)單到復(fù)雜可分為基礎(chǔ)樣式、標(biāo)題分組、色塊/分割線/卡片分組、錨點(diǎn)定位/標(biāo)簽頁(yè)、自由布局。核心是做好內(nèi)容分區(qū)、視覺(jué)引導(dǎo)符合用戶操作習(xí)慣。
布局注意事項(xiàng)：把用戶最關(guān)心的內(nèi)容放在最顯眼的地方
3.交互操作
交互操作可分為編輯（原位/氣泡/彈窗/頁(yè)面），查看詳情（內(nèi)容不多的話可以少用頁(yè)面容器，減少套娃），業(yè)務(wù)操作（層級(jí)清晰，符合用戶操作習(xí)慣）。
企業(yè)級(jí)B端產(chǎn)品具有行業(yè)壁壘高、業(yè)務(wù)復(fù)雜、服務(wù)角色多等特點(diǎn)，在大型迭代項(xiàng)目中，如何做好設(shè)計(jì)協(xié)同，把握設(shè)計(jì)一致性和還原度常常讓很多設(shè)計(jì)團(tuán)隊(duì)感覺(jué)無(wú)從下手，找不到切入點(diǎn)。在長(zhǎng)期的項(xiàng)目實(shí)踐中我們發(fā)現(xiàn)，做好設(shè)計(jì)規(guī)范能規(guī)范可以幫助個(gè)人、團(tuán)隊(duì)以及整個(gè)企業(yè)提高效率和產(chǎn)出質(zhì)量，保障用戶體驗(yàn)統(tǒng)一。
那么，我們?cè)撊绾巫龊皿w驗(yàn)標(biāo)準(zhǔn)化，保障基礎(chǔ)體驗(yàn)一致性？下面將和大家分享我們公司在構(gòu)建設(shè)計(jì)規(guī)范的實(shí)踐案例。
以我們?cè)O(shè)計(jì)團(tuán)隊(duì)為例，隨著業(yè)務(wù)不斷擴(kuò)大，定制化需求不斷增加，大型迭代項(xiàng)目做不好設(shè)計(jì)和開(kāi)發(fā)協(xié)同，導(dǎo)致出現(xiàn)“體驗(yàn)一致性差”“設(shè)計(jì)效率低”“還原度不可控”等問(wèn)題。如何有效解決這些問(wèn)題呢？可以通過(guò)構(gòu)建設(shè)計(jì)規(guī)范，以保證一致性，實(shí)現(xiàn)工作提效。
從不同角度出發(fā)，構(gòu)建設(shè)計(jì)規(guī)范都能發(fā)揮積極的作用。
對(duì)企業(yè)來(lái)說(shuō)：有利于實(shí)現(xiàn)產(chǎn)品經(jīng)理、設(shè)計(jì)和研發(fā)的輸出一致。設(shè)計(jì)側(cè)主動(dòng)建立產(chǎn)品設(shè)計(jì)規(guī)范，很大程度上是為了做好設(shè)計(jì)管控，實(shí)現(xiàn)原型、設(shè)計(jì)稿到線上頁(yè)面統(tǒng)一的設(shè)計(jì)語(yǔ)言，從根本上提升設(shè)計(jì)質(zhì)量和還原度，提高用戶滿意度。
對(duì)個(gè)人來(lái)說(shuō)：當(dāng)多個(gè)設(shè)計(jì)師共同協(xié)作同一項(xiàng)目時(shí)，由于設(shè)計(jì)理解不一致等原因，容易出現(xiàn)設(shè)計(jì)控件使用混亂等問(wèn)題。若有詳細(xì)的設(shè)計(jì)規(guī)范作為引導(dǎo)，有利于實(shí)現(xiàn)產(chǎn)品各個(gè)模塊間的一致性。組件化的工具也能減少機(jī)械重復(fù)性的工作，讓設(shè)計(jì)師將更多精力投入到用戶研究和提升用戶體驗(yàn)上。
產(chǎn)品有不同發(fā)展階段，設(shè)計(jì)規(guī)范同樣也有，不同階段下的產(chǎn)品目標(biāo)和規(guī)范需要覆蓋的內(nèi)容都不盡相同。我們要既要避免做多，保證投入產(chǎn)出比最大化；同時(shí)也要構(gòu)建一個(gè)合理的規(guī)范迭代思路。
該階段的產(chǎn)品核心目標(biāo)是「驗(yàn)證產(chǎn)品或商業(yè)模型」，業(yè)務(wù)需求都是小步快跑、頻繁迭代。產(chǎn)品處于從0到1的野蠻生長(zhǎng)狀態(tài)，存在著“先滿足功能，再優(yōu)化體驗(yàn)”的情況，導(dǎo)致該階段的產(chǎn)品體驗(yàn)往往不太過(guò)關(guān)。
搭建目的：通過(guò)定義原則，梳理關(guān)鍵頁(yè)面和流程，搭建基本的規(guī)范框架。既讓團(tuán)隊(duì)對(duì)產(chǎn)品有統(tǒng)一的設(shè)計(jì)價(jià)值觀和認(rèn)知判斷；從頁(yè)面到流程，又能對(duì)應(yīng)設(shè)計(jì)參照標(biāo)準(zhǔn)；同時(shí)業(yè)務(wù)可以在規(guī)定的框架下發(fā)展，不僅讓產(chǎn)品體驗(yàn)的根基牢固，而且不會(huì)限制功能設(shè)計(jì)自由。
搭建范圍：「全局說(shuō)明」「頁(yè)面布局」「通用流程」
該階段的產(chǎn)品基本形態(tài)已穩(wěn)定，也形成了初步的模型結(jié)構(gòu)。后續(xù)迭代是在現(xiàn)有結(jié)構(gòu)的基礎(chǔ)上，進(jìn)行增加或優(yōu)化功能。雖然探索期定義了產(chǎn)品原則、布局和流程，但探索期產(chǎn)品的自由生長(zhǎng)，會(huì)導(dǎo)致不少設(shè)計(jì)細(xì)節(jié)不一致，從而影響了產(chǎn)品整體的體驗(yàn)和效率。
搭建目的：通過(guò)回溯整理過(guò)往設(shè)計(jì)，沉淀優(yōu)化成完整的交互規(guī)范。再根據(jù)規(guī)范統(tǒng)一產(chǎn)品體驗(yàn)，進(jìn)一步優(yōu)化流程和效率， 讓整個(gè)產(chǎn)品體驗(yàn)達(dá)到相對(duì)穩(wěn)定的狀態(tài)。
搭建范圍：「全局說(shuō)明」「頁(yè)面布局」「通用流程」「基礎(chǔ)組件」「業(yè)務(wù)組件」
好的設(shè)計(jì)規(guī)范有很多優(yōu)秀的例子，例如Google、Apple、Microsoft這些引領(lǐng)全球設(shè)計(jì)風(fēng)尚的公司，設(shè)計(jì)規(guī)范已經(jīng)上升為設(shè)計(jì)語(yǔ)言，指導(dǎo)旗下所有產(chǎn)品的設(shè)計(jì)。國(guó)內(nèi)做的優(yōu)秀的案例，比如Ant Design，Element，arco.design等，像這類的產(chǎn)品已經(jīng)實(shí)現(xiàn)了端到端的體驗(yàn)一致，把交互、前端和視覺(jué)的事情一并解決了，是值得學(xué)習(xí)的典范。這些優(yōu)秀的設(shè)計(jì)規(guī)范都包含以下幾個(gè)特點(diǎn)：靈活性，可擴(kuò)展性，系統(tǒng)性和標(biāo)準(zhǔn)性。
一般團(tuán)隊(duì)內(nèi)部構(gòu)建的設(shè)計(jì)規(guī)范都源于某一產(chǎn)品或者業(yè)務(wù)，因?yàn)橹饕菆F(tuán)隊(duì)內(nèi)部成員使用，追求的是投入產(chǎn)出比最大化。所以可在行業(yè)通用設(shè)計(jì)規(guī)范的基礎(chǔ)上，適度參考行業(yè)設(shè)計(jì)規(guī)范，能復(fù)用的直接參考，同時(shí)專注于業(yè)務(wù)本身，具有業(yè)務(wù)特性的再集合業(yè)務(wù)綜合考慮，使整個(gè)規(guī)范制定效率更高，科學(xué)性、指導(dǎo)性更強(qiáng)。
設(shè)計(jì)規(guī)范的執(zhí)行和推動(dòng)主要分為四大步驟：
類型梳理：分析業(yè)務(wù)場(chǎng)景，整理和歸類組件，評(píng)估具體組件優(yōu)先級(jí)和迭代計(jì)劃；
全局說(shuō)明：統(tǒng)一布局，色板，字體，常用樣式，規(guī)范設(shè)計(jì)語(yǔ)言；
抽象設(shè)計(jì)：將設(shè)計(jì)共性抽象出來(lái)，構(gòu)建組件通用方案；
效果驗(yàn)證：通過(guò)定性/定量數(shù)據(jù)追蹤效果，分析原因，迭代改進(jìn)；
收集現(xiàn)有設(shè)計(jì)頁(yè)面，分析業(yè)務(wù)場(chǎng)景，再參考行業(yè)通用規(guī)范的定義，整理和歸類組件，可以先羅列完整，再根據(jù)產(chǎn)品實(shí)際業(yè)務(wù)需要進(jìn)行增刪改。
全局說(shuō)明：明確影響整站各個(gè)模塊、各個(gè)頁(yè)面設(shè)計(jì)的原則和規(guī)范，指導(dǎo)我們后續(xù)各種規(guī)范的定義和設(shè)計(jì)。包括統(tǒng)一布局，色板，字體，樣式等設(shè)計(jì)規(guī)則。
基礎(chǔ)組件：可參考行業(yè)通用規(guī)范中的基礎(chǔ)組件分類和組成，因?yàn)榇蟛糠只A(chǔ)組件都具有一定的通用性，站在巨人的肩膀上更高效。這里我們根據(jù)實(shí)際情況，將基礎(chǔ)組件分為導(dǎo)航，通用，數(shù)據(jù)展示，數(shù)據(jù)錄入，反饋5個(gè)大模塊，每個(gè)模塊下再細(xì)分各小類，構(gòu)成基礎(chǔ)組件的類目。
業(yè)務(wù)組件：根據(jù)業(yè)務(wù)需求，可以定義屬于自己的業(yè)務(wù)組件，這也是區(qū)別于其他通用行業(yè)組件庫(kù)的一個(gè)核心部分。
因?yàn)樵诖篌w量產(chǎn)品設(shè)計(jì)中，每個(gè)模塊都由不同的同學(xué)負(fù)責(zé)，這樣全局產(chǎn)品的把握就會(huì)降低，需要去補(bǔ)充全局規(guī)范說(shuō)明去維持產(chǎn)品全局通用部分的一致性。包括布局，色彩規(guī)范，字體，樣式等；
抽象設(shè)計(jì)是設(shè)計(jì)規(guī)范中最核心，工作量最大，難度最高的一個(gè)環(huán)節(jié)。我們可以將它拆解成幾個(gè)部分，先做出基礎(chǔ)組件，再基于基礎(chǔ)組件和業(yè)務(wù)需求抽象設(shè)計(jì)業(yè)務(wù)組件，最后抽象成頁(yè)面模板。
基礎(chǔ)組件
組件庫(kù)的搭建，就一定要提到原子思維。道爾頓原子論認(rèn)為，物質(zhì)世界的最小單位是原子，原子是單一的，獨(dú)立的，不可被分割的，在化學(xué)變化中保持著穩(wěn)定的狀態(tài)。這個(gè)原子理論同樣適用于設(shè)計(jì)系統(tǒng)中。
其中，最小單位設(shè)計(jì)元素就是基礎(chǔ)組件。我們?cè)谧鲈O(shè)計(jì)系統(tǒng)的時(shí)候希望當(dāng)你改動(dòng)任何一個(gè)原子，你有自信其他所有依賴于這個(gè)原子的部件全部自動(dòng)更新。只有滿足了這一點(diǎn)，設(shè)計(jì)系統(tǒng)設(shè)想中的效率、解放生產(chǎn)力才會(huì)真正實(shí)現(xiàn)。例如，在sketch中，分享樣式和嵌套符號(hào)的使用。
業(yè)務(wù)組件
在構(gòu)建完基礎(chǔ)組件后，可以根據(jù)業(yè)務(wù)需求，將使用頻率較高的組件進(jìn)行評(píng)估，抽象成業(yè)務(wù)組件。
一般業(yè)務(wù)組件可分成兩大類：
一類是由多個(gè)基礎(chǔ)組件組成的帶有業(yè)務(wù)需求復(fù)合組件，如：復(fù)合標(biāo)簽，快捷時(shí)間選擇器等；
另一類是針對(duì)特定業(yè)務(wù)場(chǎng)景的業(yè)務(wù)組件：如地圖，站點(diǎn)等；
頁(yè)面模版
在完成基礎(chǔ)組件和業(yè)務(wù)組件的構(gòu)建后，我們可以根據(jù)全局說(shuō)明，利用組件搭建頁(yè)面模板。頁(yè)面模版不僅能有效的提升組件的使用效率，也能提供很好的組件使用示范效應(yīng)，加強(qiáng)設(shè)計(jì)說(shuō)明和組件之間的結(jié)合。
組件質(zhì)量評(píng)估：從物理到行為層，包括樣式、組件、框架、組件交互 共4個(gè)維度。通過(guò)一致性評(píng)分衡量標(biāo)準(zhǔn)化覆蓋的好壞。
系統(tǒng)應(yīng)用層面的評(píng)價(jià)：
系統(tǒng)是否幫助業(yè)務(wù)提效；
當(dāng)業(yè)務(wù)不能直接應(yīng)用系統(tǒng)，能否靈活改動(dòng)；
系統(tǒng)是否幫助業(yè)務(wù)變得更有競(jìng)爭(zhēng)力、更創(chuàng)新；
迭代機(jī)制
當(dāng)我們完成設(shè)計(jì)規(guī)范的整體構(gòu)建后，對(duì)于新需求，通過(guò)評(píng)估復(fù)用性、通用性和優(yōu)先級(jí)，低級(jí)別的走定制設(shè)計(jì)完成交付。高級(jí)別的通過(guò)抽象設(shè)計(jì)、內(nèi)審、沉淀到組件庫(kù)中。
機(jī)制提效
在完成設(shè)計(jì)規(guī)范的構(gòu)建后，我們可以聯(lián)合產(chǎn)品經(jīng)理和前端工程師，幫助每個(gè)環(huán)節(jié)的人員快速搭建產(chǎn)出物，推動(dòng)上下游機(jī)制提效。
例如，我們會(huì)基于設(shè)計(jì)規(guī)范，為產(chǎn)品經(jīng)理提供符合設(shè)計(jì)規(guī)范的Axure元件庫(kù)，產(chǎn)品經(jīng)理使用元件庫(kù)，可以快速搭建原型，產(chǎn)出prd，與設(shè)計(jì)師、開(kāi)發(fā)的溝通也更加順暢。簡(jiǎn)單的修改可以跳過(guò)設(shè)計(jì)師出圖這一步驟，直接和開(kāi)發(fā)溝通，極大加快前期的節(jié)奏。甚至通過(guò)借助元件庫(kù)，產(chǎn)品經(jīng)理可以搭建出高保真原型，用于直接和用戶確認(rèn)或者給客戶進(jìn)行demo的演示。
基于設(shè)計(jì)規(guī)范，推動(dòng)研發(fā)實(shí)現(xiàn)組件代碼化，通過(guò)設(shè)計(jì)標(biāo)準(zhǔn)化可以達(dá)到研發(fā)工業(yè)化。通過(guò)定義標(biāo)準(zhǔn)規(guī)范，提高流程、組件的復(fù)用率，開(kāi)發(fā)側(cè)就可以制定相應(yīng)組件，形成前端腳手架，方便后期迭代的組件化使用，有效地避免不必要的分歧點(diǎn)和重復(fù)造輪子，同時(shí)減少上線前設(shè)計(jì)走查、測(cè)試的工作量，保證落地效果，提升生產(chǎn)力。
以上就是我們?cè)跇?gòu)建自己的企業(yè)設(shè)計(jì)規(guī)范的流程，最后，給大家展示一下，我們目前的企業(yè)設(shè)計(jì)規(guī)范和部分應(yīng)用情況。
今天帶來(lái)的是《交互設(shè)計(jì)沉思錄》第一部分的第二章「管理復(fù)雜性」。
主要講述的是交互設(shè)計(jì)師是如何理解&組織所獲取到的數(shù)字、文字?jǐn)?shù)據(jù)。
通過(guò)這些步驟&方法能夠幫助交互設(shè)計(jì)師更加清楚信息間的關(guān)系，建立很強(qiáng)的心智圖景。
其間也穿插了很多職能相關(guān)部分的對(duì)比，如「交互設(shè)計(jì)師與信息架構(gòu)師」「交互設(shè)計(jì)師與界面設(shè)計(jì)師」「交互設(shè)計(jì)師與電子工程師」。
作者：Viola_1241 來(lái)源：站酷網(wǎng)
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加微信ban_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.hglv.net )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
今天帶來(lái)的是《交互設(shè)計(jì)沉思錄》第一部分的第二章「管理復(fù)雜性」。
主要講述的是交互設(shè)計(jì)師是如何理解&組織所獲取到的數(shù)字、文字?jǐn)?shù)據(jù)。
通過(guò)這些步驟&方法能夠幫助交互設(shè)計(jì)師更加清楚信息間的關(guān)系，建立很強(qiáng)的心智圖景。
其間也穿插了很多職能相關(guān)部分的對(duì)比，如「交互設(shè)計(jì)師與信息架構(gòu)師」「交互設(shè)計(jì)師與界面設(shè)計(jì)師」「交互設(shè)計(jì)師與電子工程師」。
藍(lán)藍(lán)設(shè)計(jì)( www.hglv.net )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
注：閱讀此文章大約需要30分鐘
先給大家看兩個(gè)案例：大家都很熟悉的，自動(dòng)感應(yīng)測(cè)溫，不需要人為操控
第二個(gè)案例則是nest智能恒溫器，比起傳統(tǒng)的需要人為的去手動(dòng)觸發(fā)調(diào)節(jié)溫度，他能夠?qū)崟r(shí)感知家里的溫度，基于不同的場(chǎng)景與客戶習(xí)慣去調(diào)節(jié)溫度，比起傳統(tǒng)模式便捷了不少
那么從這兩個(gè)案例中，大家可以發(fā)現(xiàn)，傳統(tǒng)人機(jī)交互與下一代人機(jī)交互是有著本質(zhì)區(qū)別的，傳統(tǒng)人機(jī)交互一直以來(lái)都是輸入輸出的被動(dòng)交互邏輯，什么是被動(dòng)交互呢，就是必須有用戶向機(jī)器發(fā)送指令，機(jī)器接收指令，執(zhí)行后將結(jié)果反饋給用戶。而新的交互模式，則是用戶不需要做任何指令輸入，機(jī)器自動(dòng)感知當(dāng)前的場(chǎng)景，來(lái)理解你的意圖是什么，來(lái)去主動(dòng)幫你完成任務(wù)。那么這是如何實(shí)現(xiàn)的呢，主要是依靠傳感器，算法等實(shí)現(xiàn)的。這也說(shuō)明了我們的生活開(kāi)始下一代人機(jī)交互的新時(shí)代。
這也就是今天的主題，那么今天，我會(huì)詳細(xì)講解，把這個(gè)課題講透。包括什么是智能感知交互，他的底層框架模型是怎樣的，以及結(jié)合案例是講解他是如何落地使用的，
回顧整個(gè)人機(jī)交互的發(fā)展史，經(jīng)過(guò)了不同的階段，從命令行界面，也就是通過(guò)手柄，遙控等進(jìn)行交互，再然后是圖形用戶界面，也就是觸摸屏等交互，再到語(yǔ)音交互，圖像識(shí)別等等
人們對(duì)于人機(jī)交互也從依賴于人去手動(dòng)觸發(fā)，再到趨于自然和本能，隨著技術(shù)的發(fā)展，我們也迎來(lái)的技能感知交互的新時(shí)代
在這里也對(duì)智能感知交互做了初步定義：是以人為中心，基于傳感器、大數(shù)據(jù)及AI技術(shù)，自動(dòng)感知用戶情景，理解用戶意圖，主動(dòng)響應(yīng)用戶需求，真正提升人機(jī)交互效率
那么智能感知交互也有幾個(gè)特征，更加的趨于自然，輸入輸出方式更加無(wú)感知，智能
接下來(lái)是最核心的重點(diǎn)，智能感知交互的框架是怎么樣的，他的底層邏輯是怎樣運(yùn)行的，這也是整套理論知識(shí)的基石和核心。
智能感知交互模型主要分為三層：
那么以剛開(kāi)頭的無(wú)接觸測(cè)溫門(mén)為例，在感知層主要通過(guò)紅外傳感器去感知人的體溫，在決策層則是當(dāng)遇到發(fā)燒的顧客則需要進(jìn)行干預(yù)，在表達(dá)層，則會(huì)通過(guò)音效、光效做出主動(dòng)的預(yù)警的設(shè)計(jì)表達(dá)。
那么我們接下來(lái)詳細(xì)的看下整個(gè)框架模型，那么，感知層又細(xì)分為三大模塊：
第一塊為【用戶感知】，第二塊為【場(chǎng)景感知】，第三塊為【行為感知】。 那我這里給他串聯(lián)起來(lái)，簡(jiǎn)單來(lái)說(shuō)就是感知用戶是誰(shuí)，在什么楊的場(chǎng)景下，做了什么樣的行為。那么決策層則細(xì)分為兩大塊，也就是無(wú)感知之后怎么做決策，理解用戶的意圖是什么，。那么第二則是做出決策后怎么去做設(shè)計(jì)表達(dá)和輸出呢，受到那些變量因素的影響，這是由設(shè)計(jì)表達(dá)影響因子模型決定的。那么最后一層則是正式做出設(shè)計(jì)表達(dá)，目前表達(dá)的介質(zhì)主要有界面、聲音、光效、觸覺(jué)、動(dòng)作等。那么這張圖是一個(gè)大框架，接下來(lái)我會(huì)詳細(xì)的剖析每一層
先講第一層，感知層，就是感知技術(shù)，這里在進(jìn)一步細(xì)分為三個(gè)板塊，用戶感知，場(chǎng)景感知，行為感知，用戶感知為，用戶性別、地域、年齡等等特征，場(chǎng)景感知?jiǎng)t是什么時(shí)間、什么地點(diǎn)，當(dāng)前環(huán)境、溫度等等，行為感知?jiǎng)t是去感知，你用了什么工具，對(duì)什么對(duì)象，做了什么操作行為等等。針對(duì)不同的業(yè)務(wù)會(huì)有不同的針對(duì)感知，例如開(kāi)頭案例中的體溫測(cè)量，他對(duì)溫度這一屬性重點(diǎn)感知。大家這里也能想到，世間萬(wàn)物都可感知，為了方便后續(xù)的統(tǒng)計(jì)和分析，需要進(jìn)行加工處理，需要將當(dāng)前的感知線上化和數(shù)據(jù)化，同時(shí)會(huì)將這些數(shù)據(jù)進(jìn)行標(biāo)簽化的處理，那么如何去處理這些數(shù)據(jù)呢，這里主要分成三類：
簡(jiǎn)單來(lái)說(shuō)就是從傳感器或者線上平臺(tái)等渠道直接獲取的數(shù)據(jù)。舉個(gè)例子，比如說(shuō)登錄網(wǎng)站，那么我們可以獲取用戶ID，從溫度傳感器，我們可以直接獲得溫度。這些都是統(tǒng)計(jì)類數(shù)據(jù)
簡(jiǎn)單來(lái)說(shuō)就是基于一定的規(guī)則產(chǎn)生，舉個(gè)例子，比如我們規(guī)定用戶與設(shè)備之間的距離為0~40cm為近距離，，工人每小時(shí)生產(chǎn)產(chǎn)品80件定義為熟練工，這些都定義為規(guī)則類數(shù)據(jù)
他是通過(guò)機(jī)器學(xué)習(xí)挖掘產(chǎn)生，根據(jù)相關(guān)屬性進(jìn)行預(yù)測(cè)和判斷。比如淘寶上對(duì)男女的劃分，他通過(guò)你買的商品去判斷你是男生還是女生，你的興趣愛(ài)好是什么
那么接下來(lái)我們講決策層,那么剛剛我也介紹了整個(gè)框架模型，決策層主要有兩部分，現(xiàn)在講述第一部分，也就是整體框架中紅色圈住部分，針對(duì)【意圖識(shí)別決策模型】進(jìn)行剖析。簡(jiǎn)單來(lái)說(shuō)就是我感知之后去理解用戶的訴求是什么，這里也抽象為四大類決策方向:行為干預(yù)、推送建議、意圖預(yù)判、自動(dòng)決策
簡(jiǎn)單來(lái)說(shuō)就是我感知到當(dāng)前的行為是異常、錯(cuò)誤的，會(huì)做出主動(dòng)預(yù)警進(jìn)行干預(yù)。舉個(gè)例子，比如圖中的場(chǎng)景，通過(guò)攝像頭的圖像識(shí)別檢測(cè)到工人的操作不規(guī)范，會(huì)通過(guò)光效和音效的預(yù)警來(lái)進(jìn)行行為干預(yù)
是基于你的愛(ài)好去推送不同的內(nèi)容
感知之后去預(yù)判，你接下來(lái)會(huì)做什么。比如上圖，當(dāng)系統(tǒng)之前感知到用戶粘貼了地址和電話信息，那么系統(tǒng)就預(yù)判你是不是要寄快遞
比如陀螺儀識(shí)別用戶將設(shè)備傾斜了多少度，將屏幕做自動(dòng)關(guān)屏
那么前面講述的是決策層的第一大板塊，那么現(xiàn)在講第二板塊，也就是設(shè)計(jì)表達(dá)影響因子模型。簡(jiǎn)單來(lái)說(shuō)，就是我已經(jīng)決策完成，那么我怎么去做決策和輸出，受那些變量因子影響呢
那么這里也抽象為三大類變量因子，用戶感官因子，環(huán)境因子，設(shè)備因子。
比如在【用戶感官因子】上，會(huì)去分析，用戶當(dāng)前的認(rèn)知負(fù)荷是什么樣的，如果當(dāng)前是在黑暗的情況下，用戶的視覺(jué)負(fù)荷比較大的話，那么設(shè)計(jì)表達(dá)是不是就應(yīng)該以聽(tīng)覺(jué)和觸覺(jué)為主。同時(shí)我們還會(huì)去分析用戶是運(yùn)動(dòng)狀態(tài)還是靜止?fàn)顟B(tài)，如果是運(yùn)動(dòng)狀態(tài)那么在設(shè)計(jì)的時(shí)候是不是需要考慮，字體是不是需要更大，方便用戶獲取信息等等案例。
【環(huán)境因子】就是環(huán)境光線的強(qiáng)弱，噪聲的大小等等，比如設(shè)計(jì)的時(shí)候，是在室外，光線比較強(qiáng)的環(huán)境，那么設(shè)計(jì)的界面對(duì)比度是不是就得更強(qiáng)。
【設(shè)備因子】就是傳統(tǒng)設(shè)計(jì)當(dāng)中，他的輸入通道是物理按鍵，還是觸屏，還是語(yǔ)音，手勢(shì)這些，以及輸出通道，有沒(méi)有喇叭，指示燈等等。這些都會(huì)影響我們采用怎樣的方式去進(jìn)行設(shè)計(jì)表達(dá)。
那么第三層就是我們最熟悉的表達(dá)層，也就是具體的交互執(zhí)行。常用的表達(dá)方式主要有界面，音效，光效，觸覺(jué)，動(dòng)作這幾類，這些大家都很熟悉，這里就不做詳細(xì)的講解。
那智能感知交互依賴的技術(shù)和條件也是比較多的，所以他是分企業(yè)分階段發(fā)展的。那么這里主要分為5個(gè)等級(jí)。從無(wú)智能到完全智能，那么目前呢主要處在中間C2這個(gè)條件智能的階段中。簡(jiǎn)單來(lái)說(shuō)就是機(jī)器自動(dòng)感知部分情景，再加上人的輔助輸入，讓系統(tǒng)完成任務(wù)。
那么前面說(shuō)這些都是偏理論偏框架類的，那么下面我會(huì)結(jié)合案例具體講解智能感知交互是怎樣去落地使用的
那么當(dāng)有了模型框架后怎樣應(yīng)用呢，首先，離不開(kāi)設(shè)計(jì)流程，和傳統(tǒng)設(shè)計(jì)流程類似，智能感知交互的設(shè)計(jì)流程也為：【發(fā)現(xiàn)一個(gè)機(jī)會(huì)點(diǎn)，制定對(duì)應(yīng)的設(shè)計(jì)策略，然后定義具體的設(shè)計(jì)表達(dá)，持續(xù)監(jiān)測(cè)進(jìn)行迭代和優(yōu)化?！窟@樣構(gòu)成，那么大家就會(huì)想了，那我們的不同之處在哪呢？這其實(shí)離不開(kāi)設(shè)計(jì)對(duì)于技術(shù)的洞察力，我們?cè)O(shè)計(jì)對(duì)于技術(shù)的了解和應(yīng)用其實(shí)貫穿在全流程中。
比如說(shuō)，在我們?cè)谧鯱ED設(shè)計(jì)中，發(fā)現(xiàn)痛點(diǎn)時(shí)，我們可以通過(guò)問(wèn)卷調(diào)研，訪談?wù){(diào)研獲得用戶的主觀數(shù)據(jù)，也可以通過(guò)埋點(diǎn)檢測(cè)獲得用戶的行為數(shù)據(jù)，而我們?cè)趦?yōu)化的時(shí)候，除了從設(shè)計(jì)側(cè)出發(fā)的體驗(yàn)優(yōu)化，那是不是可以不給自己設(shè)立邊界，比如從技術(shù)出發(fā)，讓算法自身不斷學(xué)習(xí)，讓準(zhǔn)確率有所提升。帶著這樣的不同，我來(lái)舉一個(gè)案例。
這塊沙琪瑪出生在一個(gè)非常傳統(tǒng)的食品供應(yīng)鏈公司，她從出生出來(lái)到被運(yùn)送到客戶手中，會(huì)經(jīng)過(guò)4個(gè)空間，12個(gè)節(jié)點(diǎn)。而在這層層的校驗(yàn)中，當(dāng)我們想知道沙琪瑪?shù)馁|(zhì)量，生產(chǎn)日期，和他的位置，需要的是員工的手動(dòng)介入和對(duì)于條形碼的掃描，
但我想更精細(xì)化的知道沙琪瑪具體的信息來(lái)進(jìn)行更好的數(shù)字化管理，那就變得非常困難。所以我們?cè)谙?，怎么可以讓?duì)沙琪瑪?shù)墓芾恚兊酶斆饕恍┠兀歉淖冞@傳統(tǒng)模式的機(jī)會(huì)，就來(lái)自于識(shí)別技術(shù)的發(fā)展。
那么現(xiàn)在已經(jīng)運(yùn)用起來(lái)這樣的技術(shù)了，一些商場(chǎng)的衣服和商品上都會(huì)有RFID標(biāo)簽，比如優(yōu)衣庫(kù)，在進(jìn)行結(jié)賬時(shí)只要將多件商品投送到結(jié)賬框中，就可以一次性識(shí)別多個(gè)商品完成結(jié)賬，這就是RFID的優(yōu)勢(shì)，他可以完成一對(duì)多的批量識(shí)別，并且具有更大的識(shí)別范圍，識(shí)別過(guò)程中不需要設(shè)備和條碼直接對(duì)視。
那我們就要想了，如果每個(gè)沙琪瑪都有一個(gè)RFID碼，那我們是不是就可以批量無(wú)感知的識(shí)別他們了呢。帶著這樣的技術(shù)優(yōu)勢(shì)，我們來(lái)回顧整個(gè)操作流程，我們發(fā)現(xiàn)，在圍繞沙琪瑪?shù)囊粚右粚有ｒ?yàn)中，已我剛剛提到的【行為干預(yù)、意圖預(yù)測(cè)、自動(dòng)決策和推送建議】四個(gè)角度來(lái)找到更智能的優(yōu)化點(diǎn)，比如說(shuō)，當(dāng)沙琪瑪從車間生產(chǎn)出來(lái)，即將被打包的時(shí)候，我們?nèi)绻l(fā)現(xiàn)了一個(gè)異常，可以怎么處理呢，大家覺(jué)得~~~~我們是不是可以進(jìn)行一個(gè)行為干預(yù)，來(lái)將這個(gè)異常及時(shí)的告知給用戶，又或者，我們可以進(jìn)行一個(gè)自動(dòng)決策 ，我們通過(guò)自動(dòng)化設(shè)備，來(lái)吧出現(xiàn)異常的商品進(jìn)行自動(dòng)剔除。
那由于整個(gè)鏈路太長(zhǎng)，所以我現(xiàn)在呢，以沙琪瑪離開(kāi)倉(cāng)庫(kù)的最后一個(gè)校驗(yàn)環(huán)節(jié)為例，來(lái)做展開(kāi)
這個(gè)時(shí)候，用戶拖著托盤(pán)，來(lái)到月臺(tái)，準(zhǔn)備將沙琪瑪裝上卡車，這個(gè)時(shí)候，如果沙琪瑪上錯(cuò)了車，那我們就非常難以將他追溯回來(lái)了。所以這個(gè)時(shí)候，用戶的意圖是非常清晰的，那就是及時(shí)的阻止這個(gè)異常的商品流出倉(cāng)庫(kù)。但我們知道了，那下一步呢，就是讓機(jī)器也知道這一個(gè)意圖，其實(shí)在這個(gè)場(chǎng)景下非常簡(jiǎn)單，無(wú)非是，某人在某場(chǎng)景下做出了某個(gè)行為，而這個(gè)場(chǎng)景下我們可以通過(guò)員工的賬號(hào)ID來(lái)獲取的員工的身份，
我們也可以通過(guò)設(shè)備上在運(yùn)行的秘鑰來(lái)獲得當(dāng)前的實(shí)操場(chǎng)景是什么，
還能通過(guò)RFID的天線，他所識(shí)別到的信號(hào)逐漸增強(qiáng)，來(lái)發(fā)現(xiàn)，啊確實(shí)有一個(gè)用戶，在拖著商品逐漸靠近，那以上這三個(gè)條件，就可以觸發(fā)我們對(duì)于托盤(pán)上的貨物的識(shí)別來(lái)判斷，他上的車是不是對(duì)的呢，數(shù)量是不是準(zhǔn)確呢，一旦發(fā)現(xiàn)異常，我們就需要將信號(hào)及時(shí)的傳給用戶
那下面問(wèn)題就來(lái)了，我們?cè)撛趺幢憩F(xiàn)這個(gè)異常，剛才也提到，我們?cè)O(shè)計(jì)的表達(dá)是多種多樣的，有界面內(nèi)的，界面外的，環(huán)境空間的。而用戶接收的渠道卻非常的單一，無(wú)非是，視覺(jué)、聽(tīng)覺(jué)、觸覺(jué)、甚至以后可能會(huì)有嗅覺(jué)。
所以我們?cè)诙x一個(gè)合適的表達(dá)方案的時(shí)候，就需要考慮到當(dāng)下用戶、環(huán)境、設(shè)備的影響因素，那在我們的場(chǎng)景中，我們應(yīng)該怎樣選擇一個(gè)合適的感官通道來(lái)傳遞這個(gè)異常信號(hào)呢
這就需要我們清晰的了解，在這個(gè)場(chǎng)景下，每一個(gè)感官通道被占用的情況，這樣我們才能選擇其中占據(jù)優(yōu)勢(shì)的那些來(lái)做出我們的設(shè)計(jì)表達(dá)
為此，我們總結(jié)過(guò)往一些學(xué)術(shù)研究，來(lái)將用戶、環(huán)境、設(shè)備他具體的影響程度進(jìn)行數(shù)值化。比如對(duì)于用戶的限制，我們采用VACP的工作負(fù)荷模型來(lái)量化用戶的各個(gè)通道上認(rèn)知資源被占用的程度。而對(duì)于用戶自身的能力限制，我們通過(guò)劍橋大學(xué)提出的一個(gè)無(wú)障礙公式，來(lái)計(jì)算用戶自身能力限制的程度，同樣，我們綜合國(guó)內(nèi)一些常見(jiàn)的標(biāo)準(zhǔn)，來(lái)將環(huán)境因素，例如，亮度、噪聲、和設(shè)備自身的表達(dá)能力進(jìn)行等級(jí)的劃分。那大家就要好奇了，那要數(shù)值化，那數(shù)值化靠譜嗎，我們?cè)趺醋鲞@個(gè)數(shù)值化呢？
那我以VACP工作負(fù)荷模型來(lái)做一個(gè)簡(jiǎn)單的展開(kāi)，他起源與1984年，對(duì)于飛行員在駕駛飛機(jī)的一個(gè)觀察和研究。研究者將他劃分為視覺(jué)、聽(tīng)覺(jué)、認(rèn)知、運(yùn)動(dòng)四個(gè)維度。同時(shí)呢，對(duì)于不同難度系數(shù)的任務(wù)，劃分了不同對(duì)資源程度占用不同的等級(jí)，這樣，我們就可以像查閱字典一樣，來(lái)根據(jù)我們需要的任務(wù)表現(xiàn)，找到這個(gè)通道上對(duì)應(yīng)具體的占用程度
回到我們剛才的場(chǎng)景，當(dāng)用戶拖著托盤(pán)靠近的時(shí)候，他需要時(shí)刻注意眼前的道路，避免和其他物品碰撞，這個(gè)時(shí)候，視覺(jué)上他對(duì)物體的追蹤和跟隨，這個(gè)時(shí)候呢，在視覺(jué)上通道上他會(huì)有77%的占用情況
而聽(tīng)覺(jué)上，雖然他不需要聲音來(lái)辨別道路，但在這個(gè)過(guò)程中，有可能有小組長(zhǎng)會(huì)叫他說(shuō)，唉，你過(guò)來(lái)以下，那這樣我們就需要做一個(gè)聲音的辨認(rèn)，那在聽(tīng)覺(jué)通道上，可能會(huì)有14%的占用程度
而在月臺(tái)上，時(shí)刻會(huì)有運(yùn)輸與發(fā)動(dòng)機(jī)的聲音，這個(gè)大約在70分貝的噪聲，會(huì)給用戶在聽(tīng)覺(jué)上有個(gè)二級(jí)的干擾作用
綜合來(lái)看，首先，我們對(duì)用戶在觸覺(jué)上的反饋通道就被阻斷了，因?yàn)樵O(shè)備端離用戶實(shí)在太遠(yuǎn)了，無(wú)法進(jìn)行一個(gè)觸覺(jué)上的反饋，
而剩下的視覺(jué)通道已經(jīng)被高度占用了，他的有效性是較為有限的。而在聽(tīng)覺(jué)上，雖然他的占用程度沒(méi)這么高，但他收到了環(huán)境噪聲的二級(jí)干擾，所以我們單一的通過(guò)視覺(jué)或者聽(tīng)覺(jué)都不足以達(dá)到一個(gè)有效的反饋?zhàn)饔谩?
好在現(xiàn)在用戶的認(rèn)知還是比較充沛的，所以呢，我們可以通過(guò)視覺(jué)、聽(tīng)覺(jué)、認(rèn)知三個(gè)通道上的整合，來(lái)做一個(gè)比較有效的反饋。
也就是，當(dāng)用戶靠近時(shí)，首先，她會(huì)在聽(tīng)覺(jué)上聽(tīng)到蜂鳴器的報(bào)警，
然后呢，他的注意力就被抓到了燈光的閃爍模式上。，他從他的記憶中記得的燈光的三種閃爍模式上，辨識(shí)到了這個(gè)閃爍意味著說(shuō)：這個(gè)閃爍，標(biāo)識(shí)著我現(xiàn)在拉得沙琪瑪品類有問(wèn)題，那我要好好的檢查一下。那我們的反饋呢，就成功的達(dá)成了
那除了剛剛提到的，多感官的反饋，我們?cè)趯?duì)于界面的設(shè)計(jì)上，也考慮到了多因素的影響
那第一個(gè)就是大家相當(dāng)熟悉的視覺(jué)距離，在我們的生活場(chǎng)景中，，有手持設(shè)備的近視距，也有推動(dòng)設(shè)備的中視距，還有推動(dòng)大型設(shè)備上走向通道門(mén)的，遠(yuǎn)達(dá)130厘米的遠(yuǎn)視距
那面對(duì)這樣不同的視覺(jué)距離，和用戶靜態(tài)或者動(dòng)態(tài)的移動(dòng)狀態(tài)，我們推導(dǎo)了計(jì)算文字高度和文字字號(hào)的公式，
然后計(jì)算這樣的視覺(jué)距離和運(yùn)動(dòng)速度的不同，來(lái)對(duì)關(guān)鍵信息做突出化的展示，保證用戶在看到關(guān)鍵信息時(shí)他的清晰度。那大家可以想想，除了視覺(jué)的距離以外，還有什么因素會(huì)影響到視覺(jué)的表達(dá)呢，
那就是環(huán)境的亮度。在我們的場(chǎng)景內(nèi)，盡管有部分都是在室內(nèi)發(fā)生，但也有部分是在室外發(fā)生，就比如我們舉的沙琪瑪?shù)睦樱窃谠屡_(tái)發(fā)生的場(chǎng)景，那這個(gè)時(shí)候，就需要我們?cè)谏实脑O(shè)計(jì)上，去考慮到環(huán)境亮度的影響，
我們基于 W3C,對(duì)于色彩對(duì)比度的分析，然后定義了我們的配色方案，在對(duì)于室外的環(huán)境，我們會(huì)采用色彩對(duì)比度較高的配色方案，而到了室內(nèi)呢，我們會(huì)動(dòng)態(tài)的將色彩對(duì)比度降低，避免用戶長(zhǎng)時(shí)間注視對(duì)比度高的界面，造成視覺(jué)疲勞
那既然有設(shè)計(jì)方案，那自然就有效果評(píng)估，
我們將智能感知設(shè)計(jì)的評(píng)估，分為主觀和客觀兩個(gè)部分，主觀就是大家比較熟悉的，比如我們感知的這個(gè)情景是否準(zhǔn)確，能不能夠幫助用戶提高效率呢，整個(gè)感受是不是愉悅的，是不是有效的，那么這一塊我們是通過(guò)李克特5點(diǎn)量表問(wèn)卷，和SAM問(wèn)卷來(lái)進(jìn)行度量，另外一部分則是客觀部分，這一部分我們通過(guò)對(duì)于算法模型的評(píng)估指標(biāo)來(lái)進(jìn)行度量，比如他的準(zhǔn)確率，召回率，精準(zhǔn)率來(lái)評(píng)估他的算法是否可以不斷學(xué)習(xí)和進(jìn)步。
那智能感知交互的分享就到這里，這里我衍生一下，從剛才的案例中，主要都是實(shí)操類的，那么我們是不是可以做個(gè)衍生，將智能感知設(shè)計(jì)的思路方法也延用到產(chǎn)品設(shè)計(jì)中呢，比如現(xiàn)在的抖音，頭條，他們?nèi)シ治鑫覀兊南埠?，主?dòng)的替我們進(jìn)行篩選，于是在使用產(chǎn)品的時(shí)候，我們可以說(shuō)是被動(dòng)的看內(nèi)容，被動(dòng)的看到商品被吸引然后下單。那么B端產(chǎn)品也可以以此類推，傳統(tǒng)模式下，是人登錄后臺(tái)，主動(dòng)去找任務(wù)，那么在這里，我們是否可以換個(gè)思路，任務(wù)主動(dòng)來(lái)找人，通過(guò)感知到用戶的身份，我們來(lái)主動(dòng)檢測(cè)，他所關(guān)注的任務(wù)的進(jìn)度，并且在這個(gè)任務(wù)落后的時(shí)候，主動(dòng)發(fā)出預(yù)警和提示，真正的提升用戶的管理效率。
藍(lán)藍(lán)設(shè)計(jì)( www.hglv.net )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
不太愛(ài)看書(shū)，看了老忘，就很容易失去信心，垂頭喪氣、一蹶不振。
比較喜歡做圖，把信息間的邏輯以圖示化的方式表現(xiàn)出來(lái)，能加強(qiáng)理解，后期回顧也會(huì)比較舒心。
所以就有了這個(gè)系列——閱讀圖示化。
可能會(huì)出得很慢，畫(huà)圖比較費(fèi)時(shí)間，想著怎么展示信息間的邏輯也很費(fèi)時(shí)間。
基本是按著小節(jié)一塊內(nèi)容對(duì)應(yīng)單圖/多圖。
基本一張圖是一個(gè)完整的知識(shí)點(diǎn)。
B 端設(shè)計(jì)離不開(kāi)設(shè)計(jì)規(guī)范這個(gè)話題，而做好設(shè)計(jì)規(guī)范是一個(gè)龐大復(fù)雜工程，很多人對(duì)這些處于一知半解狀態(tài)，在這個(gè)系列文章里我通過(guò)結(jié)合自己平時(shí)的項(xiàng)目案例來(lái)談?wù)勛约簩?duì) B 端設(shè)計(jì)規(guī)范的一些理解，希望可以帶來(lái)一些啟發(fā)。
本篇先談?wù)勗O(shè)計(jì)規(guī)范制作的指導(dǎo)思想--設(shè)計(jì)原則，后續(xù)文章再展開(kāi)講一下常見(jiàn)各種組件的設(shè)計(jì)規(guī)范。
設(shè)計(jì)規(guī)范作為 B 端設(shè)計(jì)中非常重要的一環(huán)，它的作用主要體現(xiàn)在以下三個(gè)方面：
在日常工作中，當(dāng)項(xiàng)目組收到一個(gè)新的需求時(shí)，如果已經(jīng)具備了成熟的設(shè)計(jì)規(guī)范體系，其工作效率往往會(huì)得到很好的提升。最后上線的頁(yè)面不用走查還原度。以下是具體工作流程：
通過(guò)前面內(nèi)容我們知道了設(shè)計(jì)規(guī)范對(duì)于產(chǎn)品設(shè)計(jì)意義重大，那么制定設(shè)計(jì)規(guī)范制定依據(jù)又是什么呢？這里就要引出設(shè)計(jì)原則這個(gè)話題，設(shè)計(jì)原則是設(shè)計(jì)規(guī)范的總的綱領(lǐng)，所有的設(shè)計(jì)規(guī)范都應(yīng)當(dāng)以設(shè)計(jì)原則為基準(zhǔn)。設(shè)計(jì)原則主要包含以下內(nèi)容：
接下來(lái)就圍繞設(shè)計(jì)原則清晰、高效、友好、可控這四個(gè)方面展開(kāi)講解。
清晰原則主要從視覺(jué)角度讓界面信息傳達(dá)合理，提高用戶信息獲取效率。主要包含對(duì)比，親密，對(duì)齊，重復(fù)四個(gè)方面。
① 對(duì)比：
對(duì)比是指界面中為了區(qū)分信息層級(jí)，強(qiáng)化元素對(duì)比度，使用的很常見(jiàn)的一種手段，例如下圖中利用大色塊按鈕與線框按鈕形成對(duì)比來(lái)凸顯關(guān)鍵按鈕；又比如通過(guò)對(duì)文字字號(hào)加大，字體加粗，顏色加深來(lái)與弱文案形成對(duì)比，凸顯關(guān)鍵文字信息。
② 親密：
如果信息之間關(guān)聯(lián)性越高，它們之間的距離就應(yīng)該越接近，也越像一個(gè)視覺(jué)單元；反之，則它們的距離就應(yīng)該越遠(yuǎn)，也越像多個(gè)視覺(jué)單元。親密性的根本目的是實(shí)現(xiàn)組織性，讓用戶對(duì)頁(yè)面結(jié)構(gòu)和信息層次一目了然。
③ 對(duì)齊：
在界面設(shè)計(jì)中，將元素進(jìn)行對(duì)齊，既符合了用戶的認(rèn)知特點(diǎn)（我們往往傾向使知覺(jué)對(duì)象的直線延續(xù)還是直線，曲線延續(xù)還是曲線），也能引導(dǎo)視用戶視覺(jué)流，讓用戶更流暢地接收信息。
④ 重復(fù)：
重復(fù)是指相同的元素在項(xiàng)目中重復(fù)引用，作用是可以有效降低用戶的學(xué)習(xí)成本，同時(shí)提高這些元素之間的關(guān)聯(lián)性。
高效原則體現(xiàn)在便捷、輕量、簡(jiǎn)化、一致幾個(gè)方面，目的是通過(guò)合理的方式讓產(chǎn)品操作更加便捷；交互體驗(yàn)與內(nèi)容更加輕量和簡(jiǎn)化；以及產(chǎn)品風(fēng)格保持一致。下面結(jié)合幾個(gè)常見(jiàn)案例說(shuō)明如何應(yīng)用這一原則。
① 合理利用拖拽--便捷、輕量：
在涉及到諸如上傳文件，排序，滑動(dòng)輸入，搭建等需求時(shí)，合理采用拖拽交互往往可以打造更加便捷用戶體驗(yàn)。
② 盡量減少不必要的跳轉(zhuǎn)--便捷、輕量：
用戶操作過(guò)程盡量減少跳轉(zhuǎn)，以實(shí)現(xiàn)交互減步長(zhǎng)，從而使用戶操作更高效輕量。例如能用原位操作就不考慮展開(kāi)收起；能用展開(kāi)收起就不用氣泡...依次類推（優(yōu)先級(jí)從高到低：原位 ＞ 展開(kāi)收起 ＞ 氣泡 ＞ 彈窗 ＞ 抽屜 ＞ 新頁(yè)面）
③ 放大點(diǎn)擊熱區(qū)--便捷：
放大可點(diǎn)擊按鈕熱區(qū)，相對(duì)于較小點(diǎn)擊熱區(qū)，具備更絲滑操作體驗(yàn)。
④ 懸停即現(xiàn)--輕量：
利用懸停即現(xiàn)，避免信息過(guò)于重復(fù)啰嗦，簡(jiǎn)化頁(yè)面提高閱讀體驗(yàn)。
⑤ 折疊次要功能--簡(jiǎn)化：
頁(yè)面功能按鈕過(guò)多時(shí)，可將次要按鈕收納到一起，點(diǎn)擊時(shí)再展開(kāi)，外面只展示高頻操作或重要按鈕，保證頁(yè)面內(nèi)容簡(jiǎn)潔。
⑥ 統(tǒng)一樣式--一致：
一致性是指在不同頁(yè)面中相同操作應(yīng)保持一致視覺(jué)與交互樣式，可有降低用戶學(xué)習(xí)成本與企業(yè)開(kāi)發(fā)成本。
友好原則應(yīng)貫穿用戶操作前，操作中以及操作后三個(gè)階段，給予用戶及時(shí)反饋與幫助。
① 操作前：
在用戶操作前給到合適的引導(dǎo)與幫助，有效減少用戶迷茫感。
② 操作中：
通過(guò)交互效果以及頁(yè)面樣式讓用戶可以清晰感知到自己當(dāng)前操作。
③ 操作后：
利用界面中元素變化清晰直觀展示當(dāng)前的狀態(tài)
可控主要體現(xiàn)在自由和導(dǎo)航兩個(gè)方面。
① 自由：
自由即指用戶可以自由完成一些操作，例如回退，撤銷，終止等。
② 導(dǎo)航：
導(dǎo)航是指用戶隨時(shí)知曉當(dāng)前所在位置，而且可以利用導(dǎo)航隨意到達(dá)目標(biāo)頁(yè)面。
通過(guò)本篇內(nèi)容我們大概知道了制作設(shè)計(jì)規(guī)范主要方向，那么具體到每個(gè)組件上，我們?cè)撊绾稳ピO(shè)計(jì)呢？后續(xù)篇章將細(xì)分聊聊如何去設(shè)計(jì) B 端常見(jiàn)組件的一些內(nèi)容。
部分參考資料：
作者：huang。亮 來(lái)源：優(yōu)設(shè)網(wǎng)
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加微信ban_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.hglv.net )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
談到 B 端組件，很多人的印象是多且雜，想要全面準(zhǔn)確的熟悉這些它們，需要我們對(duì)它有個(gè)合理的歸納總結(jié)。可能每個(gè)人會(huì)從不同的視角去做這件事情，我一般是按照使用場(chǎng)景去對(duì)組件分類整理。
下面我們根據(jù)這個(gè)分類框架來(lái)逐個(gè)聊聊這些組件。
說(shuō)到基礎(chǔ)組件，我想再將其細(xì)分成兩個(gè)大類：一類是通用組件；一類是柵格/導(dǎo)航。怎么去更深刻的理解這兩類的區(qū)別呢，我們可以打個(gè)這樣的形象比方：
通過(guò)這個(gè)比方我們不難理解，柵格/導(dǎo)航是先給頁(yè)面定下了基本框架，而通用組件則是在這個(gè)框架基礎(chǔ)上搭建頁(yè)面的所用到基本元素。
常見(jiàn)通用組件一般包含：色彩/字體/間距/圓角/分割線/按鈕。需要注意的是，通用組件看起來(lái)似乎很簡(jiǎn)單，但卻是決定產(chǎn)品品牌調(diào)性、界面細(xì)節(jié)品質(zhì)的重要因素，在設(shè)計(jì)過(guò)程中需要引起我們的高度重視。
色彩
色彩可分為主色，功能色，中性色三類。下面談?wù)勥@三類顏色如何配置，以及如何定義這些顏色梯度。
① 主色
主色的選取
主色作為產(chǎn)品的主要色調(diào)，在選取時(shí)應(yīng)當(dāng)優(yōu)先選擇品牌色，但有一點(diǎn)要注意的是 B 端和 C 端不一樣，B 端一般不適合采用暖色系作為主色，如果品牌色為暖色調(diào)，則盡量考慮另選取一個(gè)冷色系作為主色，原因有兩點(diǎn)：一是為了避免和警告、錯(cuò)誤色沖突，產(chǎn)生歧義；二是冷色系帶有商務(wù)、專業(yè)、冷靜的情感，更符合 B 端產(chǎn)品調(diào)性。
同時(shí)主色選取應(yīng)避免高亮、熒光色、灰調(diào)高的顏色。
主色的應(yīng)用
主色在設(shè)計(jì)中常見(jiàn)的應(yīng)用包括可交互、選中狀態(tài)、可視化、插圖、圖標(biāo)等場(chǎng)景。
② 功能色
功能色主要用于頁(yè)面表征狀態(tài)，常見(jiàn)有成功色、警告色、報(bào)錯(cuò)色等。
成功色
主要用于操作結(jié)果成功提示以及標(biāo)簽配色等。
警告色
主要用于警告提醒功能以及標(biāo)簽配色等。
報(bào)錯(cuò)色
主要用于系統(tǒng)報(bào)錯(cuò)提示、圓點(diǎn)提示、以及標(biāo)簽配色等。
③ 中性色
中性色在頁(yè)面設(shè)計(jì)中應(yīng)用非常廣泛，從線條到文字再到圖形等等都可以見(jiàn)到它的影子。
Tips：無(wú)論我們主色調(diào)是什么，中性色在調(diào)色時(shí)建議可加入適量的藍(lán)色調(diào)，可讓頁(yè)面觀感更清爽。
④ 顏色梯度
選取好了顏色后，怎么去更合理的定義每個(gè)顏色的梯度呢？（這里主要指對(duì)主色以及功能色定義梯度）
我的方法是給顏色加一層半透明黑/白遮罩，當(dāng)我們需要淺色，通過(guò)調(diào)整白色遮罩透明度得到合適顏色；而當(dāng)我們需要深色時(shí)，則通過(guò)調(diào)整黑色遮罩透明度得到合適顏色。
這樣定義顏色梯優(yōu)點(diǎn)是后續(xù)如果需要更改配色，只需一鍵替換全局色即可，大大提高工作效率。
文字
文字規(guī)范包含字體、字號(hào)、字重、行高等。
① 字體/字重
B 端字體/字重一般按照如下規(guī)范即可：
② 字號(hào)
不同于 C 端，B 端在字號(hào)選擇上應(yīng)當(dāng)盡量保持克制。研究表明，Web 端上正文字號(hào)為 14 時(shí)，可以帶來(lái)最佳閱讀體驗(yàn)。因此在字號(hào)選取上應(yīng)盡量?jī)?yōu)先選取 14 號(hào)字。如果想要區(qū)分文字層級(jí)，優(yōu)先級(jí)從高到低的手法應(yīng)該是顏色、字重、字號(hào)，也就是說(shuō)一般盡量不采用字號(hào)大小區(qū)分文字層級(jí)。
③ 行高
行高可以參照下面的公式或行高參照表快速獲得，如果通過(guò)公式算出行高非整數(shù)或非偶數(shù)，可就近取偶整數(shù)。
間距
關(guān)于間距取值，在目前主流屏幕分辨率下，只有 4 或 8 被整除率最高，考慮到 4 的顆粒度偏小，因此可優(yōu)先考慮 8px 的倍數(shù)作為間距值，在一些特殊場(chǎng)景可采用 4px 的倍數(shù)間距值。
分割線
分割線寬度一般統(tǒng)一為 1px 即可，同時(shí)注意顏色不可過(guò)深，以免干擾主體信息。如果需要不同層級(jí)分割線，可用顏色深淺來(lái)區(qū)分。
圓角
圓角大小一般根據(jù)使用場(chǎng)景控制在 2-3 個(gè)梯度即可，既不能全部統(tǒng)一一個(gè)圓角值，同時(shí)也不適合出現(xiàn)過(guò)多圓角值。同時(shí)圓角值不要過(guò)大，建議控制在 2-6px，以符合 B 端產(chǎn)品嚴(yán)謹(jǐn)專業(yè)調(diào)性。
按鈕
這里從按鈕的大小/狀態(tài)/排放位置幾個(gè)緯度來(lái)講。
① 按鈕尺寸
按鈕高度一般情況下可以設(shè)置 3-4 種尺寸按鈕，足以滿足各種使用場(chǎng)景。至于按鈕寬度，我們一般定義一個(gè)最小值，當(dāng)超過(guò)最小值時(shí)，可設(shè)置 padding 值，按鈕寬度根據(jù)內(nèi)容自適應(yīng)。
② 按鈕狀態(tài)
操作按鈕過(guò)程中，按鈕會(huì)呈現(xiàn)不同的交互狀態(tài)。
③ 按鈕位置
對(duì)于主次按鈕組合，主次按鈕排放位置應(yīng)該怎么規(guī)定呢？可分為兩種場(chǎng)景：一是當(dāng)為從左到右閱讀順序時(shí)，主要按鈕應(yīng)當(dāng)排在次要按鈕左側(cè)。二是當(dāng)為從右到左閱讀順序時(shí)，主要按鈕應(yīng)當(dāng)排在次要按鈕右側(cè)。而當(dāng)一些特殊場(chǎng)景與這個(gè)原則沖突時(shí)，應(yīng)權(quán)衡優(yōu)先級(jí)做出取舍。
熟悉通用組件后，我們要通柵格/導(dǎo)航來(lái)確定產(chǎn)品頁(yè)面框架。
柵格
柵格可以有效地保證設(shè)計(jì)的一致性、讓頁(yè)面布局更具規(guī)律，并提高團(tuán)隊(duì)協(xié)作效率。應(yīng)該如何設(shè)計(jì)柵格呢？
① 柵格區(qū)域的劃定
我們一般習(xí)慣將頁(yè)面從下到上劃分為背景層、全局控制層、內(nèi)容層、臨時(shí)層，而柵格區(qū)應(yīng)當(dāng)用在內(nèi)容層。以下為常見(jiàn)幾種頁(yè)面布局柵格區(qū)的劃定。
② 柵格自適應(yīng)規(guī)則
隨著頁(yè)面寬度變化，一般來(lái)說(shuō)是通過(guò)欄寬變化實(shí)現(xiàn)自適應(yīng)。
③ 柵格欄數(shù)的確定
根據(jù)頁(yè)面內(nèi)容豐富程度，柵格欄數(shù)一般定 12 或者 24 欄，考慮到 B 端產(chǎn)品功能往往比較復(fù)雜，建議采用 24 欄即可。
④ 上下布局柵格
⑤ 左右布局柵格
導(dǎo)航
導(dǎo)航可分為全局導(dǎo)航與局部導(dǎo)航。
① 全局導(dǎo)航
全局導(dǎo)航包含頂部導(dǎo)航、側(cè)邊導(dǎo)航、混合導(dǎo)航。
這三種導(dǎo)航樣式各具特點(diǎn)，應(yīng)結(jié)合產(chǎn)品特性選擇合適的導(dǎo)航樣式。這里要注意的一點(diǎn)是，當(dāng)產(chǎn)品可用性和用戶體驗(yàn)產(chǎn)生沖突時(shí)，應(yīng)優(yōu)先保證產(chǎn)品可用性。
② 局部導(dǎo)航
局部導(dǎo)航包含面包屑、標(biāo)簽頁(yè)、步驟條、分頁(yè)器。
面包屑
面包屑導(dǎo)航的作用是告訴用戶當(dāng)前頁(yè)面在系統(tǒng)層級(jí)結(jié)構(gòu)中的位置以及父子級(jí)頁(yè)面間的關(guān)系，并且可以快速回到上幾級(jí)導(dǎo)航。
標(biāo)簽頁(yè)
標(biāo)簽頁(yè)可以幫助用戶在一個(gè)頁(yè)面實(shí)現(xiàn)快速切換不同內(nèi)容，提升單個(gè)頁(yè)面內(nèi)容擴(kuò)展性?？煞譃榛緲邮?、標(biāo)簽樣式、卡片樣式。
步驟條
當(dāng)任務(wù)復(fù)雜或者存在先后關(guān)系時(shí)，可將其分解成一系列步驟，這里就會(huì)用上步驟條。步驟條是引導(dǎo)用戶按照流程完成任務(wù)的導(dǎo)航條，作用包含 3 點(diǎn)：一是讓用戶對(duì)操作流程長(zhǎng)度和步驟有個(gè)預(yù)期，二是明確知道自己目前所在步驟，三是可以對(duì)用戶的任務(wù)完成度有明確的度量。
步驟條一般分為橫向與縱向兩種樣式。
步驟條小 Tips：當(dāng)步驟條中有操作難度偏大的內(nèi)容時(shí)，為了提高用戶操作完成率，我們可以考慮把其放在靠后的步驟中，原因是用戶前面已經(jīng)完成了大部分簡(jiǎn)單操作，后面碰到高難度操作后，出于損失厭惡心理，不會(huì)輕易放棄操作。
分頁(yè)器
當(dāng)有大量?jī)?nèi)容需要展現(xiàn)時(shí)進(jìn)行分頁(yè)加載處理，分頁(yè)器作用是可以讓用戶清楚的知道自己所要瀏覽的內(nèi)容有多少頁(yè)、當(dāng)前所在頁(yè)碼、快捷前往目標(biāo)頁(yè)碼。
分頁(yè)器一般分為迷你、簡(jiǎn)易、自定義三種樣式。
妙用分頁(yè)器小 Tips：當(dāng)表格中需要對(duì)數(shù)據(jù)全選操作時(shí)，為了提高操作效率，可將自定義每頁(yè)跳數(shù)調(diào)到最大。例如一共 100 條數(shù)據(jù)，默認(rèn)每頁(yè) 10 條數(shù)據(jù)，要完成全選需要點(diǎn)擊 9 次翻頁(yè)，10 次全選（表格的全選框勾選后一般只選中當(dāng)前頁(yè)面全部數(shù)據(jù)，而不是所有頁(yè)面總數(shù)據(jù)），當(dāng)把每頁(yè)條數(shù)調(diào)整為 50 后，則只需翻頁(yè) 1 次，點(diǎn)擊 2 次全選即可。
到這里關(guān)于 B 端的基礎(chǔ)組件就全部梳理完了，后續(xù)我們就來(lái)揭開(kāi)展示組件的神秘面紗。
部分參考資料：
作者：huang。亮 來(lái)源：優(yōu)設(shè)網(wǎng)
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加微信ban_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.hglv.net )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
SaaS，英文全稱 Software as a Service，意思為軟件即服務(wù)。是通過(guò)網(wǎng)絡(luò)提供軟件服務(wù)，可以理解為一種軟件交付模式，因?yàn)榻桓赌Ｊ降牟煌矝Q定了和傳統(tǒng)軟件的差別。
在Saas之前傳統(tǒng)軟件需要購(gòu)買后本地化部署，兩者最大的區(qū)別在于，賣軟件是將軟件作為一個(gè)軟件實(shí)體賣給客戶了；而賣SaaS 軟件的所有權(quán)還在廠商所有，提供的是“軟件服務(wù)”。
Saas模式的提出者是Salesforce創(chuàng)始人——馬克·貝尼奧夫(Marc Benioff) 在98年的時(shí)候提出。有兩個(gè)原因促使馬克·貝尼奧夫思考并提出Saas：
1. 傳統(tǒng)軟件部署實(shí)施交付的失敗率非常高；
2. 軟件的售賣價(jià)格非常高，很多中型、中小企業(yè)有需求但無(wú)法承擔(dān)高昂的費(fèi)用。
基于以上兩個(gè)痛點(diǎn)及當(dāng)時(shí)的現(xiàn)狀賣軟件給企業(yè)造成的影響，已經(jīng)形成了惡性循環(huán)，市場(chǎng)受到嚴(yán)重的阻礙（據(jù)Gartner 高德納公司（美國(guó)咨詢公司）的調(diào)查研究曾表明：在所有CRM項(xiàng)目中大約55%沒(méi)有達(dá)到軟件用戶的完整交付和預(yù)期目的，通俗的說(shuō)是實(shí)施失敗。）
從賣軟件變成賣服務(wù)，其中的技術(shù)方式的改變、交易模式的改變，促成了軟件時(shí)代的變革，對(duì)于傳統(tǒng)軟件公司來(lái)說(shuō)，是一次大革命。原來(lái)賣軟件給客戶，一次性（或者分幾次）收到錢了；改為賣服務(wù)后，這筆錢就不能在短周期內(nèi)一次性收了，現(xiàn)行的SaaS模式通常是按照用戶的使用年費(fèi)來(lái)收取。
兩者差別在于，軟件商需要先主動(dòng)改變可以短期的一次性高收入，從短期收入向長(zhǎng)期收入的轉(zhuǎn)變；
所以SaaS是長(zhǎng)期主義的事情。
失敗的Saas生意會(huì)出現(xiàn)一個(gè)問(wèn)題：把長(zhǎng)期生意做成了短期不可持續(xù)的生意；而短期生意帶來(lái)的就是經(jīng)營(yíng)成本的劇增，導(dǎo)致生意不可持續(xù)。
所以，Saas模式?jīng)Q定了需要客戶長(zhǎng)期使用你的產(chǎn)品，才可以長(zhǎng)期可持續(xù)賺錢，也就是通常意義上的客戶終身價(jià)值（LTV）。
那如何做到客戶長(zhǎng)期使用，其實(shí)只有一種方式：長(zhǎng)期為客戶創(chuàng)造價(jià)值，做到幫客戶成功（幫助客戶的業(yè)務(wù)成功），從而持續(xù)續(xù)約。
吳昊老師，在《SaaS創(chuàng)業(yè)路線圖》中的講到：SaaS的本質(zhì)是續(xù)費(fèi)。這個(gè)觀點(diǎn)我比較贊同，SaaS的經(jīng)營(yíng)本質(zhì)在于可持續(xù)。
那么，決定SaaS的成功因素是什么呢？
我認(rèn)為決定性因素有三個(gè)方面：產(chǎn)品強(qiáng)大且靈活、用戶體驗(yàn)優(yōu)質(zhì)、服務(wù)的有效支持。產(chǎn)品強(qiáng)大和服務(wù)的有效支持不言而喻，具體我們來(lái)聊聊用戶體驗(yàn)的價(jià)值。
傳統(tǒng)軟件在一次交付實(shí)施后，客戶付80%的錢，剩下的20%能不能收回來(lái)就不那么重要。但SaaS模式，客戶每年進(jìn)行續(xù)費(fèi)，若產(chǎn)品使用及用戶體驗(yàn)滿意度低，帶來(lái)的影響和后果可能是客戶終止續(xù)費(fèi)。
因此，和傳統(tǒng)軟件相比SaaS的用戶體驗(yàn)的價(jià)值就更為重要，它直接影響SaaS的續(xù)費(fèi)和流失。
相信“用戶體驗(yàn)”這個(gè)詞大家應(yīng)該非常熟悉，接下來(lái)我們從新認(rèn)識(shí)什么是用戶體驗(yàn)？
官方的定義是：用戶在使用產(chǎn)品過(guò)程中建立起來(lái)的一種主觀感受。“用戶體驗(yàn)”這一概念是唐納德·諾曼（Donald Norman）在20世紀(jì)90年代中期提出的。產(chǎn)品大神俞軍老師說(shuō)過(guò)用戶體驗(yàn)的本質(zhì)是“ 用戶最小成本滿足需求 ”。
基于俞軍老師的定義、我的理解和思考，我認(rèn)為是幫助產(chǎn)品和用戶：最小成本滿足需求，同時(shí)創(chuàng)造「美·好」體驗(yàn)。
怎么理解，因?yàn)橛脩趔w驗(yàn)是滿足商業(yè)目標(biāo)的一種行為手段，我們來(lái)看下用戶體驗(yàn)的需要考慮的雙邊關(guān)系，就比較好理解了。
如下圖：左邊是用戶最小成本滿足需求，右邊是我們企業(yè)最高效的服務(wù)用戶。
企業(yè)的本質(zhì)就是創(chuàng)造商業(yè)價(jià)值，商業(yè)價(jià)值來(lái)源于用戶價(jià)值，同時(shí)考慮實(shí)現(xiàn)商業(yè)價(jià)值的效果和效率。我們常常會(huì)聽(tīng)到“投入產(chǎn)出比”或者叫“投資回報(bào)率”；對(duì)于商業(yè)行為中的一環(huán)用戶體驗(yàn)也如此。
所以，用戶體驗(yàn)的核心的就是：平衡用戶最小成本滿足需求，及企業(yè)最小成本服務(wù)用戶。完成價(jià)值交換同時(shí)，滿足持續(xù)性。
由此，可以看出在SaaS的產(chǎn)品設(shè)計(jì)中，用戶體驗(yàn)其實(shí)承擔(dān)著一個(gè)比較重要的責(zé)任，因?yàn)樗P(guān)系到成本的邊際和規(guī)?；挠绊懀活^是產(chǎn)品一頭是用戶。
那么作為產(chǎn)品體驗(yàn)設(shè)計(jì)師，我們需要具備一定成本意識(shí)，做好“成本管控的設(shè)計(jì)”，更本質(zhì)來(lái)說(shuō)設(shè)計(jì)過(guò)程中我們應(yīng)該：把復(fù)雜留給自己，把簡(jiǎn)單留給用戶。
因?yàn)槲覀冊(cè)谠O(shè)計(jì)的過(guò)程中把握產(chǎn)品的交互方式、使用流程，在用戶認(rèn)知和效率層面有較強(qiáng)的把控空間，充分做到的以“用戶體驗(yàn)”出發(fā)；那后續(xù)銷售、交付、客戶成功的全鏈路服務(wù)過(guò)程的學(xué)習(xí)效率和服務(wù)效率會(huì)呈指數(shù)級(jí)上升。
產(chǎn)品設(shè)計(jì)，應(yīng)該把復(fù)雜留給自己、把簡(jiǎn)單留給用戶。
關(guān)于用戶體驗(yàn)，就不得不介紹一下“ 用戶體驗(yàn)要素”模型，個(gè)人認(rèn)為這是所有產(chǎn)品經(jīng)理和設(shè)計(jì)師可以貫穿整個(gè)職業(yè)生涯中都需要經(jīng)常性、反復(fù)對(duì)照思考的設(shè)計(jì)模型。
用戶體驗(yàn)設(shè)計(jì)的價(jià)值遠(yuǎn)不止于讓產(chǎn)品的視覺(jué)、顏值提升，設(shè)計(jì)更大的價(jià)值在于深入業(yè)務(wù)、洞察用戶，幫助業(yè)務(wù)梳理產(chǎn)品信息架構(gòu)、任務(wù)流程、交互體驗(yàn)。
構(gòu)建系統(tǒng)的用戶使用方式和工作模式，從而達(dá)成用戶目標(biāo)；通過(guò)達(dá)成用戶目標(biāo)完成價(jià)值交換、以此完成商業(yè)交易達(dá)成商業(yè)目標(biāo)。
回顧Saas的商業(yè)模式，Saas的商業(yè)模式?jīng)Q定我們提供的這個(gè)服務(wù)不是靠人海戰(zhàn)術(shù)，因?yàn)镾aas軟件即服務(wù)的含義是所提供的軟件就等于提供自助化的服務(wù)，應(yīng)該提供的是自助服務(wù)、開(kāi)箱即用、開(kāi)箱易用的服務(wù)。
那么Saas服務(wù)設(shè)計(jì)策略上，應(yīng)該從降低系統(tǒng)使用門(mén)檻和提升用戶的自主化服務(wù)兩維度出發(fā)，根據(jù)這兩個(gè)核心維度，我們構(gòu)建了每刻SaaS產(chǎn)品體驗(yàn)的設(shè)計(jì)策略模型。
第一，設(shè)計(jì)“系統(tǒng)服務(wù)自動(dòng)化”，這里的服務(wù)是功能使用的操作，符合“低認(rèn)知、易上手”，那么從設(shè)計(jì)整個(gè)體系 需要遵守“易發(fā)現(xiàn)、低認(rèn)知、高效率、有溫度”的設(shè)計(jì)原則展開(kāi)，以用戶使用行為出發(fā)設(shè)計(jì)符合用戶心智認(rèn)知的功能形態(tài)和交互流程。
第二，設(shè)計(jì)“系統(tǒng)幫助自助化”，什么意思在全系統(tǒng)中構(gòu)建幫助引導(dǎo)的自助化體系，用戶需要幫助的時(shí)候提供人性化的引導(dǎo)幫助，我們從發(fā)現(xiàn)的維度、認(rèn)知的維度，系統(tǒng)認(rèn)知的維度，綜合考慮用戶系統(tǒng)的幫助引導(dǎo)。
設(shè)計(jì)原則，是指導(dǎo)我們做正確設(shè)計(jì)的方針。
設(shè)計(jì)原則的建立基于對(duì)用戶使用體驗(yàn)全流程的基礎(chǔ)上，以每刻報(bào)銷的設(shè)計(jì)原則，圍繞用戶旅程、認(rèn)知及行為出發(fā)構(gòu)建。
1. 當(dāng)用戶接觸系統(tǒng)從看出發(fā)，看見(jiàn)系統(tǒng)界面、發(fā)現(xiàn)操作入口；（發(fā)現(xiàn)）
2. 帶著操作任務(wù)用戶進(jìn)入系統(tǒng)、看見(jiàn)導(dǎo)航、看見(jiàn)文字、看見(jiàn)按鈕，都需要理解認(rèn)知；（認(rèn)知）
3.用戶從何開(kāi)始、如何操作，在完成整個(gè)業(yè)務(wù)事項(xiàng)的過(guò)程需要進(jìn)行填寫(xiě)、選擇、交互過(guò)程就產(chǎn)生了生產(chǎn)效率問(wèn)題；（操作）
4. 當(dāng)出現(xiàn)誤操作或系統(tǒng)出錯(cuò)時(shí)，需要系統(tǒng)糾錯(cuò)提醒、容錯(cuò)的設(shè)計(jì)、幫助及引導(dǎo)，當(dāng)完成整個(gè)業(yè)務(wù)事項(xiàng)后，用戶產(chǎn)生一種的情緒感受，這個(gè)感受即是印象、評(píng)價(jià)、口碑。（感受）
緊緊圍繞產(chǎn)品業(yè)務(wù)、用戶處理特性業(yè)務(wù)的基礎(chǔ)上，以終為始，回歸到用戶、業(yè)務(wù)、系統(tǒng)進(jìn)行思考?xì)w納的產(chǎn)物。
設(shè)計(jì)策略，是指導(dǎo)我們?nèi)绾芜M(jìn)行做正確的設(shè)計(jì)。
在SaaS產(chǎn)品分類上，常見(jiàn)的SaaS產(chǎn)品主要分為3類，行業(yè)SaaS、職能SaaS和通用SaaS。
每刻報(bào)銷產(chǎn)品從核心業(yè)務(wù)來(lái)說(shuō)是職能類Saas，從提升財(cái)務(wù)人員報(bào)銷的發(fā)票審批、費(fèi)用審核等效率展開(kāi)，但報(bào)銷的來(lái)源又源于普通員工的業(yè)務(wù)報(bào)銷，業(yè)務(wù)報(bào)銷發(fā)生又和所在行業(yè)的費(fèi)用發(fā)生行為特征有一定相關(guān)性，所以是結(jié)合職能和行業(yè)Saas的屬性，從用戶體驗(yàn)的設(shè)計(jì)上需要考慮不同角色用戶對(duì)于系統(tǒng)的業(yè)務(wù)理解、功能交織使用的不同訴求，這個(gè)設(shè)計(jì)過(guò)程探索研究是相對(duì)比較有難度的，以后有機(jī)會(huì)可以展開(kāi)聊。
下圖是每刻系統(tǒng)經(jīng)過(guò)6年過(guò)程中統(tǒng)計(jì)的問(wèn)題分布，分布比率呈現(xiàn)：認(rèn)知問(wèn)題 60%，效率問(wèn)題 30%、情感問(wèn)題10%。
我們?cè)谠L談客戶調(diào)研發(fā)現(xiàn)，企業(yè)服務(wù)雖然客戶已經(jīng)用了好幾年我們的系統(tǒng)，但財(cái)務(wù)部門(mén)還是經(jīng)常性會(huì)碰到新入職員工的系統(tǒng)使用問(wèn)題，甚至財(cái)務(wù)部門(mén)來(lái)新人時(shí) 以前系統(tǒng)發(fā)生的使用問(wèn)題會(huì)從新出現(xiàn)一遍，所以企業(yè)服務(wù)有一個(gè)現(xiàn)象，客戶是老客戶，但新用戶不斷增加，新人一旦增加第一個(gè)遇到的問(wèn)題就是認(rèn)知問(wèn)題，也輔證了我們對(duì)于Saas系統(tǒng)認(rèn)知問(wèn)題是用戶體驗(yàn)的第一大問(wèn)題。
幫助體系建立可以從系統(tǒng)層面體系化有效降低用戶使用的認(rèn)知成本，圍繞用戶角色的核心業(yè)務(wù)操作使用流程、洞察用戶旅程上的疑惑和障礙點(diǎn)。用戶首次進(jìn)入系統(tǒng)要建立介紹和引導(dǎo)，足夠簡(jiǎn)單、降低陌生感，來(lái)減少人力咨詢回復(fù)的投入。
相比人，系統(tǒng)的自助化和自動(dòng)化的服務(wù)，更具有復(fù)用性和規(guī)模效應(yīng)。
SaaS的商業(yè)模式，按年使用賬號(hào)來(lái)收費(fèi)和傳統(tǒng)軟件的付費(fèi)模式區(qū)別非常大，因?yàn)樾枰戎鲃?dòng)放棄自己本來(lái)可以唾手可得的收入，從短期收入向長(zhǎng)期收入的轉(zhuǎn)變。
在SaaS模式的時(shí)代，商業(yè)模式?jīng)Q定其必須關(guān)注客戶成功、客戶持續(xù)續(xù)費(fèi)、LTV客戶長(zhǎng)期價(jià)值。
SaaS的產(chǎn)品更需要重視用戶體驗(yàn)，用戶體驗(yàn)的優(yōu)劣決定其產(chǎn)品的長(zhǎng)期發(fā)展，SaaS的用戶體驗(yàn)設(shè)計(jì)則關(guān)注用戶使用認(rèn)知和行為效率，以及系統(tǒng)服務(wù)自主化設(shè)計(jì)和系統(tǒng)幫助自動(dòng)化設(shè)計(jì)，用戶體驗(yàn)將在產(chǎn)品成長(zhǎng)期后半程，逐漸成為SaaS商業(yè)模式不可或缺的產(chǎn)品競(jìng)爭(zhēng)力。
作者：周大蝦07 來(lái)源：站酷
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加微信ban_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.hglv.net )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.hglv.net