<pre id="ovgix"></pre>
面對企業(yè)級產品，由于系統(tǒng)復雜度和業(yè)務領域的專業(yè)壁壘，用戶、產品、業(yè)務、技術的理解和分析難度都遠遠高于C 端。特別是進入業(yè)務深水區(qū)，技術術語層出不窮，角色鏈路錯綜交織，場景越來越復雜，在理解和分析業(yè)務上設計師需要耗費的精力越來越多，設計師如何高效且深入的分析業(yè)務，直接影響到設計解決問題的深入度?；谖浵伣鸱﨏TO 線的業(yè)務土壤，我們不斷嘗試打磨，探索出以JCD 為核心的企業(yè)級產品設計思維，助力設計師在深耕業(yè)務上有章可循，有方法可用。
做企業(yè)級產品 3 年多，剛從 C 端業(yè)務轉過來時，最大感受是對業(yè)務理解起來很艱難。隨著經驗的增加，對 0 到 1 產品駕馭起來輕車熟路，可到業(yè)務深水區(qū)，還是感覺痛苦。技術術語層出不窮，用戶角色多，一個用戶身兼數個角色，系統(tǒng)之間的關聯(lián)關系也很復雜，隨著業(yè)務的深入設計師會感覺對產品逐漸失去掌控力。一個簡單的芝麻信用分，需要 20-30 個中后臺產品和各種角色一起協(xié)同支撐。然而復雜是守恒的，系統(tǒng)復雜性的總量是一個衡量，當前臺的呈現(xiàn)更簡單時，隱藏在幕后的復雜性就增加了。
我們面臨系統(tǒng)的復雜性表現(xiàn)在三個方面：
多角色，重協(xié)同。
鏈路長、錯綜交雜。
技術術語多，業(yè)務難理解。
但企業(yè)級產品會有一個主線，是從「事情」的角度出發(fā)，關注一件又一件事情被完成。企業(yè)場景下我們再把事情描述的具體一些，就是一個又一個的 Job 。設計師要做的就是通過設計，包括參與的角色、使用的工具以及協(xié)作方式等，讓 Job 被高效完成。
我們先對比一下，從「用戶」視角和從「Job」視角出發(fā)，關注的維度有哪些差異呢？從用戶視角出發(fā)我們需要關注用戶的個人痛點、情緒、興趣、人種志（年齡、性別、收入）等信息，會更關注人，核心是為了滿足用戶的需求。在Job 視角下，需要關注 Job 的目的、參與角色、協(xié)作方式、工具等信息，而且 Job 對角色是有要求的，比如航空公司飛行員，按崗位要求，他需要不斷提升自己業(yè)務能力，每年要去復訓兩次，學習新的技能和知識來滿足崗位對飛行員這個角色的要求。
基于我們的業(yè)務土壤，以及出發(fā)視角，我們探索出一套適合企業(yè)級產品的設計思維，JCD（Job - Centered Design ）以 Job 為中心，設計完成 Job 所需要的一切，包括角色、工具、協(xié)作關系等。以 Job 被高效完成為決策依據的設計思維。它是一套適用于企業(yè)級產品設計的發(fā)現(xiàn)問題、解決問題的方法論。
在 JCD 設計思維下，將設計流程分為四個階段，發(fā)現(xiàn)、構思、呈現(xiàn)、度量。每個階段下有不同的方法、產出、資產。Ant Design 在「呈現(xiàn)」階段幫設計師大大提升了效能，設計師才有更多的精力投入到「發(fā)現(xiàn)」階段去更深入去理解業(yè)務和角色。接下來重點分享一下在發(fā)現(xiàn)階段的兩個方法，角色分析和業(yè)務分析。
常用的 C 端的用戶畫像，如下圖，會關注用戶人口統(tǒng)計學的信息，如名字、性別、年齡、所在地、家庭情況、用戶的習慣、愛好等信息，這些信息在復雜的企業(yè)級產品中是不需要去關注的。
在JCD 的視角下，我們企業(yè)級產品的角色畫像應該關注的三個維度：角色概覽、工作能力、工作內容。而工作內容是最核心需要關注的信息，包括了工作的描述、工作的痛點、需求和使用的工具。
一個角色往往需要完成多個Job，描述一個Job 包含：
四要素：情景、角色、活動、目標。
一個句式：在什么情景下，角色需要完成什么樣的活動，來達成一個目的。
舉個例子，在飛行前 1.5 小時（情景），角色（飛行員）需要去查看飛機情況（活動 A ）、氣象情況（活動 B ），來判斷能否起飛（目標）。
為了給設計提供具體的依據，我們需要進一步縱向解構Job，來構建 1 個完整 Job 場景，設計師可以階梯式對一個 Job 進行拆分，Job 下面有多個 Activity，Activity 下面有多個 Task 組成，Task 下面有不同的 Action，到這種顆粒度可影響到設計界面中的具體元素。
看一個具體案例，如何拆解一個 Job，首先用我們的上面的四要素和句式描述。Job：飛行前 1.5 小時，飛行員需要查看飛機情況、查看氣象情況，來判斷能否起飛。在飛行員這個角色的 Job 里包含了兩個 Activity ：1. 查看飛機情況；2. 查看氣象情況。查看氣象情況這個 Activity 下包含了三個 Task：1.查看起飛地天氣；2.查看降落地天氣；3.查看備降地天氣。
每個 Task 下面會有不同的 Action。除了 Job 的縱向拆解，我們還需要關注每個 Job 場景下的需求、痛點、費力度、成就感。
做好一件復雜的事情，往往需要多個角色在多個工作場景中協(xié)同配合。我們會以Job 場景為核心，梳理角色之間的協(xié)作關系，建立全局視角。比如，在飛機起飛前，機組飛行員查看飛機和飛行信息、查看起降地天氣等；同時乘務組空姐們?yōu)榇舜物w行做相應準備工作。準備完畢，機長會通知機組和乘務組開始登機。上飛機后機組需要檢查駕駛艙情況，乘務組檢查客艙情況，檢查完畢，會一起協(xié)同機場地勤人員安排乘客登機。完成登機后，飛行員需要聯(lián)系機場管制申請起飛........ 設計師可以通過Job 場景去串聯(lián)角色之間的協(xié)作關系，如下圖。
以上是「角色分析」的方法，是從 Job 出發(fā)洞察角色的工作需求以及協(xié)作模式，幫助設計師構建角色協(xié)同的全局觀。
業(yè)務分析的方法是借鑒面向實體的思路幫助設計師去深入分析復雜業(yè)務。企業(yè)級產品中會有各種技術術語、復雜的數據流轉、業(yè)務邏輯等，我們需要一個系統(tǒng)的方法來分析和理解業(yè)務，為設計提供準確有深度的信息輸入。我們的用戶大部分是軟件工程師，這個思路可以讓設計師在理解和認知上對齊用戶的心理模型。我們業(yè)務分析的有三個維度：
產品定義
實體建模
業(yè)務邏輯
通過以上三個維度，從縱向和橫向去深入和全面的理解業(yè)務。
通過溝通交流、桌面研究的方法，去了解產品和用戶相關信息，熟悉相關概念和技術背景、沉淀信息資料，來收集產品的信息，具體的產出有名詞庫、產品畫布、產品的關系圖、業(yè)務結構圖、產品形態(tài)圖等，這里不展開詳述。
實體建模是本次分享的重點，實體建模按照面向實體的思想分析業(yè)務，圍繞實體進行問題和內容抽象和分析，聚焦于產品內實體和實體間的關系，以及實體的生命周期的分析。
我們先看什么是實體，參考領域建模（此處感謝幻星給實體的定義）給實體一個定義：實體是產品中客觀存在，具有唯一標識的并可以相互區(qū)分的業(yè)務載體，通常包含屬性和行為。
企業(yè)級產品系統(tǒng)的實體，很多情況下都是熟悉的字母，陌生的單詞，在設計之前設計師如何去準確、系統(tǒng)的去分析實體。
舉個例子，現(xiàn)實世界中，「機票」是一個實體，在產品里，可以把「機票訂單」看成一個實體。圍繞著機票訂單，我們梳理出它的基本屬性信息，以及它具有的所有狀態(tài)和對應操作，設計師可以進一步把這些狀態(tài)和操作梳理出一個「機票訂單」這個實體從產生到消失整個生命周期經歷的過程。這些分析可以作為后續(xù)任務流程和設計細節(jié)的信息輸入。
一個實體不能構成一個產品，一個系統(tǒng)會有很多實體存在，我們需要進一步去梳理「機票訂單」與系統(tǒng)中其他實體的聯(lián)系。在下圖的案例中，機票訂單與機票是聚合 n：1 關系, 一張機票訂單會包含多張機票，機票訂單與收支明細是關聯(lián) 1：n 的關系，一張機票訂單會關聯(lián)到多個收支明細，比如會有支付成功、退款等明細。
以上是實體建模的過程，產品定義和實體建模都是對業(yè)務內容層進行理解和梳理。但是我們的業(yè)務除了內容外，還有很多復雜的業(yè)務規(guī)則、業(yè)務流程，我們也需要進行梳理和分析，這樣設計師才能對業(yè)務有全面的理解。
所以我們需要把結合實體、業(yè)務規(guī)則、業(yè)務流程，進一步梳理業(yè)務邏輯。最終會得到一張業(yè)務邏輯圖，不僅能夠幫助設計師洞察到業(yè)務的本質，也能幫設計理解業(yè)務的全貌。
第二個方法業(yè)務分析，是通過面向對象分析思路去深入的理解業(yè)務，為設計提供更精準，更有邏輯的依據。
回顧以上三部分內容，JCD 是什么？Job - Centered Design 是以 Job 為中心的設計思維。JCD 的定義：以 Job 為中心，設計完成 Job 所需要的一切，包括角色、工具、協(xié)作關系等。以 Job 被高效完成為決策依據的設計思維。它包含了原則、流程、方法&工具、產出&資產，上面重點分享了其中兩個方法「角色分析」和「業(yè)務分析」。
文章來源：站酷 作者：Ant_Design
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯(lián)系，我們立即更正或刪除。
藍藍設計( sillybuy.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
真正出色的金融產品是基于可用性，在成熟的數字生態(tài)系統(tǒng)中，能持續(xù)滿足用戶的特定需求。在UXDA每年交付的數十個UX/UI設計中，我特別選出了一些重要的作品來舉例，與大家探討設計對塑造金融產品方面的影響。
過去20年來，人們認為在創(chuàng)建數字金融產品時設計發(fā)揮的作用微不足道，這種刻板印象根深蒂固。大多數情況下，甚至被認為是出于營銷目的的包裝，關注點也多在產品功能和特性上。
使用標準化設計模板來加速產品開發(fā)是常見的做法，但這也解釋了為什么許多金融服務看起來如此相似——平淡、乏味且對用戶不友好的。
10年前出現(xiàn)的金融科技，打破了人們對設計的偏見，企業(yè)用其來吸引客戶，并試著將設計潛力發(fā)揮到最大。而現(xiàn)在，進入金融行業(yè)的新玩家更專注于獨特創(chuàng)新的設計，來凸顯品牌身份。
大多數客戶厭倦了乏味又復雜的模板設計，量身定制作為一種全新的趨勢應運而生，不僅為產品注入了新鮮活力，還令金融公司的市場飆升。
「Private Wealth Systems」的財富管理平臺就是一個很好的例子，通過量身定制的設計，為超高凈值人士 (UHNWI) 提供他們對精致生活所期望的奢華體驗。
該平臺的優(yōu)勢在于它旨在解決用戶每天遇到的痛點，關心客戶財富的同時并盡最大努力協(xié)助其管理，而量身定制也增強了品牌與客戶之間的情感聯(lián)系。敢于打破禁忌并投資于大膽現(xiàn)代設計的金融機構知道，隨著客戶忠誠度和參與度的提高，肯定也會帶來回報。
Takeaway
根據品牌VI創(chuàng)建的產品界面，可以使其在日后的競爭中脫穎而出。
向移動模式轉型時，集中出現(xiàn)了幾家金融科技公司，他們的優(yōu)勢在于功能單一，非常簡單易懂。對客戶來說，這就像一股新鮮空氣，因為當時的銀行服務功能既復雜多又對用戶不友好。
當今的金融產品，正在不斷擴大外部服務，打破功能壁壘。「Revolut」就是一個很好的例子，它不斷擴展功能，逐漸成為一個超級應用程序。
單一模式的設定確實很簡單，但隨著用戶期望的增長，以同樣方式呈現(xiàn)更多功能的需求也在逐步增加。對用戶來說，如何用一種既直觀又體驗佳的方式，展示100多個功能呢？
既要為客戶提供解決功能，又不能在使用體驗上打折扣，這并不簡單。需要UX架構師和經驗豐富的UI設計師密切合作，共同面對挑戰(zhàn)——創(chuàng)建直觀的產品架構與合乎邏輯的、用戶友好的界面布局。
來看一個UXDA的多功能銀行應用程序例子：我們將區(qū)塊鏈、游戲化、機器人咨詢、語音處理、生物識別、大數據等數十個功能整合進同一程序內，打造銀行即平臺的應用理念。
越來越多的功能服務不斷涌現(xiàn)，可用性高的產品更容易吸引用戶。這就解釋了為什么金融機構都在努力創(chuàng)建自己的新銀行或超級應用程序，但展示的服務內容也需要與公司的發(fā)展方向保持一致。
根據我們的經驗，品牌希望在產品中包含大量「現(xiàn)代」功能，他們相信這會使解決方案在競爭中脫穎而出。但也可能會適得其反，建議在UX研究階段做好取舍，以便確定更符合品牌受眾的功能。非常成功的金融產品都是基于品牌受眾的特定需求設計的，這些需求為客戶提供額外的價值。
Takeaway
從超級應用程序設計中學習實踐經驗，保持簡單性和可用性的同時，再進行產品拓展。
相信多數人看到銀行后臺，都會驚訝于它的復雜。員工必須同時使用多個軟件程序，按照說明輸入代碼才能進行工作。操作系統(tǒng)也需要數月時間去學習，甚至用了很多年，還是無法全部記住。
由于涉及到大量的客戶信息，這些解決方案全靠數據驅動，非常復雜。許多銀行都在努力降低后臺成本，卻沒有意識到對客戶體驗的影響。這導致了一個悖論：銀行在數字化轉型中投入大量資金以改善用戶體驗，而削減銀行核心系統(tǒng)的成本又對客戶服務造成損害，銀行員工的負面體驗又會影響服務質量和最終客戶滿意度。
后臺系統(tǒng)的改進可以顯著提高服務質量和速度，從而使客戶更滿意。以用戶為中心的設計方法，在當今創(chuàng)建金融產品中也越來越流行，它不僅可以應用于外部銀行產品，還可以應用于內部解決方案。
提高內部工作效率的一種方法是使用游戲化設計。這種方法使整個工作流程更加現(xiàn)代化，從而實現(xiàn)了工作流程的轉變，如「ITTI Digital」所示。
為了使其以用戶為中心，我們將大量繁重的數據翻譯成人類語言。員工的學習曲線從幾個月縮短至幾個小時，人為失誤的可能性顯著降低，服務速度、員工效率和客戶滿意度都大幅提升。
此方案在IF的數字金融服務設計大獎中也得到了認可
金融機構將員工視為內部用戶，為他們創(chuàng)造盡可能好的體驗，相當于也為銀行客戶提供了最好的服務。認為游戲化和銀行業(yè)務沒有共同之處的想法太過時了，游戲化不僅提高了員工的生產力和積極性，也讓結果變得更好。
Takeaway
嘗試應用游戲化來激勵用戶，還能使最無聊的金融產品煥然一新。
5年前，移動應用程序還被當做非主流的使用渠道，但今天它卻滿足了大多數客戶的要求。令人驚訝的是，移動程序的功能非常有限，用戶體驗也相當差，甚至一些銀行服務只在分行提供。疫情反應了嚴峻的現(xiàn)實——金融業(yè)還沒有做好迎接數字時代的準備。
為改善金融品牌的客戶體驗，需要對移動應用程序進行全面的設計審核，以確保遠程用戶可以訪問所有服務和功能。一家成熟的金融科技公司應快速找出適合客戶的遠程體驗設計方法，而不是冠冕堂皇的借口。
設計「阿拉伯聯(lián)合銀行 (UAB)」移動應用程序時，我們的主要挑戰(zhàn)是簡化所有的日常功能操作步驟，使其簡單高效。
流程的優(yōu)化使用戶更容易瀏覽應用程序，探索新的可能，同時也鼓勵用戶與程序互動，而不是聯(lián)系銀行或直接去分行。新應用僅發(fā)布數月，在App Store 和Google Play的下載率都大幅提升。
Takeaway
找到缺失的功能并完善它，建立一個完整的使用流程。
越來越多的老牌銀行企業(yè)敢于走出舒適圈，挑戰(zhàn)自我，踏上數字化轉型之路。在金融科技的啟發(fā)下，現(xiàn)有企業(yè)為用戶體驗設計注入了生命力，從而創(chuàng)造出令客戶驚嘆的產品，激勵用戶長期使用。
他們與內部或是外部的UX/UI設計師合作，整合公司各層級的設計方法和組織文化。這種融入了設計角色的團隊，以用戶為中心快速轉型，成為金融科技獨角獸的有力競爭對手。
「VTB銀行」是一家被數百萬人信賴的銀行，升級用戶體驗后，產品重獲新生，也體現(xiàn)了企業(yè)對線上銀行用戶的重視。
「VTB銀行」的用戶反饋說：新升級的產品更貼合他們的生活方式了；銀行員工們也表示，緊跟時代變化的品牌，更能為客戶提供最優(yōu)的服務。
Takeaway
設計至上，跳出傳統(tǒng)，才能打造出一流的數字產品。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優(yōu)秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯(lián)系。
文章來源：站酷 作者：UX辭典
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯(lián)系，我們立即更正或刪除。
藍藍設計( sillybuy.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
增長設計是時下的熱門話題，越來越多的企業(yè)開始關注增長設計，成立獨立的增長部門。在螞蟻體驗技術部，我們除了做好體驗設計的「老本行」外，也在往增長的方向探索。在現(xiàn)有的增長理論指導下，我們結合自身業(yè)務，邊落地實踐，邊沉淀總結。以下是我們的一些小心得。
本文會講述我們是如何利用增長大圖梳理產品各個環(huán)節(jié)，以及如何用定量的用戶行為數據漏斗，和定性的痛點比重數據，綜合分析，去找到機會點。輔以在 Kitchen 和 語雀 中的增長實踐案例說明。在增長一塊，我們還處于初步探索階段，若有不成熟的地方，歡迎大家一起討論。
為什么要關注增長？
說到增長，過去 10 幾年是中國互聯(lián)網高速增長的階段，但近 2-3 年來，隨著人口、流量、資本的紅利衰退，越來越多企業(yè)開始關注增長。典型的是，2017 年可口可樂宣布取消 CMO（首席營銷官），由 CGO（首席增長官）替代，之后各種增長類職位相繼涌出。
增長是建立在用戶基礎上的，用戶產生需求，需求又衍生出產品，產品之上才可能有增長。所以我們理解：產品在創(chuàng)造價值，而增長其實是傳遞價值，讓價值被發(fā)現(xiàn)。只有讓更多的用戶，最大限度地體驗產品的核心價值，才可能迅速擴張以及有效地變現(xiàn)。它有幾個特點：
1.首先他是關注用戶全生命周期，不僅僅是獲客、變現(xiàn)。還需要關注怎么激活用戶，讓用戶用起來，留存下來，傳播出去
2.另外，增長不是一個單打獨斗的獨行俠，而是體系化的，以團隊共創(chuàng)聚焦的方式來推動增長
3.強調數據和實驗：從數據分析中洞察，提出假設，循環(huán)實驗的過程
那什么樣的產品適合做增長？我們所做的 To B 產品適不適合做增長？
首先看下 To B 和 To C 的差異：To B 產品，多數是群體決策，決策鏈路復雜，買的人不一定是用的人，如果是客單價較高的話，基本靠銷售關系驅動購買，但像具有 C 類屬性的產品，因為是個人消費場景，單一決策購買，就像平時大家在淘寶買東西一樣，隨心所欲。那運用增長策略去推動轉化，能節(jié)約很大的獲客成本，可見增長更適用于 C類屬性的產品。
但經過大半年的實踐，并且和其他增長團隊交流，我們發(fā)現(xiàn)雖然 To B 增長很難，但在 SMB（中小企業(yè)）的增長很有機會。SMB 中小企業(yè)，有可能是 2-3 人組成的小團隊，這類企業(yè)的客戶和用戶通常是同一類人，我們理解這也具有 To C 屬性。并且中小企業(yè)數量多，實驗數據也有保障。
一句話總結：To SMB 中小企業(yè)客群的產品可以做增長。
那具體怎么做呢？結合我們自身經驗，給大家分享 1 張增長大圖，2 個實踐案例。
增長大圖是基于 AARRR 模型，在用戶旅程圖的基礎上進化得來。為什么不用用戶旅程圖，而用增長大圖呢？用戶旅程圖主要通過情緒曲線來體現(xiàn)問題的嚴重性，但在使用上也存在難以量化的問題。
所以在增長大圖上，我們選擇定量的用戶行為數據漏斗來取代情緒值。漏斗其實是對一個流程和路徑的分析，目的是定位出問題的關鍵所在，這樣才能對癥下藥。但定量數據通常只會告訴我們是什么，而定性數據能告訴我們?yōu)槭裁矗?
所以，我們還建議梳理用戶調研中的定性數據，按流程、階段、產品模塊、問題類型等維度歸類，通過痛點比重公式，算出每個維度痛點比重的百分比，去綜合分析，找到機會點。另外，增長大圖還可以記錄從業(yè)務總目標拆解增長目標的過程，以及實驗的策略、方案、指標結果，所以增長大圖也是一份連接戰(zhàn)略和執(zhí)行，不斷更新的「活文檔」。
公式：痛點比重= [每個階段的問題數 / 問題總數 ] X100%
那怎么用呢？當你確定某個項目可以做增長時，最關鍵是邀請不同角色的 Key Person，包括 PD、技術、運營共創(chuàng)去搭建增長大圖。
從業(yè)務總目標出發(fā)拆解增長目標，然后將定量和定性數據梳理到大圖上，找出機會點，從而確定聚焦領域，開始增長實驗。想想就像大家在吃自助餐的過程，基本都是先看一遍有什么，再篩選一下，小份量的取餐嘗試，最后再確定幾樣好吃的，重點吃。
小份量的取餐嘗試，就等于增長實驗的過程。分為 4 個步驟：
從定量和定性數據中分析洞察——不斷的提出假設——然后排定優(yōu)先級，進行實驗——驗證應用的過程。
（增長實驗流程）
接下來，分享兩個我們在增長中做的小 Case。
Kitchen 是一款為設計者提升工作效率的 Sketch 工具集。先利用增長大圖看下 Kitchen 的現(xiàn)狀，我們撈取用戶從訪問——下載——安裝——使用的數據漏斗，可以看出整體漏斗還是很不錯的，整體留存率達到 40%。
然后我老板就說：「可以去做拉新增長，給你一塊錢成本，去撬動一個地球吧?！蛊鋵?，我當時就想給他一個白眼，現(xiàn)在一塊錢能做什么？但反過來想想，這確實是增長很重要的一點：怎么用最小的成本去撬動最大的價值，找到最大的發(fā)力點。
基于當時的 DAU 數據現(xiàn)狀，并初步討論后，我們敲定 6 周 DAU 增長翻倍的目標。圍繞這個目標，再進一步拆解為新增和留存，前面有提到留存率不錯，所以我們這 6 周的增長聚焦在拉新上。那么拉新最重要是找到低成本的渠道運營。然后，我們腦爆了一些平時設計師會去的和我們可以切入的網站，雖然篩選了一些，但還是有很多，我們不可能全部去鋪。在人有限、錢有限、時間有限的情況下，再回歸我們的目標，需要找到最合適和低成本的渠道去運營。
（利用增長大圖分析 Kitchen 訪問到使用的流程）
所以基于 ICE 評分體系以及結合業(yè)務，我們做了局部調整，最終以渠道的「影響力」、「轉化率」和「可行性」3 個維度進行打分，確定前 4 個打星標的渠道去做實驗，這里主要分享下在 Ant Design 渠道上做的小實驗。
（所以基于 ICE 評分體系以及結合業(yè)務，選定渠道）
在增長之前，我們已經在 Ant Design 首頁投下過廣告，通過數據發(fā)現(xiàn)轉化率不足 0.2% ，后來我們分析 Ant Design 各個頁面上的數據，從中發(fā)現(xiàn)一個有趣的現(xiàn)象，從招聘貼過來的用戶竟然比首頁過來的用戶還多。
對比這兩個入口，一個是首頁，一個是很內頁的文字鏈，比較偏僻的入口，位置是微不足道，但給 Kitchen 帶來的用戶卻是首頁的 10 倍。
我們又對比了他們之間的差別：首頁雖然是比較大的位置，瀏覽量大，但用戶普遍是大致瀏覽，看的欲望不強。而點擊招聘頁，通常是帶著目的進來，所以這部分的用戶是高欲望點擊的。正所謂，欲望 - 摩擦 = 轉化，為了提升轉化，要么提升客戶的欲望（Desire) ，要么減少摩擦（Friction)， 往往消除摩擦要比提升客戶欲望更簡單。所以讓用戶有欲望進行來時，我們把摩擦盡量減少，則可以帶來更大的轉化。
所以我們就提出了一個大膽的假設：如果我們在用戶點擊欲望更強，關注度更高，瀏覽量更高的頁面，并且和 Kitchen 功能相關的頁面上增加引導，這個引流的效果可能會更好。因此開始了我們的實驗，首先分析 Ant Design 瀏覽量最高的前 20 的頁面，從中篩選出和 Kitchen 功能相關的頁面。
（篩選出高頻頁面，以及相關功能）
在相關功能頁面下，增加一個叫設計師專屬的模塊。在不同功能的頁面下，加入了不同的引導文案，去吸引設計師點擊。比如 Table 這個組件，我們加入的引導文案是：安裝 Kitchen Sketch 插件 ，兩步就可以自動生成 Ant Design 表格組件。（甚至連在文案前加 emoji 、文案后加或不加 emoji ，我們都嘗試做了實驗 ）
Ant Design 的用戶有一半是設計師，那么當設計師進入到該頁面，并且也想使用 Table 這個組件時，就可以減少用戶的摩擦，增加轉化。
1 個月后我們發(fā)現(xiàn)：對比首頁，在功能頁上的引流效果更好，也說明這次試驗是成功的。通過 Ant Design 渠道過來的訪問量，總體提升 2460%。并且這個影響是長久性的。
（渠道優(yōu)化帶來訪問量提升）
在同一時間，獲得實驗成功后，我們繼續(xù)在不同的渠道嘗試了不同的增長實驗。6 周后，DAU 整體提升 42%，雖然6周的目標沒有達成 100%，但最關鍵是不斷試驗的過程。
更詳細的案例實踐請查看 ：https://zhuanlan.zhihu.com/p/68707241
語雀，是螞蟻金服孵化的一款知識協(xié)同產品。在螞蟻、阿里內部，大家都是用語雀來管理自己的辦公文檔與個人筆記，是十萬阿里人都在使用的筆記與文檔知識庫。當然，語雀不僅在阿里內部使用，對外，語雀也服務外部企業(yè)和個人用戶，所以沒有使用過的同學歡迎大家來試試：
https://link.zhihu.com/?target=https%3A//www.yuque.com/yuque/help
作為文檔管理工具，「寫」是其中的關鍵環(huán)節(jié)。因此，語雀將「注冊后寫一篇文檔」作為用戶的激活動作，此次增長實踐的目標，就是提升新用戶的激活率。
同樣利用增長大圖先梳理新用戶注冊激活的流程，從數據漏斗中我們可以看到，從注冊登錄后，到激活的轉化率是非常低的，這是我們的一個機會點。
由此我們也去做了一輪用戶調研，從調研結果來看，許多用戶在注冊后其實不知道「語雀能拿來干啥」「能怎么樣解決我的問題」。具體反映在用戶的操作和困惑上是：一是引導太弱不知道怎么開始寫一篇文檔，二是概念抽象令人費解，三是整個激活流程冗長容易失去耐心。這里邊其實有比較大的提升空間，那我們能不能通過一些實驗去提升轉化率呢？
首先分析原有方案的問題
這是我們老的引導方案，用戶注冊完成后，默認會進入到他的個人頁面，語雀默認為用戶創(chuàng)建一個空的默認知識庫。
現(xiàn)在回顧這個頁面，也難怪用戶會說不知道語雀能拿來干什么了。
首先，場景引導弱。每天不同用戶帶著各自的場景和問題，來到語雀，有希望做辦公文檔協(xié)同的，有希望做讀書筆記的，有希望寫專欄博客的。面對這形形色色的需求，語雀只提供了一個空的「默認知識庫」，余下的便留給用戶自行探索，也難怪用戶會感覺無從下手。
此外，像「知識庫」等概念，對于小白來說，其實非常抽象，難以理解。而且在此頁面中還有像「關注了」「關注者」等與創(chuàng)作關系不太大的干擾信息。這些東西，都會阻礙用戶激活，需要優(yōu)化。
針對上述問題，團隊同學經過討論，提出假設：我們是否可以通過場景化引導的方式，來提升整個激活率呢？
所謂場景化引導，就是通過語雀產品定位以及用戶實際使用情況，提煉出最典型的場景模板，打包出樣板間。用戶帶著場景與問題來到語雀，語雀帶著相應的解決方案去迎接用戶，如此一來，需求和方案就能很好的匹配上，「語雀能用來干什么」的問題自然迎刃而解。
與此同時，新方案將「知識庫」等很難理解的概念通過場景化包裝，變成「筆記本」「攻略書」等更具像化的東西，用戶不再需要上來就學習這些概念，只需要在使用的過程中慢慢去體會其作用即可。
（第一批場景模板）
以上就是我們最初提煉的六大場景，我們將它放置在新用戶注冊后進入的第一個頁面。此處以學習筆記為例子：新用戶完成注冊后，如果想用語雀做學習筆記，他可以點擊筆記下方的「立即新建」。
（學習筆記新建流程）
此時，會進入學習筆記的創(chuàng)建流程，語雀會默認幫用戶填寫好表單內容，并在右側紫色框框內展示一個樣板，通過樣板見，用戶就能大概知道語雀是如何解決他所在場景下的問題。下一步，用戶只需要點擊新建，就能創(chuàng)建出一個適用于做學習筆記的知識庫。
（學習筆記知識庫）
瞧，一個學習筆記知識庫也就新建好了，這里，用戶可以選擇自行「新建文檔」，或者基于我們?yōu)樗M行準備的模板文檔，開始自己的創(chuàng)作。整個引導過程，始終圍繞用戶的目標與場景，并將結果前置供用戶預覽，讓他更有體感。
最終，我們的增長實驗取得了還不錯的效果。相較于舊版，新版用戶激活率提升了 52%。
既然實驗效果不錯，是否能百尺竿頭更進一步，放大成功影響呢？這里運用了兩個小方法，舉一反三和乘勝追擊：
· 舉一反三：把成功模式運用到產品的其他地方
· 乘勝追擊：針對同一個點進行更多實驗，看能否進一步提升實驗指標
回到剛才的例子，在驗證了場景化引導的有效性后，我們也將模板用在用戶日常的新建流程里，除新手引導外，用戶在自己常規(guī)的新建過程中，也可以通過我們總結出來的場景模板去新建知識庫或團隊，做到舉一反三。
（將模板復用到常規(guī)新建流程中）
這一設計有利于向存量老用戶介紹語雀的用法，也方便他們去探索語雀更多的可能性，在弄明白「語雀怎么樣解決我的問題」之余，還能知道「原來語雀也能干這個！」
與此同時，我們在原先六大模板的基礎上，借著雙 11 和雙 12 的東風，提煉出了「電商團隊」模板，乘勝追擊。
希望借此轉化一部分商家流量，讓商戶也在語雀中管理自己的進銷存等內容。
經過一輪舉一反三以及乘勝追擊，場景化增長實驗取得了還不錯的效果，除剛剛說的整體激活率提升 52% 以外，自語雀場景化模板上線以來，語雀新建的所有團隊中，有 57% 是通過模板創(chuàng)建的；新建的所有知識庫中，有 21% 是通過模板創(chuàng)建的。可以說，我們的場景化模板還是比較契合用戶實際場景，被用戶接受的。增長實驗取得了不錯的成效。
整個過程，在產品功能上，其實并沒有做多少增量，從前語雀能做的，現(xiàn)在也能做；從前語雀不能做的，現(xiàn)在也不太能做。
通過場景化的方式，讓產品的價值顯性化，通過讓顯性化后的產品價值被用戶發(fā)現(xiàn)，促使用戶增長。
場景化，讓價值被發(fā)現(xiàn)，這是我們在語雀增長實踐中學習到的小小經驗，分享給大家。
最后總結一下關鍵點：
利用增長大圖，用定量的用戶行為數據漏斗和定性的痛點比重數據，去綜合分析，找到機會點，然后從業(yè)務總目標出發(fā)去層層拆解增長目標，確定增長實驗的聚焦領域，現(xiàn)階段先做什么，后做什么？用最小的成本去撬動最大的價值。但增長大圖也只是工具和手段，最關鍵是與 Key Person 共創(chuàng)聚焦、共同推進，這樣才能做到事半功倍。
增長實踐不是一帆風順、一蹴而就的，最重要的是持之以恒，反復迭代實驗的過程。如果實驗成功則可以通過乘勝追擊和舉一反三的方式，繼續(xù)放大成功影響。如果實驗失敗則要吸取教訓，了解原因，繼續(xù)下一個試驗。
最后想說的是，增長只是一種思維方式，在設計中增長，讓產品核心價值被更多人發(fā)現(xiàn)和使用，通過設計的方式去最終幫助業(yè)務增長，甚至還可以做到對商業(yè)有影響。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優(yōu)秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯(lián)系。
文章來源：站酷 作者：Ant_Design
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯(lián)系，我們立即更正或刪除。
藍藍設計( sillybuy.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
目前關于“體驗度量”比較成熟的理論模型當屬 Google 的 HEART 模型、ISO 9126 軟件質量模型和Davis 的 TAM 技術接受模型。后人在此基礎上進行了很多實踐，譬如 SAP 的用戶體驗問卷（UEQ）、Oracle 的客戶體驗價值公式（CX）等。公司內部各個 BU 也在不斷的嘗試和探索，譬如新零售技術團隊的 TES 模型，技術團隊研發(fā)效能的 DEVA 模型，國際 UED 語音設計的 HII 模型，阿里云的 QoUE 模型?？v觀這些模型和實踐，大多是主觀數據和客觀數據的結合。
我們團隊也曾提出過 TECH 、PTECH 模型，但由于模型的操作門檻較高、對埋點數據有不少要求，難以推廣到各條業(yè)務線。痛定思痛后，我們決定重新回歸業(yè)務，回歸“體驗度量”的初心，去繁從簡，提高通用性。
企業(yè)級中后臺產品最大的特點是任務性質非常明確；用戶使用這類產品通常是為了解決某個確定的問題點，期待用新的解決方式降本增效。
桌面研究也表明：可用性問題是軟件行業(yè)的普遍問題：在英國，一般商用計算機用戶只有30%-40%的有效生產率；軟件缺陷中，48%是可用性問題。
正是基于上述原因，我們嘗試提出了“兩章一分”的標準，分別從設計驗收、可用性測試、易用度分數等三個維度對產品體驗進行體檢和把關。
“設計驗收章”主要有 3 個維度：產品還原度、任務流程跑通率、單頁面加載時間。
產品還原度：指技術同學的最終產出與設計稿之間的差異；
匯總人工智能線、技術風險線等 5 個產品近 1 年的可用性測試結果。除功能、性能問題外，高頻體驗問題主要集中在“幫助引導”、“操作反饋”、“任務流程”、“概念術語”、“功能入口”這 5 個方面。同時，結合之前項目沉淀的設計經驗和設計工具，我們最終將“產品還原度”的子維度定為“信息導航”、“幫助引導”、“操作反饋”、“文案名詞”；每個子維度用 2-3 句描述來進行評分。
任務流程跑通率：驗收確認能跑通的主干任務流程數，在所有主干任務流程數中的占比；舉個例子，設計稿中枚舉了 10 條主干任務流程，驗收發(fā)現(xiàn)其中 9 條已跑通，那么任務流程跑通率就是 9/10*100%=90%。
單頁面加載時間：接入雨燕性能指標數據的產品看“首次有效渲染時長 fmp”這個指標；未接入的產品直接主觀判斷，超過 3 秒的視為不合格。
“可用性測試章”也在驗收階段執(zhí)行，同樣有三個參評維度：最終完成率、人均求助次數和高阻礙頁面。
我們沒有考慮將可用性測試的常用指標——操作時長作為參評維度，主要原因是企業(yè)中后臺產品類型多、使用場景復雜程度各自不同：用語雀創(chuàng)建企業(yè)空間只需要 5 分鐘；用云鳳蝶搭建一個后臺頁面可能需要 60 分鐘，用 sofa stack 創(chuàng)建并發(fā)布一個應用可能需要 2-3 個小時......難以確定可以作為標準的具體操作時長。
“易用度分數”標準為 5.5 分。（關于“易用度分數”的更多詳情，請查閱《企業(yè)級中后臺產品體驗度量探索（上）》）。
截至 2020 年 9 月，已有 58 個 產品實踐過“兩章一分”系列方法，基本覆蓋平臺設計團隊支撐的重點項目及 UV 超過 100 的產品。詳細數據如下圖：
完整體驗“兩章一分”的 18 個產品，僅可用性測試就幫助發(fā)現(xiàn) 364 個問題，平均每個產品發(fā)現(xiàn) 20 個問題；其中，“九州2.0 發(fā)布部署”發(fā)現(xiàn)問題數多達 53 個。
企業(yè)中后臺產品生產階段中，由于一般沒有專門的測試同學，因此設計驗收都是由設計師或 PD 單獨執(zhí)行，沒有作為必選環(huán)節(jié)，有時候甚至會因為開發(fā)周期緊張而直接略過；既沒有方法論，又缺乏儀式感。
“兩章一分”的實踐中，我們首次踐行“共創(chuàng)式驗收”，以項目組會議的方式，邀請各個角色共同參與到驗收環(huán)節(jié)中：如果產品沒有什么技術門檻，那么各個角色分別獨立操作核心流程；如果產品有一定的技術門檻，則由技術同學操作核心流程，同時共享屏幕，其他同學從旁觀察。操作完畢后，項目組內共同討論發(fā)現(xiàn)的體驗問題，并將問題落地到 Aone 中進行排期管理落地。
引入“技術支持”
企業(yè)中后臺產品通常有一定的技術門檻，以 SOFAstack的測試任務為例：
使用 sofaboot 技術棧，創(chuàng)建 “hello world” 應用，通過“經典版”發(fā)布部署模式發(fā)布成功。
測試過程中經常會出現(xiàn)一些涉及到底層技術系統(tǒng)的問題，非設計同學能解決，因此我們建議做企業(yè)中后臺產品的可用性測試時，需要配備至少一名技術支持同學，以備不時之需。
圈定最低測試人數
Jakob Nielsen 在 2000年提出測試 5 人就能發(fā)現(xiàn) 85%的可用性問題；結合我們的實際業(yè)務場景：有些產品真實客戶非常難找；前期“共創(chuàng)式驗收”已跑通核心主干流程；因此我們將最低測試人數限制為 3 人。
線上測試降成本
我們開始實操案例時，恰逢疫情期間，于是就引入了線上遠程測試的方式；后續(xù)實踐下來，發(fā)現(xiàn)遠程測試能在觀察、分析階段顯著降低執(zhí)行成本。
通過釘釘或阿里郎發(fā)起視頻會議，邀請參加測試和觀察的同學入會，請測試用戶共享操作屏幕，主持人錄屏捕捉用戶操作軌跡，PD、技術等項目組成員從旁觀察。測試結束后，使用語音轉文本工具，快速將音頻轉成文字。這種模式最大的好處有兩點：
突破了距離和觀察人數的限制；從實踐來看，現(xiàn)場測試結合遠程測試的模式，至少能同時對 2-3 人進行測試，執(zhí)行成本減半；
語音轉文本后，顯著提升了分析效率。
最開始提出“兩章一分”的時候，我們原本希望這套標準能被作為判斷產品體驗是否好用，能否上線的標準之一；但實際并未推動成功。這里面有很多原因，其中一個非常實際的問題是很多產品需要調用線上數據庫才能跑通核心流程，在測試階段沒法跑通；這就導致在測試階段做可用性測試無法真實還原用戶場景。
此外，設計師或 PD 新接手某款產品時，也希望能通過可用性測試的方式來快速了解產品問題。回歸到“兩章一分”的初心——幫助產品發(fā)現(xiàn)體驗問題，因此，我們拓展了方法的執(zhí)行階段，不再局限于測試或驗證階段，只要場景適合，都可以用。
LinkE 研發(fā)運維中心是云通未來 Serverless 戰(zhàn)場的重要產品；業(yè)務方希望用該產品來整合研發(fā)同學日常高頻使用的研發(fā)、運維、中間件平臺，大幅減少平臺割裂和跳轉，提供沉浸式的產品體驗。
目前該產品還處于 0-1 建設的階段。
為了確保產品體驗良好，設計師在驗收階段引入“兩章一分”，進行共創(chuàng)驗收和可用性測試；
共創(chuàng)驗收階段，邀請 PD、技術 等 8 名同學一起參與，最終結果為“通過”；
可用性測試階段，設計師根研發(fā)通用場景，招募 6 名研發(fā)同學參與兩個可用性測試任務，分別為
任務 1：基于代碼變更完成研發(fā)自測聯(lián)調；
任務 2：基于發(fā)布完成分支的集成、預發(fā)、灰度、生產
結果用戶在任務 2 遇到高阻礙頁面，導致可用性測試結果為“不通過”，任務 2 的易用度分為僅 4.4 分，顯著低于 5.5 分的參考標準；最終發(fā)現(xiàn) 30+ 問題點，并推動 PD 思考產品邏輯設置是否合理。
經過兩次完整實踐，LinkE 設計師已能完全獨立操作執(zhí)行“兩章一分”；
業(yè)務方的參與度 & 認知度提升明顯：已開始習慣將“兩章一分”設為項目里程碑，并全員參與進來。
在實踐過程中，我們發(fā)現(xiàn)企業(yè)中后臺產品的典型場景大致可以分為 4 個場景；不同場景面臨的設計項目有所偏重；不同設計項目在體驗度量方面的切入點也有所不同。譬如：云鳳蝶是一個典型的沉浸式畫布頁面，所有操作幾乎都是通過編輯器屬性面板來調整，那么如何來評估編輯器的效率呢？通過一系列實踐和思考，我們提出可以通過“高頻屬性查找、配置的步驟數和時間”、“設置相同組件屬性的耗時變化”等指標進行衡量。以下是我們根據不同典型場景、設計項目提出的體驗度量切入點。
經過 S1 長達幾個月的探索：我們制定了“兩章一分”的標準；對 30+ 產品進行了易用度分數的測試，捕捉分數基線；提煉實操方法技巧，并賦能給各位設計師；聯(lián)合設計師和業(yè)務方跑通近 20 個案例。不管是問題發(fā)現(xiàn)數量，還是設計師、業(yè)務方的主觀反饋，都讓我們堅定“兩章一分”在企業(yè)中后臺產品體驗優(yōu)化中是一個相對有效的模式。為此，S2 我們打算繼續(xù)深化。
落標準：在關鍵業(yè)務線將“兩章一分”落地到業(yè)務生產環(huán)節(jié)中，不過“兩章一分”就不能上線；
分基線：區(qū)分不同產品類型和迭代大小，制定不同的易用度分數基線；
升方法：針對跨產品、跨域等難以推動的橫向體驗項目，我們考慮升級方法，如將可用性測試升級為“用戶體驗日”，以便更好地推動問題落地；
閉案例：針對 S1 已跑通的業(yè)務，我們會在 S2 進行案例閉環(huán)測試，以驗證優(yōu)化效果是否真的能在“兩章一分”上體現(xiàn)出來；
始運營：我們會挑選一些案例在公司內外發(fā)聲，找相關業(yè)務領域的團隊進行交流和探討；并從案例中總結和提煉設計技巧，幫助業(yè)務成長。
我們團隊當前支持的企業(yè)中后臺產品以 0-1 階段產品為主，PD 通常缺少用戶意識和體驗優(yōu)化手段，這就導致了設計稿還原度較差、產品上手門檻較高。針對這一現(xiàn)狀，我們嘗試性地提出了“兩章一分”這個評價標準，從設計驗收、可用性測試、易用度分數 3 個維度來評價產品當前的體驗現(xiàn)狀。
通過 S1 50+ 產品的實操，我們一邊不斷完善評價標準和實操經驗，一邊總結體驗度量經驗；共幫助 18 個產品發(fā)現(xiàn) 364 個產品，并在 link 、sofa 等重點產品線中落地到業(yè)務生產環(huán)節(jié)中，在業(yè)務方層面收到良好反饋。
在這過程中，我們總結了適合不同場景、不同設計項目的體驗度量切入點，驗證了這種方式在當前企業(yè)中后臺產品中確實有效。后續(xù)我們將嘗試細化標準，閉環(huán)案例，對內對外發(fā)聲等方式，更好地推動體驗思維在企業(yè)中后臺產品生根發(fā)芽；同時，也期待能跟對這塊感興趣的同行朋友們多多交流。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優(yōu)秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯(lián)系。
文章來源：站酷 作者：Ant_Design
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯(lián)系，我們立即更正或刪除。
藍藍設計( sillybuy.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
今年，我們在內部中后臺產品進行嘗試，發(fā)現(xiàn)「易用度」可以作為合適的度量指標，并成功推廣到 35 個產品，幫助PD、設計師、工程師等產品設計者去衡量產品體驗現(xiàn)狀，發(fā)現(xiàn)改進機會點。實踐證明，易用度，相比滿意度、尖叫度、NPS，更適合技術類產品的體驗度量。結合用戶行為數據，可以為用戶畫像、改進方向、運營策略提供更準確的決策依據。
在公司內部，技術類產品種類繁多，有很大一部分是開發(fā)、運維人員使用的中后臺產品，且以從 0-1 階段為主。由于這部分同學本身工作復雜度高，又必須依賴內部產品來完成，所以長期以來“簡單易用”成為大家追求的產品體驗標準，他們也把“如絲般順滑”作為終極目標。但現(xiàn)實情況是，上手門檻高是使用技術類產品最大的痛點。
對于前臺業(yè)務的設計者，經常會使用「人+錢」，也就是「流量+付費」來衡量產品效果。通過成功率、轉化率等指標，可以快速看到用戶行為上的反饋，來指引后續(xù)優(yōu)化。但對于技術類產品，尤其是強流程、工具型產品，很難找到一套契合業(yè)務特點的度量方式。理論上，使用「成本+效率」是比較合適的衡量維度，實際操作下來，找到設計和產品效果之間的因果關系，并非易事。
我們做了一個內部調查，發(fā)現(xiàn)產品設計者經常容易遇到這些問題：
體驗度量是一個繞不開的話題。天貓、阿里云、華為、京東都有嘗試提出解決方案，但沒有統(tǒng)一的衡量維度。
設計方案與產品的市場反饋，需要一個可以解釋關聯(lián)關系的抓手，這對迭代方向的指引至關重要。
產品團隊逐漸重視用戶用戶，但缺乏有說服力的指標。
業(yè)界在體驗度量上的方案，大致分為 3 個派別：
客觀衡量法：通過數據埋點監(jiān)測用戶行為數據。例如經典的 PULSE 模型，還有大家熟悉的運營指標，活躍用戶數、留存率、ARPU、LTV等等。這對于還未商業(yè)化、用戶基數少的產品不適用。
主觀衡量法：收集用戶主觀打分。經典的滿意度、尖叫度、NPS，可用性測試量表（如SUS），美國客戶滿意度指數ACSI。
主觀+客觀衡量法：把用戶行為數據和主觀打分結合起來，多數用歸一化方式得出一個總分，把分數劃分成不同檔次作參考。Google 經典的 HEART 模型，內部 的 PTECH 模型，阿里云 QoUE 模型 ，華為云的用戶體驗模型。
在掌握了這些信息之后，我們在內部的技術類產品上，進行了一輪新的探索。經過半年時間的試點，結合業(yè)界的解決方案、內部產品的業(yè)務特性，我們最終選擇主觀衡量法，并使用「易用度」這個衡量指標。
易用度，英文 Customer Effort Score ，簡稱「易用度」，也有譯成「費力度」，指的是用戶使用某個產品/服務來解決問題的難易程度。目的是消除或減少用戶使用產品過程中的障礙。
該定義來自 2010年 《哈佛商業(yè)評論》發(fā)表的文章——《Stop Trying to Delight Your Customers》。2013年，Gartner 子公司 CEB 發(fā)布 易用度2.0版本 的測量方法，定義為“解決問題的難易程度”（make it easy to handle my issue）。
它的源頭可以追溯到美國用戶研究專家 Jeff Sauro(2009)提出的單項難易度問卷（Single Ease Question，SEQ），在可用性測試之后，用戶需要對一個問題進行打分，問法是“整體上，這個任務是非常困難-非常容易（7分制）”。
為什么說「易用度」更適合技術類的產品？主要基于技術類產品的三大特點。
總體指標
易用度：使用**產品完成**工作的容易程度。
影響因素
主要因素：產品及設計給用戶操作帶來的復雜度，我們稱之為「基礎體驗」，包括幫助引導、功能入口、概念術語、任務流程、操作反饋。
次要因素：用戶特征對使用易用度的調節(jié)作用，也稱之為「調節(jié)因素」。不同特點的用戶，會影響易用度分數，包括操作熟練度、先驗知識、行為習慣。
大家肯定要問，這些影響因素是怎么確定的，如何證明它們的合理性？這就要提到量表開發(fā)方法，基本上可以分為幾個步驟：
step1.理論借鑒
從相關領域查找經典量表，站在巨人的肩膀上，經過實踐檢驗的量表更可靠。我們首先從15種國際可用性測試量表中借鑒，抽出了一些關鍵的衡量維度。另外，易用度創(chuàng)始人Matt Dixon（2014）在《the effortless effort》書中，總結了在客戶服務場景，費力的關鍵因素：
信息分類不恰當，反復描述問題（82%）
需要多次求助（62%）
幫助指引不清晰(59%)
找不到相關入口，頻繁切換溝通渠道（59%）
step2.實踐總結
我們盤點發(fā)現(xiàn)，技術類產品，絕大部分屬于工具型產品，強調任務流程，也是用戶痛點集中的地方。匯總多條業(yè)務線近1年的調研結果。除了功能、性能問題外，根據對完成任務的阻礙程度，無論是0-1階段，還是1-N階段，高頻體驗問題分布都集中在5個維度：
幫助引導
操作反饋
任務流程
概念術語
功能入口
step3.數據分析
通過整理歸納的影響因素，需要經過信效度驗證，才能有說服力。簡單來說，信度就是“可信與否”，指的是結果的一致性、穩(wěn)定性及可靠性；效度就是“命中與否”，指的是結果反映所想要考察內容的程度。通過統(tǒng)計學的探索性因子分析，驗證性因子分析，我們確定 5 個維度可以有效測量易用度分數的變化。詳細可查閱《如何找到影響用戶體驗的關鍵因素？》。
從易用度-滿意度-尖叫度-NPS，是一個用戶預期的漸進變化。從中可以看出，易用度更關注的是基礎體驗，也就是“簡單好用”。
為什么易用度相比其他指標更適合技術類產品呢？主要有 3 個原因：
1.內部試點發(fā)現(xiàn)，滿意度無法準確衡量技術類產品體驗
滿意度不能很好衡量真實體驗，分數虛高。我們在一些產品上，同時使用「易用度」和「滿意度」作為總體指標，發(fā)現(xiàn) 43% 的用戶滿意度評分，高于易用度評分，可以理解為“產品我滿意但不好用”。此外，易用度分數與滿意度分數相關性高達0.77，具備很高的可替代性。
易用度更接近用戶真實體驗。對任務難易程度作出評價，用戶在判斷時會更直接，考慮使用過程中付出的腦力、時間等成本。對滿意度作出評價，除了考慮產品本身的易用性，內部用戶還會考慮其他主觀因素，例如：
合作關系：你是研發(fā)，我是用戶，擔心給你滿意度打低分了，之后就不滿足我的需求了。
中庸傾向：滿意度調查，已經是人盡皆知的評分，國人都傾向于打中上。
評價范圍：易用度問的是完成工作的容易程度，范圍更小，用戶評價的時候更聚焦。滿意度問的是整體是否滿意，范圍更大，用戶會綜合考慮很多因素，例如上面提到的服務支持、上下游協(xié)作、需求響應等等。
2.行業(yè)實踐表明，易用度比 NPS 更能預測用戶留存和成本變化
易用度更能預測用戶留存?！豆鹕虡I(yè)評論》（2010年）發(fā)表易用度時，調研7500多名用戶，數據顯示易用度低的客戶，94％的有復購意愿，88％表示會增加支出，僅1％表示會對公司持負面態(tài)度。Garter（2013）發(fā)布報告，基于49000多名用戶數據發(fā)現(xiàn)，易用度分值從1分提升到5分，可以使用戶忠誠度提高22%。Oracle（2015）發(fā)布服務云易用度白皮書發(fā)現(xiàn)，當用戶表示使用產品付出了更少的努力，忠誠度提高18%。相反，從滿足用戶預期到超出用戶預期，用戶忠誠度的變化并不明顯。
易用度更能預測成本變化。 Gartner（2019）對100+公司、12.5w用戶的調研發(fā)現(xiàn)，易用度從高分到低分，可以降低37%的成本。
3.行業(yè)實踐表明，尖叫度更適合成熟度較高的產品類型
目前在市場上，至少在國內，ToB 產品沒有達到飽和，定位也各有不同。在企業(yè)用戶心中，并沒有足夠清晰的心智和經驗去判斷。例如企業(yè)微信和釘釘，基本上很少有用戶會同時使用這兩個產品，那用戶就無法準確評價二者的好壞。
更關鍵的是，很多 ToB 產品，用戶多數是被動接受使用的，極少有選擇余地。普遍的高技術門檻，也把他們嘗試的意愿和可能性大打折扣。
對比滿意度、尖叫度、NPS指標，易用度的優(yōu)勢在于：
關注用戶完成任務過程中的阻礙，重視基礎體驗；
適合去度量特定的用戶接觸點和任務流程，以便了解用戶解決問題的難易程度。
劣勢在于：
對于分數過高或過低的情況，沒有通用的基線，需要區(qū)分行業(yè)、產品類型、產品復雜度來衡量分數是否合格；
側重基本體驗，無法衡量用戶的總體滿意度。
經過半年的實踐，我們采集了 35 個技術類產品的易用度，根據產品類型、產品階段來區(qū)分。結合內部試點和行業(yè)調研，我們把技術類產品的易用基線，設定為 5.5 分。主要發(fā)現(xiàn)：
產品類型越復雜，易用度越低。試點產品中，ToC 產品易用度均值 5.46，ToB 產品易用度均值 5.32，ToD 產品易用度均值 5.07。
產品階段越早期，易用度越低。試點產品中，0-1 階段的產品易用度均值 5.09，1-N 階段的產品易用度均值 5.28。
如圖所示，易用度有很好的區(qū)分度，不同產品類型的不同產品階段分數呈現(xiàn)出差異性，我們可以根據這個數據，去評估自己的產品所在位置。
為什么總體上選擇 5.5 分作為“易用”標準？
我們在這 35 個產品上進行易用度的嘗試，最終收集了 4000+ 問卷數據，得出了技術類產品的體驗基線：
總體均值 5.07 分，中位數 5 分。具體分布如圖所示，認為“比較容易”（5-7分）的用戶占 69%。
但由于內部的技術類產品，大多處于 0-1階段，以現(xiàn)在的狀態(tài)作為“易用”基線，顯然不合理。
因此，我們需要結合業(yè)界的實踐作為參考。我們收集到 2 家用戶研究領域的老牌公司 Nicereply 和 HotJar 的數據。Nicereply 是一家咨詢公司，它服務的對象既包括 C 端用戶，也包括 B 端用戶。HotJar 是一家專做用戶行為監(jiān)控的公司，它服務的對象主要是 C 端用戶。因此，我們傾向于采納 Nicereply 發(fā)布的基線 5.5 分，作為參考。
Nicereply 公司在2018 年發(fā)布的易用度 benchmark，基線為 5.5 分。
HotJar 公司在 2019 年發(fā)布的易用度 benchmark，基線為 6.09 分。
很多設計者會想，不就是一個問卷嘛，能發(fā)揮多大的作用？實際上，當問卷數據+用戶行為數據，它將發(fā)揮更大的價值。
現(xiàn)狀描述：對產品當前的功能、體驗、性能的在用戶心中的水位進行摸底，通過數據和主觀反饋找到原因。
對比差異：技術型產品往往有多個角色共同使用，并且有上下游協(xié)作關系，可以通過問卷和數據發(fā)現(xiàn)不同角色的偏好，找出差異化的改進方向。
影響關系：當發(fā)現(xiàn)某些模塊用戶評價低時，需要下鉆找到最相關的影響因素，這時需要用到相關分析，找到此消彼長或相輔相成的變化關系，以及用到回歸分析，找到可能的因果關系。
聚類分析：結合問卷數據和用戶行為數據，我們可以對典型用戶進行分層，也就是我們通常說的“用戶畫像”，可以結合經典的 RFM 模型，找到高頻、忠誠、高付費且評價好的用戶。
以某個技術類產品 A 為例，通過現(xiàn)狀描述，可以發(fā)現(xiàn)低分人群抱怨的問題集中在哪里，提出問題優(yōu)先級排序。
通過對比差異，把用戶根據人口學、行為特征進行單維分類，與易用度分數做交叉分析，找出人群之間的差異，有針對性改進。
通過影響關系分析，可以找到影響產品 A 易用度分數的主要原因，也就是用戶為什么覺得好用/不好用。
通過聚類分析，結合問卷數據和用戶行為數據，可以發(fā)現(xiàn)典型人群，制定差異化的運營策略。
在 35 個技術類產品上的實踐，我們發(fā)現(xiàn)了一些常見現(xiàn)象和經驗性的洞察，它并非都是普適的，卻有很高的參考價值。
基于內部技術類產品的體驗度量實踐，我們得出以下結論：
實踐證明，易用度指標衡量技術類產品更有效。技術類產品降本增效的商業(yè)目的、降低技術門檻的用戶訴求、流程復雜上手難的痛點，決定了體驗度量要關注基礎體驗。滿意度、尖叫度、NPS去衡量都不太準確。
易用度的衡量維度，包括 5 個部分的基礎體驗。即幫助引導、功能入口、概念術語、任務流程、操作反饋。
結合內部試點和行業(yè)調研，我們把技術類產品的易用基線，設定為 5.5 分。當前內部技術類產品的易用度基線是 5.07分，行業(yè)技術類產品的易用度基線是 5.5 分，產品類型（ToC/ToB/ToD）、產品階段（0-1階段，1-N階段）也會有所差異。
結合行為數據，易用度可以進行描述、分類。使用現(xiàn)狀描述找出低分人群的高頻問題，使用對比差異找到多角色的不同訴求，分析影響關系找到影響易用度的主要因素，結合用戶行為數據進行聚類找到典型人群。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優(yōu)秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯(lián)系。
文章來源：站酷 作者：Ant_Design
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯(lián)系，我們立即更正或刪除。
藍藍設計( sillybuy.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
最近很長時間都在做招聘管理系統(tǒng)的大改版，管理系統(tǒng)用戶角色眾多、功能邏輯復雜、使用場景多樣化，如何做到用戶體驗的突破？
在 ToB 領域，不能只關注中間的設計環(huán)節(jié)，而是需要參與到整個項目的流程中，圍繞著客戶服務的全流程，包括 理解業(yè)務-尋找機會-制定策略-設計原型-效果驗證 進行全鏈路的體驗設計觸達。
理解業(yè)務，主要是理解業(yè)務邏輯、用戶角色、使用場景；
1、業(yè)務流程圖
通過客戶現(xiàn)場訪談、問卷調查、用戶行為數據分析、競品分析、查閱行業(yè)報告等方式，梳理業(yè)務流程的關鍵節(jié)點，這些節(jié)點也就是我們后續(xù)設計的關鍵步驟。
2、用戶角色
梳理出業(yè)務流程之后，從業(yè)務流程中可以找到對應的用戶角色。招聘平臺的用戶角色包括招聘專員、招聘經理、部門主管、面試官、應聘者、獵頭、企業(yè)員工等，最主要的用戶角色是招聘專員。
通過角色畫像，減少我們在設計過程中的盲目設計和閉門造車，時刻以用戶的視角和感受來設計。
下圖是“招聘專員”的用戶畫像
2、場景分析/用戶故事
場景化設計的定義：根據特定時間、使用情景、及用戶的特性，進行定制化的設計，使用戶按照產品設定的路線快速完成目標盡可能的給予用戶驚喜與感動。
可以應用“體驗設計畫布”來幫助我們更好的梳理場景。
主要是從操作流程、內容反饋、信息傳達、視覺表現(xiàn)、情感關懷的角度來尋找交互和視覺的優(yōu)化點；
「操作流程」是否高效
去除冗余：去掉哪一步驟仍能跑通流程；預判操作：下一步驟是否可預判，提前幫用戶完成；自定義操作：高頻操作是否允許用戶自定義從而減少操作步驟；
2.「內容反饋」是否合適
符合預期：每一個操作后呈現(xiàn)的頁面或信息內容是不是用戶想要的；
一致性：不同界面同一個操作或樣式，操作后是否呈現(xiàn)一致的內容？
輕量化：采用更輕量的內容呈現(xiàn)方式，是否依然符合場景，減輕操作成本；
3.「信息傳達」是否清晰
邊界清晰：能夠明顯區(qū)分各模塊或信息，遵循格式塔原理；
易獲?。?/strong>主要模塊或信息放置在容器邊界的左上部分，因為用戶閱讀習慣從左到右、從上到下；
結構簡潔：同一層級信息數量遵循7±2原則，若超過則考慮重新整合信息結構，或是提供更高效的信息獲取方式；
4.「視覺表達」是否明確
減少認知負擔：是否有信息內容可用視覺元素代替或輔助，規(guī)避用戶閱讀文字加重認知負擔；
表意清晰：通過視覺元素能夠快速了解信息大意，而不產生歧義；
降低疲勞：界面視覺是否容易加速用戶的疲勞感；
5.「情感關懷」體現(xiàn)溫度
正向情感：文案是否傳達了正向情緒，避開負面情緒；
貼近日常：信息呈現(xiàn)貼近日常習慣，非必要不使用專業(yè)術語；
積極提供方案：當出現(xiàn)異常情況時，是否有解決方案替代異常提示；
1.「操作流程」優(yōu)化操作路徑
2.「內容反饋」更加人性
3.「信息傳達」信息整合，清晰高效
4.「視覺表達」一致、易獲取、動線合理
5.「情感關懷」體現(xiàn)溫度
經過前面的理解業(yè)務、尋找機會、制定策略之后就可以進行原型設計了，考驗大家設計功底的時候到了，這里不再贅述。
1.驗證維度
2.驗證方式
我們主要通過系統(tǒng)功能埋點、系統(tǒng)NPS信息收集、客戶現(xiàn)場和電話回訪、內部客戶外部客戶問卷調查等方式來收集用戶反饋信息。
3.驗證結果
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優(yōu)秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯(lián)系。
文章來源：站酷 作者：ZZiUP
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯(lián)系，我們立即更正或刪除。
藍藍設計( sillybuy.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
網站建設-如何建設一個優(yōu)質的網站？
網站建設
互聯(lián)網時代的到來，作為一個企業(yè)你如果還沒有屬于自己的網站，那么你就真的“out”了，互聯(lián)網的日流量達到上億，這些不是簡單的點擊率，而是一筆真真正正的大錢。如果你還不會互聯(lián)網，不了解互聯(lián)網，那么這些都與你毫無關系。而網站建設是企業(yè)面向互聯(lián)的主要窗口之一。也是大家公認渠道之一。
網站建設對于企業(yè)來說意義重大，它不僅是企業(yè)展示的窗口那么簡單?；ヂ?lián)網時代下，眾多企業(yè)紛紛進行互聯(lián)網轉型，那是因為這些企業(yè)的領導者擁有者敏銳的嗅覺，具有洞察時代大趨勢的能力。網站建設使他們首先要做的事情。那么如何建設一個優(yōu)質的網站呢？
網站建設
第一：網站建設平臺要有強大開發(fā)團隊
網站建設是一門技術活，沒有強大的技術作為支撐，就無法保障網站的安全性和功能的實現(xiàn)。開發(fā)團隊的強大決定了網站質量與品質。擁有一穩(wěn)定的后臺，才能確保企業(yè)網站的一系列工作順利進行。
第二：網站建設要有專業(yè)的設計團隊
一個網站就好比一個門面，設計人員就是裝修的師傅。門面不好看給客戶的第一印象就是不專業(yè)，第一印象分就大打折扣，不能引起客戶的重視。設計的不合理，就會影響到客戶的體驗度。一個沒有體驗度網站，很難留住客戶，進行流量的轉化。一切設計以客戶的體驗度為核心。
第三：網站建設要跟上時代的步伐
時代變，網站建設的功能和需求點也在變，只有去適應時代的打造需求，企業(yè)才能在競爭激烈的時代下生存。功能的更新?lián)Q代也要跟上時代的步伐，才能滿足客戶的體驗需求?？蛻舨艜槲覀冑I單。
SEO優(yōu)化
第四：網站建設要有利于SEO優(yōu)化
網站建設只是完成面建設，而我們建設網站的目的是為了，引來流量，轉化流量，實現(xiàn)利潤轉化。一個沒有不利于SEO優(yōu)化的網站，就像埋藏再深山的金山，難以被發(fā)現(xiàn)，吸引不到客戶。SEO的意義在于打通前往金山的通道。海、陸、空全方位立體打通，讓客戶絡繹不絕前往。金山才得以被發(fā)現(xiàn)，被開發(fā)。
第五：網站堅持維護更新
這個時代不是大魚吃小魚的時代，而是快魚吃慢魚的時代。只有不斷的去完善更新，才能適應生存。網站也一樣，只有不斷優(yōu)化升級才能不被淘汰。
第六：網站建設要符合國家政策
要及時了解國家的相關法律法規(guī)以及一些相關的政策，例如最新的廣告法，不能只用不符合要求的字眼。例如分銷系統(tǒng)，不能越過法律底線。那些文字可以商業(yè)，哪些是有版權的等。
以上是一些個人的網站建設個人見解，如有更好的意見也歡迎大家一起探討，相互學習。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優(yōu)秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯(lián)系。
文章來源：SEO
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯(lián)系，我們立即更正或刪除。
藍藍設計( sillybuy.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
編者按：互聯(lián)網的誕生本就是一個奇跡，作為其中最重要的載體之一，網頁就是這個大時代最重要的縮影，相關技術、設計伴隨著信息共享催動著整個時代滾滾向前。這是一段簡短的網頁設計發(fā)展史，我們可以看到技術、設計與思想的演進，看到無數有識之士改變世界的剪影。本文作者是網站Froont.com的聯(lián)合創(chuàng)始人Sandijs Ruluks。
當我發(fā)現(xiàn)設計網頁有多投機取巧的方法之時，就逐漸開始對手打網頁代碼失去興趣。的確，許多網頁設計的問題并不止一種解決方案，但是很少有方案能解決所有的瀏覽器兼容性問題。最令我納悶的是，為什么會有做設計和寫代碼的分工？隨著技術的發(fā)展，許多在過去難以解決的問題現(xiàn)在可以輕松搞定，但為什么與此同時一些簡單的事情反而越來越難以實現(xiàn)？這些問題的答案并不是簡單的是與否，對與錯，也許我們需要從網頁設計的整個發(fā)展歷程來尋找答案，找到真正彌合設計與代碼之間隔膜的原因所在。
溫故歷史之前，不妨看看2014年最優(yōu)秀的網頁設計：《愛不釋手！2014年最佳的20個優(yōu)秀網頁設計》
在互聯(lián)網真正開始之時，黑色的顯示屏僅能顯示單色的像素?？梢哉f，當互聯(lián)網天地初開之時，Web Design 僅僅意味著字符和空格的排列組合。雖然圖形化的界面早在80年代初就有了，但在此時普及率并不高。直到90年代，圖形化界面才真正進入千家萬戶，而那時候，才是屬于互聯(lián)網的狂野西部。
能夠顯示圖片的瀏覽器的誕生，是促使網頁設計這個行業(yè)誕生的重要先決條件。實際上在當時，最接近于信息結構化的概念，是HTML中已有的元素：表格（Table）。所以，David Siegel 在他的網頁設計書《Creating Killer Sites》講述了他設計優(yōu)秀網站的秘訣：在表格中嵌套表格，將靜態(tài)的表格和動態(tài)的表格以巧妙的方式結合到一起。盡管表格本身是用來承載數據的，用來承載內容和圖片有點奇怪，但是在那個時代，這種方法依然顯得頗為靠譜，并且大行其道。
網頁設計所面臨的另外一個問題，就是如何保持網頁那脆弱的結構。也正是因為這種需求，切片設計（Slicing Design）逐漸流行了起來。設計師創(chuàng)建出漂亮的網頁布局，隨后開發(fā)者將整個設計稿切片，找出呈現(xiàn)設計的最佳方法。另一方面，表格還有一些炫酷的功能，比如垂直對齊，以像素為單位或者以百分比來控制對齊。在那個時代，表格可是近乎柵格系統(tǒng)一般的靈活的設計神器，也正是因此，那個時代的開發(fā)者并不喜歡前端的代碼。（表格嵌套表格有多亂？）
JavaScript的出現(xiàn)補足了尚且原始的HTML。舉個例子，如果你想寫個彈出窗，或者想動態(tài)修改某些對象的順序？HTML不行，但是JS可以！不過此時JS的主要問題在于，它處于整個網頁布局的頂層并且需要單獨加載。很多時候它僅僅被懶惰的開發(fā)者用作一個簡單的補丁，但如果使用得當，JS可以非常強大。今天，同樣的功能如果CSS能實現(xiàn)，我們會盡量避免使用JS。不可否認的是，JS本身確實很強大，前端常用的jQuery，后端的Node.js都是不可多得的好東西。
作為一門新技術，F(xiàn)lash為網頁開發(fā)者/設計師帶來了前所未有的自由，它打破了之前網頁設計所固有的限制。借助Flash，設計師可以隨心所欲地在網頁上展現(xiàn)任何形狀、布局、動畫和交互，可以使用任何喜歡的字體，他們借助Flash熔于一體。所有的這一切最終會被打包成為一個文件，然后被發(fā)送到瀏覽器端顯示出來。這也就意味著，用戶只需要擁有最新的Flash插件和些許等待時間，就可以享有一個魔術般的網頁。這是啟動頁面（splash pages）、介紹動畫以及各種交互特效的黃金時代。不幸的是，這種設計并不開放，也不利于搜索，還需要消耗計算機大量的運算能力。2007年，當蘋果發(fā)布他們的第一臺iPhone的時候，就決定徹底放棄Flash，也正是在這個時候，F(xiàn)lash開始走下坡路——至少在網頁設計領域。
差不多是在Flash崛起的同時，一種更好的網頁結構化設計工具CSS誕生了。CSS的基本概念是將網頁內容的樣式分離出來，所以網頁的外觀和格式等屬性將會在CSS中被定義，但內容依然保留在HTML中。早期版本的CSS并沒有現(xiàn)在那么靈活，和許多新事物一樣，它最大的障礙在于許多瀏覽器還沒來得及接納這一新技術，對于開發(fā)者而言，這是一個頭疼的事情。需要明確說明的是，CSS并非全新的編程語言，它僅僅只是一種聲明性語言。那么網頁設計師需要學習編程嗎？可能需要。但是網頁設計師需要懂得CSS么？當然需要。
此刻，在手機上瀏覽網頁本就是一種全新的挑戰(zhàn)。設計師除了要為不同設備設計不同的布局，還面臨著內容控制的問題：小屏幕上展示的內容要和桌面端一樣多，還是需要剝離開來？桌面端網頁上閃亮精致的小廣告要如何在手機上呈現(xiàn)？加載速度也是一個大問題，移動端設備的網絡加載速度不夠快，而且桌面端網頁會消耗大量的流量。網頁設計亟待改進。
第一個重大的改進是柵格系統(tǒng)的出現(xiàn)。經過摸索，960柵格系統(tǒng)最終勝出，經典的12欄柵格被設計師們廣泛的接納，甚至成為許多設計師最常用的設計工具。接下來，各種常見的設計元素諸如表格、導航、按鈕被標準化，打包成為可復用的套件，這基本上就構成了視覺元素庫，其中還納入了常見的代碼。其中最典型的代表就是Bootstrap和Foundation，它們也使得網站和APP之間的界限逐漸模糊。當然，它們也不是沒有缺點，借助這些庫設計出來的網頁往往大同小異，而且網頁設計師要想使用它們還得深入了解相關的代碼知識。
驚才絕艷的設計師Ethan Marcotte決定挑戰(zhàn)傳統(tǒng)的網頁設計，它讓網頁在內容不變的前提下，布局隨著窗口和屏幕的變化而變化，并且將這種設計命名為響應式網頁設計。網頁設計師依然只需要HTML和CSS就可以實現(xiàn)這種功能，不得不承認這種設計理念非常超前。不過大家對于響應式設計依然有些許誤解。對于設計師而言，響應式設計意味著為設計許多不同的布局。對于用戶而言，響應式設計就意味著這個網頁可以在手機上完美瀏覽。對于開發(fā)者而言，響應式設計意味著如何控制好網站圖片應付移動端和桌面端，在不同情形和語義下，擁有良好的下載速度和呈現(xiàn)效果，等等。簡而言之，就是一個網站能在任何情況下良好展現(xiàn)。至少在這一點上，所有人能達成共識。
設計網頁布局總會花費大量的時間，好在這個時候我們開始拋棄復雜的光影效果，重新專注于根本的內容呈現(xiàn)。在此之前，網頁設計講求精美的圖片和排版效果，漂亮的插畫與周到的布局設計，而簡化這些視覺元素之后，就是我們說所的“扁平化設計”。將復雜的效果淡化之后，視覺的扁平化，也促使內容和信息層級的扁平化。充滿光影特效的按鈕被扁平化的圖標所替代，矢量圖形和圖標字體也開始被大范圍使用，網頁字體和版式設計的結合令網頁視覺更加漂亮。有趣的是，這時候的網頁設計開始有返璞歸真的感覺。
技術的革新已經開始將網頁設計推動到一個全新的境界。在許多設計平臺上，設計師只需要在屏幕上移動不同的控件就可以生成整潔可用的代碼出來，并且這些代碼非常靈活，可控度極高！試想一下，開發(fā)者無需擔心瀏覽器兼容性，可以專注于更加實際的問題！
新誕生的概念正在推動網頁設計。CSS中新誕生的屬性，諸如vh和vw（viewport height 與 width1），就使得網頁元素的位置控制更加靈活自由，一次性解決了設計師糾結多年的頑疾。作為CSS一部分的Flexbox則是另一個新事物，它可以快速創(chuàng)建布局，輕松修改屬性而無需編寫過多代碼。
網頁設計正在飛速發(fā)展，未來還會有越來越多的創(chuàng)新，就讓我們拭目以待吧！
文章來源：UI中國 推薦：陳子木
藍藍設計( sillybuy.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
確保用戶成功且無壓力的登錄體驗需要我們不斷地思考。
大家好，我是Clippp。今天為大家分享的文章是「登錄頁」設計。幾乎所有的登錄頁看起來都大同小異，通過輸入賬號和密碼就能夠進入，但仔細思考會發(fā)現(xiàn)，每個登錄頁都有差異化的點，而這些點正是產品無一物二的地方。
登錄體驗是指用戶通過入口進入應用、網站或服務，建立自己的身份。
登錄流程通常由主登錄流程和恢復流程組成，其中主登錄流程包括填寫用戶名、手機號、密碼等，恢復流程包括忘記密碼、重置密碼、其他登錄方式等。登錄體驗的目標是確保用戶成功登錄帳戶。
使用簡潔、常用的頁面布局和文字，有助于用戶輕松執(zhí)行熟悉的操作。保持設計簡單也有助于將體驗輕松擴展到不同設備和屏幕尺寸。
▲ Pinterest采用了居中對齊的重疊式登錄頁設計，用醒目的紅色按鈕來突出登錄動作，還支持Google和Facebook作為其他登錄方式。
登錄頁是強調品牌的首要接觸點。登錄操作最好于中心位置，頁面上的其他元素應謹慎增加，避免注意力從登錄任務上移開。
設計思考：
用戶花在登錄頁上的時間越少越好，要讓用戶盡快發(fā)現(xiàn)產品中的優(yōu)點和價值！
登錄(或恢復)操作應引起用戶的全部注意力：
最好將登錄頁表單放在頁面中心位置；
不需要復雜或冗長的文字解釋，例如可以利用簡單的“輸入密碼”來提示用戶完成操作；
要求用戶一次只做一件重要的事情，例如將找回密碼這種復雜的流程分解為多個步驟進行。
▲ Facebook保留用戶的登錄信息，并將恢復流程分為幾個邏輯步驟。
▲ 亞馬遜將輔助恢復選項放在“更多幫助”中，這有助于使主要操作保持重點。
設計思考：
使用卡片式布局；
將操作分為主要動作和次要動作；
使用尺寸大而突出的登錄按鈕；
盡量減少次要操作的次數，以避免使頁面出現(xiàn)混亂。
在登錄過程的每個階段，用戶都可能會失敗。輸入錯誤的郵箱，忘記密碼或網絡問題等，所有這些問題都可能導致登錄意圖急劇下降。
因此清晰及時的反饋設計對用戶來說很重要。
▲ 信息輸入錯誤時會提示錯誤具體的原因。
▲ 密碼輸入有誤時，F(xiàn)acebook會在下方增加“使用Google登錄”選項。
設計思考：
鼓勵用戶嘗試合適的替代方案；
登錄失敗后，將用戶導航到單獨頁面并組織其他登錄方法；
展示最有效的登錄方法，并在發(fā)生問題時及時對用戶做出反饋。
除了輸入賬號密碼這種登錄方式，最好提供一種或兩種附加的登錄方式以便用戶選擇，同時防止忘記密碼造成無法登錄的情況。
添加過多的登錄方式會使頁面混亂，降低登錄意圖，附加選項應該限制為2或3種方式。
▲ Medium登錄表單的設計盡管很清晰，但過多的登錄方式會阻礙用戶的選擇和判斷。
▲ Airbnb登錄頁能看到大量的輔助登錄方式，過多的選項可能會導致用戶的認知負荷。
設計思考：
當前無密碼登錄正在迅速普及。在很多移動App中，基于手機號的身份驗證已成為常態(tài)，指紋和FaceID也出現(xiàn)在許多地方，從而實現(xiàn)了無縫和安全的身份驗證流程。
找到產品最適合的登錄方式，并將其作為主要選擇能有效提升效率！
登錄涉及用戶輸入敏感的個人數據，例如手機號、郵箱、密碼等，用戶愿意輸入信息意味著他們信任這個平臺或產品。
雖然減少與用戶的摩擦很重要，但有時網站也會提供額外的身份驗證來確保用戶信息的安全。
▲ B站利用文字驗證方式來增強用戶帳戶的安全性。
設計思考：
登錄表單應該代表品牌的形象，任何視覺上的變化都必須慢慢進行，因為完全改變視覺設計可能會導致缺乏信任。
登錄意圖是一種體驗，在這種體驗中用戶角色和類型可以無所不包。
可以嘗試以下方式來定義用戶的范圍以便更清楚的了解用戶：
登錄渠道：與PM合作找出在登錄流程中用戶交互和退出的關鍵階段。
登錄入口：用戶是通過郵箱、搜索引擎還是通過應用跳轉到登錄頁？
常用設備：手機、瀏覽器等設備可以為用戶帶來個性化的體驗。
用戶群組：利用年齡或地理位置等方式也能進行分離用戶群主的劃分。
通過分析具有代表性的登錄頁設計來展示登陸頁的多種設計表達。
▲ Google采用多階段的登錄方式，郵箱和密碼分兩步進行輸入。這種格式對谷歌來說有一些安全優(yōu)勢，也可以在下一步為用戶提供個性化的選擇。
▲ Uber的登錄頁采用簡單的樣式，注重使用體驗，引導用戶輸入手機號來進行下一步。
▲ Facebook利用右對齊的登錄表單很好地集中注意力，左邊的空間被用來展示品牌的信息和形象。
▲ 亞馬遜的登錄頁從視覺設計上看有些陳舊，但卻是管理用戶注意力的一個很好的例子。黃色的“繼續(xù)”按鈕和簡潔的頁面使登錄看起來簡單而快速。
▲ Figma的登錄頁位于畫面中心，頂部首先展示的是以Google登錄，這可能是Figma首選和推廣的登錄形式，頁面整體的設計利用線框組成，非常簡潔高效。
文章來源：展開 作者：Clippp
藍藍設計( sillybuy.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
網頁的第一印象至關重要，它在很大程度上決定用戶是否有興趣瀏覽下去。而這個第一印象則是由網頁的首屏部分所決定，它是最直接傳遞出網頁的功能與印象的媒介。
一個好的首屏，也能讓你在同質化嚴重的情況下，脫穎而出實現(xiàn)彎道超車。好的，今天就讓我們一起來研究一下，網頁首屏部分的組成、方式以及設計手法吧。
說到首屏大家肯定第一反應是這樣的一個形式，有小伙伴可能會說，這個不就是個 Banner 嗎？那也是很多設計師的誤區(qū)，網頁首屏中存在著大量的交互元素在其中。
我們現(xiàn)在來看第一個網頁，這里就包括了五個互動的按鈕在其中，這個是 Banner 所不具備的功能，接下來我們快速的瀏覽一下，這個區(qū)域的主要組成模塊。
這個網頁，是一個簡單的組合形式，我們可以劃分為全局導航欄和形象部分。
這兩個網頁是類似的形式，我們稱之為大尺寸頁眉，即這整個區(qū)域都是頁眉的區(qū)域。
這其中我們又可以細分為：全局導航欄、全屏圖片和形象文案部分。
我們順著這個思路繼續(xù)分下去，看到這個網頁的首屏部分，包括了全局導航欄、形象文案和社交鏈接。
但具體我們的首屏高度要設計多少呢？這里我們可以參考 w3school 網站的數據。其他的尺寸我們直接忽略掉，剩下的我們看到 1366×768 像素的尺寸是一個最常見的尺寸。
這里我建立了一個 1920X1080 高度的畫板，點擊標記區(qū)域的 “視口高度” 將數值改為 768 像素，即可。
右面的畫板上就出現(xiàn)了一個虛線標記的地方，這個就是我們的視口高度。
有很多小伙伴問我，老師什么是主頁？什么是著陸頁？它們是相同類型的東西嗎？答案肯定是否定的。
我們以這個網頁為例，它是一個游戲的專題頁面，并不是這個網頁的主頁。
而是這個網頁的著陸頁，用戶點擊搜索推廣、信息流或其他形式的廣告打開的第一個頁面。著陸頁可以是網站上的一個頁面，也有直接把主頁當作著陸頁使用的情況。
進入的才是這個網頁真正的主頁部分。
如果還不理解，我們可以一本書籍為例。這個書籍的封面可以理解為首頁。而它內部的每一個頁面都可以理解為著陸頁。每個頁面都有自己專門的關鍵詞，這樣就不需要用戶，每次都是從首頁進入了，方便用戶使用。
著陸頁可以著重用來介紹專題活動或者產品。
這個著陸頁作為整個這個網站的介紹專題頁出現(xiàn)。用戶在搜索時，可以根據關鍵詞直接搜索到這個網頁。
這個著陸頁也同樣是起著介紹專題的作用。
著陸頁也常被用介紹產品，這樣我們在搜索這個產品的時候，就可以更快的找到了。
很多情況下，網頁首屏的形式不斷地被強調，而首屏的功能性卻總是被忽略。這樣就會出現(xiàn)影響用戶使用的情況，因為網頁最重要的作用就是傳遞和收集信息。
所以設計師在設計一個網頁的首屏部分時，應該更多的去考慮這個網頁想要的提供的功能是什么，而不是一味的追求形式感。當然不同的行業(yè)，所要求的網頁的功能也是不同的。接下來的部分我們主要來探討一下這個問題。
一個網頁主要受到三個因素的影響。行業(yè)、功能和形式。這三個元素又在互相影響。
首先，行業(yè)決定了功能性。我們用醫(yī)療這個大行業(yè)下的，醫(yī)院類型、保健類型和醫(yī)學院類型的網頁來說明。
首先我們來看醫(yī)院類型的網頁，這種特定的行業(yè)類型，要求的網頁功能就會比較全面。
首先就是為了方便用戶提供的預約功能。
在這個基礎上，網頁中還會加入導航功能，這是為了讓用戶更容易去找到這家醫(yī)院。
網頁設計者還會添加問診功能來方便用戶直接進行查詢。
這個網頁我們就看得更加詳細了，同樣是添加了一個問診功能。
我們來總結一下，除了最基本的形象功能外，醫(yī)院類型的網頁還添加了預約功能、客服功能、導航功能和問診功能，其本質都是為了可以更好的服務客戶。
到了保健類型的網頁時，這個功能就會相應的發(fā)生變化，由于是保健的性質，更多是從招攬客戶這個點而出發(fā)的。
所以這類的網頁，雖然同屬醫(yī)療行業(yè)，卻有了不同的功能，這里更多的是發(fā)揮著這個網頁的形象功能，增加信賴感。
這個網頁則是直接把服務流程放在了首屏部分，可以讓用戶最容易地理解整個服務流程。
這個網頁也是同樣的設計邏輯，通過展示形象來吸引用戶。
保健行業(yè)的網頁，幾乎都存在著預約功能，這樣主要是提供了一個用戶和商家互動的渠道，也是契合這類型行業(yè)的實際需求。
最后我們來看一下，醫(yī)療學校類型的網頁。
因為是屬于教育行業(yè)，所以更多是一個形象功能的展示。
這個網頁是一個護士的招聘網站，他就用過輪播視頻的方式，讓用戶能最直觀地感受到護士這個職業(yè)的內容和價值。
教育行業(yè)的網頁，則更多的是一個形象功能，向客戶傳遞自己的價值觀。
前面說了行業(yè)決定功能，以此類推，功能確定著形式，我們主要以旅行行業(yè)的網頁進行說明。
這個網頁主要是向用戶展示環(huán)境以及服務，也就是我們前面說的形象功能，所以在設計的時候直接做了一個全屏的形式，最好地向用戶展示自己的信息。
這個網頁也是同樣的功能，展示自己的形象，將自己的景色展示出來，這樣可以讓用戶最直觀的看到。
這里則是在展示形象功能的基礎上，添加了一個預定的功能，網頁的形式也發(fā)生了一定的改變。
這里還可以將預定功能的形式放在頁眉和主欄的交界處，創(chuàng)造一定的層次感。
這是一個酒店的網頁，在設計的時候，添加了一個銷售的功能，這樣在設計的時候網頁形式也相應的進行調整。
而最后到了形式的部分，它并不決定任何事情，而是反過來促進行業(yè)。
化妝品的行業(yè)對網頁的美觀度要求很高，當我們?yōu)g覽到這樣的網頁時，并不會增加我們購買的欲望，甚至這樣的網頁起到的是一個反作用。
而當我們就瀏覽到這樣的化妝品的網頁時，他是可以提升我們購買力的。
我們放在一起對比一下，是不是孰優(yōu)孰劣就一目了然了。前面我們說了，行業(yè)決定著功能，功能決定著形式，形式反過來促進行業(yè)。所以最終呈現(xiàn)給用戶的網頁是一個多方綜合的結果。
在確定了行業(yè)和功能的前提下，就需要我們多去了解網頁的設計形式有哪些。這里，給大家介紹一下現(xiàn)在時下流行的設計形式——等分屏式。
等分屏式很容易理解，就是將網頁一分為二，AB 兩個部分，它們既可以展示相同的信息，也可以展示不同的信息。以這種形式設計的網頁，被稱為雙專欄型的網頁。
最常見的形式為一半圖片，一半文字。這就類似于我們的畫冊結構—— 圖字組合。
第二種形式則是，左右都有圖片，它們既可以說明同一件事情，也可以截然不同—— 圖圖組合。
第三個則是大圖小圖的對比形式，這種形式會賦予網頁一定的藝術感和時尚感 —— 大小圖組合。
圖字組合的形式，和我們在觀看畫冊習慣基本相同，一半圖片一半文字，可以很好的傳遞出網頁的信息，方便用戶理解。
這個婚戒的網頁，使用這個形式，更加增添了高級感。
它們也是可以左右進行一個對調的，這個網頁同樣是依靠這種形式，傳遞出一種簡約高級的感覺。
這個網頁使用的是圖圖組合的形式，左右照片連貫，講述的是一件事情，給用戶一定的聯(lián)想和視覺沖擊力。
這里左右選擇的是一個關聯(lián)性的圖片， 創(chuàng)造了一定的故事性，同時也傳遞出來這個網頁的產品。
大小圖組合，更加可以凸顯出來網頁的時尚感。
上述的三種組合，并不是永恒一成不變的，就拿圖圖組合來說，我們可以通過移動網頁的分割線，創(chuàng)造出很多形式?？梢赃x擇縮小圖片的范圍，更多的去展示文字的信息。
也可以選擇放大圖片，這些大家都可以根據實際的需求進行操作。
大小圖的組合，也可以不局限于規(guī)規(guī)矩矩的排列形式。
我們也可以在規(guī)則內，任意移動小圖來創(chuàng)造出新的感覺出來。甚至可以將小圖拆分，創(chuàng)造出更加活潑的版面結構出來。
這個飾品的網頁就是利用這種形式，多角度的展示了自己的飾品。
這個網頁則是用這種形式，創(chuàng)造出一定的故事性，提高用戶繼續(xù)瀏覽這個網頁的興趣。
我們也可以更進一步的，把大圖也調整，重新布局在頁面中，就可以創(chuàng)造出更多的版面形式了。
使用這個形式的網頁，提升這個網頁的活潑度和設計感。
這樣調整了圖字組合和大小圖組合，我們就可以得到了 5 種完全不同的形式網頁了。
通過上面的思路，我們也可以嘗試去結合不同的組合，也可以創(chuàng)造出很多新的形式。更多的組合形式就需要小伙伴們自己去嘗試和發(fā)現(xiàn)了。
到這里大家有沒有一個感受，就是網頁設計其實是可以非常靈活的，形式也是多種多樣。
文章來源：優(yōu)設 作者：研習社
藍藍設計( sillybuy.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
藍藍設計的小編 http://sillybuy.com