<address id="ttjl9"></address>

      <noframes id="ttjl9"><address id="ttjl9"><nobr id="ttjl9"></nobr></address>
      <form id="ttjl9"></form>
        <em id="ttjl9"><span id="ttjl9"></span></em>
        <address id="ttjl9"></address>

          <noframes id="ttjl9"><form id="ttjl9"></form>

          首頁

          設計師如何洞察用戶需求?

          資深UI設計者

          在設計工作中,你可能會遇到這樣一種場景:甲方爸爸開發了一款產品,委托你進行包裝推廣,但是甲方對于設計將要解決的需求并沒有明確定義,或者只給出了行為層的建議,好比高端、大氣、上檔次,低調、奢華、有內涵balabala,甚至發來帶有魔幻主義色彩的參考圖,上來就要求出幾版方案先看看,這些情況在服務中小型企業時十分常見。


          這種情況怎么辦?

          無視甲方的奇葩要求?憑著自己的經驗干?還是順著甲方的偏好干?畢竟人家是金主吖?

          恐怕都難有好結果。

          對于設計師是自找改稿,畢竟你連將要解決的問題都不清楚,自然無法有效的論證“設計為什么這么做”,這就相當于把方案的主導權拱手讓給了非專業的甲方。而甲方如果思維跳躍“很有想法”,你就有改不完的稿子了。

          對于甲方而言,則可能買回一堆無用品,畢竟方案出街后面向的用戶其實是甲方的客戶,靠設計師和甲方拍腦袋本身是舍本逐末,解決不了問題,用戶才是真“爹”。

          so,一切以主觀為意志的設計行為都不明智,最終很可能落得一個雙輸的結局。


          正確的做法是怎樣的呢?

          這種情況下就需要設計師上升到產品思維的高度,與甲方溝通推進,乃至于進一步的用戶調研。

          一個面向市場的產品,被制造出來一定是為了滿足市場上某一類用戶的需求缺口,否則它就沒有存在的理由。而設計是為產品賦能的角色,所以在確定設計將要解決什么問題,以及產生洞見的過程中,一定是圍繞“用戶需求”為中心,只有真正明確了這一點,你的設計才是有意義的。


          那么,如何搞明白用戶需求呢?

          接下來我會從“什么是用戶需求、如何通過做用戶調研、如何萃取用戶需求”這三個部分來和大家分享,如何通過洞察用戶需求,來幫助我們更好的設計。理解了這些能夠幫助你提升一個段位(配合收藏+點贊食用更佳)。



          一、用戶需求都有哪些?

          在介紹具體的方法論之前,首先你得知道用戶需求都有哪些。 人的需求通??梢苑譃椤肮δ苄枨蟆焙汀扒楦行枨蟆眱纱箢?,分別由左右腦管控。


          功能需求,是顯而易見的外在具體需求。

          比如找工作你會關注工資、五險一金、福利待遇,買電腦會看內存、CPU、屏幕大小,點外賣會看價格、送餐速度。功能需求是用戶的“左腦”需求,也是用戶基本想要的東西。


          情感需求,則是與之相對的,隱性的、抽象的內在心理層次需求。

          比如這家火鍋店的服務太周到了,讓我感覺心里暖暖的,喝一杯星巴克,體驗到白領小資的情調,穿上這套西裝,讓我感覺自己像明星模特。情感需求同樣重要,它是感性驅使,用戶“右腦”情緒上的需求。


          李叫獸曾在《十四天改變計劃》課程中的產品戰略模塊細分出了十類用戶需求

          這些同樣可以歸納為“功能需求”和“情感需求”這兩大類。


          A功能需求:低價、性能、便捷性、可達性、降低風險。

          B情感需求:高端、定制化、新穎、過程體驗、理想自我。


          給大家解讀一下:


          • A1-低價

          低價,是解決了“用戶曾經因為價格原因無法獲得的,現在可以獲得了”的需求。

          比如我們身邊各種無節操的促銷活動▽


          拼夕夕動不動的砍一刀▽


          拼夕夕一言不合就轟炸的紅包▽


          這些都是切中低價需求的設計,low不low且不說,但它們是成功有效的。

          反之如果把一個促銷頁做成買不起的樣子,那注定是個失敗的設計。畢竟商業設計從來不是自我陶醉的做出一些高逼格的東西,而是在不同情景下使消費者內心與行動上買單。


          • A2-性能

          性能,解決的是“滿足用戶對某項功能追求”的需求

          比如Intermarché 橙汁▽

          為了進一步強調產品“新鮮”的特性,在包裝上白底黑字印上了超大的數字時間,表示生產日期。這一設計巧思,使產品上市當天便獲得5000萬次社交媒體曝光,一個月內銷量增長了4600%。

          深澤直人的仿生包裝▽

          通過對產品包裝的色彩、造型,甚至工藝質感上的直觀呈現,來表達產品“原生態”的特性,幫助商品在琳瑯滿目的貨架上脫穎而出,大大增加產品售出的機會。


          • A3-便捷性

          便捷性,解決的是“降低非貨幣成本”的需求。

          比如亞馬遜▽

          amazon作為全球商品品種最多的網上零售商,所主張的就是“降低你線下購物的時間成本”,包括亞馬遜的標志傳遞的也是“從A到Z,應有盡有”的概念。

          再到聯邦快遞▽

          不論是標志中隱含的箭頭,還是對外的品牌創意廣告,都是在強調“24小時使命必達”的強大的貨運能力。解決的同樣是用戶的“便捷性”需求。


          • A4-可達性

          可達性,是解決“獲得過去難以獲得的某些東西”的需求。

          比如數碼相機▽

          在膠卷相機時代,拍完了照片得洗出來后才能看到拍的好不好,而數碼相機的設計,讓你可以實時看到拍攝后的樣子,達到了以前達不到的功能,解決了以前不能解決的問題。

          美圖秀秀▽

          你可以讓自己變得更加苗條,更美麗。以前只有設計師經過專業學習才能P出好看的照片,現在普通人也可以輕易的對自己的人像實現美化。同理,都是“可達性”的需求切入。


          • A5-降低風險

          降低風險,是解決“降低本次消費帶來風險”的需求。

          比如神州專車▽

          用滴滴你可能會遇到黑車、黑司機,之前也鬧出過這樣的新聞,神州專車則撿大品牌的漏,通過自營車輛專門解決打車過程隱患的風險,解決的就是“降低風險”的問題,在對外推廣中也都是在強調專業和安全。



          以上是功能性需求,那么情感需求呢?


          • B1-高端

          所謂高端,切中的是馬斯洛需求模型中的尊重需求“身份認同”。

          比如小罐茶▽

          我給朋友送禮希望擺上一盒茶葉,朋友就知道這茶很貴,不需要解釋也能體現我對朋友的重視,自然就需要穩定價格和品質的品牌。小罐茶則抓住了茶類的這一空白地帶,順利打入市場,設計的調性同樣都是圍繞這一策略服務。



          • B2-定制化

          定制化,解決的是“滿足用戶特定功能與體驗”的需求。

          比如檸檬盒子▽

          根據消費者的健康情況,量身定制滿足消費者每日所需的維生素,從對外的廣告到帶有姓名的產品包裝,都是在強調“定制性維生素”的品牌定位,這種差異化打法,讓檸檬盒子從保健品中脫穎而出。




          • B3-新穎

          新穎,是解決“消費者對過去陳舊市場不滿,追逐潮流”的情感需求。

          比如味全每日的拼字飲料▽

          通過包裝的貨架創意呈現,與消費者形成互動,最終形成社交媒體自傳播,上市后每個月的銷售額都有同比40%的成長。

          Milgrad牛奶▽

          最近也是在社交平臺上形成現象級刷屏,為品牌省下不少廣告費。

          二廠汽水▽

          去年夏天的老牌新造,成功逆襲成為網紅品牌,年銷近三個億。這些都是從情感性需求“新穎”的角度切入。


          • B4-過程體驗

          過程體驗,是解決了“ 消除用戶在完成某個任務的過程中所存在的阻礙”的需求。

          比如海底撈▽

          餐廳高峰期經常人滿為患,排隊體驗差。海底撈則會在你排隊等待的時候,提供免費美甲、護手、零食...等等各種周到服務,贏得了口碑傳播。如果你留心觀察,你會發現海底撈的標志也是用了一個打招呼的氣泡Hi,來強調服務為先的品牌定位,解決的是情感需求中的過程體驗。



          • B5-理想自我

          理想自我,解決的是“幫助用戶成為更理想的自己”的需求。

          比如Odorono止汗劑▽

          1912年智威湯遜著名廣告人詹姆斯·楊,在幫助客戶推廣面向女性群體的止汗劑時,砍掉了原來“出汗是一種疾病”的推廣策略,推出了一條新的至今人被人津津樂道的策略:“出汗將會影響你的人際關系,讓你不再受男性歡迎”,這一策略在美國形成現象級轟動,遭到女性憤怒的同時,也成功幫助Odorono打開了女性市場,是“理想自我”的典型應用。



          受于篇幅,以上十點講的比較概括,這些案例很多都非常經典,感興趣大家可以自己百度搜索。

          通過這些案例你會發現,設計其實有很多種“玩法”。

          講這十點的意義,一是啟發大家在實際工作中思考多個角度可能性,先把思路做多,而不是只局限在通過設計強調產品的某一功能特點,接著著眼于形式,那樣很可能我們一開始的切入點就沒找對。

          另一方面,讓大家對這兩類需求有更具體的認識,你會發現這些“玩法”都是基于用戶需求而存在,不是直覺或玄學更不是毫無章法的創意。設計是基于嚴謹思考推理的解決問題的過程,而解決的問題無非歸納為理性的“功能需求”與感性的“情感需求”這兩類。



          那么應該如何發現用戶到底有怎樣的需求呢?支撐依據是什么? 

          固然不是靠甲方拍腦袋,更不是靠設計師拍腦袋,而是靠“用戶調研”



          二、如何做用戶調研?

          想想看你都接觸過哪些調研方式?

          常見的調研方式包括問卷法、后臺數據法、訪談法、觀察法等等。這些調研方式前兩者屬于“定量型”,后兩者屬于“定性型”,它們有不同的側重點與優缺點。


          1.定量型

          定量型調研側重于“廣度”,是通過大數據,量化用戶的行為偏好。包括:


          ●后臺數據法

          通過產品APP或者平臺的后臺來提取用戶操作數據,來獲取用戶的選擇偏好。

          舉個例子,比如你將要設計某個電商產品詳情頁,那么你就可以提取該電商平臺的后臺數據,通過品類下關鍵詞的搜索詞頻,來獲取用戶的真實需求,作為設計方向的指導依據。具體可以參考南孚充電寶詳情頁的設計過程。

          這種調研方式的優點,是能快速獲取到用戶真實的顯性需求,缺點是受限于互聯網產品或科技類產品。所以對于小眾產品,一般會采用第二種定量調研方式。


          ●問卷法

          對覆蓋用戶以問卷的形式采訪,也是最常見的調研方式。比如可以通過目前的主流問卷平臺:問卷星、金數據、騰訊問卷等渠道來取樣,問卷法的優點是操作簡單,易擴散,能夠獲取到大量的基礎反饋數據,缺點是獲取到的信息深度十分有限,基本只能獲得自己預設范圍內的反饋,畢竟大部分用戶根本不關心你問卷的填空題。

          整體而言,定量性調研只能獲取到用戶行為層面的顯性數據,對于用戶為什么會產生這些行為是沒有答案的,所以一般情況下還需要定性型調研來配合。


          2.定性型

          定性型調研側重于“深度”,是聚焦少量人群,洞察行為背后真實想法的方式。包括:


          ●訪談法

          針對某一類問題,與少量不同的目標用戶約談,通過溝通,挖掘他們行為背后更深層的情感需求。

          舉個例子,比如肯德基曾經推出了一款特價咖啡,為了從主要競爭對手星巴克手中搶奪用戶,當時訪談了很多用戶,調查他們選擇或不選擇星巴克的原因。最終發現購買星巴克的大多數人是為了星巴克提供的附加價值,如第三空間、品牌體驗等,包括發現很多人喜歡拿著星巴克的杯子自拍;而不買星巴克的原因是認為咖啡本身太貴,原料不具有性價比。

          最后肯德基推出了“咖啡為了覺醒,不是為了凹造型”的廣告來攻擊星巴克。暗示星巴克的購買者是追求面子、擺造型的膚淺的人,而肯德基咖啡的使用者卻是“聰明的消費者”。這種通過對用戶行為背后價值觀的挖掘,幫助肯德基更好的拉進了產品與受眾的心理距離,爭取到更多的潛在顧客。這也是定性調研的意義所在。


          那么具體來說,訪談的過程中有哪些要點呢?

          1)以人為本

          將關注焦點始終放在對方身上,而不是對問題清單上固定的內容進行提問和記錄。


          2)不斷追問

          問原因、問細節、問感受。你為什么覺得它好?你覺得它好在哪里?你當時是怎么想的呢?這些追問能幫助我們挖掘到用戶行為背后,更深層的想法與價值觀是怎樣的,這也是定量調研無法觸及到的部分。


          3)留意情感表達

          關注對方背后的情感是怎樣的?比如隨著第二步,留意對方有沒有感覺上的形容詞并順著追問。“你說到上次的購買體驗很糟糕,能具體說說當時的情況嗎?”這些都能幫助我們捕捉到那些沒有被用戶說出來的隱藏情感需求。


          需要注意的是,有時候用戶可能并不知道自己的真實需求是什么,或者不愿意說。所以在用戶訪談的過程中,不僅要著眼于對方說出來的需求,還需要去觀察用戶沒有說出來的需求,這里就涉及到第二種方法:“觀察法”。


          ●觀察法

          什么是觀察?觀察不等于“看”,而是調用你的眼睛、耳朵,以及所有感官去感知,并用心去揣摩用戶行為背后的原因。


          舉個例子,腦白金創始人史玉柱當年在做產品調研的過程中,經常會找小區樓下和老頭老太太聊天,詢問他們:如果有一個便宜但很好的保健品你會購買嗎?不會,如果更便宜呢?還是不會。

          史玉柱通過對不同老人的接觸與觀察發現,老人對自己是很摳門的,他們更愿意把錢留下來給自己的兒孫。但是,如果是別人送給自己的,尤其是自己的兒孫買給自己的,他們則很樂意接受。一方面能感受到兒孫的孝心,另一方面可以和其它老人炫耀。后來腦白金團隊花了大量時間鉆研如何把送禮這件事說的好,才誕生了那句經典的廣告語。諸如此類的偉大洞見,很多都來自于觀察中誕生。


          那么應該如何來觀察呢?其實可以有很多角度:


          1)觀察自己

          自己作為用戶試用一遍產品,就相當于換位思考一遍,記錄自己整個過程的使用感受,優點是能獲得直觀的反饋。缺點也很明顯,就是你的體驗不一定和其它用戶是一致的,畢竟每個人的認知和偏好是不同的,蘿卜青菜各有所愛,所以只能作為參考和驗證方向。


          2)觀察用戶真正在乎的事

          用戶有時候會“說謊”。就像史玉柱問老人是否買保健品他們回答“買不起”,但顯然不是真買不起只是摳門不愿意買而已。再比如你問人為什么會買幾萬塊的品,他的回答大概率是像精致的做工致敬,而不會說是為了身份認同。亦或者,用戶可能會給出受限于自身認知的答案,好比如果在過去時代,你問用戶理想的交通工具是怎樣的,它可能說想要一匹更快的馬。面對這些情況,你就需要抽絲剝繭,揣摩用戶行為背后的用意,而不是執著于具體回答。


          3)觀察極端用戶

          極端用戶是指消費群體的天平兩端。比如很多游戲公司,都會著重調研初次接觸游戲的新手玩家,和職業玩家的反饋,這兩波人群就是極端用戶,因為他們可能會放大被普通用戶被忽視的需求。同理,如果你要推廣某產品,去研究初次消費以及最頻繁消費的那兩波人群,觀察他們的需求上怎樣的。這并不是指用少數人的需求代替多數人,而是從極端用戶身上尋找啟發,用來向大多數普通用戶驗證,他們可能會給你帶來寶貴的回饋。如Odorono止汗劑廣告的成功,就是從對極端用戶的觀察中產生洞見。


          4)觀察用戶的變通行為

          很多時候,用戶并不會注意到某個產品或設計中體驗不好的地方,他們往往只會認為“它們本身就是這樣的”。你能想象旅行箱的輪子,是在旅行箱發明之后的200年后才加上的嗎?在這之前他們都使用推車來運輸行李箱。所以,你可以觀察用戶在使用過程中是否有采用變通方式,有沒有“兩波三折”的過程,或者是否有“蹩腳”的行為,來判斷某些不合理的地方,捕捉這些未被滿足的需求。


          以上是關于定量型與定性型的調研方式和技巧分享。

          而當我們通過這些調研方法,拿到一堆龐雜的數據,又該如何的利用這些數據產生洞見,幫助我們做出更好的設計呢?我們還可以通過一些技巧萃取用戶需求,轉化成具體的解決對象,幫助我們產生創新想法。



          三、如何萃取需求?

          關于萃取需求,主要給大家介紹兩個實用的方法工具。


          1.用戶畫像

          “用戶畫像”是一個使用頻率非常高的工具,它是建立在用戶調研的結果之上,通過找到優先級比較高的需求,虛構出“典型人物”,來代表和還原一群人的行為特征。


          目的一是“總結”,將用戶調研的結論,用更直觀、可視化的方式呈現,幫助團隊更好的了解用戶,促進共同決策。

          二是“移情”,建立與用戶的同理心。幫助我們從用戶視角出發,更好的領會對方的需求和痛點是什么。


          這就像打仗前,在地圖上勾畫敵人的行軍路線,幫助我們催生策略與洞見。


          怎么做用戶畫像?

          第一步,找出工作目的與用戶需求的交集。比如你將要設計一則廣告,目的是說服用戶購買某產品,那么你就要找出用戶購買這個產品的動機是什么,以及為什么會產生這樣的動機?這些就是你工作目的與用戶需求的交集。


          第二步,提煉出用戶需求的共性,將調研數據合并同類項,提煉出那些覆蓋面廣,權重最高的幾個共同點需求。


          第三步,將畫像具象化。用更直觀生動的方式演繹用戶需求和用戶特征。


          一般來說,一個用戶畫像包括:

          1)用戶的基本信息:肖像、名字、性別、年齡、工作等等。 

          2)用戶與調研主題相關的特征描述:比如性格、興趣、習慣等等。 

          3)用戶的動機與痛點描述:他想要什么?為什么想要這些?阻攔他達到目標的障礙是什么?

          前兩個是顯性數據,通過定量型調研就能拿到,最后一個是定量性與定性型調研綜合的結果,也是畫像的核心。


          舉個小栗子,南孚充電寶的電商詳情頁設計,經過前期后臺數據調研,和用戶訪談。

          得知用戶購買充電寶的場景有:

          1)外出旅行  2)出門逛街  3)商務出差。

          用戶對充電寶的特征和偏好有:

          1)希望容量大,夠用。2)希望體積迷你,方便攜帶。3)希望是大品牌,更安全有保障。

          那么我們就可以勾勒出一張用戶畫像,如下所示。



          這樣一張畫像就完成了。當然一張畫像只能代表一部分群體,不能代表全部類型的用戶,所以按照調研需求,可以分別勾勒出多張不同的用戶畫像。具體數量取決于想要覆蓋的人群。比如還可以有:王小麗38歲,公司高管,經常旅游······周小芳22歲,大學生,喜歡逛街·····


          在確定了用戶畫像之后,再給大家介紹第二種啟發創作思路的工具:用戶觸點地圖。



          2.用戶觸點地圖


          所謂用戶觸點地圖,也叫服務藍圖,或者用戶旅程地圖,也就是研究用戶是怎樣與我們的產品&服務發生接觸的,一共有哪些接觸點,每一次會接觸有怎樣的體驗?將這一連串接觸點像地圖一樣呈現出來,從而幫助我們汰劣留良。


          海底撈在這方面做的就特別好,它將用戶從進店到離店的整個體驗過程,細分出了N多個接觸點,從進店、帶位、點餐、用餐、結賬、甚至上洗手間,都面面俱到的顧及客人需求,你排隊不耐,給你擦鞋、美甲,你用餐時擔心頭發沾上味道,給你發圈,你孩子哭,給你帶娃······


          而用戶觸點地圖在其中的意義,則是一個有效的整體體驗規劃工具。通過觸點地圖的繪制,你可以知道用戶在各個環節下,在想什么、要什么、有什么感受,幫助我們提煉出待改善或是創新的機會點,完善整體體驗。


          怎么繪制用戶觸點地圖?

          很多專業書籍和文章會講的很復雜,但其實關鍵就兩步:

          1)橫坐標畫出用戶使用產品從“始”到“終”的過程,

          2)縱坐標畫出三種感受,分為滿意、一般、糟糕。并在坐標內填充各個關節的體驗是怎樣的。


          舉個例子,我經常會收到一些求職者的簡歷作品集,但是在這一個過程體驗有時候并不好,比如文件太大,有的文件打不開,有的干脆發過來源文件或者網址······如果把這個體驗過程從始(收到email)到終(保存聯系)畫出來,可能是這樣的。


          如果在這之前就針對這一過程,從用戶的角度出發繪制了用戶觸點地圖,那么你就能很大程度避免這些誤區。這也是繪制用戶觸點地圖的主要意義。


          最后再啰嗦一句,用戶觸點地圖不僅能幫助我們建立整體認識,避免踩雷,還能幫助我們找到關鍵節點,更合理的分配資源。這里涉及到一個諾獎級別的配套知識點“峰終定律”。


          所謂峰終定律,指的是人們在經歷了一次事件后,只會記住兩個因素,一個是事件的高潮,即為“峰”,還有一個是事件的結束,即為“終”。這一定律在服務體驗中經常被用到。


          比如在宜家的購物流程中有很多負體驗,迷宮般的路線、有時還得自己搬運產品。但是看到精致優雅的產品,以及結束后的1元冰淇淋,會讓我們覺得整體的體驗還是不錯的,愿意下次再來。正是因為在關鍵時刻和結尾帶給我們的體驗是正峰值。


          這給到我們最大的啟示是,任何商業以及設計行為,能調用的資源是有限的,而我們可以通過在關鍵節點與結尾,制造正峰值,達到資源的更大化利用。

          比如在很多日本的設計上都有這樣的小巧思。

          蘑古力零食,吃完以后,盒子最里面寫著“無論何時,都請再來享受一刻小憩”。



          拉面館喝完最后的拉面湯才看得到碗底寫著“謝謝”。顧客對店主肯定的同時,也獲得了店主的感謝。



          這些小彩蛋,都是對用戶終值體驗的提升,甚會因此細節而留意,成為回頭客。

          這些何不是精妙的設計?

          設計是一門科學的藝術,我們要懂得利用社會上已被證實的方法論,避免行為的盲目性。這比單純的從速成派大師那里學一些水面上的術,重要太多了。


          總結一下本文講述的內容。

          設計不是玄學也不是直覺,它是有邏輯的滿足用戶需求的過程,而調研則是洞察用戶需求與創新之源。

          關于「如何洞察用戶需求」這個話題。


          首先,我們分析了用戶的需求有兩類,一類是“功能需求”,它是表面的、理性的,另一類是“情感需求”,它是深層的、感性的。功能需求包括但不限于低價、性能、便捷性、可達性、降低風險;情感需求包括但不限于高端、定制化、新穎、過程體驗、理想自我,這些都能啟發我們思考不同方向的可能性。


          其次,介紹了兩類基礎的調研方法,分別是“定量型”“定性型”。定量調研側重于廣度,如后臺數據法、問卷法,能幫助我們獲得大量顯性數據;定性調研側重于深度,如訪談法、觀察法,能幫助我們捕捉用戶行為背后的原因,這些也都是洞察用戶需求的基本功。


          最后,我們介紹了兩種萃取用戶需求的工具,分別是“用戶畫像”“用戶觸點地圖”。用戶畫像是提煉用戶關鍵需求,虛構出具體人物來代表一類人群,是一種可視化的用戶需求總結方法,同時也能幫助我們切換視角,與用戶同理共情,催生創新想法。 用戶觸點地圖是細分出用戶接觸產品的各個環節,幫助我們汰劣留良,發現機會點,以及更合理的分配資源。


          文章來源:站酷   作者:兩個太陽

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

          深度解析B端用戶畫像從理解到建立

          資深UI設計者

          在B端的設計中,用戶畫像的建立一直困擾著廣大設計師朋友們,由于對于業務的不熟悉、對建立目的的不明確,經常會采用無腦硬套C端用戶畫像、刻意為建立畫像而畫像、過于追求畫像廣度而不注重深度這樣的方式來進行用戶畫像的勾勒。導致的結果就是建立的用戶畫像與業務場景的關聯甚微無法對垂直業務進行有效賦能、目標客戶鎖定出現偏差導致無法創造真正的用戶價值,間接的導致產品無法創造商業價值等一系列問題


          今天我們就來討論如何更為精準地建立B端用戶畫像,從而能更好的為你的設計進行決策,為產品打下優良的準備基礎











          B端用戶畫像在大體的定義上其實和C端沒有太大的差別,都可以簡而言之地定義為是一種勾畫目標用戶/客戶、洞察用戶特征、聯系用戶訴求與設計目標有效工具。都采用貼標簽的方式對用戶進行分析和描述,解決的問題也都是更為明確的告訴設計師:“我們服務的是一群什么樣的人?”





          之所以最后的落腳點還是人是因為無論是To C還是To B我們所服務的目標用戶始終都是人這樣一個載體,都是在為人做設計(明確這點很重要)。所以這就要求我們無論是C還是B始終都需要站在人的角度來進行情感體驗帶入、痛點需求分析、決策因素推導,和C端一樣B端同樣需要想方設法的通過設計與用戶達到情感共振


          只是對比C端而言B端所聚焦的方向有所不同,較為籠統說就是To C的用戶畫像是對個人個性、特征的放大、篩選、整合,To B的用戶畫像是對于具體行業職能、職位和權重需求的發現、剖析和理解。而這具體的異同點我會在后面的篇章中詳細的講解










          2.1 基礎特征

          從基礎特征來說,B端和C端的共通特征其實并沒有太大的出入,都具有:標簽性、真實性、實用性。


          鮮明而獨特的標簽使是我們連接目標用戶的依據,告訴我們為什么選擇這類用戶而不是那一類用戶,同時可以讓設計團隊進一步驗證產品定位。在標簽不斷被豐富的過程中,用戶的形象也在不斷變得立體,產品與設計的思考決策隨之會更全面


          可信的真實度可以讓設計師、產品經理較為有依據地對客戶的訴求進行把握不至于被錯誤的信息影響設計目標的確立,同時這也是在項目推進的過程中與各部門溝通強有力的憑借和背書,能有效地搶奪設計過程中的話語權,所以一定要盡量去對你的目標客戶進行的真實還原


          實用的意義主要存在于項目工作效率中,在B端的設計和產品中會比C端更加強調效率,項目的進程總是一環扣一環,前一個環節的錯誤都必然會影響到后面的環節,從而影響整體的進度,好的用戶畫像是一定能為你的設計開個好頭,準確切中正確用戶的正確需求,以其實用性大大提升整個團隊的生產效率




          2.2 獨有特征

          除了上述的基礎特征之外,B端用戶畫像還有著其獨特的特點,而這也往往是困擾設計師們在建立有關用戶畫像的時候的難點,具體體現在:


          2.2.1 用戶信息獲取壁壘較高

          在這點上我把他們大概總結為四種主要原因:用戶樣本少、數據獲取難、業務理解需求高、測試難進行




          第一,說到B端用戶畫像感受最為直接的就是:“關于B端的用戶反饋是真的少”這主要是因為B端的用戶的總量從體量上來說就比C端少了很多。要成為一個B端的用戶首先得是一個有B端系統賦能之下的工作的從業人員,這就一下子刷掉了許多人可以成為目標的客戶,不像是C端基本上沒有什么太大的限制


          然后再加上B端行業的領域性較強,經過具體垂直行業的細分后,能夠成為你所研究的某一具體行業的目標客戶者更是少之又少,這就導致了可調研的樣本不足(因為可以被接收到的反饋的聲音就少了)很難去做定量研究


          第二,對于行業內部用戶的有關數據的獲取來說同樣不是一個容易的過程,畢竟多數都是很難通過互聯網的查閱就直接進行獲取的,通常需要通過詢問目標客戶組織內的關鍵人物如:CEO、業務負責人、商務BD、行業顧問專家才能相對準確的獲得相關數據,而這些數據的保密程度都較高,像企業目前的經營概況、主要合作方信息、公司內部架構……這類信息本身都有較高的獲取成本,更何況對方也不一定愿意透露


          哪怕是通過外部數據公司進行購買,也需要你的公司或者團隊有能力、有意愿去承擔在這方面所付出的成本,還需要你本人有能夠甄別數據是否可用的本事,如此,就在你構建用戶畫像的調研階段形成了一道天然的行業壁壘


          第三,對于業務的理解需求在B端行業尤其重要,特別是對于UX來說。對業務較為深入的理解可以快速有效的幫我們熟悉在具體工作中角色與角色之間形成的業務泳道,進而準確抓取畫像中的關鍵角色




          比如我們需要為餐飲行業從業人員提供一套線上B端解決方案以提高他們的運營效率,在描繪這個用戶畫像的時候我們可以先通過對業務的理解梳理出從點餐到買單的整條業務的泳道圖,在圖中我們得出了一系列的角色,從中分析出這條業務鏈中的關鍵角色(或者說是關鍵決策人):前臺、服務員,將其定為目標用戶,然后針對關鍵角色開始通過業務分析痛點需求,為其建立用戶畫像


          這說起來容易但是實踐卻很難,前文就講過行業之間千差萬別,很多時候真的就是隔行如隔山,不同行業的業務泳道完全不是我們能夠通過固有的經驗能推測的出來的,需要實實在在反復做用研才有可能完全將其還原,雖然不是說要多年深耕其中,但是起碼要對業務有一個較為立體的認知,后文會具體講到


          而這對于我們傳統的設計師尤其是新手設計師來說并不屬于我們的“天賦技能”,畢竟傳統意義上對于業務的深入理解完全不在我們的工作需求范圍,還是習慣于做一個產品經理提需求然后卑微照做的“擼圖小美工”,就算有心也很少有機會能夠參與到用戶調研中去了解業務。對于是設計自家企業內研系統的同學來說可能還好一點,可以通過很多公司內部的人員與數據去了解,甚至還能比較容易地實地考察,但是對于外包、SaaS類型的設計同學來說自身用研經驗不足、缺少方法論無法真正理解業務是阻礙精準建立用戶畫像的又一道壁壘


          第四,由于B端的產品和公司的業務息息相關會直接影響到公司的日常運營,所以很難像C端那樣悄無聲息地或者是有選擇性的將用戶放置在真實場景中進行灰度測試、A/B Test等,很容易造成新的功能與交互與用戶原習慣不相符的情況從而耽誤日常工作,這是絕對不被允許的,就算是招募了用戶進行專門的測試,也很容易因為提前告知這是測試的刻意性使用戶造成心理偏差從而導致測試結果的會有偏頗。


          這就直接導致了用戶畫像中推測的痛點需求很難被及時有效驗證


          2.2.2 角色與角色之間差異較大

          首先,角色與角色之間的差異較大也是B端用戶群體較為顯著的一個特點,這主要是因為職位的不同導致的,不同的職位除了會形成表面上的上下級關系外本質上來看應該是形成了不同的職能、產生了不同的權重,對于用戶而言這就導致了不同角色之間關心的價值不同(可以說是用戶目標不同)、決策權大小不同、使用人數不同……


          舉個最簡單的例子就是,一家店老板是一個角色、店長又是一個角色、前臺又是一個角色,這三者之間關心的與自身價值相關的事兒肯定是不一樣的,比如老板的目的是如何通過降本增效達到店鋪的利潤最大化,店長的目標是如何提升團隊管理效率提升自我業績,前臺的目標是如何優化日常交互提升自己的工作體驗與效率

          個人認為可以將角色的差異聚焦到以下四個維度作為參考比較:用戶目標、使用人數、使用頻次和決策權重,那么套用到以上的例子中就可以呈現為下圖




          通過此圖我們可以較為直觀的感覺到角色差異所帶來的特征,同樣的通過對這些差異的比較也有助于我們找到關鍵角色、關鍵決策人(權重較高的人)


          其次,除了用戶目標這些差異外,對于設計師來說很重要的一點就是明確不同用戶的具體使用場景,因為事實上就算是同一家門店、同一家公司的各個角色他們的使用場景都有可能千差萬別


          舉個例子同樣是老板和前臺的兩個崗位會因為崗位職責要求個人使用偏好習慣這個兩個主要因素導致他們選擇使用產品的場景、平臺有所區別




          前臺因為是執行層員工所以有必須天天到崗的要求,所以她的使用場景大部分情況下都會是在門店內,更準確的說是門店的前臺位,而從工作內容上來說主要是高頻地處理每天店內的各種訂單業務、進行登記、結賬、數據錄入等所以在端口的選擇上可能會更多的選擇固定端口、Web端,這就構成了屬于前臺的基本使用場景

          而立足于老板而言,他沒有每天都需要到崗的需求,主要需求是通過系統查看門店的營業數據,快速進行一些較為大型的申請的審批等,而且使用頻次不高,所以老板的使用場景除了門店外可能更多的是要考慮到在店外、在家的場景,而使用端口上則應該更加偏好移動端APP來進行操作(當然這個還是要放到具體的項目中具體分析)


          本質上來說和用戶目標等因素一樣,使用場景主要也是由行業中的具體崗位職責所決定的


          最后,角色與角色之間的差異還體現在置于產品不同階段的決策鏈路中同一個角色的參考權重會不一樣。聽著是不是很抽象,沒關系舉個例子你就迅速能明白




          在產品的銷售階段,也就是目標客戶的初次購買階段,此時決策鏈路的關鍵是老板是否出資購買產品?很明顯的是員工在這個階段是沒有出資決策權的,而且員工的態度對促成這個鏈路影響甚微,那么我們的主要精力就是應該放在打動老板這個角色的目標上,此時老板的意見、需求……會成為我們用戶畫像中參考權重較為重大的部分甚至是全部


          而在產品的續費階段,此時決策鏈路的關鍵變成了老板是否會進行續費?雖然表面上看似乎和初次購買區別不大,但是實際上此時員工的態度的參考權重已相對提升。這是因為老板會通過員工在使用系統時的反饋和通過引進系統所帶來的效果作為是否續費考量,此時執行層的體驗需求是設計師需要去重點關注的,他們的意見在畫像中的參考權重會提升,這就是為什么角色的參考權重會隨著產品階段的改變而改變


          總結一下,角色與角色之間的差異體現在不同角色的用戶目標不同、使用場景不同、使用頻次不同、使用人數不同、決策權重不同和不同階段意見參考權重不同


          2.3 內容組成

          經過以上的特征分析用戶畫像的構成在我們的腦中已經初具雛形了,那么具體來說用戶畫像的構成應該如何較為系統的拆解呢?個人認為較為合理的方式應該是先思考用戶畫像的功能或者說用戶畫像需要反饋什么信息


          這個問題的答案其實從之前的特征中我們可以較為明確的找到即反映企業的信息反映企業中角色的信息,這兩部分的信息我比較喜歡將其稱之為客戶畫像和角色畫像




          2.3.1 客戶畫像

          客戶畫像簡而言之就是指你目前的設計所服務的組織、公司的畫像,它涵蓋了該組織所在行業的特征、現狀(包括行業類別、產業鏈細分等)和自身企業特征(規模、發展階段、市場、業務情況等)。這有助于我們快速地驗證我們對產品的定位準確性并且迅速地找準大致方向以便于隨時補充所在該垂直領域相關信息以更加了解客戶。當然從團隊協作的角度來說,這些信息還可以幫助銷售團隊更為方便的找到目標客戶進行簽約


          客戶畫像以一種較為精煉的方式進行拆解可以分為基本信息、業務信息、組織架構和關鍵角色,其中具體來說


          基本信息:行業屬性、地理位置、企業規模


          業務信息:業務概覽、經營模式、付費能力、使用目標


          組織架構:組織自上而下有哪些機構,彼此之間有何聯系


          關鍵角色:組織中所包含的各個崗位




          如果我們以一家連鎖餐飲門店為案例那么可以具體這樣進行進行描繪




          2.3.2 角色畫像

          而角色畫像就是指你目前的設計所服務的組織、公司中的使用人員包括了公司的高、中、底層即決策層、中間管理層、執行層,它包括了你所研究的角色的個人特質或者說崗位特征(包括了崗位特征、職能、職場處境、決策鏈路位置、希望解決問題的目標等)


          角色畫像以一種較為精煉的方式進行拆解可以分為角色名稱、基本信息、工作目標、和使用場景,其中具體來說


          角色名稱:具體職位的具體職位名稱或是工種


          基本信息:文化水平、辦公場地、平臺偏好、使用頻次


          工作目標:崗位職能、崗位責任和使用期望


          使用場景:以較為干練的故事敘事的方式對日常工作的各個場景進行描述





          如果我們以一家連鎖餐飲門店的店長為案例那么可以具體這樣進行進行描繪




          而在細化到每一個角色崗位的情況下,在使用場景上甚至可以進行武裝到牙齒般的場景再細分,比如廚師長在一天后廚管理中最高頻的需求是什么?對后廚訂單的顯示有什么樣的自己的想法需求?這都是我們可以在畫像部分進行不斷深入思考的,當然不斷細化勢必會自然而然涉及交互的具體設計,由于篇幅原因之后會單獨寫一篇文章來進行敘述,這里就不做過多的探討


          大家一定需要記住的就是構成用戶畫像的基本組成部分包括了客戶畫像、角色畫像兩大部分,而每個大部分中又分成了屬于各自的小部分,具體的細分和調整還是要落實到具體的業務、具體的行業中去進行構建


          2.4 B端與C端用戶的不同

          之前就提到過B端的用戶畫像與C端用戶畫像的特征上有比較大的區別,而且對用戶的描繪側重不同,這也是為什么很多從C端的設計師同學在轉B端設計的時候發現在用戶畫像的勾勒上一些形式無法直接復用的原因,具體來說分為以下這些區別:




          2.4.1 產品選擇

          C端用戶選擇產品的感性(主觀)因素相對較多,而B端則更趨于理性。什么意思呢?影響C端用戶的購買因素一般包括品牌偏好、商品顏值、社交信息影響等因素,這類因素都較為主觀化、情緒化。這是因為C端的產品對于用戶而言更多的時候是通過購買達到一種自我滿足、自我彰顯,用戶目標的個性化較強,簡單的來說就是我買來是讓我爽的,所以C端購買商品的時候會趨于感性與主觀


          而反觀B端來說影響到用戶的購買因素就理性的多,也更加的謹慎與全面,比如:易用性、投入產出比、能為業務賦能的程度、員工學習成本等,這是因為B端的產品與用戶的盈利、運作都息息相關,會直接影響到用戶日常的工作,用戶的目標主要是通過購買產品達到對自己工作、業務的賦能,提升效率和盈利,不會有誰說我用美團的系統就比你用微盟的系統更高一層,說白了誰能讓我的工作更加的、誰能讓我的公司賺更多的錢誰就會成為我的選擇,所以這也是B端的用戶購買決策都比較理性的原因


          2.4.2 購買決策權

          C端的用戶購買決策權一般不受社會關系的影響而B端的購買決策比較受其影響。這里的社會關系主要是指職業、崗位,這點其實比較好理解。很簡單C端的產品大部分面向用戶的細分不會像B端那么局促很多時候C端的商品只要用戶的經濟實力足夠其實是可以隨時隨地隨性進行購買,如果用戶愿意哪怕是光頭猛男也可以購買小裙子,別人是管不著的(當然也不一定?。?


          但是B用戶的購買決策權其實在前文就很明顯的看出是非常受社會關系的影響的,比如一個執行層的小員工因為公司系統太垃圾突然想一拍腦袋給公司換個系統,然后第二天公司就自上而下換了一套新系統這種事兒想想都不太可能(當然一般也沒有人腦子抽了想這么干)


          這是因為無論如何在這條決策鏈中執行層小員工始終都是處在一個使用者的身份上,縱然你再有錢也不可能成為一個出資方的身份(當然除了那種你把公司買了自己當老板的)你最多只有建議權,并沒有購買權,只有決策層的領導(很多時候都是最大的老板)是具備出資的權利的(注意我說的是權利不是能力),所以這樣的結構特征在基因上就決定了B端和C端用戶在購買決策權上有本質的區別


          2.4.3 年齡、性別影響因素

          C端用戶相對來說購買傾向上受年齡、性別、職業、受教育水平這些因素的影響而B端相對較小。很簡單C產品的購買理由雖然相對自由,但是對于產的定位還是會以一定的年齡層次、不同的性別等因素進行劃分從而達到精準營銷,畢竟不是那么多產品都是男女老少皆宜的,舉個例子,美柚APP在大部分情況下用戶都是女性而且是青年中年女性,服務于女性通過其監控自己的生理健康,一般情況很少有男性用戶(例外除外?。?,再比如經常會有APP給年輕人打造自己的潮流社群這樣的定位,說明這個產品的用戶主打年輕人這個群體


          而放在B端這些因素其實參考價值并不大,這是因為首先一個組織、一個公司、一個門店的員工組成是復雜的,自上而下很可能覆蓋了老中青三個年齡層次,性別男女都有,不會因為你的這些屬性就影響了了產品的購買決策,全公司除了老板之外基本都是無理由被動接受產品并使用的客觀狀態,所以在這種狀態下年齡、性別等問題的參考價值就基本不大了


          以上的區別造成了B端和C端的用戶畫像在基因上就有“種族區別”,所以在對B端用戶進行標簽設計的時候再次提醒千萬不能生搬硬套照搬C端,還是要深入了解業務、職能之后才能做出較為落地的符合屬于你的用戶的畫像







          3.1 B端用戶畫像的價值

          其實在用戶畫像的價值上B端和C端沒有太大的區別,主要都是為了進行精準營銷個性化服務




          精準營銷的的價值主要是針對市場和銷售團隊而言的,我們所收集到的關于客戶的每一點信息都可以稱之為是一組數據,在大數據營銷已經逐漸成熟的當下一個成功的用戶畫像是可以助力銷售團隊更快速的找到正確的業務方向,篩選出真正的目標用戶,提升轉化率,大大降低了浪費在與非目標用戶的交流上,也是銷售團隊不斷進行調整自我調整的指南


          對于市場來說,通過對于用戶畫像的具體分析可以更為準確的調整營銷內容和營銷策略,從而更好的對渠道選擇進行更合理的配置,在有效的用戶畫像基礎之上思考創造出更多的有效客戶。是一個非常有效的降本增效的輔助




          而個性化服務的價值則是對于產品、產研團隊而言的。當今的B端產品大致可以分為三種大的類目:企業自研、外包和SaaS,在面對自己的客戶進行產品設計與服務的時候都多多少少會對每個用戶不同的需求進行具體問題具體分析,從而進行一定的個性化定制服務


          所以當用戶畫像足夠的時候產研團隊可以的對用戶的一些差異化需求進行精準把控并制定出最適合的解決方案,而在產品迭代的階段也能更加具有針對性的對產品的功能、交互進行完善


          3.2 B端用戶畫像的意義

          用戶畫像的意義其實是貫穿了從產品研發到產品是投入服務的每一個階段的




          3.2.1 產品定位

          在研發初期,用戶畫像的明確可以幫我們迅速清晰產品定位模糊這個問題,因為很多產品在研發初期其實是搞不清楚自己的產品定位的,這會導致后面一系列的開發問題造成連鎖反應,而用戶畫像是為了在項目一開始就幫助我們地知道我們在為一群什么樣的人服務,這樣就把準了產品的相對較為準確的定位,規避了后面出現偏差的風險




          3.2.2 產品架構

          在畫像確立后的設計階段我們需要對產品進行架構設計,用戶畫像是防止我們的架構設計混亂,梳理層級輕重、功能優先級的指南利器。我們經常會一下子同時接到各種各樣的需求,很多人選擇無論吞棗的一股腦把需求中的功能全部堆砌上去,這樣直接導致的就是產品層級混亂,功能無歸類,交互毫無邏輯,開發效率低下,就算最后做出來了用戶也很難上手,甚至無法通過產品順利走完一套業務閉環


          明確的用戶畫像可以在一開始就為你產品的功能排布、架構設計賦予邏輯,因為用戶畫像可以明確的知道用戶的具體目標,從而將需求可以進行輕重緩急的分類,此時每一個功能都可以歸類到相應的模塊,功能所處的位置可以按照需求的重要程度進行優先級的位置放置,同時交互更加符合實際使用場景,確保產品在產品再投入使用后能快速上手,快速解決用戶的問題




          3.2.3 團隊爭議

          在設計進行的階段團隊內部會議時,不同崗位之間經常會出現對功能設計、視覺設計、交互設計不同的意見,甚至會產生很大的爭議,在面對這樣的爭議很多時候其實設計師在產品經理、運營的面前是沒有什么話語權的,這主要是因為大部分設計師其實對業務的熟悉和用戶思維背書較弱,而別的崗位也會經常把設計當作擼圖工具人使用,所以導致了現在很多設計師尷尬的現狀:經常會被面臨提出設想后被斃稿的情形


          而一個具有說服力的用戶畫像其實在很大程度上能夠對這個弱項進行彌補,用戶畫像代表了我們所服務的目標用戶,那么我們需要解決的一切問題都是要圍繞他來展開的,通過對于用戶畫像的核心需求的利用作為你的方案最好的佐證材料,不僅能夠在設計目標上與同事達成共識,解決溝通過程中的各種爭議問題,還能讓你的設計真正做到言之有物,經得起推敲從而大大提升你的話語權





          3.2.4 產品測試

          到了產品的測試階段,用戶畫像同樣發揮著其重要的作用,雖然B端的產品相對來說測試較為難以進行,但是找到最為符合目標的用戶對其進行產品可用性測試記錄其實還是具有非常重要的意義的。精準的用戶畫像可以較為快速幫我們鎖定我們需要進行招募的用戶


          3.2.5 產品迭代

          當產品上線后用戶畫像的作用也還并沒有結束,任何產品都希望自己的產品生命周期能更為長久,這就需要通過對自己的目標用戶進行不斷的深入需求挖掘,在不斷的迭代中成為最適合你所服務的用戶的定制化產品


          而一個完善的用戶畫像是具有不斷的需求挖掘潛力的,產研團隊可以通過對于畫像的深入研究進行用戶的深入需求挖掘,從而指導產品功能的良性生長。







          4.1 前提

          建立用戶畫像的第一個前提是要知道用戶畫像被一般會被需要的時機,這點來說其實比較好理解,那就是當業務需求出現或是改變,產品出現了一些有待解決的問題時候,這也是設計、改版被需要的時候。舉個例子當我們發現我們的產品上線后效益一直處于并不樂觀的情況,這時候很可能是我們對于用戶的需求分析出現了偏差,導致供應無法對應需求


          那么我們就應該重新設計我們的用戶畫像,再次深入挖掘正確的需求,以適應我們的目標用戶


          還有一個前提就是你需要大致明確你所服務的用戶,也就是開篇說的“我們服務的是一群什么樣的人”在這一步你對這個概念不一定需要有一個十分的把控,但是至少需要大方向上的正確,因為這是為你后面的信息數據收集工作進行導航,確定查找范圍,以防方向上的失誤


          4.2 信息準備與假設

          當確立了具體的大致方向后,我們就要開始初步的信息收集與準備工作,也就是具體了解你所服務用戶的業務,這是你能做好的B端用戶畫像的前提


          4.2.1 原因

          首先,這是因為如果不了解你的業務很容易造成你無法從一個全局視角對你的設計業務進行理解,當你不知道你的用戶所處在業務中的位置,會很容易造成對真正的關鍵人的定位失誤,造成用戶同理心的缺失,那么也就無法真正分析出最為貼合用戶的需求,對業務足夠理解你就不會對關鍵人的尋找定位失誤,也能上站在用戶的角度來思考問題




          其次,對業務較為理解的通透,是有利于你在信息求證階段(用戶訪談階段)與用戶進行較為順暢的溝通的。你對業務的理解足夠深入能夠在被訪談的用戶面前樹立出一種專業的感覺,這可以讓用戶較為放心地和你進行交流,你與用戶之間也才會存在共鳴,同時用戶會因為你的專業感產生與你繼續交談的興趣,你才有可能獲取到更多的信息,畢竟大家都喜歡跟懂行的人聊天


          相反當你不理解業務時與用戶進行交流本身就會存在一種不自信感,而你所設計的問題會表現的十分生澀,造成用戶覺得與你交流是在浪費時間的感覺。要知道用戶其實是很不喜歡和你解釋一些行業內所謂的“懂得都懂”的術語、表面問題的,而且很多概念可能就是用戶實際工作中不存的顯得很荒誕。如果你要問我怎么知道的,不怕大家笑話我的第一次用戶訪談基本上全程踩雷


          由于對業務的不熟悉就冒然進行用戶訪談,會導致最后用戶在問我:“你到底要問什么呢?”“你是不是要問這個?”“你說的我不是很理解,我們好像從沒聽過這個名詞”這樣的情況真的十分尷尬


          最后,深入了解業務不僅能通過激發被訪談用戶興趣的方式啟發你們對與更深層次需求的交流,這些深層次的需求捕捉是可以作為你后面在建立用戶畫像標簽、推進項目的時候很有利的背書,作為你的設計的有利支撐依據





          4.2.2 獲取手段

          在初步的信息獲取階段,其實我們是可以有較多的手段來進行的,我將其分為外部資源、內部資源兩大部分




          內部資源包括:


          1. 像產品經理索要業務方面的相關文檔,這些文檔具體來說可以是在做業務的過程形成的資料入:提案或者結案時候的PPT、Keynote文檔,通過成功的或已經在進行的案例快速了解業務信息和行業概況,還有就是可以通過進入一些客戶反饋群來收集整理客戶實時反饋的需求信息


          2.公司后臺數據,公司后臺數據是你的獨特優勢,因為一般公司的后臺數據都比較少進行公開屬于內部資料,但普遍具有較強的真實性,你可以通過內部的資源搜索找到你需要的數據


          3.通過與銷售團隊和客戶成功團隊(CSM)的訪談交流得知行業和用戶的信息,尤其是CSM團隊他們和客戶的接觸周期最長,最快也最全地能拿到關于客戶的一手數據,是很好的可以去獲取數據的途徑


          4.公司高層訪談,公司高層決策層面對客戶考慮問題相對而言會更加全面,通過與高層的交流可以拓展你的思維廣度


          外部資源包括:


          1. 同行交流,在行業中尋找業務能力較為強的同行朋友,虛心向對方進行請教受益良多(這也是我最經常用的方式)


          2.付費數據,在市場上存在著比較多的進行數據付費的機構,比如企查查、客戶堂、用友等,當然這個需要考慮支付成本,承受能力


          3.公司官網、行業資訊門戶網站,通過對目標客戶的公司官網進行一定的研究可以較為直觀的對客戶的特征進行了解,而想要獲取行業特征與資訊可以養成經常上行業資訊門戶網站的習慣,進行對行業需求風向的實時把控,如:艾瑞網


          4.相關的文章資料,可以通過類似于人人都是產品經理或者是收藏一些比較有權威性的語雀知識庫,同樣是一個比較好的渠道


          4.2.3 必要信息搜集



          通過豐富的渠道你可以對你需要的數據進行大量的搜集,但其中一定需要搜集到的信息包括如下:


          1. 客戶公司基本信息,這其中包括:公司或組織相關的關鍵人(決策者)信息、組織的人員架構(尤其是對每個決策連路上關鍵人的位置把握),如果業務涉及CRM的模塊還需要去了解公司的管理制度、賞罰機制、晉升制度


          2.客戶主營業務信息,這其中包括了:客戶基本業務、核心業務、業務整體架構、核心業務使用場景、達成業務目標的資源需求和能力配置


          3.客戶公司產業鏈信息,這點的搜集雖然比較繁瑣涉及面廣,但是如果時間允許還是建議去搜集,當知道了客戶業務處于其產業鏈的哪一個位置,其中有那些頭部公司,就可以更加理解客戶的各種決策背后的因素


          4.一些專業術語的掌握,專業術語的掌握可以為后續你在求證假設的訪談階段起到重要作用,不僅能給對方創造你很專業的感覺,還能減少對方不必要的專業名詞解釋工作,節省用研時間成本


          4.2.4 問題整理與假設

          當我們從各種渠道搜集完信息之后,信息是較為駁雜的,我們需要進行的是對于信息的第一遍過濾處理,將問題按照關聯度的輕重進行篩選(不然很容易出現面對很多問題時我們無法抓住最為顯著的主要問題),然后就是對于你想要了解但是還沒有通過資料找到的部分以自己的經驗進行假設并記錄,通過后面對信息的求證部分完成對于你的假設部分的驗證


          4.2.5 收集目的

          將這些信息收集是有明確的目的性存在的,主要分為三點:




          第一,初步找到客戶信息中的共性要素,在尋找各路數據的過程中,是經常會多次被反饋到相同的信息的,當你被反饋相同的信息頻次比較高的時候,你就要特別注意這些信息,因為這很可能是你的目標客戶群具有的共性,可以初步寫入你的畫像草案中


          第二,圈定設計目標與范圍,當了解了客戶的大致基本信息時,我們就應該對我們的設計目標有了一個大致的判斷,同時知道客戶對于不同的需求優先級,通過對于優先級的梳理,我們可以在畫像信息中將這些需求進行有秩序的排布,有利于項目推進中大家集中資源優先解決重要問題,范圍的劃定也有效放置了我們在調研過程中的方向偏離


          第三,將你的調研目標具體化,為下一步信息求證做準備,當我們經過了初步的信息收集與檢索后我們就對我們的用戶有了一個更加清晰的認知,此時我們即將進行對這些數據的再一次求證,當求證之前我們需要圈定我們的調研具體目標,而這一步的意義就是為用戶訪談做準備


          4.3 信息求證

          信息求證的階段其實是與目標用戶的接觸,也就是我們經常聽說的用戶調研,如果說在之前的階段我們都是通過間接的方式了解用戶,那么到了這個階段就是與用戶進行直接的溝通,概括的來說就是通過設計好的問題詢問到我們需要的數據


          涉及到的方法其實有很多比如:用戶訪談、問卷調查、實地調研、詢問專家用戶……由于篇幅的限制我就淺談一下用戶訪談這一求證方式,日后也可以出一篇單獨講用戶訪談篇目的




          首先要知道的是無論進行什么方式的驗證其本質目的都是為了豐富和校正我們的用戶畫像,是帶有一定認知基礎進行的,所以我們的核心目的一定是:盡量深入的挖掘用戶需求和驗證自己的假設以對畫像進行補充,在這個思路基礎之上來進行


          4.3.1 準備與限制

          這個階段很難說做到定量訪談,所以需要提前明確的是我們進行的一定是有計劃的定性訪談,我們首先需要經過精挑細選通過自己的判斷篩選出5-7個我們認為值得去調研的對象并提前與之取得聯系


          然后就是設計準備好問題提綱,錄音設備和文字記錄設備(可以是筆記本也可以是電腦)這里需要注意的是問題的設計的問題要有針對性,比如你想確切的了解具體在實際場景中員工是如何操作執行的;還有就是問題的設計盡量以解決你初步整理資料后留下的疑問為目標,這樣會比較有效率;詢問的問題在文案上盡量口語化,不然很容易讓被訪問者有一種“被審問的反感”





          4.3.2 執行與交流



          當一切準備就緒后我們就開始了與用戶的交流,在訪談開始時不要表現的目的性那么強,很容易讓客戶產生疏離感,我們可以先與客戶進行簡單的寒暄當作熱場,讓對方的話匣能盡量打開,卸下對方下意識的防備,在訪問中除了注意及時記錄還需要注意的是:




          1. 注意問題的開放性,不要將問題限制的過于小,比如,只是問:“你們現在有外賣業務嗎?”那么你得到的回答對你的指導意義并不大,比如你在后面可以加上“您認為在這塊兒的業務有哪些可以更加改進的地方?有什么自己的看法?”把問題變成開放式問題,讓客戶有自己發揮的空間,這樣做有利于你從客戶口中能了解到更多存在于“專家盲點區”的深層需求


          2.要以一種學徒的心態來進行交流,千萬不要用戶半句話還沒說完你就突然又蹦出一個問題,用戶訪談對于執行者來說是一個極其克制的過程,很多時候寧愿等對方說完,冷場個兩三秒,也不要急于主動發言,這會大大降低每一次問題所能帶給你信息反饋量,很多時候執行者要做的就是傾聽


          實話實說我的第一次用戶訪談用戶體驗非常差就是因為自己性子急躁,突然想到問題就立馬問,這是一定要避免的


          3.當對于一個問題存疑的時候,可以先進行記錄,在用戶敘述完后針對這個問題以不斷問為什么的方式進行提問,直到用戶無法繼續回答,這是一種典型對問題深入挖掘的方式,在實際訪談中很受用


          4.對隱私問題謹慎提問,沒有人不對隱私被問起不反感,如:店鋪這個月的營收狀況。當需要問起隱私問題的時候需要斟酌再三,能不問就不問,如果真的需要問可以在訪談結束后,以一種非正式的方式進行提問,會比較妥當


          4.3.3 訪后資料整理

          采訪后整理資料并不是是說所有采訪結束后再整理,而是在每一次采訪結束后就習慣性進行一次整理。這是因為這有助于我們二次加深每次訪談中的重點問題,而且在冷靜的狀態下通過回顧的方式可以更有效地過濾出每位用戶的需求重點


          除了及時進行歸檔備份外在十分確認的關鍵點上及時將其補充至畫像標簽庫中;在仍有存疑的問題上進行記錄保留想辦法在下一次訪談中得到答案;思考在訪談中自身的不足之處,進行改正,避免在下一次訪談中再犯


          在這樣的良性循環中,能確保你的訪談能達到最高的效率


          4.4 信息篩選與整合



          當所有的調研工作結束之后,你已經對客戶有了一個較為立體的認知,下面就需要對你收集到的所有數據進行一個篩選整合


          這一步做目的就是找到相同角色的共性特征,并提取一些必要的差異化需求,對角色進行較為真實的還原


          比如我們可以從樣本中提取所有門店同一個角色:店長,針對店長這個角色對其進行在行為變量和痛點上的分析建模,所謂的行為變量比如就是角色日常在使用場景中的活動、自身對系統的學習能力等等,他能直接幫助我們推測出用戶對產品的接受程度、使用成本等問題





          當我們把行為變量和痛點需求羅列成坐標后,把符合的角色帶入模型中進行一一映射,就可以快速的知道哪些是共性特征,哪些是值得研究的獨有特征,哪些痛點是普遍痛點,哪些是差異性特點,詳情見下圖




          至此,我們的信息篩選與整合部分就算是完成了,那么畫像的產出也顯得水到渠成、順理成章


          4.5 信息產出

          如果上面的工作做的較為順利,畫像的呈現將會較為順理,通過提煉的共同點將其對應的點反應在畫像上的各個部分,由于在2.3.2部分中已經敘述過用戶畫像基本的組成部分,這里就不再過多的贅述,主要是以展示信息是如何有理有據地產生的這個過程為主


          還是以2.3.2中角色畫像的形式呈現來進行案例演示,通過對于我們收集到的數據來進行具體文字敘述的對應轉化,逐漸構建出我們所看到的用戶畫像




          當然痛點、共性和需求肯定遠遠不止上述所示,用戶畫像的信息還可以被更為細化的進行擴充,根據自身產品的特點、業務、定位進行更為貼合信息補充






          至此,用戶畫像的建立就完成了,感謝你看到這里,在最后一部分我想和大家再討論討論用戶畫像中比較常見的錯誤,有我自己的教訓也有前輩告知的經驗




          5.1 重形式感,實用性差

          這應該是不管是B端還是C端的用戶畫像經常會出現的一個問題了,具體表現為:一味地追求形式的炫酷,在絲毫不考慮為什么要添加這些標簽的情況下,直接在一些渠道上照著別人的用戶畫像就是一頓猛抄,盲目更風生搬硬套,給人一種為了畫像而去畫像的感覺(由于怕被打我就不放圖了),很多時候就是當你問他為什么要添加這個標簽的時候,他的回答就是:“我看別人畫像上也有這個,我也這么用”(不要笑這樣的情況還真不少)


          這樣導致的結果就是用戶畫像與我們目標用戶的業務、使用場景關聯度并不高,設計無法真實還原用戶的使用情況,設計流于表面,銷售也很難通過用戶畫像找到真正的KA客戶,這樣的用戶畫像可以說是基本處于一種不可用的狀態。


          其實甄別可用還是不可用最為直接的辦法就是找到一個很確定的目標客戶,將以上痛點和使用場景通過對其訪談詢問,帶入真實工作場景就可以進行最直接的驗證




          所以我們在這點上還是要以實用性大于形式感的思路、高場景關聯度的方式,去踏實地進行繪制才有可能繪制出可信度高,可用性高的用戶畫像


          5.2 片面追求完整性導致設計成本浪費

          許多比較有實力的公司對于用戶畫像十分重視,希望通過大量的成本投入來盡可能的全面展示其用戶的特征,這本是好事兒,但是很多時候會出現“用力過猛”的情況,具體表現為:通過大量的對用戶的每個細節進行標簽建立并記錄并存檔,導致用戶本身關鍵性特征不明確。有一句話叫:“一個人如果都是特點,那么他也就沒有特點了”這是對這種情況最中肯的評價


          導致的后果就是,你會發現的你的標簽庫中存在著大量的標簽,但是會完全抓不準用戶的主要矛盾進行發力。當好不容易從幾百個標簽中抓住了核心發力點,發現其實至少一半以上的標簽都是出于閑置狀態,也沒有對業務的拓展起到更多的作用,非常浪費設計資源、設計成本




          所以我們還是要從一開始就抓住用戶最核心的訴求,在以核心訴求為中心,進行需求的發散,不同的痛點羅列出不同的優先級,集中資源優先解決最重要的問題,面對標簽的態度應該是在精而不在多


          5.3 不注重用戶標簽的維護和迭代

          我把這種情況稱之為“形而上學”的的用戶畫像,具體情況表現為:當產品第一次成功上線后,所建立的用戶畫想就一勞永逸基本不去進行信息更新了。誠然由于很多產品產品周期的長久,面對的用戶使用周期較長,很多時候用戶標簽的迭代看上去是一件沒有必要的事兒,但是想要產品長期高度貼合用戶的需求,保持優良的體驗感,就一定要重視對于用戶畫像標簽的維護和迭代升級





          因為用戶的需求和業務都是動態變化的,那么對于我們服務供應側來說對于用戶的認知也一定要隨時處于一個動態的狀態,但凡產品突然滿足不料用戶的需求了,那么客戶隨時可能找一個更為合適的替代品,用戶的忠誠度就和渣男渣女心一樣,都經不起考驗,不要抱有任何的幻想,隨時對用戶保持清醒的認知,對他們的特征進行記錄,才能長久的做出貼合其需求的產品,所以用戶畫像的更新迭代,任重而道遠


          結語:

          關于B端用戶畫像其實還遠不止以上的內容,僅希望通過以上的心得體會能幫助到正在為之犯難的你,與大家相互交流,如果能碰巧助你一臂之力那么真的不甚榮幸,祝正在努力的我們都能變得更強


          文章來源:站酷   作者:核糖bro


          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務


          榜單排名數據,如何做好看?

          ui設計分享達人

          排名榜單數據在我們日常生活中經常會遇到:


          比如微博、抖、快的熱搜榜單、各省份之前的GDP對比、雙11的現場的榜單數據等等


          都會涉及到,可以說排名數據已經涉及到了我們生活中的方方面面。


          那我們應該如何做好榜單排名數據可視化呢?


          我們常遇到的榜單排名數據主要分為兩種:

          ↑ 榜單排名數據分類


          1. 一種是無數據的排名,也就是只有排名和名稱;

          2. 另外一種就是有數據的排名,也就是包含了具體的數值;



          那么,本篇文章我將按無數據的排名和有數據的排名,給大家帶來,當我們遇到榜單排名數據時,應該如何將圖做的更好看!

          總共涉及到大于15種可視化表現形式,希望能夠對你有所幫助!




          一 沒有數值的排名數據,如何做得好看?


          1 基于數字本身去做變化


          最簡單的方法,我們可以從排名的數字本身去做優化,比如將排名數字1、2、3....去做內容的填充豐富,改為TOP1、TOP2、TOP3...或者NO.1、NO.2、NO.3...


          還可以基于數字本身所處的環境去做優化,比如在其底部加入填充形狀墊底,讓數字排名更突顯出來(如正方形、矩形等等)。



          通過這兩種形式,可以讓單調的排名數字有了更多的細節,內容更豐富,展示更好看。

          ↑ 基于數字本身去做優化的案例



          2 基于整體,通過形狀元素去做變化


          在數字本身變化的基礎上我們還可以加入對文字的變化,比如在文字的底部墊上形狀(如圓圈、條形圖等等)。這樣通過對數字和文字本身的設計強調,就從整體上得到了優化。

          ↑在文字底部墊上圓圈,在整體上突出設計感


          雖然排名沒有具體的數值,無法生成條形圖,但是依舊可以通過等比縮放的矩形來強調文字,比如倒立金字塔和橫向柱狀圖。

          ↑通過矩形形成倒立金字塔和條形圖,在整體來突出設計感



          3 基于內容主題傳達,來做變化


          3.1借助icon元素,來做變化

          如果排名數據內容所傳達的主題是品類、物品、或者城市,那么就可以借助icon來豐富可視化。


          3.2 借助定制插畫,來做變化

          排名的數據如果涉及的是品類中的細分物品,比如生活中常見到的吃的、穿的,用的,那么就可以使用定制插畫來豐富排名可視化。


          3.3 借助頭像、品牌LOGO、產品實景圖,來做變化

          當我們的排名數據中涉及到了人物、品牌、產品之間的排名時,我們可以通過與之對應的頭像、品牌LOGO、產品實景圖來豐富排名的可視化表現。


          3.4借助地圖,來做變化

          如果排名數據講的是省份之間的排名對比,那么我們就可以借助地圖元素來豐富排名的展示。但是如果要用到中國地圖,一定要注意使用中國標準的地圖,當然基于設計的風格,你也可以使用簡約風格,去掉地圖元素,只保留可視化的部分。




          4 借助背景設計元素,去做變化


          排名數據也可以借助視覺背景模板來做變化,比如在涉及某個主題排名榜單時(如淘榜單、星數榜單等)就可以通過背景視覺元素來突出排名。

          其實這種背景視覺模板,對可視化的要求并不高,你只需將排名通過單一表格的形式展示出來,但需要一個很強的視覺背景版來做襯托,這樣,做好一個模板,其余的榜單都可以進行復制使用了。





          二 如果排名數據包含數值,如何做得好看?

          1 基礎可視化排名數據圖


          如果數值單一,那么可以通過常規的可視化表現形式進行展示(如基礎柱狀圖、餅圖、圓圈大小、直角三角形柱狀圖、180°變形柱狀圖等等)。


          1.1 橫向柱狀圖展示

          結合第一節講到的基礎排名樣式再加上橫向柱狀圖來進行展示。這樣的排名展示形式簡單、直觀,特別適合單一排名數據之間的對比展示。


          1.2 餅圖、圓圈大小占比展示

          如果排名數據中數值所傳達的是占比,那么便可使用餅圖或圓圈大小的形式對排名數據進行展示。


          1.3 直角三角形柱狀圖(柱狀圖變種)展示

          通常我們會使用常規的豎向柱狀圖來表現數值的大小,但其實還可以對其進行一點點變形,比如將柱子的右側直角邊去掉,那么就變身成為了直角三角形柱狀圖。

          這時如果排名的文字比較多,我們還可以將排名和文字置于柱子的上方進行展示,一方面節省了空間,另一方面在視覺上也起到了美觀度。


          1.4 180°變種柱狀圖展示

          柱狀圖的變種,在《如何做出比別人好看的柱狀圖?》系列文章中有講到,大家對如何實現這種形式感興趣的可以看下之前的文章,同樣的排名數據也可以基于180°的變種柱狀圖來進行展示。


          2 將主題元素和基礎可視化排名圖進行結合

          除了基礎的可視化展示和排名數據結合外,如果排名數據所涉及的是一些主題元素(如生活中吃的、穿的、用的等等)。那么就可以將基礎的可視化和icon、頭像、產品實景圖、插畫等等去做結合來豐富可視化。


          3 使用桑基圖來體現排名

          當排名的數據中,還多了一列數據涉及到分類, 那么就可以使用?;鶊D來進行可視化的展示(如國家屬于什么地區、公司屬于什么行業、城市屬于什么省份等等)。對如何實現?;鶊D感興趣的可以看看之前發的?;鶊D教程。


          4 排名連線圖展示

          如果我們的排名數據中,還涉及到了年份的排名變化,比如省份之前的年度排名,那么就可以使用排名連線圖,通過線段的上下連線走向來看省份之間排名的上升或下降,同時這種數據還非常的適合做成動態柱狀、折線圖(在后面會講到)。


          4 排名連線圖展示

          如果我們的排名數據中,還涉及到了年份的排名變化,比如省份之前的年度排名,那么就可以使用排名連線圖,通過線段的上下連線走向來看省份之間排名的上升或下降,同時這種數據還非常的適合做成動態柱狀、折線圖(在后面會講到)。


          5 地圖展示

          和第一節講到的地圖一樣,如果排名數據中涉及到了地理位置數據,那么可以結合地圖進行排名數據的展示。通常情況下,完成地圖可視化后,可將具體的排名信息以表格的形式羅列在地圖的空白區域內,這樣結合地圖和具體的詳細排名數據,就會更加的直觀和豐富。


          6 組合圖展示

          如果我們的排名數據維度非常的豐富,數據所包含的信息點在3個以上,那么就可以通過將多種可視化的表現來進行結合,通過組合式的可視化來進行展示。




          7 動態柱狀圖、動態折線圖展示排名


          7.1 動態柱狀圖

          排名數據也可以通過簡單的動態柱狀圖來進行展示。如果只是單一的排名沒有涉及年份的變化,那么可以通過柱子從上到下一個一個地出現來進行展示(如下圖左),如果涉及到年份的變化, 那么就可以通過柱子隨著年份的上升或下降來進行動態的展示(如下圖右)。

          動態柱狀圖的實現方法也很多,我在想做出漂亮的圖表,這12個網站不能錯過!中有講過,可以通過flourish網站(https://flourish.studio/)來快速的實現。同時如果想自己DIV得到更定制化版本的動態柱狀圖,也可以使用B站UP主見齊的開源可視化項目(http://r6d.cn/JdYy)進行實現。


          7.2 動態折線圖

          同樣的我們還可以通過動態折線圖的形式進行展示,這種表現形式主要看的是排名的趨勢變化,同樣的,借助flourish網站(https://flourish.studio/)就可以實現這種動態折線圖的展示效果。

          8 3D建模渲染可視化展示


          當然,我們的排名數據也可以使用現在市面上很火的3D可視化的表現形式來進行展示,比如隨著攝像機移動的3D柱狀圖、還有基于主題而自定義化的3D場景排名展示等等。


          8.1 3D柱狀圖展示

          將基礎的柱狀圖,通過3D立體柱狀圖的形式進行展示,排名的結果并不是啪的一下直接公布,而是隨著鏡頭慢慢地公開,對觀眾來說隨著鏡頭的視角觀看有一種慢慢揭秘的感覺!


          8.2 3D內容場景展示

          如果我們的數據,所要傳達的信息非常富有主題場景感,那么就可以通過3D場景渲染的形式進行展示,比如下圖GIF中,在表現《哪個國家上班族工作時間最長》就可以將各個國家的學生,置于一個教室中,再通過鏡頭的移動位移來進行展示。

          這種展示形式,實際投入成本還是很大的,從建模到渲染至少也需要2-3天的時間。所以最好基于一個好的選題再選擇這種形式,要不然就會出現”雖然視頻本身展示酷炫,但是由于選題不好,最終播放量不高“的尷尬情況。



          三 做好排名數據的一些小事項


          1 時間緊急時,一切從簡

          比如說,當我們在時間非常緊急的時候,排名數據如果是和地理數據相關的,那么我們會盡量避免使用地圖元素來豐富可視化,因為這會增加我們審核檢查地圖正確性的時間成本。我們可采取常規的可視化表現形式進行展示,雖然會丟失掉一些美觀度,但是正確性會有更高的保障。


          2 強調重點數據

          基于文章內容,需要在圖中重點強調某些數據時,可通過填充顏色、框選、重點信息豐富(比如展示TOP3)的形式來對排名進行強調.




          四 總結


          排名數據看似簡單,但其實所包含的展示形式和細節還是非常多的。希望當你在遇到排名數據時,這篇文章能夠對你有所幫助!

          文章來源:站酷   作者:鄒磊ZouL


          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 平面設計服務

          3種常用網頁布局與設計注意點

          資深UI設計者

          頁面布局是頁面設計的一部分,我們不僅要處理頁面上視覺元素的布局與排列,還要考慮這些元素在不同大小的屏幕上的適配問題。


          頁面布局不僅僅是前端同學要考慮的問題,也是設計同學要重點關注的;怎樣的布局能更好的展示頁面內容同時兼容不同屏幕的大小呢?不同的布局形式下,設計師要著重考慮哪些點呢?今天就來探討下這個問題。


          一、固定布局(靜態布局)

          固定布局(Fixed Layout):網頁上所有的元素寬度以像素(px)為單位。例如,直接設定網頁的主體部分寬度為960px/1200px,某個搜索框寬度為60px等等。這種布局具有很強的穩定性與可控性,缺點也顯而易見,即不能根據用戶的屏幕尺寸做出不同的表現。當前,大部分門戶網站、新聞資訊類網站、企業的PC宣傳站點都采用了這種布局方式。


          1.設計方法:

          PC:大多采用居中布局,所有樣式使用絕對寬度/高度(px),設計一稿合適的尺寸就可以,在屏幕寬高縮小時,使用橫向和豎向的滾動條來查閱被遮掩部分;如果大于這個寬度則內容居中,填加背景寬度。頁面的模塊、彈窗、間距等都是固定尺寸,需要設計補充的頁面規約比較少。


          2.優劣勢:

          優勢:這種布局方式對設計師來說是最簡單的,跟動態布局相比,能夠更好地控制頁面的美觀度,排版穩定,在窗口拉伸過程中規避了內容重疊或者不規則的情況,仍保持原始比例,靜態位置和內容樣式。

          劣勢:顯而易見,即不能根據用戶的屏幕尺寸做出不同的表現,對于超大屏和超小屏用戶不友好。


          3.舉例:

          知乎網頁端:



          微博網頁端:



          2.流式布局(百分比布局)


          流式布局(Liquid)的特點是頁面元素的寬度按照屏幕分辨率進行適配調整,但整體布局不變。

          流式布局也叫也叫百分比布局,是移動端開發中經常使用的布局方式之一。元素的寬度按照屏幕分辨率自動進行適配調整,保證當前屏幕分辨率發生改變的時候,頁面中的元素大小也可以跟著改變。

          流布局與固定寬度布局基本不同點 就在于對網站尺寸的側量單位不同。固定寬度布局使用的是像素,但是流布局使用的是百分比,這位網頁提供了很強的可塑性和流動性。把元素的寬,高,邊距,間距不再用固定數值,改用百分比,這樣元素的高,間距會根據頁面的尺寸隨時調整,以達到適應當前頁面的目的。屏幕分辨率變化時,頁面里元素的大小會變化而但布局不變。

          * 百分比是基于元素父級的大小計算得來的;* 元素的水平或者豎直間距都是相對于父級的寬度計算的.* 邊框不能用百分比設置


          1.設計方法:

          網頁中主要的劃分區域的尺寸使用百分數(搭配寬度最大值、最小值屬性使用),例如,設置網頁主體的寬度為80%,最小寬為960px,(最小寬也就是保證頁面內容不會錯亂的情況下的寬度,到達最小寬度后,不再適應,出滾動條)圖片也作類似處理(寬度:100%, 最大寬一般設定為圖片本身的尺寸,防止被拉伸而失真)。

          注意:

          寬度自適應,但是里面的圖標、字體等也是固定大小的,并不是所有的東西都是自適應的。一些大的圖片,設置寬度為百分比自適應即可,隨著屏幕大小進行變化,對于小圖標或者文本等, 一般都是固定寬高大小。

          同時考慮到頁面具體模塊、彈窗、字段等在最小寬度下的顯示,比如給出字段最小寬度,在最小寬度顯示不下時如何處理。可以參考阿Zi之前的文章:https://www.zcool.com.cn/article/ZMTE5NDAzNg==.html

          在網頁布局中,我們通過設置元素的寬高定義元素的顯示大小,但是,在不同窗口大小,不同分辨率下,寬高相同的元素顯示狀況是不同的。所以,我們往往需要元素的大小能夠根據窗口或子元素自動調整以達到自適應。沒錯,在頁面設計中,自適應的規則往往是需要設計補充的最多的。

          因為阿Zi所在公司的管理系統是采用左側導航欄固定,右側內容區自適應的流式布局,所以舉幾個實際工作中的應用的規約例子:


          a.彈窗自適應


          b.模塊、卡片自適應


          一種是當頁面橫向拉伸時,卡片里內容個數不變,布局不變??梢园褜挾染殖蓭讐K,然后內容在模塊內居中,給出最小寬度;如下,設定單個最小寬100px,如到達最小寬度后顯示不全,出現橫向滾動條;更靈活的情況就是收縮時內容/區塊布局變動的。同樣要設置區塊最小寬;向右自適應—橫向排序,右側不夠則折行;最小寬度平均分成均等份,剩余寬度均分到其他列。


          據統計,PC端用戶的主流分辨率主要為 1920、1440 和 1366,個別系統還存在 1280 的顯示設備。有些情況下不太好控制內容自適應,那么就需要出2,3套尺寸的設計稿來適配??梢愿鶕唧w情況判斷系統是否需要進行適配,以及哪些區塊需要考慮動態布局,哪些時候出多套尺寸。


          2.優劣勢:

          優勢:流式布局一般用于解決類似的設備不同分辨率之間的兼容(一般分辨率差異較少)

          劣勢:因為寬度使用%百分比定義,但是高度和文字大小等大都是用px來固定,所以在大屏幕的手機下顯示效果會變成有些頁面元素寬度被拉的很長,顯示不協調。


          3.經典的流式布局結構:

          兩欄

          常見的做法是將左邊的導航欄固定,對右邊的工作區域進行動態縮放。

          兩欄的左側固定寬欄框大多在40到300范圍(適用于左側導航、篩選的情況)。



          舉例:

          Ant Design



          三欄

          在特殊場景下,左側會有雙重左欄的情況,適用與一級導航簡單,二級導航復雜的頁面。


          舉例:Teambition



          還有兩側固定,中間自適應的布局,有圣杯布局和雙飛翼布局。圣杯布局來源于文章In Search of the Holy Grail,而雙飛翼布局來源于淘寶UED。雖然兩者的實現方法略有差異,但是視覺上都差不多,就是三欄,然后左右兩邊寬度固定,中間寬度自適應。


          還有瀑布流布局也是流式布局的一種。是當下比較流行的一種網站頁面布局,視覺表現為參差不齊的多欄布局,隨著頁面滾動條向下滾動,這種布局還會不斷加載數據塊并附加至當前尾部。最早采用此布局的網站是Pinterest,逐漸在國內流行開來。

          優點 

          1.有效的降低了界面復雜度,節省了空間;

          2.對觸屏設備來說,交互方式更符合直覺:在移動應用的交互環境當中,通過向上滑動進行滾屏的操作已經成為最基本的用戶習慣,而且所需要的操作精準程度遠遠低于點擊鏈接或按鈕。

          3.更高的參與度:以上兩點所帶來的交互便捷性可以使用戶將注意力更多的集中在內容而不是操作上,從而讓他們更樂于沉浸在探索與瀏覽當中。

          缺點 

          1.有限的應用場景:無限滾動的方式只適用于某些特定類型產品當中一部分特定類型的內容。 

          例如,在電商網站當中,用戶時常需要在商品列表與詳情頁面之間切換,這種情況下,傳統的、帶有頁碼導航的方式可以幫助用戶更穩妥和準確的回到某個特定的列表頁面當中。 

          2.關于頁面數量的印象:其實站在用戶的角度來看,這一點并非負面;不過,如果對于你的網站來說,通過更多的內容頁面展示更多的相關信息(包括廣告)是很重要的策略,那么單頁無限滾動的方式對你并不適用。

          3.關于精準定位:無限滾動加載讓用戶很難精準定位到某一模塊。


          舉例:pinterest



          三.響應式布局


          響應式布局是Ethan Marcotte在2010年5月份提出的一個概念,簡而言之,就是一個網站能夠兼容多個終端——而不是為每個終端做一個特定的版本。響應式布局能使網站在手機和平板電腦上有更好的瀏覽體驗,也就就是說一個網站能后兼容多個終端,而不是為了每一個終端做一個特定的版本。

          響應式布局意味著,無論用戶是在iPhone還是筆記本電腦上查看網站,都應該能夠訪問所需的內容,擁有一致的用戶體驗,這就要求UX/UI設計人員考慮的問題更多,同時考慮到網站和移動設備的場景,忽略這些肯定會阻礙網站或移動應用程序的用戶體驗。

          接下來從響應式設計的特點著手,展開下設計師需要了解和注意的點。


          1.響應式設計的特點

          CSS斷點

          CSS斷點是響應式網站的經典特征。他們的工作是根據屏幕大小將設計“分解”為較小的網站版本。斷點通常具有最小和最大寬度,這些寬度決定了用戶可以看到哪個版本的設計。

          但是,一個網站需要多少個斷點才能真正響應?如果設備不適合最小或最大寬度,則網站設計仍然看起來很奇怪,這違背了創建響應式設計的全部目的。

          尼克·巴比奇(Nick Babich)指出,大多數響應式網站都需要至少三個或四個斷點才能正常工作。根據縮放的大小,內容將相應地進行調整。斷點通常針對移動設備,平板電腦和臺式機視圖進行細分,盡管您可以擁有更多的斷點,以便涵蓋所有基礎,以提高設備的靈活性。許多設計師還包括“較小”的斷點,這些內容在內容中會自行調整以保持設計的視覺平衡,但不會發生大的變化。這包括更改字體大小之類的內容,但不包括一般結構。


          最佳的視覺效果

          圖像在任何網站中都非常重要,無論是高分辨率照片還是自定義插圖。那里的一些設計師相信裁剪圖像,以便用戶只能在較小的屏幕上看到圖像的一部分,因此視覺效果保持不變。對于我們而言,最好的方法是使用矢量圖像。


          移動設備優先

          對于許多設計團隊而言,最好首先關注最小的屏幕來開始設計。這主要是因為通過將移動設計放在首位,團隊可以對內容的去向有一個很好的了解。

          響應式設計圍繞內容,假設你采用建議的“移動設備優先”方法,則意味著您應該為移動設備分配重要內容的優先級,并隨著屏幕尺寸的增加添加更多內容。

          當涉及到響應式設計時,與常規設計相對應的只是關注內容。因此,通過首先創建移動版本,我們可以縮小從一開始就需要顯示的關鍵內容(用戶絕對需要的部分)的范圍。從那里,我們可以在進入更大的屏幕時添加更多的細節和更多的內容,或者找到更好的方式來顯示關鍵內容。


          2.響應式設計的注意事項:

          1)注意視覺層次,從最小寬度的斷點開始

          這建議從最小的屏幕分辨率開始的原因有關。這不僅是要了解內容的哪些部分絕對重要,還在于了解呈現這些內容的最佳方法。


          當網站在不同的斷點切換時,網站的視覺層次結構可能必須適應,從某種意義上說,它需要適應屏幕尺寸的變化,為了保持產品的可用性,組件也必須適應。


          如上所述,在響應式網頁設計中使用的每個斷點都將有一個最小寬度和一個最大寬度。當使用移動優先的方法設計,一個好的經驗法則就是可以從你的三個斷點的每個最小寬度開始設計。這樣,您將為較小的設備設計屏幕,并在屏幕變大時添加更多內容和UI元素。請記?。合蛏贤卣苟皇窍蛳驴s放,向上拓展總是容易的。

          2)按鍵尺寸至關重要

          對于基于Web的產品,按鈕可能非常簡單。畢竟,光標是幾乎任何人都可以使用的準確工具,但我們的手指說的不一樣。所討論的手指的大小可能因用戶而異,并且設計人員需要考慮移動屏幕上的可用空間很小。

          根據Apple的《人機界面指南》,平均手指輕觸為44×44像素。為了提高可用性,請確保針對此平均值對按鈕和可點擊區域進行適當調整。

          3)優先瀏覽

          如果您依賴導航欄作為查找信息的主要方式,則需要在移動設計中仔細確定導航欄的優先級。該產品的各個方面(例如導航設計)絕對至關重要,需要在響應迅速的網站中進行仔細計劃。隨著設備屏幕的變小,該導航欄的空間將越來越小。

          那么像這些問題就需要我們重點考慮:什么時候隱藏導航選項?全部隱藏嗎?首先隱藏哪些?


          常用的做法是,將導航、頭部搜索、用戶信息等內容隱藏在按鈕后面,例如我們在手機上經常能看到的漢堡菜單。的確,漢堡菜單并不是唯一的選擇,但不可否認的是,整個導航菜單都需要隱藏在智能手機中。


          這就是要嘗試確定整個產品中最重要的頁面,并確保無論使用哪種設備,用戶都可以找到它們。在設計過程中盡早完成此優先級設置總是最好的,因此,如果我們從移動設計入手,我們將已經需要包含一些重要的內容。


          3.優劣勢

          優勢:


          a.用戶體驗友好

          隨著電腦尺寸多元化,智能設備(pad/智能手機)普及化,在當下追求用戶體驗至上的時代,網站普遍使用固定的寬度逐漸滿足不了現在不同設備與不同分辨率需求。在高分辨率電腦寬屏顯示器上,兩邊留白過多。在手機上顯示,內容顯示過小,用戶為了看清楚,首先需要放大界面,再左右拖拖界面。響應式網站可以根據不同終端、不同尺寸和不同應用環境,自動調整界面布局、展示內容、內容大小,提供非常好視覺展示效果,一致性友好體驗。

          b.提高轉換率和銷量

          響應式網站意味著您無需在網站設置跳轉,從而極大完善了用戶體驗,這也是響應式網站的最大優勢所在。另外,使用集成式設計和CSS表單一類的功能使網站無論在何種設備上都能營造出風格一致的感覺和外觀。若熟悉這種布局,用戶可以在任何設備上輕松瀏覽您的網站,進而提高轉換率。

          c.節省開發投入

          摒棄傳統網站,選擇響應式網頁,單從開發階段就節省大量時間和金錢。為不同的設備同時開發多個網站,意味著后期也需要更多的開發支持費用和維護成本。

          d.三站合一,維護簡單

          電腦、手機、微信三個網站使用的是同一個網址,同一個后臺管理,數據同步更新,所有圖片和內容只需要上傳更新一次即可,維護簡單輕松。


          劣勢:

          a.設計與風格有局限性

          雖然響應式布局擁有如此顯著的優點,但它也并不是十全十美的,在很多方面,它也有它自身的局限性:

          自由度太低,局限性較大,這種情況就是必須兼顧移動端以及PC端的表現,比如最常見的移動端并沒有懸停效果,PC端就要酌情考慮了。需要考慮在手機,pad,PC上三種屏幕下的頁面內元素的呈現,會導致有著非常大的局限。

          b.對IE老板兼容性不友好

          對于老版本IE(IE6、IE7、IE8)支持不好,這是一個致命的問題,如果你的網站用戶大多還采用老版本IE的話,建議不做響應式網頁設計。

          c.靈活性有所欠缺

          基于不同終端的設備屬性不同,對產品用戶體驗要求就會截然不同。內容比較多帶有功能性的網站不適合做響應式網站設計,如:電商類型網站,寬屏的pc端內容如果全部要在手機端進行展示,勢必導致手機端的界面非常長,需要根據手機端屬性進行重新信息框架設計,這樣對響應網站要求非常高,實現難度與成本非常高。但是大型網站為了提高用戶體驗,通常做法,把高分辨率寬屏網站最小的響應尺寸響應到1024px,不再適配手機端,手機端重新設計開發一套手機網站,簡單理解為2.5響應,如:電商網站亞馬遜、Calvin Klein、Nike、視頻網站Youtube,等。

          d.速度可能會變慢


          由于響應式頁面是同時下載多套CSS樣式代碼,可能在手機上就下載PC、Pad的冗余代碼,導致文件變大,影響加載速度。



          根據響應式網站的優缺點,我們不難看出:企業官網、單頁宣傳網站非常適合做響應式網站設計,由于它們的界面內容比較少,結構比較簡單,所以在不同終端、不同尺寸設備上進行網站信息框架調整、內容加減、圖片、文字、柵格響應比較容易。內容比較多帶有功能性的網站不適合做響應式網站設計。


          3.舉例

          示例1----Dribbble

          在1960-2048的屏幕下,顯示5列內容


          在950-1330-1960屏幕下顯示3到4列


          在500-620-950尺寸下顯示1-2列布局,并且把頭部主導航、搜索框、用戶設置等內容收起到到左上角菜單:

































          示例2----Event Apart

          互動設計會議Event Apart創造了從其主要網站到其移動網站的無縫過渡。

          他們選擇在大多數平臺上保持大多數相同的布局,平板電腦版本與臺式機相同,并且可以使用。這是因為他們為清晰起見選擇在白色背景上以粗體顯示內容,并且在調整大小時,可以輕松滾動信息。

          唯一真正的變化是,對于移動版本,頂部的面包屑折疊成一個漢堡菜單,并用“菜單”一詞明確指示。

          示例3----Popular Science

          無論使用哪種設備,Popular Science都能為您帶來出色的用戶體驗。

          正如您所期望的那樣,內容處于中心位置,并且具有響應式圖像和簡潔的版式,Popular Science成功地創建了易于閱讀和使用的響應式網站。本網站上的信息以一種可以在各種設備上輕松按比例縮小其所有內容的方式顯示。


          最后

          雖然目前響應式設計的模式的普及還是有很多難題需要突破:比如響應式的圖片、跨端交互、更高的性能、全新的合作流程等等。但是隨著科技不斷發展,響應技術逐漸完善,給響應式設計提供強有力的技術支持;響應式設計可以在不同終端提供完美展示效果與友好的用戶體驗,吻合用戶體驗至上的趨勢。所以說,響應式設計必定是未來發展趨勢。

          文章來源:站酷   作者:ZZiUP 

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 平面設計服務


          原來設計規范不需要死記硬背!騰訊設計師是這么理解和運用的!

          前端達人

          什么是設計規范?

          設計規范是一個老生常談的話題了,網上相關的文章也非常多,但我相信有很多設計師對設計規范的理解還是比較模糊,認為設計規范指的就是字體,顏色,控件規范那些,這種理解其實是比較狹隘的。

          于我而言,設計規范用一句話總結就是:設計規范是針對特定產品所制定出來的一整套產品標準,包括流程標準,技術標準,設計規則等等。通過這套標準,能減少錯誤發生率并提高設計質量和輸出穩定性。

          舉個例子,我在做QQ的3D厘米秀項目的時候,一開始合作方提交的設計資源正確率很低,風格也各不相同。然后為了解決這個問題,我在項目中定義了流程標準,資源標準,cp合作標準等等。通過這些規范讓多個不同設計團隊能合作到一起,提升了整體協作的效率和質量,這些標準就成了設計規范的一部分。

          原來設計規范不需要死記硬背!騰訊設計師是這么理解和運用的!

          可以說,每個項目因合作方式,人員習慣,落地形式的不同,所形成的規范是有區別的。所以,設計規范更應該是針對項目來說的,除非是問你Android或iOS這種已經廣泛適用的平臺級規范。不然是很難有標準答案的,回答更應該是一種思路的描述,比如你會如何定義一套規范、解決了哪些問題以及如何驗證這套規范真的助力了產品的體驗提升。

          設計規范的作用

          1. 遵守用戶習慣,減少認知成本

          Don’t make me think。大家都知道,好用得產品都是盡可能的減少用戶思考,不斷去貼近用戶的使用習慣。比如在iOS系統里想返回上一個頁面時,你會熟悉的去左上角找返回操作,但如果把返回操作放在右上角就會很不習慣;再比如對國內用戶來說,他們習慣正確按鈕用綠色,錯誤按鈕用紅色,如果你非要反過來制造所謂的差異化,用戶就會感到困惑,誤操作的概率也可能會大量增加。

          原來設計規范不需要死記硬背!騰訊設計師是這么理解和運用的!

          2. 統一品牌性格

          品牌性格不論是大到公司層面,還是小到具體某一個產品,都需要有一套品牌識別體系來約束,只有統一得視覺印象才能更好的讓用戶記住。那這些品牌識別體系其實也是設計規范的一部分,在具體執行中,可以根據一些品牌核心概念規范快速做一些風格決策。

          比如騰訊QQ的品牌影像風格關鍵詞是青春、互動,敘事和干凈,那么在選擇畫面配色的時候就可以根據關鍵詞指導畫面的選擇,使得整體的畫風得到統一。

          原來設計規范不需要死記硬背!騰訊設計師是這么理解和運用的!

          3. 降低新人學習成本

          這里所說的新人不單純指剛入職場的設計新人,也包括剛參與到一個新項目的設計老手,設計規范是能夠以的溝通成本實現快速上手。有成熟的控件資源和標桿的設計參考,就算是之前完全沒做過的設計師也能搭建出一個還不錯的頁面。

          原來設計規范不需要死記硬背!騰訊設計師是這么理解和運用的!

          4. 提高開發效率

          有了好的設計規范,開發就能把一些常用的樣式進行封裝,在需要復用的場景中直接調用。這樣做,一方面可以通過調用的方式減少樣式代碼的復制使用,提升效率的同時降低軟件包體積,另一方面也可以減少不必要的工作量,方便后期維護。

          原來設計規范不需要死記硬背!騰訊設計師是這么理解和運用的!

          5. 保證設計的一致性

          有設計規范的約束,能讓團隊在一個既定的框架內做設計,統一大家的輸出質量,從而保證設計的一致性。

          怎么學習設計規范

          設計規范的學習肯定不是靠死記硬背,而是要講究方法,從我自身的經驗來說,我覺得大致可以有以下2個步驟:

          在新手期,多去看一些大廠的設計規范,先建立認知,不要求全部記住。把這些規范當成字典,先大致了解一遍,等真正做的時候拿不準再去查閱就好了。這里推薦幾個必看的大廠設計規范官網,建議收藏。

          原來設計規范不需要死記硬背!騰訊設計師是這么理解和運用的!

          其實網上很多設計規范,原理之類的文章,源頭都來自于這些大廠規范,想獲得一手信息,最好是自己去這些網站多看看。

          這也就是我為什么不寫具體規范數值的原因,因為網上的資料實在是太多太詳細了,寫一些重復的知識實在是沒多少價值。學知識的路上一定不要什么都等別人喂給自己,需要更多的主動性,這樣才能提升自己的學習能力和解決問題的能力。

          針對自己要做的模塊,有針對性的找市面上大廠的應用作為參考,直接截圖標注,自己總結規律印象會更加深刻。

          我開始做UI的時候就這樣學習的,不知道字體該用多大,間距用多大,顏色怎么用,就直接去找相類似的界面截圖參考,量它們的尺寸,吸它們的顏色,然后就這樣一步步的把規范經驗積累起來了。

          比如從QQ的動態tab頁面中,我們可以借鑒到很多信息,比如列表的高度,列表左側的圖標尺寸和圓角,間隔線高度和配色,右側的箭頭大小和配色,列表文字的字號和配色,用戶頭像大小和結合的樣式,圖標與文字的間距等等。這些借鑒并非是抄襲,要你做的跟這個界面一模一樣,只是參考這里面的某幾個屬性然后結合自己的產品綜合運用,減少出錯。

          原來設計規范不需要死記硬背!騰訊設計師是這么理解和運用的!

          發現了嗎?一個優秀的界面設計,上面的任何信息其實都可以拿來參考,就看你會不會用了。

          需要強調的是,這些參考來的標準,并非是標準答案,還是要根據自己的實際項目需要做調整,只是至少知道一個范圍,在這個范圍內不大會犯錯。

          這就像剛開始做設計時一樣,去參考這些規范相當于做臨摹的練習,這種臨摹是需要的,臨摹的過程中不斷加入自己的思考,然后通過總結,變成自己的知識體系。

          怎樣定義出設計規范

          隨著對設計規范理解的加深,自身設計能力的不斷提高,就要開始從設計規范的使用者轉變為規范的制定者了。如何制定針對項目的設計規范呢?我的經驗是在項目過程中把做的好的和踩坑后的正確解法進行總結,并形成文字,積累多了就形成了規范。要把每一次遇到的問題都當成是一次改進流程和規范的機會。

          我自己是有隨時記錄的習慣,項目中一旦發現問題就會趕緊把它記錄下來。有時候甚至還蠻期待出現問題的,因為出了問題才能找到優化的機會,自己也能從中找到解決問題的成就感。

          曾經在QQ的3D厘米秀項目中遇到過非常多的坑,然后從填坑的過程中慢慢總結出各種設計規范,去幫助項目減少錯誤率,提升設計質量。從最終的產出和結果來看,自身的進步是可觀的,對產品的幫助也比較大,所以很值得去做。

          原來設計規范不需要死記硬背!騰訊設計師是這么理解和運用的!

          使用規范會影響設計的創意性嗎?

          剛掌握設計規范的時候,干活是特別舒服的一件事,因為做需求可以很快,好像拼拼組件就能完成。但稍微做久一點時間,又會覺得好像沒啥進步,天天拼組件,擔心影響設計的創意性,真是挺矛盾的。

          其實,規范也是要在遵守和引領用戶習慣中不斷迭代的。既要保持大的設計規范框架不變化,又要在設計的過程中給用戶制造驚喜。比如,整個UI的配色和字體需要保持統一,但在一些圖形,動效上可以做出亮點,讓用戶在整個使用體驗中既是沉浸的又能有些小驚喜。規范的打破與重建一定是需要一個動態平衡的過程。

          總結

          設計規范絕對不需要死記硬背,而是要充分理解并靈活使用,才能發揮它的價值。隨著UI行業的不斷成熟,設計工具的簡單化,各種組件化資源和思維越來越普及,可以預見的是未來一般的UI界面會高度組件化,設計師單純在界面上花費的時間可能會越來越少。

          這從行業的發展來說,減少了很多體力勞動,讓設計和開發有更多的時間去打磨產品細節,肯定是好事。但對設計師自身來說,省下了以前那種常規設計需求的時間后還能做些什么,設計師的價值又在哪?值得每個設計師去思考。


          轉自:優設網

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

          移動端選擇器正確使用指南

          資深UI設計者

          今天給大家詳細的分析一下移動端選擇器。


          一.什么是選擇器


          選擇器是一個輸入字段, 用戶必須在其中選擇一個(或多個)選項,這與文本字段中用戶可以自由使用的輸入區不同。選擇器具有各種不同的形狀和形式。下拉菜單,復選框,切換按鈕,滑塊等都是不同類型的選擇器,但它們看起來彼此并不相似。這些類型的選擇器之間的主要功能差異是用戶可以選擇的選項數量:一個或多個。



          二.選擇器的類別


          -單選選擇器

          -多選選擇器



          1.單選選擇器


          單選選擇器按效果又可以分為:點擊選擇器、滑動選擇器、多聯動選擇器、開關選擇器、可搜索效果的選擇器、地圖選擇器。


          特點:同一時間只能選擇一個選項,當你已經選擇完一項后,準備選取另一項,那么后選的一項會立刻使先選的一項被取消選擇。

           

          1-1點擊選擇器


          點擊選擇器可分為兩種狀態,狀態一為立即觸發,當你點擊后會立即跳到下一步操作;狀態二為再次確認觸發,當選中某項時,不會立即觸發操作,而是需要再點擊別的觸發類組件(如保存按鈕)后,再執行操作。

           

          -立即觸發式:


          特點:直接進入,并沒有再次確認的按鈕,可以讓你快速到達想要的目的。


          建議:雖然目的能快速達到,不過也很可能會造成誤操作,所以在設定這類選擇器時要多考慮手指的觸碰區域以及每個選擇元素的距離,同時正因為是直接跳轉,所以應當加入一些操作提示。


          舉例:汽車之家在用戶選擇二手車時就會出現此選擇器,當我在汽車之家想要選擇二手車時,它會彈出立即觸發式選擇器控件,我們在控件上可以看到有7個圓形選項,分別為:汽車之家誠信聯盟、準新車、奧迪、奔馳、寶馬、三廂轎車、分期購車,當我點擊“奧迪”選項時就會立即跳轉選擇后的頁面,為了讓用戶知道自己選擇后的狀態,在跳轉頁面時還會彈出非模態彈窗的文字提示“共找到1943輛車”。


          -再次確認觸發式:


          特點:這是最為常見的選擇器類型,當所在選項選上,除了選擇另一個選項之外,便沒法取消選中狀態。(選且只能選擇一個選項)


          建議:在設定此類選擇器時我們應該從產品的角度去考慮是否給用戶一個默認選項,甚至是否考慮給出一個重置按鈕。


          舉例:我剛注冊小紅書時,在小紅書填寫信息頁面中,它的默認選項是“男”,我點擊“女”,則會自動取消掉“男”,它們兩者并不能同時存在,并且只有我點擊下一步按鈕時才會正式確認我選擇完成。


          1-2滑動選擇器


          特點:滑動選擇器是將需要選中的內容滑動至中部,然后點擊確認按鈕確認選中后返回選中內容。大多數運用在選擇時間或地址上。


          建議:滑動選擇器的展示區域有限,部分選項會被隱藏,最好是當用戶對所有選項都比較熟悉、有預期的時候,才使用它。為了保證手機屏幕觸控精度,以免發生誤觸,滾輪選擇器建議控制在5列以內。


          舉例:在小紅書填寫年齡信息時,我們只需用手指在區域內滑動即可選擇想要的選項。


          1-3多聯動選擇器


          特點:多聯動選擇器是由兩個或兩個以上的中繼器制作而成,第一個中繼器選擇后,一般會對第二個中繼器進行篩選,不過因為顯示的區域有限,所以當你要切換時,還只能挨個切換,效率低下。


          建議:可以通過數據以及功能來減少選擇時間,例如在選擇地區時,根據當前GPS定位地理位置,定位相關省級信息及名稱,減少滑動操作。


          舉例:如下,當我選擇了內蒙古自治區,那么2級內容就應該篩選掉內蒙古以外的城市,比較適用于省份-城市或者品牌-產品這種類似的選擇,當然下面第一張多聯動選擇器也結合了滑動選擇器。



          多聯動選擇器展示的方式非常多,不僅可以用滑動形式展示,還可以用點擊、平鋪列表等形式展示。


          在左圖選擇城市時,我們必須要先選擇省份,再選擇城市,最后才能選擇縣;


          右圖則沒有先后順序,不過當你首先選擇顏色時,如果沒有相同尺碼的衣服,缺貨的尺碼則不會被選中,先選擇尺碼也是相同道理。


          1-4切換開關選擇器


          特點:切換開關選擇器有且只有兩種選項,用來在開和關兩種狀態之間切換。開關屬于觸發類組件,撥動開關時,它所指揮的某個操作會立即生效,常見的使用就是授權。開關的默認狀態并不都是關閉的,還要從產品本身的設定上來決策。


          建議:如果某開關的功能是用戶經常使用的狀態,那么可以在默認狀態下打開開關,不過需要注意的是在某些特殊的開關按鈕需要打開時,必須要提前告知用戶。


          舉例:當我打開UC瀏覽器的設置時,它的輔助功能就使用了切換開關選擇器,切換的開關只需要點擊即可。


          1-5可搜索選擇器


          特點:可搜索選擇器一般用于選擇項較多時,特別是對于電商購物類的APP搜索選擇器是必不可少的,搜索選擇器會根據用戶輸入的內容,對中繼器進行模糊的搜索,讓用戶快速找到并選擇內容。


          建議:在搜索區域輸入文字時,可給予用戶更多的文字提示以及以及引導類信息。


          舉例:小紅書在搜索時就會出現數字化的信息提示,這樣能夠很好的引導用戶進入到想要的搜索結果:筆記或者商品頁面。


          1-6地圖選擇器


          特點:作為最特別的選擇器,它的功能是復雜的,它的操作方式也是多樣化的,地圖選擇器的操作可點擊、可拖拽、可放大縮小等等,它多用于生活類APP。


          建議:可以在選擇器中加入更多趣味、互動、可感知的設計,如加入過節元素、車輛行駛路徑、熱門區域、甚至選取后手機的震動等。


          舉例:


          打車類APP必用的地圖選擇器,滴滴出行的用戶可以實時看到車輛信息,可以采用點擊、拖拽、放大等操作來選取上車地點,選取后還有文字信息提示,讓用戶確認操作是否正確。


          貝殼APP則用地圖選擇器來讓用戶選擇二手房,同時也采用了聯動式的效果,第一步是查看區域,可以明確看到區域的售房套數,點擊選擇區域后我們可以看到每個路段的房子套數,點擊路段后就可以看到每個樓盤的套數以及均價,直到點擊樓盤就會彈出詳細信息框。這樣有助于用戶在選擇二手房時從大數據分析二手房的情況,有更好的對比性與選擇性。



          2.多選選擇器


          當單選選擇器不能滿足用戶需要時,這時我們就可以采用多選選擇器,一般常用的多選選擇器都是采用點擊的方式,當然也有滑動類型的多選選擇器。


          2-1點擊多選選擇器


          特點:當用戶想要選擇多個類別的情況下,我們就可以用點擊多選選擇器來展示提供給用戶選擇,通過屏幕點擊選中或取消選中該選項,它不會立即觸發操作,需要再點擊別的觸發類組件(如保存按鈕)后,再執行操作。


          建議:從用戶的角度來講盡量不要強制用戶選擇數量或者默認全部數量;多選項時觸碰區域不能太小,以免造成誤操作。


          舉例:小紅書在選擇感興趣的內容時就采用了點擊多選選擇器,不過在選擇興趣時它就強制用戶至少關注4個興趣,而對于單興趣或者少興趣的用戶來講,這無疑會造成用戶體驗的不佳,被逼再次從中選擇次要的興趣。


          2-2滑動多選選擇器

          特別注明:從用戶的角度來看,它可以選擇多個區域段的內容,所以我把它分為多選選擇器中。


          特點:當系統給出的選項不在自己的選擇區間時,可以很好的自定義選擇區間,把定義權限交在用戶手里。同樣,它需要再點擊別的觸發類組件(如保存按鈕)后,再執行操作。


          建議:在用戶滑動操作期間要有明確的操作提示,讓用戶時刻感知目前處于的狀態;滑動區域盡量不要超過100刻度,如果刻度距離太小,用戶在滑動時也很難精準的選擇范圍。


          舉例:在汽車之家APP中,當我要選擇汽車價格范圍時就會出現此選擇器,我們可以用手指滑動來選取它的價格區間,相對于上半部分的單選價格拓展性更強,用戶可以自行選擇上半部分的單選選擇器,也可以選擇滑動多選選擇器,給予用戶更多的選擇。



          三、選擇器的十大應用要點


          1、簡單易懂


          標題易懂:

          在選擇器中標題一定要簡單明了,很快的讓用戶知道他在為什么做選擇(如:當你關注某烹飪的APP后,它會讓你勾選喜歡的菜譜,你的標題就可以用“選擇菜譜”四個字,簡單明了)


          文字標簽易懂:

          一般使用短語而不是句子,也并不需要用標點符號來結尾。(如:當選擇想要的菜譜時,菜譜后的文字不需要加入標點符號)


          選取狀態易懂:

          用戶能夠明確感知什么是選中狀態,什么是未選中狀態,什么是禁用狀態。(如:選中狀態為高亮顯示,未選中為普通顯示,禁用狀態為灰度顯示)


          反饋提示易懂:

          當你在選擇中遇到選項限制或是否需要確認操作時,反饋提示一定要一目了然。(如:當你選擇某衣服時,S碼不能選擇,則會用灰度顯示的文字代替,甚至可以用中橫線劃過文字,明確告訴用戶不能選擇)


          2、基本排序


          從邏輯順序:

          邏輯排序能讓用戶很快很準的找到自己需要的選項,特別是對于選擇地址/時間/個數等常規的選項時,可以按照字母/遠近/大小來進行排序。例如下面在選擇地址時,就是按照A-Z字母排序,這樣可以大大節省用戶選擇的時間。


          從產品利益角度排列順序:

          當然為了產品自身的利益也可以自己優化排序方式,選項的順序可以說服用戶進行選擇,用戶可能因為第一個選項在列表中的位置而選擇了第一個選項;可以輔助用戶,也可以讓用戶向著產品所希望的方向傾斜。例如你在選擇菜譜時,產品為了讓用戶選擇更加優質的菜譜,就會把用戶評價高的菜譜放在前列;當然商家也會這么做,例如你要去買某款商品,商家會在選項中把熱門、優質的產品放在最上方,讓你優先選擇。


          從用戶體驗排列順序:

          從用戶角度來說哪些對用戶體驗好,那么就把它排在前面。例如汽車之家在進行車輛類別的排序中就把用戶量最多的轎車排在第一位,而把用戶量最少的輕客放在了最后一位;同樣它在汽車品牌選擇中,單獨列出了熱門品牌把它放在前列,讓用戶進行快速選擇。


          3、一致性


          視覺布局一致:

          每個元素之間的對齊、元素與元素之間的間距、按鈕不同狀態的視覺體現。一般情況下移動端更傾向于左對齊,這樣有利于快速讀取選擇內容,可以提高用戶的瀏覽效率并減少錯誤。


          圖片/插畫風格統一:

          在圖文結合的選擇器中,我們一定要保證圖片(插畫)的優質以及風格的統一。


          4、合理運用默認選項

          默認選項是選擇器的開始狀態。在不同的選擇器中有不同的默認方式。


          默認未選中:

          這是最常見的一種狀態,特別是對于選擇年齡、生日這些個人隱私信息,系統也沒有辦法進行默認選擇。


          默認選中其中一個選項:

          要想默認其中一項,必須考慮兩點因素,因素一:你想要潛意識的像用戶傳達信息,在單選選擇器中默認選擇一項后,就可以潛意識的向用戶傳遞信息必須要在這組單選項之中選擇一個。因素二就是產品的傾向,例如此產品的性別9成都是女性,那么建議默認選項為女性。


          默認選中全部:

          其實默認選中全部在用戶體驗上來講真的不是那么的友好,例如微博這個選擇器界面,剛進這個界面時已經全部勾選中,并且當你沒注意習慣性的點擊下面的按鈕時會生立即效,沒有返回的余地。(吐槽:有些APP甚至沒有一鍵取消功能,要一個個的點擊取消...)這也是為了產品犧牲掉了部分用戶體驗吧!


          5、給用戶更多選擇


          單選選擇器的更多選擇:

          如果用戶不想做出選擇,那么應該提供一個中立選項,為用戶提供一個明確的方向,中立選項比勉強選擇要好。例如在選擇行業領域時,以上并沒有你所處的領域或你不確定你的領域,你就可以選擇“不限”或“其他”。


          多選選擇器的更多選擇:

          在多選選擇器中,如果不能把控到用戶的準確選項區間,那么可以考慮滑動多選選擇器,讓用戶有更多的選擇區間,不管是汽車之家還是懂車帝在選擇車輛價格上兩者都是采用的相同方式。


          6、控件狀態

          選擇控件在操作過程中必須更改其狀態/外觀,要明確讓用戶知道是否能選中,是否被選中??丶顟B一般分為三種:未選中、選中、禁用。


          未選中

          選擇器的開始狀態,向用戶表明,可對該選擇控件進行操作。


          選中

          用戶操作選取狀態,選擇控件處于被選中的狀態。


          禁用

          一般情況會為灰色顯示,用戶將無法與選項進行交互。


          7、操作提示

          指的是用戶在操作中讓用戶得到相應的反饋,用戶根據這些反饋可以判斷當前狀態以及操作后狀態。在選擇器中,操作提示一般用輔助文案提示及非模態彈窗提示。


          輔助文案提示(選擇前與選擇中):

          輔助文案指的是在選擇控件主體之外另外放置一些文案信息來充當說明,例如下面是地區選擇,我在選擇不同層級的區域時,它的上方會出現輔助提示文案,讓你明確的知道你上一層級選擇的是什么。


          同樣,當我在選擇價格區間時,滑動選擇器的左上方一樣有文字類的提示:


          非模態彈窗提示(選擇后):

          非模態彈窗一般出現在用戶操作完的跳轉頁面中,為了讓用戶感知所選的選項在頁面的狀態,如下,非模態彈窗告知用戶一共有7輛車符合標準。


          當然除了非模態彈窗外,還有模態彈窗,但是用戶體驗極差,目前很少使用,所以就不列出來了。


          8、合理使用操作區域


          擴大點擊區域:

          在選取按鈕類的操作時,容易出現點擊不到或誤操作的現象,我們可以通過擴大點擊區的交互區域來提高易用性,例如下圖,雖然按鈕在左邊,但是可以把橫向區域都列為可點擊區域。


          當然我們也可以從設計的角度來擴大視覺范圍,從而也提高了點擊范圍,這樣的處理不僅提升了視覺層面,還提升了交互體驗。(圖文結合方式)


          注意交互間距:

          在元素與元素之間一定要有合理的交互間距,不然很容易出現誤選的情況。


          合理利用有效區域:

          在選項較多的選擇器中,我們可以利用好選擇主體控件之外的區域,例如在選擇城市/品牌時,我們可以做A-Z index式字母交互區,幫助用戶快速找到想要的選項。


          9、趣味性

          讓用戶選擇本來就是一件枯燥乏味的事情,如果讓這件事變得有趣那么會極大的提升用戶體驗。


          從文本層面:

          例如當用戶填寫性別信息時,你給予用戶的文字信息并不是“男”/“女”,而是“帥氣的boy”與“酷酷的girl”,這樣會讓用戶覺得這是一件比較有趣的事情,而不是被動選擇。(注:這樣的取名一定要符合產品的特性)


          從視覺層面:

          加入可玩兒性的選項,例如汽車之家的頭像切換,可以選擇自己喜歡的頭像。(頭像并不是強制選擇的,如果不進行操作則是默認選項)


          從交互層面:

          讓用戶去享受選擇。例如Soul的星球首頁就做的非常棒,在未選擇狀態他的人物會360度圍繞著轉動,當然你也可以快速拖拽,或者放大縮小,可玩兒性十足,并且在內部設定了最匹配/新人的高亮顯示,協助用戶去選擇。


          10、合理使用選擇器


          不同的產品在使用選擇器時都各有不同,因為每個選擇器都有他的利弊,而真正要怎么去選擇還要根據產品本身來定。


          那么我就拿目前市面上最常見的5個地址選擇器的類型來分析一下利弊:


          1/多聯動選擇器(平鋪式)


          貨車幫采用的是多聯動平鋪式選擇器,它最大的特點就是能夠一眼就看清楚所有地址,不過地址多時需要花時間去找,只是當你經常使用此功能時便會形成記憶,再此搜索的時候就能形成記憶點擊,效率很高,并且在操作外還有路徑提示,不僅可以幫助你記住層級選項,還可以實時返回路徑進行重新選擇。


          手勢操作:點-點-點


          2/多聯動選擇器(列表跳轉式)


          閑魚采用的是多聯動列表跳轉式選擇器,這個選擇器最大的缺陷就是選擇三級之后用戶可能會忘了上一級的內容,那么就又要切換到上一級,閑魚采用它的原因是因為它只有二級聯動,不存在遺忘現象,不過這樣列表式的選擇效率并沒有平鋪的效率高,人眼習慣掃視橫向內容,所以橫向的內容獲取往往要比縱向的多,在地址選擇器上我個人是不太建議采用多聯動列表跳轉式,因為并不也不直觀。


          手勢操作:滑-點-點


          3/多聯動選擇器(列表式


          轉轉采用的是多聯動列表式選擇器,它的優點是可以根據右側字母來找城市,數據偏大也能夠很快的查找。不過如果在層級的選項中出現錯誤,同樣就要切換到上一級,并且在操作中沒有輔助信息提示。


          手勢操作:滑/點-滑/點


          4/多聯動選擇器(下滑式)


          安居客采用的是多聯動下滑式選擇器,這種形式的選擇器不會遮擋后面的主要內容信息,在選擇完地址之后能立即看到地址的篩選結果。優點是能快速選擇多級地址,并且層級分明,擴展性較強可以做成地址多選。缺點是不適合3個層級以上的地址選擇。


          手勢操作:點-滑/點-點


          5/地圖選擇器


          美團外賣采用的是地圖選擇器,這個選擇器一般用在需要精準定位的生活類APP中,它的優點就是能夠快速精準定位,并且自動錄取定位信息,它的缺點也顯而易見,不能含帶層級并且對范圍也有約束。


          文章來源:站酷   作者:黑獅力

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

          如何量化用戶體驗?

          資深UI設計者

          互聯網下半場,所有的比拼都在產品體驗;然而“體驗”是一個非常抽象的詞,我們怎么把一個抽象的概念拆解成可落地執行的策略,作用到企業中后臺產品上,怎么衡量策略的有效性,這一直是我們團隊面臨的重大課題。

          1.

          業界關于體驗度量的經驗

          目前關于“體驗度量”比較成熟的理論模型當屬 Google 的 HEART 模型,另外還有 ISO 9126 軟件質量模型和Davis 的 TAM 技術接受模型。后人在此基礎上進行了很多實踐,譬如 SAP 的用戶體驗問卷(UEQ)、Oracle 的客戶體驗價值公式(CX)等。公司內部各個 BU 也在不斷的嘗試和探索,譬如新零售技術團隊的 TES 模型。技術團隊研發效能的 DEVA 模型,國際 UED 語音設計的 HII 模型,阿里云的 QoUE 模型??v觀這些模型和實踐,大多是主觀數據和客觀數據的結合。

          如何量化用戶體驗?試試阿里這個新出的「兩章一分法」!

          我們團隊也曾提出過 TECH 、PTECH 模型,但由于模型的操作門檻較高、對埋點數據有不少要求,難以推廣到各條業務線。痛定思痛后,我們決定重新回歸業務,回歸“體驗度量”的初心,去繁從簡,提高通用性。

          2.

          企業中后臺產品的特點

          企業級中后臺產品最大的特點是任務性質非常明確;用戶使用這類產品通常是為了解決某個確定的問題點,期待用新的解決方式降本增效。

          如何量化用戶體驗?試試阿里這個新出的「兩章一分法」!

          桌面研究也表明:可用性問題是軟件行業的普遍問題:在英國,一般商用計算機用戶只有30%-40%的有效生產率;軟件缺陷中,48%是可用性問題。

          正是基于上述原因,我們嘗試提出了“兩章一分”的標準,分別從設計驗收、可用性測試、易用度分數等三個維度對產品體驗進行體檢和把關。

          3.

          什么是「兩章一分」

          如何量化用戶體驗?試試阿里這個新出的「兩章一分法」!

          1. 設計驗收章

          “設計驗收章”主要有 3 個維度:產品還原度、任務流程跑通率、單頁面加載時間。

          產品還原度:指技術同學的最終產出與設計稿之間的差異;

          匯總人工智能線、技術風險線等 5 個產品近 1 年的可用性測試結果。除功能、性能問題外,高頻體驗問題主要集中在“幫助引導”、“操作反饋”、“任務流程”、“概念術語”、“功能入口”這 5 個方面。同時,結合之前項目沉淀的設計經驗和設計工具,我們最終將“產品還原度”的子維度定為“信息導航”、“幫助引導”、“操作反饋”、“文案名詞”;每個子維度用 2-3 句描述來進行評分。

          如何量化用戶體驗?試試阿里這個新出的「兩章一分法」!

          任務流程跑通率:驗收確認能跑通的主干任務流程數,在所有主干任務流程數中的占比;舉個例子,設計稿中枚舉了 10 條主干任務流程,驗收發現其中 9 條已跑通,那么任務流程跑通率就是 9/10*100%=90%。

          單頁面加載時間:接入雨燕性能指標數據的產品看“首次有效渲染時長 fmp”這個指標;未接入的產品直接主觀判斷,超過 3 秒的視為不合格。

          2. 可用性測試章

          “可用性測試章”也在驗收階段執行,同樣有三個參評維度:最終完成率、人均求助次數和高阻礙頁面。

          如何量化用戶體驗?試試阿里這個新出的「兩章一分法」!

          我們沒有考慮將可用性測試的常用指標——操作時長作為參評維度,主要原因是企業中后臺產品類型多、使用場景復雜程度各自不同:用語雀創建企業空間只需要 5 分鐘;用云鳳蝶搭建一個后臺頁面可能需要 60 分鐘,用 sofa stack 創建并發布一個應用可能需要 2-3 個小時……難以確定可以作為標準的具體操作時長。

          3. 易用度分數

          “易用度分數”標準為 5.5 分。

          4.

          「兩章一分」的實踐

          1. 案例實踐現狀

          截至 2020 年 9 月,已有 58 個 產品實踐過“兩章一分”系列方法,基本覆蓋平臺設計團隊支撐的重點項目及 UV 超過 100 的產品。詳細數據如下圖:

          如何量化用戶體驗?試試阿里這個新出的「兩章一分法」!

          完整體驗“兩章一分”的 18 個產品,僅可用性測試就幫助發現 364 個問題,平均每個產品發現 20 個問題;其中,“九州2.0 發布部署”發現問題數多達 53 個。

          如何量化用戶體驗?試試阿里這個新出的「兩章一分法」!

          2. 實操經驗提煉

          設計驗收:共創式驗收

          企業中后臺產品生產階段中,由于一般沒有專門的測試同學,因此設計驗收都是由設計師或 PD 單獨執行,沒有作為必選環節,有時候甚至會因為開發周期緊張而直接略過;既沒有方法論,又缺乏儀式感。

          “兩章一分”的實踐中,我們首次踐行“共創式驗收”,以項目組會議的方式,邀請各個角色共同參與到驗收環節中:如果產品沒有什么技術門檻,那么各個角色分別獨立操作核心流程;如果產品有一定的技術門檻,則由技術同學操作核心流程,同時共享屏幕,其他同學從旁觀察。操作完畢后,項目組內共同討論發現的體驗問題,并將問題落地到 Aone 中進行排期管理落地。

          如何量化用戶體驗?試試阿里這個新出的「兩章一分法」!

          可用性測試:引入“技術支持”+圈定測試人數+ 線上測試降成本

          • 引入“技術支持”

          企業中后臺產品通常有一定的技術門檻,以 SOFAstack的測試任務為例:

          使用 sofaboot 技術棧,創建 “hello world” 應用,通過“經典版”發布部署模式發布成功。

          測試過程中經常會出現一些涉及到底層技術系統的問題,非設計同學能解決,因此我們建議做企業中后臺產品的可用性測試時,需要配備至少一名技術支持同學,以備不時之需。

          • 圈定測試人數

          如何量化用戶體驗?試試阿里這個新出的「兩章一分法」!

          Jakob Nielsen 在 2000年提出測試 5 人就能發現 85%的可用性問題;結合我們的實際業務場景:有些產品真實客戶非常難找;前期“共創式驗收”已跑通核心主干流程;因此我們將測試人數限制為 3 人。

          • 線上測試降成本

          我們開始實操案例時,恰逢疫情期間,于是就引入了線上遠程測試的方式;后續實踐下來,發現遠程測試能在觀察、分析階段顯著降低執行成本。

          通過釘釘或阿里郎發起視頻會議,邀請參加測試和觀察的同學入會,請測試用戶共享操作屏幕,主持人錄屏捕捉用戶操作軌跡,PD、技術等項目組成員從旁觀察。測試結束后,使用語音轉文本工具,快速將音頻轉成文字。這種模式最大的好處有兩點:

          • 突破了距離和觀察人數的限制;從實踐來看,現場測試結合遠程測試的模式,至少能同時對 2-3 人進行測試,執行成本減半;
          • 語音轉文本后,顯著提升了分析效率。

          如何量化用戶體驗?試試阿里這個新出的「兩章一分法」!

          執行階段的多樣化

          最開始提出“兩章一分”的時候,我們原本希望這套標準能被作為判斷產品體驗是否好用,能否上線的標準之一;但實際并未推動成功。這里面有很多原因,其中一個非常實際的問題是很多產品需要調用線上數據庫才能跑通核心流程,在測試階段沒法跑通;這就導致在測試階段做可用性測試無法真實還原用戶場景。

          此外,設計師或 PD 新接手某款產品時,也希望能通過可用性測試的方式來快速了解產品問題。回歸到“兩章一分”的初心——幫助產品發現體驗問題,因此,我們拓展了方法的執行階段,不再局限于測試或驗證階段,只要場景適合,都可以用。

          3. 典型案例:LinkE 研發運維中心一期

          產品簡介

          LinkE 研發運維中心是云通未來 Serverless 戰場的重要產品;業務方希望用該產品來整合研發同學日常高頻使用的研發、運維、中間件平臺,大幅減少平臺割裂和跳轉,提供沉浸式的產品體驗。

          目前該產品還處于 0-1 建設的階段。

          實踐過程

          • 為了確保產品體驗良好,設計師在驗收階段引入“兩章一分”,進行共創驗收和可用性測試;
          • 共創驗收階段,邀請 PD、技術 等 8 名同學一起參與,最終結果為“通過”;
          • 可用性測試階段,設計師根研發通用場景,招募 6 名研發同學參與兩個可用性測試任務,分別為:任務 1,基于代碼變更完成研發自測聯調;任務 2,基于發布完成分支的集成、預發、灰度、生產

          結果用戶在任務 2 遇到高阻礙頁面,導致可用性測試結果為“不通過”,任務 2 的易用度分為僅 4.4 分,顯著低于 5.5 分的參考標準;最終發現 30+ 問題點,并推動 PD 思考產品邏輯設置是否合理。

          如何量化用戶體驗?試試阿里這個新出的「兩章一分法」!

          實踐效果

          • 經過兩次完整實踐,LinkE 設計師已能完全獨立操作執行“兩章一分”;
          • 業務方的參與度 & 認知度提升明顯:已開始習慣將“兩章一分”設為項目里程碑,并全員參與進來。

          如何量化用戶體驗?試試阿里這個新出的「兩章一分法」!

          4. 實踐總結

          在實踐過程中,我們發現企業中后臺產品的典型場景大致可以分為 4 個場景;不同場景面臨的設計項目有所偏重;不同設計項目在體驗度量方面的切入點也有所不同。譬如:云鳳蝶是一個典型的沉浸式畫布頁面,所有操作幾乎都是通過編輯器屬性面板來調整,那么如何來評估編輯器的效率呢?通過一系列實踐和思考,我們提出可以通過“高頻屬性查找、配置的步驟數和時間”、“設置相同組件屬性的耗時變化”等指標進行衡量。以下是我們根據不同典型場景、設計項目提出的體驗度量切入點。

          如何量化用戶體驗?試試阿里這個新出的「兩章一分法」!

          5.

          「兩章一分」的未來

          經過 S1 長達幾個月的探索:我們制定了“兩章一分”的標準;對 30+ 產品進行了易用度分數的測試,捕捉分數基線;提煉實操方法技巧,并賦能給各位設計師;聯合設計師和業務方跑通近 20 個案例。不管是問題發現數量,還是設計師、業務方的主觀反饋,都讓我們堅定“兩章一分”在企業中后臺產品體驗優化中是一個相對有效的模式。為此,S2 我們打算繼續深化。

          如何量化用戶體驗?試試阿里這個新出的「兩章一分法」!

          • 落標準:在關鍵業務線將“兩章一分”落地到業務生產環節中,不過“兩章一分”就不能上線;
          • 分基線:區分不同產品類型和迭代大小,制定不同的易用度分數基線;
          • 升方法:針對跨產品、跨域等難以推動的橫向體驗項目,我們考慮升級方法,如將可用性測試升級為“用戶體驗日”,以便更好地推動問題落地;
          • 閉案例:針對 S1 已跑通的業務,我們會在 S2 進行案例閉環測試,以驗證優化效果是否真的能在“兩章一分”上體現出來;
          • 始運營:我們會挑選一些案例在公司內外發聲,找相關業務領域的團隊進行交流和探討;并從案例中總結和提煉設計技巧,幫助業務成長。

          總結

          我們團隊當前支持的企業中后臺產品以 0-1 階段產品為主,PD 通常缺少用戶意識和體驗優化手段,這就導致了設計稿還原度較差、產品上手門檻較高。針對這一現狀,我們嘗試性地提出了“兩章一分”這個評價標準,從設計驗收、可用性測試、易用度分數 3 個維度來評價產品當前的體驗現狀。

          通過 S1 50+ 產品的實操,我們一邊不斷完善評價標準和實操經驗,一邊總結體驗度量經驗;共幫助 18 個產品發現 364 個產品,并在 link 、sofa 等重點產品線中落地到業務生產環節中,在業務方層面收到良好反饋。

          在這過程中,我們總結了適合不同場景、不同設計項目的體驗度量切入點,驗證了這種方式在當前企業中后臺產品中確實有效。后續我們將嘗試細化標準,閉環案例,對內對外發聲等方式,更好地推動體驗思維在企業中后臺產品生根發芽;同時,也期待能跟對這塊感興趣的同行朋友們多多交流。


          文章來源:優設   作者:
          AlibabaDesign

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

          構建用戶畫像的流程與方法

          ui設計分享達人

          用戶畫像作為一種設計工具,可以很好得幫助設計師跳出“為自己設計”的慣性思維,聚焦目標用戶,發現核心價值,賦能產品。


          前言

          在產品研發過程中,產品、設計、研發等人員經常會提到“我們要為目標用戶設計”、“我們的用戶是誰”等字眼,可見找準目標用戶在產研過程中至關重要。用戶畫像作為一種設計工具,可以很好得幫助設計師跳出“為自己設計”的慣性思維,聚焦目標用戶,發現核心價值,賦能產品,在互聯網各類型產品中有廣泛的應用。

          本文將介紹用戶畫像概念、價值以及如何從0到1構建用戶畫像,希望閱讀后能讓大家了解用戶畫像相關理論,并有助于后續對用戶畫像的深度學習。

          什么是用戶畫像?

          目前業界常使用的用戶畫像概念有2種,一種是User persona,一種User portrait,也有翻譯為User profile。

          第一種用戶畫像,即User persona,根據Alan Cooper的《About Face》,是基于產品對真實世界的觀察,抽象出來的具有代表性的虛擬用戶模型,有時也被稱為綜合的用戶原型(Composite User Archetype)。這個概念最早由Alan Cooper在《The Inmates are Running the Asylum》(軟件創新之路)一書中提出,后續在多處書籍進行了不停的完善。

          這個畫像主要特征如下:

          1、描述一個用戶畫像包括角色描述和用戶目標

          這里角色描述是指如名稱、年齡、位置、收入、職業等,這類角色描述主要是為了使用戶畫像更豐富、真實,具象;重點關注的是用戶動機,用戶目標是其動機。

          2、可以代表相似的用戶群體或類型,也可以代表個體

          User persona是抽象的、虛擬的,代表一個典型的用戶群體;雖然也可以代表個體,但個體并不是實際獨立的個人,而是從實際觀察研究中綜合而來。

          3、須針對具體情境-具體產品的行為和目標

          User persona研究的是用戶在具體情境下對產品的使用,關注其在一定范圍內的行為、態度、能力、動機等。即使同一個角色,在不同產品下的動機也是有差異的,一般來說不輕易在不同產品間復用,需要考慮不同類產品的切入場景。

          第二種用戶畫像,即User portrait,是指用戶信息標簽化,通過收集用戶多維度的信息數據(如人口統計屬性、社會屬性、行為偏好、消費習慣等),并對其進行統計、分析,從而抽象出的用戶信息全貌,相比user persona,它更側重于數據挖掘、標簽體系搭建。

          這類畫像主要特征如下:

          1、真實性:集合了每個個體的真實信息,如既有人口統計屬性等靜態信息,也有用戶行為的動態信息。

          2、時效性:用戶動態信息并非一層不變,可以實時追蹤其變化。

          3、覆蓋度廣:既能監測到用戶感興趣的內容,也可以看到其不感興趣的內容,維度眾多,顆粒度粗細均有。

          以下是這2類用戶畫像的簡要差異對比:

          本文重點介紹第一種用戶畫像(user persona),至于如何創建數據畫像標簽及應用,會在后面的文章中介紹到,此處不再贅述。

          用戶畫像的價值

          用戶畫像作為一種設計工具,其作用貫穿產品生命周期的前中后。結合設計工作的幾個階段,畫像的價值主要有:

          1、設計前:幫助確立產品定位、目標

          2、設計中:幫助確立設計目標、設計策略與準則

          3、設計后:促進其他工作,如市場推廣、運營活動、銷售規劃


          用戶畫像的構建流程

          整體來說,用戶畫像(user persona)多采用定性的研究方法來進行角色劃分,主要可采用的資料來源有:人種學研究、情境調查、觀察法、訪談法、桌面研究等,具體實行時會根據業務情況稍作調整。

          本文結合酷家樂-快搭、贏客2條業務線經驗,梳理了從0到1構建畫像的流程與方法,如下圖所示:

          Step1:確立目標與畫像維度

          明確業務目標與用戶角色,不同的角色與目標在收集信息時有所差異,進而影響到最終得到的畫像結果。因此在做畫像之前,需要考慮清楚畫像目的。明確目標后,就可以結合目標與角色,制定出畫像信息維度。

          此處有2個注意點:

          1、通用信息有哪些?2、如何篩選出目標用戶?

          針對第一點,通用信息維度可以結合用戶畫像的構成要素,自身業務情況有選擇性的摘取。這里需要注意,to C和to B類的信息維度會有些許差異,比如to C屬性產品會關注用戶的性別、年齡、家庭情況、愛好習慣等,而to B類則不太關注這些,它們會更側重用戶的工作能力、工作內容、使用工作等等。

          用戶畫像構成要素匯總:


          針對第二點,由于是創建用戶畫像,我們需要盡可能覆蓋不同用戶。那找誰進行研究呢?這里介紹2個小tips。

          Tips1:用戶篩選條件

          尋找與業務緊密相關的產品、運營,一起討論確定用戶類型,在討論中我們會定義符合條件的用戶,得出一張用戶篩選條件表,進而根據這張表邀約用戶。

          Tips2:工作職能篩選

          針對一些to B類崗位職能劃分清楚的產品,可以基于工作職能尋找用戶。實操中需要結合實際情況,看是否需要區分管理崗與普通執行崗。

          以快搭智能設計業務線為例,在用戶畫像項目中

          業務目標:整體全面的了解用戶特征、產品認知、使用場景與痛點

          目標用戶:考慮目標是希望先對快搭工具側使用用戶有個全面、整體的認知,問卷法中D端&B端用戶有訪問&開通過快搭行為都算,而在深入挖掘場景與痛點時,結合問卷的反饋,D端和B端重點尋找活躍用戶,并細分了用戶身份類型。

          這2者結合,最終梳理出快搭的用戶畫像維度。


          Step2:確立調研方法

          確立畫像信息維度后,需要結合用戶、時間精力、經費等因素,選擇合適的調研方法以實現信息收集。常用的調研方法有3種:

          定性研究:如訪談法、二手資料研究

          定量研究:如問卷調研、數據分析

          定性+定量:上面2種方法的結合。


          每種方法如何選擇?可以從調研方法的差異性、產品所處生命周期,再結合實際時間精力、經費等情況酌情選擇。

          1、調研方法的差異性

          定量和定性是一個相對的概念,定量法著重了解“是什么”,即發現用戶做了什么,挖掘事實信息。而定性方法著重了解“為什么”,即挖掘用戶行為背后的原因,從而理解現象。

          2、與產品生命周期對應的調研方法

          新生期:這個時期產品尚未定型,目標用戶也在市場探索中,可以嘗試通過訪談法,找專家用戶或競對產品的用戶,重點挖掘TA們使用產品的場景,核心痛點是什么,以便進行MVP版本的驗證。

          成長期:這時產品已經進入用戶快速增長時期,隨著體量的變大,用戶會出現分層,暴露的問題也會越來越多,可以嘗試通過定量法進行用戶分層,再輔助定性了解每類用戶,針對性解決問題。

          成熟期:用戶體量趨于平穩,產品一方面需要維穩,持續滿足現有用戶的需求,提升產品體驗;另一方面需要嘗試突破,找到細分市場,以挖掘新的增長點。可以嘗試先定性挖掘藍海,再定量進行驗證。

          衰退期:定性了解原因,調整產品。


          以快搭智能設計業務線為例,綜合了目的、產品周期、調研方法、時間精力等因素,采用了數據+問卷+電話訪談三種方法結合。

          Step3:制定計劃與數據收集

          在明確目標與方法后,需要對整個研究進行細化,制定具體詳實的執行計劃并落地,把控整體節奏以收集有效的信息。

          例如,若使用問卷法,則需要進行問卷設計——被訪者選取——問卷投放——問卷回收。若使用訪談法,則需要準備訪談前中后的相關資料。采用不同方法,執行環節需要注意事項有所不同,可以針對性查閱相關方法的工具書、文章,此處不再贅述。

          Step4:分析資料,角色聚類

          第三步驟收集整理到有效信息后,需要識別關鍵的行為變量,將調研到的用戶與行為變量進行一一對應,并識別差異化行為模式。

          在尋找可能導致用戶間行為差異變量時,結合以往經驗,筆者總結了一下可供參考的維度。

          以行為變量為依據進行用戶對應時,不必追求絕對的精準,只要相對能映射清楚即可。梳理完后,觀察可發現某些用戶群體聚集在幾個行為變量上,它們構成了一個顯著的行為模式,由此聚類出某個角色類型。依此類推,可以發現幾個不同的行為模式。為保證全面,映射完最好遍歷一下,檢查是否有用戶或變量的遺漏。

          以快搭為例,用戶在使用智能設計工具時,行為變量可細分為:職業類型、專業技能水平、使用方式、看重因素等等,一一對應后聚類出幾大類角色類型,比如其中一類追求速度,看重整體效果;另一類,重過程,講究細節。

          除了上述方法外,針對to B類的企業級產品,當用戶的職能屬性很強時,可以將企業職能作為劃分角色類型的依據。這時,只要針對每類角色抽樣出典型樣本,保證完整性,進行調研即可。

          Step5:綜合特征,產出畫像

          完成角色聚類后,梳理每類角色的行為、目標、痛點等維度特征,形成畫像的基本框架,并對每個角色進行屬性信息、場景等詳細描述,讓畫像更加豐滿、真實。

          此時需要注意:

          1、雖然網上有提供很多畫像模板,但只是參考示例,大家需要根據自己收集到的信息,制作屬于自己業務的畫像;

          2、最好為每個畫像貼上一張符合角色特征和所處環境的照片,傳遞更加情感化的信息,帶入感更強。

          3、確立畫像優先級。根據Alan Cooper的建議,一個產品最好不要超過3個用戶角色,在得出畫像后,需要結合覆蓋人群基數大小、收益潛力、競爭優勢、業務規劃等維度去評估重要程度,定義好主要角色、次要角色、補充角色等

          4、用戶畫像作為一種設計工具,不是一層不變的,需要隨著時間推移不斷進行迭代,在產品積累了一定用戶量時,可以使用定量法進行驗證,補充優化更多維度信息。


          用戶畫像框架

          以快搭為例,某類角色-銷售型導購畫像如下:

          Step6:結合產品,畫像落地

          用戶畫像只有落地,助力產品設計,才能體現其價值,否則就是空中樓閣。

          在創建完畫像后,可以組織分享畫像結果,讓團隊內成員對服務的用戶達成共識,進而探討產品的新機會點或改進點,逐步落地到產品設計、推廣營銷中。用戶畫像在設計前中后如何應用,后續有文章進一步詳解,本文不再贅述。

          文章來源:UI中國   作者:酷家樂用戶體驗設計

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 平面設計服務


          原來設計規范要這樣理解,早知道就好了!

          周周

          1.什么是設計規范?


          設計規范是一個老生常談的話題了,網上相關的文章也非常多,但我相信有很多設計師對設計規范的理解還是比較模糊,認為設計規范指的就是字體,顏色,控件規范那些,這種理解其實是比較狹隘的。


          于我而言,設計規范用一句話總結就是:設計規范是針對特定產品所制定出來的一整套產品標準,包括流程標準,技術標準,設計規則等等。通過這套標準,能減少錯誤發生率并提高設計質量和輸出穩定性。


          舉個例子,我在做QQ3D厘米秀項目的時候,一開始合作方提交的設計資源正確率很低,風格也各不相同。然后為了解決這個問題,我在項目中定義了流程標準,資源標準,cp合作標準等等。通過這些規范讓多個不同設計團隊能合作到一起,提升了整體協作的效率和質量,這些標準就成了設計規范的一部分。

           

          514dce736beaa30c87958009b78fc82e.jpg

           

          可以說,每個項目因合作方式,人員習慣,落地形式的不同,所形成的規范是有區別的。所以,設計規范更應該是針對項目來說的,除非是問你AndroidiOS這種已經廣泛適用的平臺級規范。不然是很難有標準答案的,回答更應該是一種思路的描述,比如你會如何定義一套規范、解決了哪些問題以及如何驗證這套規范真的助力了產品的體驗提升。


          2.設計規范的作用



          1)遵守用戶習慣,減少認知成本

          Don't make me think。大家都知道,好用得產品都是盡可能的減少用戶思考,不斷去貼近用戶的使用習慣。比如在iOS系統里想返回上一個頁面時,你會熟悉的去左上角找返回操作,但如果把返回操作放在右上角就會很不習慣;再比如對國內用戶來說,他們習慣正確按鈕用綠色,錯誤按鈕用紅色,如果你非要反過來制造所謂的差異化,用戶就會感到困惑,誤操作的概率也可能會大量增加。

           

          3a186e36427aa7cb980f9fef4aab06f0.jpg

           

          2)統一品牌性格

          品牌性格不論是大到公司層面,還是小到具體某一個產品,都需要有一套品牌識別體系來約束,只有統一得視覺印象才能更好的讓用戶記住。那這些品牌識別體系其實也是設計規范的一部分,在具體執行中,可以根據一些品牌核心概念規范快速做一些風格決策。
          比如騰訊QQ的品牌影像風格關鍵詞是青春、互動,敘事和干凈,那么在選擇畫面配色的時候就可以根據關鍵詞指導畫面的選擇,使得整體的畫風得到統一。

           

          64d113f1c0ef185dbafc8e506b1b64ab.jpg

           

          3)降低新人學習成本

          這里所說的新人不單純指剛入職場的設計新人,也包括剛參與到一個新項目的設計老手,設計規范是能夠以的溝通成本實現快速上手。有成熟的控件資源和標桿的設計參考,就算是之前完全沒做過的設計師也能搭建出一個還不錯的頁面。

           

          85aa22462457a692f4cbc5f1b33d2697.jpg

           

          4)提高開發效率

          有了好的設計規范,開發就能把一些常用的樣式進行封裝,在需要復用的場景中直接調用。這樣做,一方面可以通過調用的方式減少樣式代碼的復制使用,提升效率的同時降低軟件包體積,另一方面也可以減少不必要的工作量,方便后期維護。

           

          321b7b91cfcb6febb9232766a53408da.jpg

           

          5)保證設計的一致性

          有設計規范的約束,能讓團隊在一個既定的框架內做設計,統一大家的輸出質量,從而保證設計的一致性。

          3.怎么學習設計規范


          設計規范的學習肯定不是靠死記硬背,而是要講究方法,從我自身的經驗來說,我覺得大致可以有以下2個步驟:
          1在新手期,多去看一些大廠的設計規范,先建立認知,不要求全部記住。把這些規范當成字典,先大致了解一遍,等真正做的時候拿不準再去查閱就好了。這里推薦幾個必看的大廠設計規范官網,建議收藏。
          蘋果iOS設計官網:https://developer.apple.com/design/human-interface-guidelines
          谷歌Material Design設計官網:https://material.io/design
          微軟Fluent Design System設計官網:https://www.microsoft.com/design/fluent
          IBM設計官網:https://www.ibm.com/design/language
          Facebook設計官網:https://design.facebook.com
          螞蟻金服設計官網:https://ant.design/index-cn

           

          cec0eee09ad1a5fe35afea81d7be1e51.jpg

           

          其實網上很多設計規范,原理之類的文章,源頭都來自于這些大廠規范,想獲得一手信息,最好是自己去這些網站多看看。
          這也就是我為什么不寫具體規范數值的原因,因為網上的資料實在是太多太詳細了,寫一些重復的知識實在是沒多少價值。學知識的路上一定不要什么都等別人喂給自己,需要更多的主動性,這樣才能提升自己的學習能力和解決問題的能力
          2
          針對自己要做的模塊,有針對性的找市面上大廠的應用作為參考,直接截圖標注,自己總結規律印象會更加深刻。
          我開始做UI的時候就這樣學習的,不知道字體該用多大,間距用多大,顏色怎么用,就直接去找相類似的界面截圖參考,量它們的尺寸,吸它們的顏色,然后就這樣一步步的把規范經驗積累起來了。
          比如從QQ的動態tab頁面中,我們可以借鑒到很多信息,比如列表的高度,列表左側的圖標尺寸和圓角,間隔線高度和配色,右側的箭頭大小和配色,列表文字的字號和配色,用戶頭像大小和結合的樣式,圖標與文字的間距等等。這些借鑒并非是抄襲,要你做的跟這個界面一模一樣,只是參考這里面的某幾個屬性然后結合自己的產品綜合運用,減少出錯。

           

          0d51a9a4f66b658e69bf2bf339d7e540.jpg

           

          發現了嗎?一個優秀的界面設計,上面的任何信息其實都可以拿來參考,就看你會不會用了。

          需要強調的是,這些參考來的標準,并非是標準答案,還是要根據自己的實際項目需要做調整,只是至少知道一個范圍,在這個范圍內不大會犯錯。

          這就像剛開始做設計時一樣,去參考這些規范相當于做臨摹的練習,這種臨摹是需要的,臨摹的過程中不斷加入自己的思考,然后通過總結,變成自己的知識體系。

          4.怎樣定義出設計規范


          隨著對設計規范理解的加深,自身設計能力的不斷提高,就要開始從設計規范的使用者轉變為規范的制定者了。如何制定針對項目的設計規范呢?我的經驗是在項目過程中把做的好的和踩坑后的正確解法進行總結,并形成文字,積累多了就形成了規范。要把每一次遇到的問題都當成是一次改進流程和規范的機會。
          我自己是有隨時記錄的習慣,項目中一旦發現問題就會趕緊把它記錄下來。有時候甚至還蠻期待出現問題的,因為出了問題才能找到優化的機會,自己也能從中找到解決問題的成就感。
          曾經在QQ3D厘米秀項目中遇到過非常多的坑,然后從填坑的過程中慢慢總結出各種設計規范,去幫助項目減少錯誤率,提升設計質量。從最終的產出和結果來看,自身的進步是可觀的,對產品的幫助也比較大,所以很值得去做。

           

          12198423a536ff1d106cd06770d7098d.jpg

           

          5.使用規范會影響設計的創意性嗎?


          剛掌握設計規范的時候,干活是特別舒服的一件事,因為做需求可以很快,好像拼拼組件就能完成。但稍微做久一點時間,又會覺得好像沒啥進步,天天拼組件,擔心影響設計的創意性,真是挺矛盾的。
          其實,規范也是要在遵守和引領用戶習慣中不斷迭代的。既要保持大的設計規范框架不變化,又要在設計的過程中給用戶制造驚喜。比如,整個UI的配色和字體需要保持統一,但在一些圖形,動效上可以做出亮點,讓用戶在整個使用體驗中既是沉浸的又能有些小驚喜。規范的打破與重建一定是需要一個動態平衡的過程

          總結


          設計規范絕對不需要死記硬背,而是要充分理解并靈活使用,才能發揮它的價值。隨著UI行業的不斷成熟,設計工具的簡單化,各種組件化資源和思維越來越普及,可以預見的是未來一般的UI界面會高度組件化,設計師單純在界面上花費的時間可能會越來越少。
          這從行業的發展來說,減少了很多體力勞動,讓設計和開發有更多的時間去打磨產品細節,肯定是好事。但對設計師自身來說,省下了以前那種常規設計需求的時間后還能做些什么,設計師的價值又在哪?值得每個設計師去思考。

           

          文章來源:彩云譯設計     作者:彩云


          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 平面設計服務



          深度解析設計系統

          資深UI設計者

          你覺得設計系統重要嗎?那目前手里的設計系統是在靈活運用?還是落灰、擺設?你對設計系統理解有多深?它在你的設計中有多大的用處?節省時間、減少出錯率、視覺一致性還是僅僅覺得就應該有個規范?那怎么避免設計系統帶來了統一和便利,但同時失去了變化和新鮮感?





          設計系統是今年來熱門的話題之一,想要帶來良好的用戶體驗,設計系統就是其中重要的一環,那它和設計規范、設計模式、設計語言、設計原則有什么關系?


          設計系統

          設計系統用一套連貫組織、相互關聯的模式和共享實踐以達到數字產品的目的。簡單的說就是一系列可重用的組件和它們的使用指導文檔,在制作這些組件的過程中會考慮到公司的設計理論和品牌化(顏色,文案,字體等等),所以它們也通常包括在設計系統里。設計系統為公司的各種產品提供了基石和指導。是一種動態的,是需要維護與改進的。


          設計模式

          設計模式是一種經常性,可重復使用的解決方案,可用于解決設計問題,我們經常會說解決整個方案我們要運用什么樣的設計模式。


          設計語言

          設計語言是把設計作為一種“溝通的方式”,用于在特定的場景中進行內容與信息的傳遞。設計語言可以理解為由品牌基因+設計規范+多場景應用三大要素組成的一套設計應用規范系統。


          設計原則

          設計原則可以理解為設計語言中的語法,是構建設計語言系統的起點,用于傳達品牌主張或設計理念,它將指引業務設計執行的方向。


          比如Airbnb的設計原則可以簡單歸納為幾點:

          設計規范

          設計規范對于設計師來說并不陌生,日常工作中也經常使用。圍繞在某種風格或者大型設計項目下形成可視化、數據化的標準,針對相對獨立的體系建立的統一遵守條款。統一的設計規范不僅有利于設計師提升效率,同樣可以幫助產品、開發、運營、測試等相關人員對產品的體驗有更好的認知。


          那是不是只要制作一套設計系統,在團隊進行擴散就可以了?那平臺的統一性就解決了?


          我曾經加入一個設計團隊,看到平臺風格不統一,當時很自豪很堅定的制定了一套平臺設計規范,從色彩體系、文字體系、icon體系、botton體系以及其他的一些UIKIT體系,還有交互方面。當時一心想著有這個規范寶典在手,平臺統一性指日可待,沒想到這個規范就成了我自己的規范,僅僅是我在自嗨。

          為什么已經建立設計規范了,還是沒能解決平臺統一的問題?這里延伸出另一個問題,為什么其他設計成員不用?協作不起來?是它不夠好?我嚴格按照標準來,為什么推不起來?


          那要追溯到設計體系的目的是什么?它的意義何在?

          1-建立統一的設計文化體系

          2-保證多團隊成員共同參與的項目視覺一致性

          3-提升品牌調性

          4-節省與研發人員的溝通成本

          5-將元素組件化,提升設計師和程序員的工作效率

          6-可以幫助設計人員有針對性地對視覺元素進行優化和迭代。

          7-在用戶層方面,對某產品的體驗一致性得到落實

          8-減少設計出錯率

          ……


          整體可以歸納為

          1-對內統一,對外區分

          2-管理與協作變得方便

          3-建立設計文化體系,建立品牌感

          4-減少、優化錯誤出現


          對內統一,對外區分

          規范定義的基礎是圍繞某種風格或者設計文化。對內統一,一個品牌的設計風格,是要有別于同類競品的,比如阿里云、騰訊云,他們各自都有自己的品牌調性。在對外上兩個品牌是做到了對外區分,一眼可以識別出來。他們有各自規定的一套設計語言、設計規范。這樣才能在協作上達到對內統一。我們都不希望在阿里云的網站,各個頁面的設計差異明顯,像跳轉到其他平臺。而這些針對用戶層一致性都是非常重要的體驗。


          undefined



          管理與協作變得方便


          for Designer:

          多個設計成員協同一個產品,迭代與更改規范都能更快的同步??梢栽囍胂笠幌乱粋€幾十人的設計團隊,如果沒有統一設計規范,那網站會變成什么樣子。


          for Developer:

          在UI還原中,設計需要經常與前端進行溝通“這里這里這樣做,那里那里這樣做”,對于每一塊的設計,前端都會詢問你,這樣大大增加了溝通的成本,把時間花在了無效的事情上。

          設計規范統一后,減少了無效溝通,可以更專注創新方向,比如:要改變預先設定的一個輔助色,無論是設計還是開發,修改組件的顏色,全局使用到這個組件的地方都會改動,大大節省了設計時間。


          建立設計文化體系,突出品牌感

          做品牌的時候需要制定一整套VI規范手冊,那平臺同樣也需要統一的品牌感。建立統一的文化體系可以讓用戶無論處在哪個頁面都會有熟悉感、掌握感。統一的元素、視覺風格、交互方式,更加突出該品牌應有的調性。無論你在聽網易云音樂還是QQ音樂,看到界面都可以立馬識別出這是哪個app。



          undefined


          你能分出哪個是網易云播放界面,哪個是QQ音樂播放界面嗎?


          減少、優化錯誤出現

          設計經常碰到設計完后需要修改一個點,然后就要找出設計稿中所有相同的地方進行修改,這樣很容易漏,統一規范后只需要修改組件即可。盡可能的避免錯誤的出現。


          設計規范的意義這么強大,對網站及品牌有至關重要的作用,那為什么還會出現沒有應用起來的情況呢?

          很多設計師會說:“設計不就應該是變化多端的嗎?就是要表現創新力呀?制定了設計規范是不是就失去了變化和新鮮感?那設計還有什么意義?開發都可以做設計的事情了?!?


          這里就要看設計規范理解的深度—設計規范是分層次的,平臺規范歸根結底是為了確保產品的易用性,是為了減少用戶的學習成本


          對無法拆分的底層基礎元素做嚴格規定

          底層基礎元素也可以說是全局樣式,比如色彩規定、文字大小、icon線/面、botton體系等一些基礎的元素,給用戶一種統一的視覺形象,在跨界面、跨端、跨系統間有熟悉感,從而潛移默化地進行品牌的滲透。



          增強界面設計的靈活性和可維護性

          對組合自由度較低的基礎組件做精簡的樣式變化限定,對組合自由度較高的復合組件減少過于局限的限定條件,考慮各種拓展的可能性。組件在制定過程中要考慮多種狀態,多種可能。



          設計規范隨著業務的發展或技術的變革終究是會過時的,是需要迭代的。

          設計規范是需要迭代的,而不是我只要制作出來就放那了,就像女生買衣服,去年的衣服已經配不上今年的我,嘻嘻

          ~~希望我每天都有新衣服穿,做夢中~


          對設計體系的誤解

          設計體系最大的重要性毋庸置疑就是規范節省人力,設計師可以更多的時間去發揮創造性。


          誤解1-設計系統限制了設計師的創造力

          很多設計師覺得統一了規范,那我的創造性從哪發揮,界面都長的差不多。在設計中,設計目的是解決商業或用戶的問題,并不僅僅是為了有創意而引入新的樣式或交互方式。


          有了設計體系,統一了整體品牌風格,不用把精力花費在比如調整間距、對齊元素等瑣碎的事情上,更多的回去關注更全局的設計策略。


          誤解2-設計系統只關乎設計,可由設計師獨立完成

          它僅僅是設計軟件上可復用的組件,所以可由設計師獨立完成,這種想法是錯誤的,是需要來自不同角色支持和參與的,這里包括前端、品牌、動態設計、 用戶研究等。


          誤解3-設計系統是一勞永逸的

          有時候會想只要完成了規范就大功告成了,其實不然,對待設計規范就像對待產品一樣,是需要維護和改進的,包括兩個方面:一種是對內部使用的開發以及同事,一種是對用戶的,應該定期收集用戶以及同事的反饋,確保及時更新迭代。


          誤解4-設計系統的重要性

          1-提高設計開發效率,最顯而易見的好處就是,組件庫的可復用性。

          比如像表格、彈窗、顏色等。一些基礎的組件只需要做一次。

          2-確保設計一致性,為用戶提供連貫一致的用戶體驗,設計的一致性讓用戶能縮短的學習使用產品的周期,讓他們能夠預見他們的操作所帶來的改變。

          網站統一的視覺規范、交互體驗,會讓用戶產生一種掌控感。

          3-設計系統促進了公司內部的合作和交流,一個成功的設計系統是需要跨功能團隊參與,設計系統因此促進了公司內部不同職位的合作和交流,這種文化的建立也會幫助公司更有效地推出新的產品或服務。


          那我們要如何去執行呢?

          已經了解了規范的目的/意義,那該怎么去著手呢?


          • 對于設計規范的意義要同步給設計人員,提高認知,這是一件提率的規范,規范必須落地。

          在制定規范前期,不應該是一個人規定這個規范,設計團隊的成員應積極參與,前期先把規范的基調定好,人人都參與進來了,規范也就能更好的運營,當時我就是一個人定了規范,只是單純把規范發給其他設計人員,他們沒有參與,自然不會使用規范,對里面的設計元素沒有加深理解。


          主導人

          這個主導人建議讓全隊專業能力最強的人輔助產品戰略分析進行。有全局把控能力,這樣能把紕漏降到。

          undefined


          • 應用規范里的界面、交互規范必須得遵循

          大家一般說的設計規范是界面的視覺規范,從UI的定義,User Interface—用戶界面,用戶與界面之間的交互關系,可以歸納規范其實可以包含兩大類,一類是視覺規范,一類是交互規范。


          視覺規范可以給用戶傳達統一的品牌形象,確保視覺一致性。后期的設計元素須復合規范的原則。


          交互規范可以減少用戶的學習成本,讓用戶有歸屬感。交互規范在制定的過程中,需要寫好交互規則與條件,不然后期維護會混亂。像蓋房子一樣,地基都沒打穩的話,整個樓都是偏的。


          那在使用規范時,一定要遵循規范里的要求進行應用,否則會亂套,不僅起不到統一的品牌風格,反倒會給人一種一團糟、完全不專業的感覺。體驗好是一個產品的競爭力。



          設計規范的節點

          節點和公司的進度搭邊,看當前的產品是應該先獨立風格還是先統一基礎規范。


          1-固定的設計風格規范,比如:google的“扁平”,微軟的“磁貼”,可以全局使用,并且時間保持的相對長久。這些設計風格在前期就完成了獨立與其他風格的區分。后期再進行拓展。這種比較適規模比較大的團隊,定好基調,不會走偏。


          2-不斷優化的設計規范,根據公司的節奏,有些產品目前比較迫切的是需要界面統一性、交互統一性?;A做完以后,進而考慮產品固定風格。這種比較適合小團隊協作??梢噪S時調整。



          建立規范


          ·制作原理—利用粒子構成的原理與三維解構

          利用粒子構成的原理與三維解構,一個組件被科學的三維解析后由粒子再構成,理論上幾乎能夠滿足所有的UI樣式需求。這樣所有組件構成元素都可變,高度靈活


          ·具體過程

          建立單個元素——設立簡單組件——構成復雜組件——形成模板——最后組成頁面。


          ·元素是工具庫的必要部分

          并不是每個時刻都能夠直接使用完整的組件,元素是我們工具庫必不可少的部分,它可以更大的方便你修改組件,再造組件以及特殊的排版,方便拖拉拽。


          ·組件的命名規范化

          規范組件命名,方便查找、方便協作。


          協作

          一鍵導出/同步組件到Sketch模板。

          標注方面,目前我們團隊使用的是藍湖私有化。



          那是不是所有的公司都需要創建設計系統?

          一般情況下,公司有不同的產品線,且都需要長期的開發與迭代。

          公司中,越來越多的設計師加入,設計風格需要統一。


          那建立一套設計體系會面臨什么挑戰?

          設計體系里面包含了設計語言、設計規范,需要與前端、品牌、動態設計、 用戶研究等溝通,還是需要迭代優化的,這是非常繁瑣耗時的項目,初期會非常的艱難,當設計師開始做組件時,也是非常耗時的工作,需要考慮不同場景下的使用情況以及設計的延展性,都需要投入大量的設計人力。


          聊了這么多,大家對設計系統有了一定了解,建立好設計系統可以事半功倍,以此提升效率才能提升UED價值。


          文章來源:站酷   作者:瑪麗的設計筆記

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務




          日歷

          鏈接

          個人資料

          藍藍設計的小編 http://www.syprn.cn

          存檔

          亚洲va欧美va天堂v国产综合