亚洲av无码成人专区片在线观看,亚洲av岛国动作片在线观看,少妇,喷水,亚洲av成人无遮挡网站在线观看,天堂网www资源在线

第四部分：角色全景圖

字?jǐn)?shù)：1441，用時：3分40秒

1研究背景

首先，不少團(tuán)隊(duì)通過“設(shè)計(jì)系統(tǒng)”來解決一致性、美觀度、可用性、開發(fā)效率等問題。其次，如何讓B端產(chǎn)品更貼合使用者的工作場景和體驗(yàn)訴求，也成了設(shè)計(jì)師日益關(guān)注的重心。

個人賽與團(tuán)體賽的差異

在C端產(chǎn)品中，設(shè)計(jì)師與用戶離得近，更容易與用戶共情。我們可以用各類定性方法挖掘用戶場景，用業(yè)務(wù)數(shù)據(jù)來分析轉(zhuǎn)化漏斗。

在B端產(chǎn)品中，設(shè)計(jì)師需要面對復(fù)雜多樣的利益相關(guān)者、盤根錯節(jié)的業(yè)務(wù)流程。而且不同階段的B端產(chǎn)品，它的數(shù)據(jù)完備性也有所差異。

像個人田徑賽和團(tuán)體接力賽，個人賽制僅需要關(guān)心單個運(yùn)動員如何突破他自己的成績極限，而團(tuán)體賽制就需要關(guān)心不同成員的實(shí)力水平、接棒順位和接棒配合等問題。

2設(shè)計(jì)方法的借鑒與演變

對常用的體驗(yàn)度量模型、用戶分析框架分析與研究，并在“職級評審系統(tǒng)”中進(jìn)行應(yīng)用實(shí)踐。

01 HEART-GSM框架：以5個維度去衡量用戶體驗(yàn)的模型框架，并根據(jù)維度拆解對應(yīng)的業(yè)務(wù)指標(biāo)。在剖析了模型的運(yùn)用原理后發(fā)現(xiàn)，維度未必是一成不變的，而是根據(jù)業(yè)務(wù)方向去定義和調(diào)整。業(yè)務(wù)指標(biāo)也是由定位好的方向目標(biāo)進(jìn)行拆解。

02 TECH模型：在它四個指標(biāo)中，找到了一個比較關(guān)鍵的核心：角色的任務(wù)成功率，通過體驗(yàn)地圖描繪系統(tǒng)角色的核心任務(wù)流，從中測評系統(tǒng)對角色的效率、體驗(yàn)影響。

03 CES客戶費(fèi)力度：描述客戶需要花費(fèi)多少力氣來達(dá)成他的任務(wù)目標(biāo)。比起滿意度而言，費(fèi)力度更能直觀反應(yīng)工具類產(chǎn)品的使用體驗(yàn)，避免出現(xiàn)“我很滿意，產(chǎn)品不好用”的尷尬。

綜合分析后，織一張三維畫布，在業(yè)務(wù)方向的基礎(chǔ)上建立流程、角色、費(fèi)力度之間的聯(lián)系。從這三個角度，復(fù)刻每個角色任務(wù)歷程（線下、線上、系統(tǒng)載體、信息傳遞），度量其任務(wù)費(fèi)力點(diǎn)，洞察他們與系統(tǒng)效率之間的關(guān)系。

3建立角色全景圖

明確了業(yè)務(wù)目標(biāo)、評估訴求、流程場景、核心任務(wù)角色等幾類要素，接著需要對系統(tǒng)每個角色的任務(wù)和對應(yīng)的費(fèi)力度評估進(jìn)行梳理。

01角色任務(wù)梳理

根據(jù)業(yè)務(wù)流程，劃分了從募集評委到申訴環(huán)節(jié)等8個業(yè)務(wù)階段。在此基礎(chǔ)上我們采用頭腦風(fēng)暴、定性訪談的方式，逐步完成了五類角色任務(wù)流程的采集與布點(diǎn)。

任務(wù)節(jié)點(diǎn)：推動流程往下的節(jié)點(diǎn)才做記錄。而任務(wù)之內(nèi)的個人操作、細(xì)分任務(wù)都不做節(jié)點(diǎn)拆分，抓住關(guān)鍵流程，呈現(xiàn)成功路線。

交棒時刻：復(fù)述用戶在完成任務(wù)后向他人、向系統(tǒng)傳遞信息的動作內(nèi)容。在線下遞交材料、或系統(tǒng)任務(wù)提交過程中有時間交錯的情景，單獨(dú)剝離交棒時刻，是復(fù)刻用戶的信息傳遞過程。

02角色任務(wù)下鉆評估

在獲取每類角色的任務(wù)泳道之后，針對性地進(jìn)行體驗(yàn)下鉆——評估任務(wù)節(jié)點(diǎn)的費(fèi)力度與任務(wù)內(nèi)容等問題。因?yàn)樵谑崂憝h(huán)節(jié)掩蓋了節(jié)點(diǎn)之內(nèi)的角色使用體驗(yàn)。下鉆評估是為了更好地補(bǔ)足角色任務(wù)細(xì)節(jié)，了解到單個角色的任務(wù)影響因子，從而建立更全局的體驗(yàn)認(rèn)知。

通過角色的代表性人物，定位關(guān)鍵任務(wù)節(jié)點(diǎn)，然后再用定性+定量的方式下鉆研究，獲取該節(jié)點(diǎn)處所反應(yīng)的費(fèi)力度、問題分布、任務(wù)強(qiáng)度特征。接著用可視化的方式表達(dá)任務(wù)節(jié)點(diǎn)的費(fèi)力度等級、角色體驗(yàn)評估內(nèi)容，然后匯總成角色全景圖。

4全景圖的觀察

01任務(wù)點(diǎn)觀察

前期設(shè)置的任務(wù)節(jié)點(diǎn)、交棒時刻、動作載體，均是為了觀察者能夠閱讀、統(tǒng)計(jì)和觀察。通過節(jié)點(diǎn)信息可以了解到整個系統(tǒng)流程的任務(wù)內(nèi)容和信息傳遞方式。

02任務(wù)面

根據(jù)角色泳道的下鉆評估，看到用戶的費(fèi)力等級分布，關(guān)注任務(wù)點(diǎn)相連的上下游鏈路和系統(tǒng)流程，從立體的角度找到改進(jìn)空間。

在任務(wù)下鉆的過程中，發(fā)現(xiàn)組織者需要在這環(huán)節(jié)需要承擔(dān)很多人力成本，任務(wù)量大、耗時多、溝通過程反復(fù)低效，系統(tǒng)在這流程階段中還存在需要改進(jìn)的空間。因此改進(jìn)組織者的場次分配方式，建立評委的信息回復(fù)流程，從而實(shí)現(xiàn)效率的提升。

第五部分：B端的設(shè)計(jì)指南

字?jǐn)?shù)：2077，用時：5分20秒

一、制定設(shè)計(jì)規(guī)范的好處

• 對產(chǎn)品：制定設(shè)計(jì)標(biāo)準(zhǔn)，統(tǒng)一公司視覺及交互設(shè)計(jì)規(guī)范。同一項(xiàng)目有多設(shè)計(jì)師的參與，規(guī)范化的設(shè)計(jì)語言，避免因設(shè)計(jì)控件混亂而影響設(shè)計(jì)輸出。

• 對自己：組件化同類元素，提高工作效率，建立公司產(chǎn)品的組件庫，以便不同項(xiàng)目的復(fù)用及設(shè)計(jì)延展。更好的把控該項(xiàng)目的視覺規(guī)范，提高效率。

• 對團(tuán)隊(duì)：規(guī)范設(shè)計(jì)團(tuán)隊(duì)的輸出，方便與開發(fā)團(tuán)隊(duì)的交接和協(xié)作。前端實(shí)現(xiàn)擁有一套可供復(fù)用和擴(kuò)展的組件庫，助力上下游交接及團(tuán)隊(duì)協(xié)作。

• 對客戶：考慮設(shè)計(jì)延展性，為不同客戶的定制化需求提供更高效的輸出。在產(chǎn)品迭代時，設(shè)計(jì)規(guī)范的組件化調(diào)整也大大提高了工作效率。

二、輸出設(shè)計(jì)規(guī)范文檔

1. 頁面布局

01統(tǒng)一尺寸

常用屏幕分辨率：1920*1080、1366*768、1440*900。

適配方案：后臺產(chǎn)品設(shè)計(jì)功能型頁面的尺寸統(tǒng)一為1440*900，按照柵格系統(tǒng)原則向上或向下適配。展示型頁面以 1440*900 為主，力求實(shí)現(xiàn)效果和高保真設(shè)計(jì)圖誤差最小。

02頁面框架

左右欄布局包括頂部欄、左側(cè)菜單欄、主體內(nèi)容三大區(qū)域。頂部菜單欄、左側(cè)菜單欄為固定結(jié)構(gòu)，右側(cè)主體內(nèi)容根據(jù)分辨率進(jìn)行動態(tài)縮放；左右欄布局時，左側(cè)菜單可收縮展開，收縮狀態(tài)下固定寬度。

柵格布局：柵格系統(tǒng)的使用是為了解決自適應(yīng)和響應(yīng)式問題。響應(yīng)式柵格采用24列柵格系統(tǒng)實(shí)現(xiàn)，以滿足 2，3，4，5，6 分比布局等多種情況。

尺寸設(shè)定：在左上角放置產(chǎn)品LOGO 及產(chǎn)品名稱，頂部欄高度 48+8n，側(cè)邊欄寬度200+8n。常用的是頂部欄高度 56px，側(cè)邊欄寬度 200px，側(cè)邊欄收縮狀態(tài)寬度 56px，右側(cè)的側(cè)浮窗寬度 400px。

2. 標(biāo)準(zhǔn)色

顏色分為品牌色、輔助色、中性色。

品牌色即產(chǎn)品主色，其設(shè)定直接影響產(chǎn)品氣質(zhì)和直觀感受，也是產(chǎn)品直接對外的形象。要根據(jù)產(chǎn)品特性、用戶使用場景、產(chǎn)品定位等進(jìn)行選取，盡量做好色彩的延伸性，可支持換膚。

輔助色用于提示其他場景。

中性色常用于文本、背景、邊框、分割線等，需要考慮深色背景和淺色背景的差異，可以選擇同一色相控制透明度變化，用來表現(xiàn)不同的層級結(jié)構(gòu)。

3. 標(biāo)準(zhǔn)字

后臺系統(tǒng)常用的字體：

windows 系統(tǒng)，中文 Microsoft YaHei，英文 Arial；

Mac 字體，中文PingFang SC，英文 Helvetica；

除此之外可以選擇的字體還有segoe UI、思源黑體、HiraginoSans GB等。

后臺系統(tǒng)中常用字體大小為12px、13px、14px、16px、18px、20px、24px、30px。

4. 圖標(biāo)

分為功能和應(yīng)用圖標(biāo)，以圖形的方式傳達(dá)概念，降低理解成本，使得界面更加協(xié)調(diào)美觀。在后臺產(chǎn)品中，圖標(biāo)的功能則更偏向輔助性，輔助用戶對功能的認(rèn)識。

專業(yè)性的操作和詞匯則需要設(shè)計(jì)師繪制，現(xiàn)在比較高效方便的方法是在iconfont 提供的圖標(biāo)模板上用 AI 繪制，畫板 1024*1024，提供圓形、正方形、矩形形狀。圖標(biāo)尺寸按照 8 的倍數(shù)進(jìn)行延展，繪制完成后生成 svg 格式文件。

5. 按鈕

按鈕是后臺產(chǎn)品交互設(shè)計(jì)是重要元素，提供給用戶進(jìn)行點(diǎn)擊操作，是視覺上最引人注目的控件，具有一定的視覺受范性。

按鈕根據(jù)需求分為不同尺寸，大中小三個級別用在不同的場景，一般按照8 的倍數(shù)設(shè)定。如高度分別設(shè)定為 24、32、40px。

6. 導(dǎo)航

導(dǎo)航的類型：頂欄菜單、側(cè)欄菜單、折疊菜單、下拉菜單、面包屑、分頁、步驟條、時間軸、tab標(biāo)簽頁、膠囊菜單、徽標(biāo)數(shù)等。

頂欄菜單：一級菜單，點(diǎn)擊切換，作為下拉菜單的父級，將子級菜單合理分類。

側(cè)欄菜單：垂直導(dǎo)航菜單，內(nèi)嵌子菜單。

下拉菜單：一般有鼠標(biāo)懸停和點(diǎn)擊兩種。

步驟條：引導(dǎo)用戶按照流程來完成任務(wù)，一般步驟不得少于兩步。

分頁：高度設(shè)定為24px、30px、32px，根據(jù)應(yīng)用場景適當(dāng)增減內(nèi)容。

面包屑：用于說明層級結(jié)構(gòu)，使用戶明確當(dāng)前所在位置，并且回到上級頁面。

徽標(biāo)數(shù)：通知用戶當(dāng)前有未讀消息，一般出現(xiàn)在圖標(biāo)的右上角或者跟在文字后面。

7. 表單

多由一條或多條列表項(xiàng)組成，單一列表項(xiàng)的類型有字段輸入框、條件選擇器。

字段輸入框的標(biāo)題和分布方式包括左右、上下、無標(biāo)題。左右分布是常見的對齊方式，比較適合PC 端的使用；上下分布增加了表單的整體高度，視情況選擇使用；無標(biāo)題經(jīng)常應(yīng)用在登錄注冊。

8. 表格

選擇搜索區(qū)：放置篩選框和搜索框，為用戶提供按需搜索，可以大大提高用戶效率；

操作區(qū)：指各種對表格內(nèi)容進(jìn)行增刪改查、批量處理、配置列的動作；

表頭：展示列標(biāo)題，一般具有排序功能；

正文：展示各種各樣的數(shù)據(jù)，要注意行高、對齊、分割、信息層級等，要考慮是否提供行內(nèi)操作；

底欄：顯示分頁、總數(shù)統(tǒng)計(jì)等。

表格行高：可設(shè)置為表格內(nèi)字體高度的2~3 倍，主表格會間隔顯示不同顏色，用于區(qū)分不同行數(shù)據(jù)、加強(qiáng)視覺流引導(dǎo)，展開單行的內(nèi)置表格可采用純色，選中行應(yīng)有視覺上的反饋。表頭要和表格內(nèi)容有視覺上的區(qū)分。表格行高可采用 36、40、48、60 等。

9. 反饋

包括彈框、側(cè)滑框、骨架屏、全局提示、警告提示、消息提醒、加載狀態(tài)等。分為模態(tài)框和非模態(tài)框，區(qū)別是是否會打斷用戶工作流。

其中，彈框：主題內(nèi)容增加一層遮罩，透明度50%，避免使用雙層彈框，采用有關(guān)閉圖標(biāo)的彈框和無關(guān)閉圖標(biāo)的彈框，引導(dǎo)用戶對內(nèi)容進(jìn)行正確操作。如果設(shè)定系統(tǒng)內(nèi)所有彈框均可以點(diǎn)擊彈框外區(qū)域關(guān)閉， 則需要為用戶新增或編輯內(nèi)容的彈框彈出二級確認(rèn)的彈框，或者再次進(jìn)行交互梳理。

三、經(jīng)驗(yàn)觀點(diǎn)及設(shè)計(jì)資源

1. 設(shè)計(jì)前端一家親：Ant Design 的設(shè)計(jì)組件；Element 的設(shè)計(jì)組件；iView 的設(shè)計(jì)組件；飛冰的設(shè)計(jì)組件；Layui 的設(shè)計(jì)組件；G2 可視化圖形組件；Echarts 可視化圖形組件；d3.js 可視化圖形組件；GridGuide 在線柵格化計(jì)算工具

2. 書籍推薦：B端產(chǎn)品經(jīng)理必修課；交互設(shè)計(jì)精髓；U一點(diǎn)料·Ⅱ；簡約至上：交互式設(shè)計(jì)四策略

Powered by Froala Editor