超碰av在线|无码精品一区二区三区在线|伊人色色日韩一级片内射视频群批_欧美丰满少妇人妻HD高清在线_亚洲一区二区中文_亚洲无码动漫专区

首頁(yè)

設(shè)計(jì)規(guī)范|Web端設(shè)計(jì)組件篇—文本與選擇器

博博


人人都是產(chǎn)品經(jīng)理 2018-04-23 00:00:00

本文作者主要講解表單中的文本和選擇器,enjoy~

設(shè)計(jì)規(guī)范|Web端設(shè)計(jì)組件篇—文本與選擇器

根據(jù)組件的用途,可以分為六大類(lèi):Feedback 反饋、form 表單、basic 基礎(chǔ)、data 數(shù)據(jù) 、navigation 導(dǎo)航、other 其他。

設(shè)計(jì)規(guī)范|Web端設(shè)計(jì)組件篇—文本與選擇器

表單在網(wǎng)頁(yè)中主要負(fù)責(zé)數(shù)據(jù)采集功能;用戶(hù)需要填寫(xiě)輸入數(shù)據(jù)并且提交到數(shù)據(jù)庫(kù),則這種組件就是表單類(lèi)。

本文主要講解表單中的文本和選擇器,其中文本分為input短文本、InputAutocomplete 短文本聯(lián)想和InputMultiline 長(zhǎng)文本。

input 短文本

定義:用于用戶(hù)文本輸入,并以字符串的方式提交到數(shù)據(jù)庫(kù)。

使用場(chǎng)景:

  1. 用戶(hù)需要輸入字符時(shí)
  2. 通過(guò)鼠標(biāo)鍵盤(pán)輸入內(nèi)容
  3. 輸入的文本通常置于輸入框

例如網(wǎng)易考拉優(yōu)惠券兌換的表單填寫(xiě),就是短文本輸入組件,前面是標(biāo)題,后面是文本輸入框。

設(shè)計(jì)規(guī)范|Web端設(shè)計(jì)組件篇—文本與選擇器

input短文本組件的展示形式可以分為三類(lèi)。第1類(lèi)是標(biāo)題和輸入框左右排列;第二類(lèi)是標(biāo)題和輸入框上下排列;第三列不需要標(biāo)題的排列。

標(biāo)題和輸入框左右排列時(shí),短文本組件存在的狀態(tài)有:初始態(tài)、激活態(tài)、報(bào)錯(cuò)態(tài)、完成態(tài)和禁用態(tài)。

設(shè)計(jì)規(guī)范|Web端設(shè)計(jì)組件篇—文本與選擇器

常見(jiàn)的表單類(lèi)排版都是左右排版,同時(shí)表單之間,標(biāo)題采用左對(duì)齊,輸入框左對(duì)齊的情況比較多。有時(shí)候標(biāo)題名字過(guò)長(zhǎng)這樣話 左右排列就不夠好,這時(shí)候需要采用上下排列。

設(shè)計(jì)規(guī)范|Web端設(shè)計(jì)組件篇—文本與選擇器

標(biāo)題和輸入框上下排版時(shí),存在狀態(tài)和左右排列是一致的。

設(shè)計(jì)規(guī)范|Web端設(shè)計(jì)組件篇—文本與選擇器

當(dāng)沒(méi)有標(biāo)題時(shí),存在狀態(tài)同左右排列的規(guī)則和邏輯。

設(shè)計(jì)規(guī)范|Web端設(shè)計(jì)組件篇—文本與選擇器

InputAutocomplete 短文本聯(lián)想

定義:用戶(hù)用于文本輸入,在輸入過(guò)程中會(huì)聯(lián)想匹配文本選項(xiàng),并以字符串的方式提交到數(shù)據(jù)庫(kù)。

使用場(chǎng)景:

  1. 需要用戶(hù)輸入文本時(shí)。
  2. 提供聯(lián)想匹配文本,減少用戶(hù)輸入成本。
  3. 在輸入過(guò)程中根據(jù)用戶(hù)輸入的內(nèi)容,出現(xiàn)匹配選項(xiàng),提交的數(shù)據(jù)是文本而非枚舉項(xiàng)。

例如百度搜索,在輸入框輸入關(guān)鍵詞時(shí)會(huì)出現(xiàn)對(duì)應(yīng)的聯(lián)想匹配文本。

設(shè)計(jì)規(guī)范|Web端設(shè)計(jì)組件篇—文本與選擇器

和input短文本組件相比,InputAutocomplete 短文本聯(lián)想唯一的不同就是新增了聯(lián)想匹配選項(xiàng),并且提交的是文本而非枚舉項(xiàng)。

標(biāo)題和輸入框左右排列時(shí),InputAutocomplete 短文本聯(lián)想組件存在的狀態(tài)有:初始態(tài)、激活態(tài)、報(bào)錯(cuò)態(tài)、完成態(tài)和禁用態(tài)。

設(shè)計(jì)規(guī)范|Web端設(shè)計(jì)組件篇—文本與選擇器

上下排列的狀態(tài)和規(guī)則邏輯同左右排列。

設(shè)計(jì)規(guī)范|Web端設(shè)計(jì)組件篇—文本與選擇器

不含標(biāo)題的狀態(tài)和規(guī)則邏輯同左右排列。

設(shè)計(jì)規(guī)范|Web端設(shè)計(jì)組件篇—文本與選擇器

InputMultiline 長(zhǎng)文本

定義:用戶(hù)用于長(zhǎng)文本輸入,并以文本的方式提交到數(shù)據(jù)庫(kù)。

使用場(chǎng)景:

  1. 多段文字輸入
  2. 需要換行
  3. 輸入的文本通常置于輸入框中

例如新浪微博,在輸入框發(fā)微博時(shí),就是長(zhǎng)文本輸入,可以換行。

設(shè)計(jì)規(guī)范|Web端設(shè)計(jì)組件篇—文本與選擇器

標(biāo)題和輸入框左右排列時(shí),InputMultiline 長(zhǎng)文本存在的狀態(tài)有:初始態(tài)、激活態(tài)、報(bào)錯(cuò)態(tài)、完成態(tài)和禁用態(tài)。在輸入過(guò)程中一般有字?jǐn)?shù)統(tǒng)計(jì),超過(guò)限制字?jǐn)?shù),不允許用戶(hù)輸入。

設(shè)計(jì)規(guī)范|Web端設(shè)計(jì)組件篇—文本與選擇器

上下排列邏輯和規(guī)則同左右排列。

設(shè)計(jì)規(guī)范|Web端設(shè)計(jì)組件篇—文本與選擇器

不含標(biāo)題的邏輯同左右排列。

設(shè)計(jì)規(guī)范|Web端設(shè)計(jì)組件篇—文本與選擇器

select 選擇器

定義:用戶(hù)通過(guò)選擇枚舉項(xiàng),提交到服務(wù)器。后端存儲(chǔ)為枚舉項(xiàng)。

使用場(chǎng)景:

  1. 彈出一個(gè)下拉選項(xiàng)給用戶(hù)選擇操作
  2. 當(dāng)選項(xiàng)少時(shí)(少于 5 項(xiàng)),建議直接將選項(xiàng)平鋪,使用 Radio 是更好的選擇。

例如淘寶賣(mài)家后臺(tái)篩選訂單的狀態(tài)時(shí),點(diǎn)擊選擇器,出現(xiàn)下拉列表。這就是一個(gè)常見(jiàn)的選擇器,選擇器分為多選和單選兩大類(lèi)。

設(shè)計(jì)規(guī)范|Web端設(shè)計(jì)組件篇—文本與選擇器

下圖為選擇器基本樣式,就是簡(jiǎn)單的下拉選項(xiàng),不可進(jìn)行關(guān)鍵詞的搜索。

設(shè)計(jì)規(guī)范|Web端設(shè)計(jì)組件篇—文本與選擇器

下圖是可以搜索的選擇器,當(dāng)輸入框處于激活態(tài)時(shí),浮出下拉列表。在輸入過(guò)程中,出現(xiàn)匹配枚舉項(xiàng),點(diǎn)擊枚舉項(xiàng),則輸入的關(guān)鍵詞清空,同時(shí)下拉選項(xiàng)收起。輸入框出現(xiàn)選擇的選項(xiàng)。

設(shè)計(jì)規(guī)范|Web端設(shè)計(jì)組件篇—文本與選擇器

有時(shí)候存在一個(gè)場(chǎng)景。用戶(hù)對(duì)需要填寫(xiě)的選項(xiàng)設(shè)為空選項(xiàng),則需要空值的選項(xiàng)。

設(shè)計(jì)規(guī)范|Web端設(shè)計(jì)組件篇—文本與選擇器

有時(shí)候存在一個(gè)場(chǎng)景。用戶(hù)選擇了一個(gè)選項(xiàng),但是后面想去掉選擇的選項(xiàng),不進(jìn)行選擇。

設(shè)計(jì)規(guī)范|Web端設(shè)計(jì)組件篇—文本與選擇器

選擇器多選組件中需要注意的一點(diǎn)就是:用戶(hù)在輸入關(guān)鍵詞中,選擇對(duì)應(yīng)下拉選項(xiàng),則輸入的字符串清空,同時(shí)出現(xiàn)該選項(xiàng)tag。

設(shè)計(jì)規(guī)范|Web端設(shè)計(jì)組件篇—文本與選擇器

瀑布流,到敏捷開(kāi)發(fā),到設(shè)計(jì)思維,最后到精益創(chuàng)新

資深UI設(shè)計(jì)者

各公司開(kāi)發(fā)成功產(chǎn)品的方式已經(jīng)在根本上發(fā)生了變化。智能手機(jī)、社交網(wǎng)絡(luò)或云計(jì)算等新技術(shù)使蘋(píng)果、谷歌或亞馬孫等科技巨頭在大約20年內(nèi)成為最有價(jià)值的公司。

這是我的第一篇系列文章“精益創(chuàng)新——如何在今天開(kāi)發(fā)成功的產(chǎn)品”。這是多年來(lái)創(chuàng)新的轉(zhuǎn)變和產(chǎn)品開(kāi)發(fā)的方法論。

所有這些變化的發(fā)生是由于人們消費(fèi)產(chǎn)品的方式發(fā)生了轉(zhuǎn)變而造成。為了迎合用戶(hù)行為和對(duì)產(chǎn)品期待的變化,科技公司必須將產(chǎn)品方向轉(zhuǎn)變?yōu)楦`活、更敏捷、特別是以用戶(hù)為中心上,即從瀑布流到敏捷設(shè)計(jì)再到精益設(shè)計(jì)。

雖然現(xiàn)在仍然有95%的大型組織在用瀑布模型開(kāi)發(fā)新產(chǎn)品,但行業(yè)領(lǐng)頭公司已經(jīng)在率先使用精益設(shè)計(jì)作為方法了。

 

瀑布模型(20世紀(jì)70年代)Waterfall 

瀑布模型是序列順序的處理方法,進(jìn)程就像瀑布一樣穩(wěn)定地推向目標(biāo)。它要求項(xiàng)目產(chǎn)出全面的計(jì)劃并提前開(kāi)發(fā)。

瀑布過(guò)程

由于前期設(shè)計(jì)和分析花費(fèi)了大量的時(shí)間和精力,設(shè)計(jì)變更會(huì)使成本變得更高,尤其是設(shè)計(jì)后階段。每個(gè)設(shè)計(jì)節(jié)點(diǎn)都有清晰的目標(biāo),達(dá)成后將進(jìn)入下一個(gè)階段。這樣防止了客戶(hù)在最后發(fā)布前評(píng)論和反饋。即使征求了建議,項(xiàng)目在接受反饋方面也不那么靈活。雖然瀑布模型是一種不那么靈活的方法,但它對(duì)需要執(zhí)行“計(jì)劃”的團(tuán)隊(duì)(在預(yù)算范圍內(nèi))更有益。

 

敏捷開(kāi)發(fā)(20世紀(jì)90年代)Agile 

隨著互聯(lián)網(wǎng)的興起,瀑布模型漫長(zhǎng)的開(kāi)發(fā)周期已經(jīng)不再能夠提前規(guī)劃人們的需求。同時(shí),隨著電子商務(wù)的全球化和新經(jīng)濟(jì)模式的到來(lái)引發(fā)了更多的競(jìng)爭(zhēng)。公司在開(kāi)發(fā)產(chǎn)品的周期中不得不對(duì)市場(chǎng)趨勢(shì)作出反應(yīng),因此,需要一個(gè)靈活的產(chǎn)品開(kāi)發(fā)步驟。

“敏捷”指的是由17個(gè)軟件工程師發(fā)布于2001年2月的一份宣言,他們必須就輕量開(kāi)發(fā)方法進(jìn)行討論。它基于迭代的方法,而不是像瀑布模型一樣在項(xiàng)目之初就進(jìn)行深入的規(guī)劃。開(kāi)發(fā)團(tuán)隊(duì)為了保證首先完成最重要的任務(wù),他們會(huì)不斷調(diào)整項(xiàng)目的工作范圍。

每次迭代的目的是為了實(shí)現(xiàn)一個(gè)可交付的產(chǎn)品。隨著來(lái)自終端用戶(hù)的持續(xù)反饋得到鼓勵(lì),敏捷開(kāi)發(fā)能對(duì)不斷變化的需求作出反應(yīng),因?yàn)殡S著時(shí)間推移它們都是被需要的。因此,在管理和減少需求變化的風(fēng)險(xiǎn)方面,這些方法對(duì)項(xiàng)目來(lái)說(shuō)是正確的選擇。

 

設(shè)計(jì)思維(21世紀(jì)初)Design Thinking 

我們都知道以人為中心的設(shè)計(jì),設(shè)計(jì)思維作為一個(gè)概念已經(jīng)存在一段時(shí)間了,只是名稱(chēng)不同(以用戶(hù)為中心的設(shè)計(jì)、服務(wù)設(shè)計(jì))。設(shè)計(jì)思維因得益于它解決問(wèn)題的技巧和科學(xué)的方法而成為時(shí)尚。設(shè)計(jì)思維過(guò)程和方法的普及與2001年的IDEO有關(guān)。

“設(shè)計(jì)思維是一種以人為本的創(chuàng)新方法,它從設(shè)計(jì)師工具箱里汲取了靈感,將用戶(hù)的需求、技術(shù)的可能性和商業(yè)成功的要求結(jié)合起來(lái)?!?/span>

湯姆布朗,IDEO創(chuàng)始人。

“設(shè)計(jì)師工具箱”是一個(gè)與設(shè)計(jì)師的方法和過(guò)程有關(guān)的應(yīng)用——包括思考創(chuàng)造力、靈活的創(chuàng)意以及對(duì)用戶(hù)行為和需求的清晰理解。設(shè)計(jì)思維是一個(gè)由4個(gè)基礎(chǔ)階段組成的結(jié)構(gòu)化流程。

從目標(biāo)群體的發(fā)現(xiàn)階段開(kāi)始,所確定的需求和問(wèn)題將被合成一些主要的見(jiàn)解。這些見(jiàn)解是概念階段的基礎(chǔ),這個(gè)階段的目標(biāo)是產(chǎn)出許多想法,而最有希望的想法將被作為原型進(jìn)行開(kāi)發(fā)。原型測(cè)試是最后一個(gè)階段,這個(gè)階段需要確保解決方案滿(mǎn)足目標(biāo)群體的需求。

設(shè)計(jì)思維之所以產(chǎn)生,是因?yàn)榇蠊救狈?chuàng)新能力,無(wú)法開(kāi)發(fā)出能滿(mǎn)足客戶(hù)需求和客戶(hù)問(wèn)題的創(chuàng)新產(chǎn)品。如今,大多數(shù)的公司都使用分析思維來(lái)作為運(yùn)營(yíng)方式。這種分析思維阻礙了創(chuàng)造性(打破常規(guī))思維的發(fā)展,而這種創(chuàng)造性思維是破壞性創(chuàng)新所必需的。

這種創(chuàng)造性,特別是大膽的思考(有些稱(chēng)為“瘋狂思考”)與設(shè)計(jì)概念有關(guān)。為了創(chuàng)新,企業(yè)必須具備設(shè)計(jì)能力。為了設(shè)計(jì),一個(gè)組織需要內(nèi)部融合設(shè)計(jì),以孕育出一種培養(yǎng)創(chuàng)造思維的文化。

設(shè)計(jì)思維的顯著差異在于將用戶(hù)置于每項(xiàng)活動(dòng)的中心。此外,以人為本的設(shè)計(jì)強(qiáng)調(diào)體驗(yàn)勝于效率,因?yàn)榱己玫捏w驗(yàn)是用戶(hù)與產(chǎn)品互動(dòng)的動(dòng)力。

 

精益創(chuàng)新(創(chuàng)業(yè)公司——21世紀(jì)初)Lean Innovation

2011年,隨著Eric Ries《精益創(chuàng)業(yè)》這本書(shū)的出版,創(chuàng)新和產(chǎn)品開(kāi)發(fā)實(shí)踐已經(jīng)向精益方向發(fā)展。精益創(chuàng)業(yè)的目標(biāo)是避免開(kāi)發(fā)那些沒(méi)人需要的產(chǎn)品或服務(wù)。精益過(guò)程包含用戶(hù)反饋和產(chǎn)品早期實(shí)驗(yàn)。

精益創(chuàng)新以“失敗來(lái)了成功還會(huì)遠(yuǎn)嗎?”的哲學(xué)而聞名。開(kāi)發(fā)者接受這種失敗,因?yàn)樗麄儷@得突破性成功前是要需要不斷學(xué)習(xí)的。

精益方法也常被稱(chēng)為“客戶(hù)開(kāi)發(fā)”。它的目標(biāo)是在搭建最終產(chǎn)品前,找出用戶(hù)想要什么。精益的原則是建立你正在試著測(cè)試的假設(shè)和設(shè)想,而你通過(guò)在這些實(shí)驗(yàn)的學(xué)習(xí),將會(huì)取得進(jìn)步。

 

科技推動(dòng)全球競(jìng)爭(zhēng)

數(shù)字化和巨大的變革速度不再允許公司在不考慮客戶(hù)需求的情況下簡(jiǎn)單地生產(chǎn)產(chǎn)品。在過(guò)去,向客戶(hù)提供錯(cuò)誤的產(chǎn)品只會(huì)導(dǎo)致項(xiàng)目失敗。而今天,持續(xù)不能交付客戶(hù)所需的產(chǎn)品,將導(dǎo)致整個(gè)商業(yè)模式的失敗。諾基亞或柯達(dá)只是這里提到的兩個(gè)最著名的失敗案例。

智能手機(jī)、云計(jì)算和開(kāi)源等技術(shù)使得產(chǎn)品的開(kāi)發(fā)速度更快、成本更低。開(kāi)發(fā)產(chǎn)品或進(jìn)入市場(chǎng)的的門(mén)檻比以往任何時(shí)候都要低。這意味今天有更多的全球競(jìng)爭(zhēng)。公司需要專(zhuān)注于了解用戶(hù)和他們想要什么??蛻?hù)可以很容易地轉(zhuǎn)向其它產(chǎn)品。品牌忠誠(chéng)度對(duì)消費(fèi)者決策的影響逐年下降。

 

專(zhuān)注于商業(yè)模式,而不僅僅是產(chǎn)品(Focus on business models, not only on products)

精益和設(shè)計(jì)思維都是以客戶(hù)為中心、基于迭代的方法??蛻?hù)參與和反饋是取得進(jìn)展的動(dòng)力。精益創(chuàng)新的關(guān)鍵不同之處在于,它在圍繞產(chǎn)品考慮整個(gè)商業(yè)模式時(shí)更進(jìn)一步。

亞馬遜成為電子商務(wù)的領(lǐng)導(dǎo)者的原因之一是他們對(duì)客戶(hù)服務(wù)的堅(jiān)定承諾。雖然他們沒(méi)有靠這個(gè)掙過(guò)一分錢(qián),但是卻幫亞馬遜獲得了客戶(hù)的信任和忠誠(chéng)。如今,成功的公司區(qū)別于他們的商業(yè)模式,而不是他們的產(chǎn)品供應(yīng)。

 

確保用戶(hù)持續(xù)參與(Engage customers continuously)

在新世界中,成功的公司將有一個(gè)共同點(diǎn):對(duì)用戶(hù)行為和需求的超常理解。隨著行為和需求的快速變化,確保建立客戶(hù)需求的唯一途徑就是讓用戶(hù)持續(xù)的參與到項(xiàng)目中來(lái)。準(zhǔn)確的用戶(hù)理解是長(zhǎng)期商業(yè)模式成功的基石。

 

結(jié)合設(shè)計(jì)思維、精益設(shè)計(jì)和敏捷開(kāi)發(fā)

雖然設(shè)計(jì)思維,精益設(shè)計(jì)和敏捷開(kāi)發(fā)可以單獨(dú)使用,但是最好的結(jié)果來(lái)自這些方法的結(jié)合。設(shè)計(jì)思維有助于深入了解客戶(hù)的需求和行為,而敏捷開(kāi)發(fā)則有助于地開(kāi)發(fā)和交付解決方案,精益方法的實(shí)踐幫助我們?cè)谟脩?hù)參與的假設(shè)測(cè)試中可以獲得更直接的驗(yàn)證和學(xué)習(xí)。

當(dāng)持續(xù)使用“開(kāi)發(fā)–測(cè)試–學(xué)習(xí)”這個(gè)模式循環(huán),就可以逐步接近一個(gè)成功的產(chǎn)品和有率的商業(yè)模式。

如何設(shè)計(jì)表單錯(cuò)誤信息

資深UI設(shè)計(jì)者

本文中,我們會(huì)討論如何通過(guò)優(yōu)化錯(cuò)誤提示信息,來(lái)優(yōu)化UI表單的設(shè)計(jì)。

在UI界面的設(shè)計(jì)中,用戶(hù)的操作失誤不可避免,通過(guò)錯(cuò)誤提示將當(dāng)前狀態(tài)傳達(dá)給用戶(hù),這種反饋機(jī)制可以幫助用戶(hù)及時(shí)作出調(diào)整并找到合理的解決方案。盡管錯(cuò)誤信息很常見(jiàn),卻往往不被設(shè)計(jì)師重視。草草的處理錯(cuò)誤信息、制作邏輯混亂的錯(cuò)誤信息會(huì)使用戶(hù)感到沮喪,以致最終放棄你的應(yīng)用。相反,處理得當(dāng)?shù)腻e(cuò)誤提示,卻可以變失敗為驚喜。



一、表單中錯(cuò)誤信息的設(shè)計(jì)方案


用戶(hù)不喜歡表單,原因之一就是糾正輸入錯(cuò)誤信息的成本過(guò)高。如何讓用戶(hù)通過(guò)不同的報(bào)錯(cuò)信息提醒,繞過(guò)障礙順利完成表單,是讓用戶(hù)體驗(yàn)流暢順滑的關(guān)鍵所在。

糟糕的錯(cuò)誤信息在很大程度上是源自于用戶(hù)體驗(yàn)設(shè)計(jì)流程上的規(guī)劃失誤。為什么這么說(shuō)呢?在原型設(shè)計(jì)階段,用戶(hù)體驗(yàn)設(shè)計(jì)師就需要考慮到可能會(huì)出現(xiàn)的錯(cuò)誤,以及相應(yīng)的錯(cuò)誤反饋,確保用戶(hù)在報(bào)錯(cuò)信息的幫助下,最終能夠完成這個(gè)階段的任務(wù),抵達(dá)他們的目標(biāo)。


1、在當(dāng)前頁(yè)面及時(shí)反饋


用戶(hù)并不喜歡填完一個(gè)長(zhǎng)表單并提交之后,才發(fā)現(xiàn)哪里填錯(cuò)了。在錯(cuò)誤出現(xiàn)之后,界面應(yīng)該在第一時(shí)刻將錯(cuò)誤信息呈現(xiàn)出來(lái),用戶(hù)不必等到點(diǎn)擊提交按鈕才看到錯(cuò)誤,他們能更早改正錯(cuò)誤。

Image title


在上面兩個(gè)錯(cuò)誤信息呈現(xiàn)的案例當(dāng)中,第一個(gè)頁(yè)面使用了彈出框來(lái)呈現(xiàn)錯(cuò)誤信息,告知用戶(hù)需要填寫(xiě)詳細(xì)信息才能付款。用戶(hù)則需要關(guān)閉彈出框之后,再重新填寫(xiě),這增加了額外的步驟。而用戶(hù)關(guān)閉彈出框之后再填寫(xiě)的時(shí)候,也有一定的機(jī)率會(huì)忘記彈出框的具體要求和內(nèi)容,導(dǎo)致無(wú)法正確填寫(xiě)。這種耗時(shí)又令人沮喪的用戶(hù)體驗(yàn),用戶(hù)不會(huì)喜歡的。

正確的形式是直接在界面中呈現(xiàn)報(bào)錯(cuò)信息,并且報(bào)錯(cuò)信息緊貼著對(duì)應(yīng)的輸入框,以醒目的色彩在輸入框下方呈現(xiàn),用戶(hù)能收到即時(shí)的反饋,也能清晰的標(biāo)注出所有的要求,便于用戶(hù)更正。


2、錯(cuò)誤信息的最佳位置


在制作表單時(shí),你通常會(huì)把錯(cuò)誤信息放在哪里呢?如果錯(cuò)誤信息沒(méi)有放在用戶(hù)期望的位置,那么可能會(huì)影響完成表單的效果。

當(dāng)用戶(hù)犯錯(cuò)時(shí),他們需要了解這些錯(cuò)誤是什么,以便他們能夠糾正錯(cuò)誤并重新提交表單。如果表單過(guò)于復(fù)雜填寫(xiě)困難,他們會(huì)改變主意。


◎頂部錯(cuò)誤提示vs行間錯(cuò)誤提示


錯(cuò)誤消息的兩個(gè)最常見(jiàn)的位置位于表單的頂部,和輸入框的行間。哪個(gè)位置對(duì)用戶(hù)來(lái)說(shuō)更直觀呢?

一項(xiàng)研究發(fā)現(xiàn),在表單頂部顯示所有錯(cuò)誤消息會(huì)給用戶(hù)記憶造成較高的認(rèn)知負(fù)荷。這會(huì)強(qiáng)制用戶(hù)回憶每個(gè)錯(cuò)誤輸入框中的錯(cuò)誤消息。

Image title


減少用戶(hù)認(rèn)知負(fù)荷的方法是在輸入框行間顯示錯(cuò)誤信息。行間的錯(cuò)誤提示可以幫助當(dāng)場(chǎng)識(shí)別錯(cuò)誤而不是靠回憶錯(cuò)誤,這讓用戶(hù)可以更快更輕松地糾正錯(cuò)誤。

另一項(xiàng)研究發(fā)現(xiàn)“錯(cuò)誤字段和錯(cuò)誤信息之間的距離會(huì)影響錯(cuò)誤糾正的效率”。在表單的頂部和底部放置錯(cuò)誤信息時(shí)用戶(hù)反應(yīng)更正的時(shí)間最長(zhǎng),而行間錯(cuò)誤信息可以縮短反應(yīng)時(shí)間。

在表單的頂部和底部放置錯(cuò)誤信息,也導(dǎo)致用戶(hù)錯(cuò)誤率最高,完成時(shí)間最長(zhǎng),滿(mǎn)意度。和頂部、行間錯(cuò)誤信息相比,底部錯(cuò)誤信息的糾錯(cuò)成功率。


◎用戶(hù)更偏愛(ài)的錯(cuò)誤信息位置


該研究證明,將錯(cuò)誤信息與錯(cuò)誤的字段鄰近放置可以獲得最佳性能,并且指出了最直觀的顯示位置。

Image title


調(diào)研中讓用戶(hù)來(lái)選擇把錯(cuò)誤提示放在上圖的哪個(gè)位置更滿(mǎn)意,更多的用戶(hù)喜歡輸入框右邊的錯(cuò)誤提示位置。

位于輸入框左側(cè)的錯(cuò)誤信息位置被評(píng)為最差。對(duì)話框上面的位置導(dǎo)致了最高的認(rèn)知負(fù)荷,隨后是字段之下的錯(cuò)誤消息。


◎?yàn)槭裁从覀?cè)的位置是最好的


理解為什么用戶(hù)更偏愛(ài)將錯(cuò)誤消息放置在字段右側(cè)是很重要的。通過(guò)這種方式,設(shè)計(jì)師可以更好地向其他人介紹在制定設(shè)計(jì)方案時(shí)用戶(hù)的行為偏好。

Image title


西方的閱讀習(xí)慣是從左到右的。當(dāng)用戶(hù)的視線從輸入框移動(dòng)到錯(cuò)誤消息時(shí),感覺(jué)就像一個(gè)自然的過(guò)程,需要很少的精力和視覺(jué)工作。將他們的眼睛從錯(cuò)誤消息移回輸入框以進(jìn)行糾正也遵循重新讀取文本的自然流程。


◎?yàn)槭裁醋髠?cè)的位置是最差的


將錯(cuò)誤消息放在輸入框的左邊,違背了西方的閱讀習(xí)慣。當(dāng)出現(xiàn)錯(cuò)誤提示時(shí),用戶(hù)的視線朝著與自然閱讀流程相反的方向移動(dòng)。這種方式很不自然,有悖于用戶(hù)習(xí)慣,并且在用戶(hù)調(diào)研中得到了證實(shí)。

Image title


這樣的排布也與我們的直覺(jué)相反,因?yàn)橛脩?hù)期望在左側(cè)放置有更高優(yōu)先級(jí)的元素。將錯(cuò)誤消息放置在左側(cè)意味著它比要輸入的字段更重要。但事實(shí)上用戶(hù)需要專(zhuān)注于糾正他們的輸入,因此輸入框應(yīng)該是更重要的元素。


◎上側(cè)的位置為什么會(huì)增加用戶(hù)的認(rèn)知負(fù)荷


用戶(hù)對(duì)輸入框上面的錯(cuò)誤提示有著更高的認(rèn)知負(fù)荷(例如表格頂部對(duì)齊的標(biāo)簽)。這是因?yàn)橛脩?hù)會(huì)把錯(cuò)誤提示和輸入框中的提示文案混淆。

Image title


這兩個(gè)文本靠得很近會(huì)產(chǎn)生視覺(jué)噪音,在用戶(hù)嘗試讀取錯(cuò)誤消息或輸入框的提示標(biāo)簽時(shí)分散注意力。他們看到兩段文案卻很難專(zhuān)注于其中一個(gè),并且可能混淆它們。


◎移動(dòng)設(shè)備上表單的最佳錯(cuò)誤信息位置


手機(jī)屏幕缺少水平空間來(lái)并排顯示錯(cuò)誤消息和標(biāo)簽文案。這意味著把錯(cuò)誤信息放在右側(cè)不是移動(dòng)表單上的最佳位置。

Image title


對(duì)于移動(dòng)設(shè)備,更好的方式是請(qǐng)將錯(cuò)誤信息放置在輸入框下方。這是該研究中用戶(hù)第二最喜歡的位置。雖然它不符合用戶(hù)自然的從左到右的閱讀流程,但它確實(shí)與自然的從上到下的閱讀流程相對(duì)應(yīng)。

當(dāng)用戶(hù)閱讀文本時(shí),他們習(xí)慣將視線從頁(yè)面的左側(cè)移動(dòng)到右側(cè)。錯(cuò)誤信息低于輸入框,使它遵循垂直閱讀過(guò)程。

將錯(cuò)誤消息放置得太靠近下面的字段標(biāo)簽時(shí),可能會(huì)增加用戶(hù)閱讀文本時(shí)的認(rèn)知負(fù)荷。你可以通過(guò)將它們隔開(kāi)足夠的間隔來(lái)防止這種情況。


◎右邊還是下邊,哪個(gè)是最好的位置?


錯(cuò)誤消息的最佳位置在輸入框的右側(cè)和下方。但是你應(yīng)該使用哪個(gè)位置?這取決于你有多少時(shí)間來(lái)實(shí)現(xiàn)。

如果你用來(lái)實(shí)現(xiàn)web端和app端的時(shí)間有限,可以選擇在下方放置錯(cuò)誤信息。在web端實(shí)現(xiàn)后,方便在app端進(jìn)行適配。

如果你有足夠的開(kāi)發(fā)時(shí)間,在web端請(qǐng)選擇輸入框的右側(cè),而移動(dòng)端考慮放在輸入框的下面。這樣不僅可以提供比較好的用戶(hù)瀏覽體驗(yàn),還能縮短表單的長(zhǎng)度。


3、在視覺(jué)上要足夠突出


如果出錯(cuò)之后,用戶(hù)無(wú)法迅速注意到報(bào)錯(cuò)信息,這不僅僅浪費(fèi)了時(shí)間,也耽誤了事情。正如 Jakbo Nielsen 所說(shuō):“最糟糕的報(bào)錯(cuò)信息是那些對(duì)用戶(hù)而言根本看不到的報(bào)錯(cuò)信息。”然而,難點(diǎn)也就在這個(gè)地方,加粗字體和彈出框?qū)τ谟脩?hù)而言過(guò)于具有壓迫感,那么你要如何確保信息能被用戶(hù)注意到又不會(huì)顯得太過(guò)呢?不難,使用正確的色彩來(lái)輔助顯示。

Image title


色彩是用戶(hù)識(shí)別信息的重要途徑,它也是設(shè)計(jì)師向用戶(hù)傳遞信息的可靠工具。出于對(duì)比的目的,在白色的背景下,使用紅色的錯(cuò)誤提示信息,會(huì)足夠醒目,又不會(huì)太過(guò)喧賓奪主。在某些情況下,紅色對(duì)用戶(hù)的壓力較大,也可以使用黃色或橙色來(lái)作為錯(cuò)誤提示。在這兩種情況下,請(qǐng)確保錯(cuò)誤文本清晰可辨,且與其背景的顏色有顯著的對(duì)比。

Image title


值得注意的是,色彩不應(yīng)該是報(bào)錯(cuò)信息呈現(xiàn)的唯一標(biāo)準(zhǔn)。考慮到網(wǎng)頁(yè)和移動(dòng)端應(yīng)用本身的可用性和可訪問(wèn)性,設(shè)計(jì)師應(yīng)該考慮到色盲用戶(hù)的需求,提供色彩以外的視覺(jué)提示,例如錯(cuò)誤icon等,確保他們也可以看明白。


二、注意錯(cuò)誤信息的文案推敲


從某種程度上,你能把上面幾條做好,你的報(bào)錯(cuò)信息在美學(xué)特征和體驗(yàn)上就沒(méi)有太多問(wèn)題了。不過(guò),要想設(shè)計(jì)最佳體驗(yàn)的錯(cuò)誤信息,文案的重要性也是顯而易見(jiàn)的,需要在言簡(jiǎn)意賅的同時(shí)友好地幫助用戶(hù)解決問(wèn)題。

10條可用性啟迪(經(jīng)典的尼爾森十大可用性原則)中建議,要清晰優(yōu)雅地表達(dá)出錯(cuò)誤信息。有效的錯(cuò)誤提示應(yīng)該提供如下信息:

明確表達(dá)發(fā)生了什么
描述用戶(hù)應(yīng)該如何應(yīng)對(duì)
盡可能多地保留用戶(hù)輸入的信息


下面是文案設(shè)計(jì)的幾個(gè)小技巧。


1、確保錯(cuò)誤信息是可理解的


把你的錯(cuò)誤信息視為與用戶(hù)的對(duì)話——讓它聽(tīng)起來(lái)像是為人類(lèi)編寫(xiě)的。確保你的錯(cuò)誤信息是有禮貌,可理解的,而不是錯(cuò)誤代碼和數(shù)據(jù)(諸如出現(xiàn)了錯(cuò)誤43這樣的信息)。

Image title



2、清晰明確的指出錯(cuò)誤


一些電子郵件的網(wǎng)站會(huì)在所有的錯(cuò)誤場(chǎng)景使用同一個(gè)錯(cuò)誤提示,如下圖。你不能只是簡(jiǎn)單的提示用戶(hù)“輸入有效的電子郵件地址”,而應(yīng)針對(duì)用戶(hù)的問(wèn)題明確的指出錯(cuò)誤所在,例如“缺少@字符”等。而MailChimp則以另一種方式來(lái)判斷錯(cuò)誤——他們對(duì)于每個(gè)電子郵件的驗(yàn)證包含3個(gè)錯(cuò)誤信息:檢查輸入字段是否為空、是否有“@”字符、是否有“.”字符。針對(duì)用戶(hù)輸入的錯(cuò)誤方式會(huì)提供相應(yīng)的提示文案。

Image title



3、提供解決方案


錯(cuò)誤信息應(yīng)該明確定義問(wèn)題是什么,為什么會(huì)發(fā)生,以及如何處理。只寫(xiě)出錯(cuò)誤是不夠的。應(yīng)該向用戶(hù)盡可能簡(jiǎn)單的展示如何盡快解決問(wèn)題。

Image title


例如,Microsoft描述錯(cuò)誤并在錯(cuò)誤消息中提供解決方案,以便用戶(hù)可以立即解決此問(wèn)題。

正如同Jonathan Colman 所說(shuō),正確的報(bào)錯(cuò)信息通常使用簡(jiǎn)明而清晰的文字,而失敗的報(bào)錯(cuò)信息通常不會(huì)提供關(guān)于錯(cuò)誤發(fā)生的具體狀況以及解決方案,更丑陋的做法是將錯(cuò)誤信息完全隱藏起來(lái)。

下面的設(shè)計(jì),就是很明顯的對(duì)比:

Image title



4. 錯(cuò)誤信息應(yīng)該禮貌


不要責(zé)怪你的用戶(hù),即使他們做錯(cuò)了。對(duì)用戶(hù)要有禮貌,讓他們感到舒適隨和??梢允褂媚愕钠放坡曇簦瑏?lái)添加個(gè)性化的錯(cuò)誤提示。

Image title



5. 如果恰當(dāng)盡可能地幽默


在你的錯(cuò)誤信息中小心使用幽默。首先,錯(cuò)誤信息應(yīng)該是提供信息和幫助。如果適合,在錯(cuò)誤消息中添加一些幽默,可以改善用戶(hù)體驗(yàn)。

Image title



三、如何有效的預(yù)防錯(cuò)誤


設(shè)計(jì)過(guò)app的同學(xué),應(yīng)該很熟悉各種限制條件。例如網(wǎng)絡(luò)狀況差的情況下,很難填寫(xiě)表單,而且?guī)缀鯖](méi)法同步數(shù)據(jù)。要考慮到這些限制,設(shè)計(jì)更易使用的app,將錯(cuò)誤減到最少。換句話說(shuō),應(yīng)該提供建議、加上限制、保持靈活,第一時(shí)間預(yù)防用戶(hù)犯錯(cuò)。

Twitter因推文的字?jǐn)?shù)限制而出名,他們會(huì)在用戶(hù)達(dá)到字?jǐn)?shù)上限之前提出警示。

Image title



結(jié)語(yǔ)


從不出現(xiàn)的錯(cuò)誤信息才是最好的。最佳方式是引導(dǎo)用戶(hù)向正確方向前進(jìn),第一時(shí)間預(yù)防錯(cuò)誤發(fā)生。但當(dāng)錯(cuò)誤確實(shí)發(fā)生時(shí),設(shè)計(jì)精良的錯(cuò)誤處理,不僅能教育用戶(hù)按你預(yù)期的方式使用app,還能防止用戶(hù)感到茫然。在設(shè)計(jì)錯(cuò)誤信息時(shí)應(yīng)遵循以上的方法,好的體驗(yàn)讓用戶(hù)可以以最小的工作量和最少的思考,快速完成表單,讓他們可以有時(shí)間來(lái)完成他們真正想要做的事情。

氛圍獨(dú)特情緒深沉的深色系網(wǎng)站,設(shè)計(jì)上有什么講究?

博博

在設(shè)計(jì)中,情緒的傳達(dá)和氛圍的營(yíng)造通常是要看設(shè)計(jì)項(xiàng)目的目的是什么,而不同的配色和不同的元素組合,往往能夠呈現(xiàn)出截然不同的風(fēng)貌。相比之下,深色系網(wǎng)站常常會(huì)呈現(xiàn)出更為獨(dú)特的氛圍,傳達(dá)出更為復(fù)雜多樣的情緒。雖然這樣的情緒并不一定是正面和向上的,但是好設(shè)計(jì)總歸是讓人過(guò)目難忘的。

想要借助深沉的色調(diào)來(lái)創(chuàng)造情緒相對(duì)獨(dú)特的網(wǎng)站設(shè)計(jì),是有一些可供遵循的常見(jiàn)的設(shè)計(jì)技巧,今天的文章,我們來(lái)分享一下這方面的內(nèi)容。

深色,并不定是黑色

首先這一點(diǎn)必須明確,深色并不一定是黑色。

在選取配色的時(shí)候,網(wǎng)明亮的色彩當(dāng)中添加黑色或者灰色所得出的色彩,通常會(huì)顯得更加深沉濃重,這樣的色彩中往往會(huì)包含之前的色調(diào)。

在上面的 Hooligan 這個(gè)網(wǎng)站當(dāng)中,設(shè)計(jì)師不僅采用了深沉的黑色背景,而且采用了和黑色背景相當(dāng)匹配的暗金色,兩種深色之間色彩明暗依然存在對(duì)比,和白色的標(biāo)題文本構(gòu)成了三個(gè)層次,不僅富有視覺(jué)吸引力,而且創(chuàng)造出了沉穩(wěn)厚重的氛圍。

陰影的使用

陰影和光線往往是相伴出現(xiàn)的,而陰影所帶來(lái)的舞臺(tái)劇般的效果則充滿(mǎn)了戲劇感和神秘感,這也是設(shè)計(jì)師喜歡它的原因,這樣的設(shè)計(jì)會(huì)讓用戶(hù)心中產(chǎn)生興趣和好奇心。

在上面的 Clear Motion 這個(gè)網(wǎng)站當(dāng)中,車(chē)輛周?chē)魂幱八鼑谋緝?nèi)容很容易吸引用戶(hù)的注意力。同時(shí),用戶(hù)會(huì)好奇這輛車(chē)有什么特殊的地方,有什么地方看起來(lái)不太一樣,黑暗的氛圍下,用戶(hù)的好奇心會(huì)身不由己地高漲起來(lái)。

黑色疊加層

用黑色的半透明層疊加到圖像上,也是制造深色系背景的一種常見(jiàn)手法。在圖片的選取和不同的透明度之下,背景圖片所呈現(xiàn)出來(lái)的效果和氛圍,是非常不同的。

透明度較低的情況下,黑色疊加圖層會(huì)讓用戶(hù)看不清背景中的信息,這使得背景信息在整個(gè)設(shè)計(jì)中參與度較低。透明度較高的情況下,更多的背景元素會(huì)透過(guò)疊加層呈現(xiàn)出來(lái),和前景元素產(chǎn)生交叉和互動(dòng)。但是總的來(lái)說(shuō),黑色疊加層讓元素之間產(chǎn)生對(duì)比,也使得行為召喚元素更容易發(fā)揮作用。

在上面的 Fhoke 這個(gè)網(wǎng)站當(dāng)中,透明疊加層讓背景中的場(chǎng)景適當(dāng)?shù)赝嘎兑稽c(diǎn)出來(lái),但是真正吸引人注意力的,還是在標(biāo)題和左側(cè)的行為指引上。

簡(jiǎn)陋的畫(huà)布

細(xì)節(jié)較多的背景讓人覺(jué)得信息豐富,而粗陋的畫(huà)布則更容易創(chuàng)造出一種虛無(wú)的感覺(jué),相應(yīng)的,后者是會(huì)讓人更有探索的欲望。粗陋甚至赤裸的深色系畫(huà)布很好地將神秘感和探索的欲望結(jié)合到了一起。

Dubois 這個(gè)網(wǎng)站的背景同樣非常的簡(jiǎn)單,沒(méi)有紋理,只是通過(guò)均勻分布的小圓點(diǎn)來(lái)進(jìn)行裝飾,如果你仔細(xì)觀察會(huì)發(fā)現(xiàn)這些點(diǎn)的分布、色彩其實(shí)是有微妙變化的,會(huì)引導(dǎo)你去注意位于整個(gè)頁(yè)面底部的文本標(biāo)題,雖然絕大多數(shù)的網(wǎng)站并不會(huì)把標(biāo)題放在這樣的位置上。

字體的選取

Punk is Not Dead 這個(gè)網(wǎng)站給你的感覺(jué)是否很獨(dú)特?網(wǎng)站的設(shè)計(jì)非常清晰,識(shí)別度極高,網(wǎng)站本身還有音頻組件,它的設(shè)計(jì)從視頻到音頻一應(yīng)俱全,整體充滿(mǎn)了朋克的風(fēng)格。

黑暗的背景和明亮的字體色彩有助于實(shí)現(xiàn)這樣的效果,但是字體的選取才是最關(guān)鍵的。想象一下使用普通的字體,是完全達(dá)不到這樣的效果。尖銳粗糙的邊緣和并不那么友好的可讀性,讓他在視覺(jué)上和朋克的精神保持了一致。

黑白配色

當(dāng)設(shè)計(jì)完全失去色彩,僅僅保留黑白兩色的情況下,會(huì)給人什么樣的感覺(jué)呢?如果整個(gè)設(shè)計(jì)是以黑白兩色為主,搭配少量其他的顏色,體驗(yàn)和氛圍又是什么樣的呢?

黑白配色和純黑為主的配色一樣,很容易創(chuàng)造出戲劇化的效果,這兩種色彩本身所構(gòu)成的沖突和對(duì)比就是原因。

黑白的強(qiáng)烈對(duì)比,常常會(huì)促使訪客在瀏覽過(guò)程中忙于注意不同的細(xì)節(jié),面對(duì) Super Rebel 這個(gè)網(wǎng)站的時(shí)候,這種感覺(jué)就非常明顯。打開(kāi)頁(yè)面之后,注意力會(huì)迅速被右上角的圖片吸引,隨后便忍不住把對(duì)比強(qiáng)烈的所有模塊都掃視一遍。黑白色搭配大量信息很容易創(chuàng)造出信息過(guò)載的效果和體驗(yàn)。

圖片的選取

Jimmy Chin 在他的作品集網(wǎng)站的「關(guān)于」頁(yè)面當(dāng)中,他將自己的照片直接放了進(jìn)去,色彩采用了單純的黑色。

色彩的明暗和飽和度的選取,直接影響著整個(gè)設(shè)計(jì)的情緒,在這里,單純的黑色讓整個(gè)頁(yè)面的形式感更強(qiáng),而所呈現(xiàn)出來(lái)的感覺(jué)也非常的銳利。想想看,他穿著黃色的襯衫和綠色的褲子,那么整個(gè)圖片所呈現(xiàn)出來(lái)的感覺(jué)是完全不同的,浮夸而醒目。

圖片的選取對(duì)于情緒的表達(dá)和氛圍的營(yíng)造有著巨大的影響。

也可以營(yíng)造輕松的氛圍

許多深色系的網(wǎng)站都給人以深沉、怪異的感覺(jué),但是深色并不完全代表著負(fù)面的情緒。深色系的網(wǎng)站同樣可以被設(shè)計(jì)得輕松而富有活力,這主要取決于你如何將元素組合到一起。

在 Atom 這個(gè)網(wǎng)站當(dāng)中,整個(gè)背景都采用了典型的深灰,但是卡通角色和輕盈的色調(diào)讓網(wǎng)站凸顯出一種可愛(ài)而有趣的感覺(jué)。這樣的設(shè)計(jì)也能帶來(lái)視覺(jué)奇觀,并且不會(huì)讓用戶(hù)感覺(jué)到負(fù)面的感受。

這種設(shè)計(jì)讓用戶(hù)和網(wǎng)站之間的情感聯(lián)系更輕松,讓服務(wù)更容易為用戶(hù)所接受。

結(jié)語(yǔ)

那些帶有負(fù)面情緒和獨(dú)特氛圍的網(wǎng)站,你喜歡嗎?帶有這樣情緒和氛圍的網(wǎng)站,需要設(shè)計(jì)師花費(fèi)更多的時(shí)間和精力來(lái)拿捏程度,來(lái)達(dá)成相應(yīng)的設(shè)計(jì)目標(biāo),而且這樣的設(shè)計(jì)并非不好。情緒化的設(shè)計(jì),有趣而神秘的氛圍,帶有負(fù)面情感的表達(dá),躁動(dòng)甚至暴躁的設(shè)計(jì),這些都有其獨(dú)特的作用。

藍(lán)藍(lán)設(shè)計(jì)www.miumiuwan.com )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)


你真的明白用戶(hù)需求是什么嗎?

博博

你真的明白用戶(hù)需求是什么嗎?

人人都是產(chǎn)品經(jīng)理 2016-03-14 18:26:26

如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請(qǐng)點(diǎn)這里

來(lái)人人都是產(chǎn)品經(jīng)理【起點(diǎn)學(xué)院】,BAT實(shí)戰(zhàn)派產(chǎn)品總監(jiān)手把手系統(tǒng)帶你學(xué)產(chǎn)品、學(xué)運(yùn)營(yíng)。

文章中的觀點(diǎn)是鄙人在各大運(yùn)營(yíng)類(lèi)網(wǎng)站學(xué)習(xí)總結(jié)的知識(shí),加上本人對(duì)運(yùn)營(yíng)的一點(diǎn)看法,愚昧之見(jiàn),還望批評(píng)指正。

你真的明白用戶(hù)需求是什么嗎?

相信很多在互聯(lián)網(wǎng)公司工作的朋友們都曉得用戶(hù)需求挖掘這件讓人頭疼的事情。產(chǎn)品之所以會(huì)被生產(chǎn)出來(lái),其主要目的,就是為了滿(mǎn)足使用者的需求。而使用者的需求是什么?如何去挖掘這些需求?這些繁雜的需求中又有哪些是真,哪些是假等等問(wèn)題,都是每一個(gè)產(chǎn)品/運(yùn)營(yíng)人員頭疼的一件事情。

你真的明白用戶(hù)需求是什么嗎?

產(chǎn)品的存在源于用戶(hù)的需求。像汽車(chē)的出現(xiàn),是人們對(duì)于更高交通效率的需求,電腦的出現(xiàn),源于人們對(duì)辦公的需求等等。觀察移動(dòng)互聯(lián)網(wǎng)時(shí)代下的手機(jī)應(yīng)用市場(chǎng),各類(lèi)產(chǎn)品出現(xiàn)的原因也正是源于人們?cè)絹?lái)越多,越復(fù)雜的需求。像滴滴打車(chē)滿(mǎn)足了人們方便叫車(chē)的需求,餓了么滿(mǎn)足了人們選擇訂餐的需求等等。上面舉的兩個(gè)例子只是眾多需求中最基本的需求。而根據(jù)馬斯洛需求分析層次理論,人類(lèi)的需求有五層,在滿(mǎn)足生理與安全需求之后,人們還會(huì)往上追求尊重需求社會(huì)需求和個(gè)人實(shí)現(xiàn)需求。這些需求成為產(chǎn)品生產(chǎn)源源不斷的動(dòng)力。如果把產(chǎn)品看作是一個(gè)孩子,那么用戶(hù)需求,就可以看作是決定這個(gè)孩子形態(tài)的DNA。用戶(hù)需求不僅對(duì)產(chǎn)品的誕生有著決定性的影響,而且在未來(lái),在產(chǎn)品發(fā)展的過(guò)程中,還會(huì)不斷地影響產(chǎn)品的形態(tài),決定產(chǎn)品最終的樣子。 所以產(chǎn)品需求對(duì)產(chǎn)品的重要性不言而喻。本文將從用戶(hù)需求挖掘的方法,用戶(hù)需求挖掘后的選擇,用戶(hù)需求挖掘中的誤區(qū)三個(gè)方面的問(wèn)題出發(fā)進(jìn)行討論。

你真的明白用戶(hù)需求是什么嗎?

1.用戶(hù)需求挖掘的方法

(1)需求挖掘的渠道

A.產(chǎn)品開(kāi)發(fā)前

1. 市場(chǎng)調(diào)研

任何一款產(chǎn)品的出現(xiàn)都是因?yàn)檫@個(gè)市場(chǎng)有需求,需求在哪,大旗就得往哪里揮。所以市場(chǎng)調(diào)研,毫無(wú)疑問(wèn)是需求挖掘最重要的事情。設(shè)計(jì)好調(diào)研的問(wèn)卷,利用網(wǎng)絡(luò)渠道,像QQ群,帖吧,社區(qū),微信群等,在線下,通過(guò)深入目標(biāo)用戶(hù)的群體進(jìn)行走訪調(diào)查,深入了解目標(biāo)用戶(hù)的需求。線上線下,深入目標(biāo)人群,獲得足夠多的調(diào)查結(jié)果,并確保獲得的需求具有一般性。

2. 產(chǎn)品分析

現(xiàn)在移動(dòng)市場(chǎng)的商品已經(jīng)有很多,可以說(shuō)目前可以被想到的產(chǎn)品已經(jīng)有人在做了。所以要開(kāi)發(fā)的產(chǎn)品難免會(huì)有類(lèi)似的競(jìng)品。這時(shí)候就需要我們?nèi)シ治鲞@些競(jìng)品,找到共同點(diǎn)即已經(jīng)被滿(mǎn)足的需求,找到差異點(diǎn),即未被滿(mǎn)足的空白區(qū)。比如如果你想要開(kāi)發(fā)一款社交軟件,那么就要尋找像微信,YY語(yǔ)音,QQ,陌陌等一系列的社交產(chǎn)品作為競(jìng)品進(jìn)行分析,在這些競(jìng)品中找到社交軟件應(yīng)該有的通用的功能,找到這些社交軟件中沒(méi)有的,同時(shí)用戶(hù)又有需求的功能作為你的產(chǎn)品的差異點(diǎn)。

3. 數(shù)據(jù)分析

隨著大數(shù)據(jù)時(shí)代的到來(lái),數(shù)據(jù)在決策中的作用越來(lái)越大。用戶(hù)的很多潛意識(shí)或者有意識(shí)的行為,都可以通過(guò)大數(shù)據(jù)體現(xiàn)出來(lái)。很多情況下,用戶(hù)很難清楚地說(shuō)明他們的實(shí)際需求,很多時(shí)候他們的判斷與實(shí)際的需求是不一致的。顯性的需求沒(méi)辦法很好的表達(dá)出來(lái),更不要說(shuō)那些用戶(hù)覺(jué)察不到的隱藏的需求。所以數(shù)據(jù),這個(gè)不會(huì)騙人的東西,可以很好地幫助我們?nèi)シ治鲂枨?。通過(guò)對(duì)用戶(hù)數(shù)據(jù)的分析,需求可以較清楚地被表現(xiàn)出來(lái)。在產(chǎn)品未開(kāi)發(fā)之前,數(shù)據(jù)的來(lái)源可以有很多方面,各大搜索引擎的關(guān)鍵字排行榜,微博熱搜榜,同行的數(shù)據(jù)報(bào)告,或者是一些數(shù)據(jù)網(wǎng)站的免費(fèi)或者付費(fèi)的數(shù)據(jù)報(bào)告,都可以成為我們的數(shù)據(jù)分析來(lái)源。

你真的明白用戶(hù)需求是什么嗎?

B.產(chǎn)品開(kāi)發(fā)后

1. 搜索記錄和用戶(hù)行徑

在產(chǎn)品上線后,用戶(hù)的搜索行為和用戶(hù)的行徑是分析需求的一個(gè)重要來(lái)源。用戶(hù)搜索過(guò)程提及的關(guān)鍵詞,舉個(gè)簡(jiǎn)單的例子,比如婚戀產(chǎn)品中,如果搜索詞中“35歲以后”“北京戶(hù)口“的搜索頻率很高,那么我們就可以知道用戶(hù)對(duì)對(duì)象篩選有需求,就可以考慮加入對(duì)象篩選這個(gè)功能。另一個(gè)是用戶(hù)行徑,哪個(gè)功能是重度使用功能,哪個(gè)功能使用率不高,哪個(gè)功能用戶(hù)的中途放棄率最高,都是需求分析中的重要數(shù)據(jù)。

2. 用戶(hù)日志和用戶(hù)數(shù)據(jù)

如果擁有大量的用戶(hù)日志和用戶(hù)數(shù)據(jù),那么要好好地利用這筆難得的資源。找一個(gè)用戶(hù)IP出來(lái),GREP一下,分分鐘就能獲得這個(gè)用戶(hù)的完整訪問(wèn)和操作軌跡,分析用戶(hù)的操作行為,設(shè)身處地的理解用戶(hù)的心情,理解用戶(hù)的處境,從而理解自己產(chǎn)品和運(yùn)營(yíng)中,是不是有一些不合適,不妥當(dāng)?shù)牡胤剑嬲炎约捍氲接脩?hù)的體驗(yàn)中,理解用戶(hù)的不滿(mǎn),理解用戶(hù)的掙扎,理解用戶(hù)在使用中的困惑和障礙。

3. 用戶(hù)反饋

產(chǎn)品在上線之后,通過(guò)各種渠道獲取盡可能多的用戶(hù)反饋或者邀請(qǐng)用戶(hù)面對(duì)面進(jìn)行產(chǎn)品的評(píng)測(cè)。通過(guò)用戶(hù)反饋了解產(chǎn)品還沒(méi)有滿(mǎn)足的需求還有產(chǎn)品中的偽需求或者說(shuō)是冗余的功能是最直接最有效的方式。因?yàn)檫@群用戶(hù)是你最珍貴的種子用戶(hù)。

你真的明白用戶(hù)需求是什么嗎?

(2)需求挖掘的思想方法

A.頭腦風(fēng)暴法

在收集產(chǎn)品需求的過(guò)程中,最常使用的是頭腦風(fēng)暴法。讓參與者敞開(kāi)思想,集體討論,相互啟發(fā)、相互激勵(lì)、相互彌補(bǔ)知識(shí)缺陷,引起創(chuàng)造性設(shè)想的連鎖反應(yīng),產(chǎn)生盡可能多的創(chuàng)意。

B.創(chuàng)意分合法

創(chuàng)意分合法是創(chuàng)意思維訓(xùn)練方法之一,主要是將原不相同亦無(wú)關(guān)聯(lián)的元素加以整合,產(chǎn)生新的意念、面貌。分為兩種心理運(yùn)作過(guò)程:使熟悉的事物變得新奇(由合而分)、使新奇的事物變得熟悉(由分而合),主要是運(yùn)用類(lèi)推(analogies)和譬喻(metaphors)的技術(shù)來(lái)協(xié)助分析問(wèn)題,并形成相異的觀點(diǎn)。

C.屬性列舉法

屬性列舉法即特性列舉法也稱(chēng)為分布改變法,特別適用于老產(chǎn)品的升級(jí)換代。其特點(diǎn)是將一種產(chǎn)品的特點(diǎn)列舉出來(lái),制成表格,然后再把改善這些特點(diǎn)的事項(xiàng)列成表。屬性列舉法是根據(jù)設(shè)計(jì)對(duì)象的構(gòu)造及性能,按名詞、動(dòng)詞、形容詞等特性提出各種改進(jìn)屬性的思路,從而萌發(fā)新設(shè)想的一種方法。

D.6W3H問(wèn)題法

面對(duì)龐雜的需求分析工作、不知從何做起時(shí),6W3H分析法不僅有利于較系統(tǒng)和周密的思考問(wèn)題,使思維具有條理性,也有利于較深入地發(fā)掘問(wèn)題,有針對(duì)性地提出更多的可行性設(shè)想,幫助產(chǎn)品經(jīng)理制定有效的目標(biāo)。

6W3H分別是:

  1. Who(什么人)產(chǎn)品的目標(biāo)客戶(hù)是誰(shuí)?是一類(lèi)群體還是幾類(lèi)群體?針對(duì)產(chǎn)品的用戶(hù)群進(jìn)行分析,了解目前用戶(hù)群的年齡、性別、特征、區(qū)域、習(xí)慣、興趣、愛(ài)好、收入、消費(fèi)等情況。
  2. When(什么時(shí)間)用戶(hù)可能會(huì)在什么時(shí)候使用到產(chǎn)品。產(chǎn)品推介的時(shí),必須選擇合適的時(shí)機(jī),同時(shí)還要考慮用戶(hù)的停留時(shí)間、使用高峰時(shí)間、跳出時(shí)間。
  3. Where(什么地方)用戶(hù)可能在那些條件和環(huán)境使用產(chǎn)品。針對(duì)什么樣的環(huán)境條件,如,針對(duì)不同的操作系統(tǒng)環(huán)境、不同的地理位置,要有不同的方案。
  4. Why(為什么)此法主要用于了解設(shè)計(jì)產(chǎn)品新功能是的目的是什么?是現(xiàn)有產(chǎn)品沒(méi)有滿(mǎn)足用戶(hù)需求還是為了滿(mǎn)足用戶(hù)的新需求、又或者僅僅是跟風(fēng)湊熱鬧。
  5. What(是什么)產(chǎn)品功能分析。用來(lái)分析產(chǎn)品基本功能和輔助功能的相互關(guān)系如何,用戶(hù)到底需要什么功能?
  6. Which(哪些)除了我們的產(chǎn)品,市場(chǎng)上還有可替代產(chǎn)品嗎?
  7. How do(怎么做)用戶(hù)怎么使用產(chǎn)品,使用產(chǎn)品的流程是什么?怎么樣更省力?符合用戶(hù)的使用習(xí)慣嗎?體驗(yàn)怎樣?
  8. How much(多少錢(qián))用戶(hù)使用產(chǎn)品需要付費(fèi)嗎?需要付多少?是否超出了用戶(hù)的支付能力?
  9. How many(多少次)用戶(hù)的使用頻率是怎樣的?經(jīng)常使用?偶爾使用?還是不定期?

2.用戶(hù)需求挖掘后的選擇

A. 甄別真假需求

用戶(hù)的需求和用戶(hù)的痛點(diǎn) .需要注意的是,用戶(hù)提出的需求不一定是用戶(hù)真正的需求。

  • 第一,用戶(hù)沒(méi)有很強(qiáng)的產(chǎn)品意識(shí),很多都是模棱兩可的感覺(jué)。
  • 第二,用戶(hù)是貪婪的,他們往往會(huì)提很多自私的需求。

如果能夠躺在床上每天有人送錢(qián)送吃的給你洗衣服打掃房間這種需求絕對(duì)是強(qiáng)需求,但是可能么?

有些需求可能是低頻率的需求甚至是違背商業(yè)規(guī)則的需求,像春聯(lián)O2O,一鍵挑選春聯(lián)送貨上門(mén),新用戶(hù)還能免單哦~~這種需求用戶(hù)求之不得,需求可以說(shuō)是大了去了。但是有企業(yè)會(huì)做嗎?明顯不可能!所以不要一味地跟著用戶(hù)的需求走,不理智的需求分析行為,無(wú)疑是一種自殺的行為。

B.從需求中需找真正的痛點(diǎn)

在需求分析中,甄別真?zhèn)涡枨?,?duì)需求進(jìn)行抽絲剝繭的分析,剝開(kāi)表面淺顯的需求,通過(guò)邏輯思維分析,代入用戶(hù)使用的場(chǎng)景,去尋找造成這些需求下面更深層次的痛點(diǎn)。

舉個(gè)例子:360安全瀏覽器,看起來(lái)是好像用戶(hù)使用的需求是需要一個(gè)安全的瀏覽器,能夠保護(hù)他們上網(wǎng)的安全。但是如果給用戶(hù)一個(gè)絕對(duì)安全的,但是很卡的瀏覽器呢?如果我們給用戶(hù)一個(gè)安全系數(shù)較低,但是已經(jīng)能夠保證隱私等基本信息安全,同時(shí)又能夠保證瀏覽速度和瀏覽質(zhì)量的瀏覽器時(shí),用戶(hù)會(huì)選擇哪個(gè)呢?

瀏覽器本質(zhì)還是網(wǎng)上沖浪的工具,核心問(wèn)題還是使用過(guò)程的流暢度,瀏覽體驗(yàn)。安全性問(wèn)題,只是因?yàn)楝F(xiàn)在越來(lái)越多的信息泄露,用戶(hù)擔(dān)心自己信息安全而產(chǎn)生的一個(gè)附帶需求罷了。

2007年微軟推出vista時(shí),提高了安全性,但是同時(shí)也影響了使用效率。很多用戶(hù)由于沒(méi)有辦法忍受vista糟糕的操作體驗(yàn)而放棄使用它而轉(zhuǎn)用XP系統(tǒng),即使vista的安全性比xp的要高。所以從這兩個(gè)例子我們可以看到,很多時(shí)候,我們以為理所當(dāng)然的需求,其實(shí)并不是用戶(hù)核心的需求,又或者說(shuō),存在這種需求,但是在需求平衡,他并不是占大頭的。所以尋找需求,要求我們抽絲剝繭,發(fā)掘最最本質(zhì)的需求。至于怎么找,這個(gè)就要看對(duì)產(chǎn)品和所在領(lǐng)域的深挖程度了。

3.用戶(hù)需求挖掘中的誤區(qū)

在需求分析中,常見(jiàn)的錯(cuò)誤有以下幾個(gè)方面:

  1. 分析對(duì)象出錯(cuò)
  2. 分析方法錯(cuò)誤
  3. 永遠(yuǎn)以為自己比客戶(hù)更聰明
  4. 不尊重用戶(hù)的現(xiàn)實(shí)選擇
  5. 客戶(hù)和用戶(hù)沒(méi)有區(qū)別來(lái)對(duì)待對(duì)需求的一廂情愿,理解出錯(cuò)

很多產(chǎn)品人員對(duì)于產(chǎn)品的理解,很大程度上是取決于個(gè)人的感覺(jué)+身邊人的感覺(jué)。但是這種需求理解方式無(wú)疑是錯(cuò)誤的,幾個(gè)人并不能代表大多數(shù)人的想法,統(tǒng)計(jì)學(xué)上有個(gè)著名的觀點(diǎn),當(dāng)數(shù)據(jù)越來(lái)越大時(shí),趨勢(shì)將會(huì)越來(lái)越穩(wěn)定,某些值將會(huì)越來(lái)越穩(wěn)定在某個(gè)數(shù)值范圍區(qū)間,所以要求我們?cè)诜治鲂枨髸r(shí),不能以偏概全,一廂情愿,必須跳出自己的圈子,去目標(biāo)客戶(hù)群那里,跟大量的人接觸,跟他們聊產(chǎn)品。讓他們來(lái)評(píng)價(jià)產(chǎn)品,這樣得到的產(chǎn)品需求,才能夠真正的反映絕大部分用戶(hù)的需求。

你真的明白用戶(hù)需求是什么嗎?

設(shè)計(jì)師的知識(shí)管理體系怎么建立?只需4個(gè)步驟,實(shí)現(xiàn)能力價(jià)值提升

博博

設(shè)計(jì)師的知識(shí)管理體系怎么建立?只需4個(gè)步驟,實(shí)現(xiàn)能力價(jià)值提升 

設(shè)計(jì)夾  2018-05-10

作者 NEPO


想要知道設(shè)計(jì)師如何根據(jù)行業(yè)變化建立知識(shí)管理體系,首先要了解行業(yè)整體的變化趨勢(shì)。

 

/一/

行業(yè)的發(fā)展變化


國(guó)內(nèi)UI 行業(yè)2007年萌芽,至今經(jīng)歷以下幾個(gè)階段:

 

隨著2007年第一代 iPhone面世,國(guó)內(nèi)進(jìn)入界面設(shè)計(jì)時(shí)代。iPhone等智能手機(jī)的興起,令各個(gè)行業(yè)迎來(lái)移動(dòng)界面設(shè)計(jì)的業(yè)務(wù)和挑戰(zhàn),不同類(lèi)型的設(shè)計(jì)公司承接了相關(guān)零散業(yè)務(wù)。后因?yàn)闃I(yè)務(wù)量不斷增加,出現(xiàn)了專(zhuān)注于界面設(shè)計(jì)的工作室,就正式進(jìn)入了界面設(shè)計(jì)時(shí)代,這一時(shí)期持續(xù)到2012年左右。

 

到了2012、2013年,移動(dòng)互聯(lián)網(wǎng)的普及加速了界面設(shè)計(jì)行業(yè)的升溫。業(yè)務(wù)形態(tài)多元化,業(yè)務(wù)內(nèi)容不斷增多,UI 設(shè)計(jì)師崗位供不應(yīng)求。市場(chǎng)上涌現(xiàn)大量的相關(guān)培訓(xùn),UI 設(shè)計(jì)師一度成為掘金崗位。短短兩年內(nèi),快餐式培訓(xùn)培養(yǎng)出大批量UI設(shè)計(jì)師。


 

同時(shí),2012到2013年也被稱(chēng)為交互設(shè)計(jì)時(shí)代的開(kāi)端。需求方開(kāi)始從注重界面美觀度轉(zhuǎn)向更注重產(chǎn)品使用的流暢度,這一時(shí)期萌生了交互設(shè)計(jì)師這一崗位。但由于市場(chǎng)需求大,準(zhǔn)入門(mén)檻低,行業(yè)內(nèi)怪象叢生。大小設(shè)計(jì)公司/工作室之間價(jià)格戰(zhàn)嚴(yán)重,各種壓價(jià),甚至聘請(qǐng)資歷尚淺的實(shí)習(xí)生負(fù)責(zé)項(xiàng)目,出品質(zhì)量參差不齊。

 

直到2016年,移動(dòng)互聯(lián)網(wǎng)創(chuàng)業(yè)熱潮冷卻,行業(yè)歸于平靜,進(jìn)入理性探索期。建立規(guī)范,沉淀、收獲,行業(yè)發(fā)生裂變。加之外部大環(huán)境,例如移動(dòng)互聯(lián)網(wǎng)、國(guó)家政策、整體經(jīng)濟(jì)形勢(shì)等多方面的變化,使得行業(yè)走勢(shì)不明朗。

 

在這個(gè)時(shí)候,對(duì)于設(shè)計(jì)師而言,唯有不斷提升自身能力,找準(zhǔn)行業(yè)內(nèi)定位,才能去追趕甚至走在行業(yè)變化的前列。


 

/二/

設(shè)計(jì)師價(jià)值的演變


設(shè)計(jì)師在企業(yè)內(nèi)的角色一直在變化。從以往純粹的業(yè)務(wù)協(xié)同,到今天逐漸能夠通過(guò)設(shè)計(jì)來(lái)提升產(chǎn)品和品牌的價(jià)值。未來(lái)設(shè)計(jì)師將更加深入業(yè)務(wù)體系,以設(shè)計(jì)驅(qū)動(dòng)商業(yè)創(chuàng)新,實(shí)現(xiàn)業(yè)務(wù)價(jià)值放大。

在這個(gè)過(guò)程中,設(shè)計(jì)師的職能、視野會(huì)不斷往上下游延伸,設(shè)計(jì)師自身要參與到更多的業(yè)務(wù)體系,對(duì)產(chǎn)品和品牌的商業(yè)模式有更清晰的認(rèn)知,與業(yè)務(wù)部門(mén)的同事一起發(fā)現(xiàn)問(wèn)題,將問(wèn)題轉(zhuǎn)化為設(shè)計(jì)問(wèn)題,進(jìn)而提出設(shè)計(jì)策略。


 

/三/

設(shè)計(jì)師的自我成長(zhǎng)


行業(yè)趨勢(shì)不斷變化,對(duì)設(shè)計(jì)師綜合能力的要求不斷提高。據(jù)此,我們梳理出各階段設(shè)計(jì)師能力價(jià)值的模型,將設(shè)計(jì)師按初級(jí)、中級(jí)、高級(jí)、專(zhuān)家級(jí)等四個(gè)層級(jí)劃分,展現(xiàn)不同的能力需求。

設(shè)計(jì)師個(gè)人的知識(shí)體系建立,則需要圍繞著這個(gè)過(guò)程進(jìn)行。


1、什么是個(gè)人知識(shí)管理


設(shè)計(jì)師構(gòu)建個(gè)人知識(shí)管理體系的第一步,是有意識(shí)培養(yǎng)收集、整理、思考的習(xí)慣。

 

  • 在項(xiàng)目早期有意識(shí)地收集各類(lèi)頭腦風(fēng)暴的資料,包括照片、資料等;

  • 在項(xiàng)目完成后,對(duì)各個(gè)時(shí)期迭代的設(shè)計(jì)素材、稿件進(jìn)行歸納整理,總結(jié);

  • 每隔一個(gè)季度,調(diào)閱以前的項(xiàng)目進(jìn)行研究和重新設(shè)計(jì)。

 

通過(guò)這些習(xí)慣的訓(xùn)練和不斷重復(fù),培養(yǎng)自己的思維,以期在未來(lái)的某個(gè)時(shí)間點(diǎn)量變達(dá)到質(zhì)變。

 

個(gè)人知識(shí)管理是一套解決問(wèn)題的技巧,本身不創(chuàng)造價(jià)值。它的意義在于融入你關(guān)注的業(yè)務(wù)領(lǐng)域當(dāng)中,幫助你獲得分析和解決問(wèn)題的能力。它是催化劑,必須依附于行業(yè)。

 

2、如何根據(jù)設(shè)計(jì)師價(jià)值模型建立個(gè)人知識(shí)管理體系


知識(shí)的進(jìn)階應(yīng)與個(gè)人價(jià)值模型相匹配。


初級(jí)設(shè)計(jì)師的定位是協(xié)助執(zhí)行。初級(jí)者主要配合切圖、延展類(lèi)的工作,專(zhuān)注于輸出,依賴(lài)于各類(lèi)資料和參考素材,創(chuàng)新成分10%-30%。而對(duì)于很多初級(jí)設(shè)計(jì)師來(lái)講,建設(shè)素材庫(kù)可能是一個(gè)無(wú)序的過(guò)程,需要有意識(shí)地通過(guò)一些方法、借助一些工具使這個(gè)過(guò)程有序起來(lái)。

 

中級(jí)設(shè)計(jì)師要能快速進(jìn)行設(shè)計(jì)延展,他們專(zhuān)注于推動(dòng)設(shè)計(jì)任務(wù),創(chuàng)新成分30%-40%。中級(jí)者需要更注重設(shè)計(jì)規(guī)范的建立和應(yīng)用,使之成為潛意思里的常識(shí)。

 

高級(jí)設(shè)計(jì)師的定位是擁有自己的設(shè)計(jì)風(fēng)格,能夠獨(dú)立完成提案,創(chuàng)新的成分50%以上。他們能夠?qū)⒋饲八鄯e的經(jīng)驗(yàn),內(nèi)化為自己的方法理論,并重復(fù)利用這套方法理論,完成高質(zhì)量的設(shè)計(jì)作品,除此之外還能夠善于總結(jié)和分享。階段的重點(diǎn)在于設(shè)計(jì)創(chuàng)新和反復(fù)打磨方法論。


專(zhuān)家級(jí)設(shè)計(jì)師的定位在于具有獨(dú)創(chuàng)性的設(shè)計(jì)趨勢(shì)和概念,能夠引領(lǐng)行業(yè)發(fā)展,創(chuàng)新成分80%以上。他們已經(jīng)完成底層思維的構(gòu)建,多數(shù)是研究者的角色,專(zhuān)注于探索某個(gè)行業(yè)的未來(lái)走向,找出設(shè)計(jì)能參與并發(fā)揮最大價(jià)值的節(jié)點(diǎn)。他們的研究成果、設(shè)計(jì)觀點(diǎn)和理念將會(huì)對(duì)行業(yè)產(chǎn)生積極影響并發(fā)揮推動(dòng)作用,甚至引領(lǐng)一個(gè)時(shí)代。

 

3、不斷刻意練習(xí)

 

知識(shí)的進(jìn)階需要和設(shè)計(jì)師價(jià)值模型相匹配,同樣需要找到對(duì)應(yīng)的個(gè)人知識(shí)管理步驟。資源對(duì)應(yīng)“瀏覽、儲(chǔ)存”,“常識(shí)”對(duì)應(yīng)“整理、分類(lèi)”,“方法”對(duì)應(yīng)“課題、分享”,“思維”對(duì)應(yīng)“利用、探索”,一共4個(gè)步驟。

但這不意味我們提倡在對(duì)應(yīng)階段只做對(duì)應(yīng)的事。正相反,即使是一名初級(jí)設(shè)計(jì)師,我們也會(huì)建議他盡可能多加練習(xí),爭(zhēng)取能夠完整地完成這4個(gè)步驟并不斷重復(fù)。只有不斷刻意練習(xí),你才能實(shí)現(xiàn)向上一層的躍遷。差別只在于,不同階段不同步驟所花費(fèi)的時(shí)間精力占比不同。

 

對(duì)于設(shè)計(jì)師相對(duì)熟悉的前兩個(gè)步驟(瀏覽、儲(chǔ)存),這里就不一一說(shuō)明。重點(diǎn)講解后面的步驟。

 

關(guān)于整理和分類(lèi),我們提倡嘗試多維度分類(lèi)。這樣能夠快速調(diào)用資源,應(yīng)對(duì)不同的設(shè)計(jì)需求及問(wèn)題。

分享前的梳理和復(fù)習(xí)是鞏固已有知識(shí)的大好機(jī)會(huì)。分享時(shí)則是深層次思考的過(guò)程,能夠開(kāi)闊思路,發(fā)現(xiàn)問(wèn)題。當(dāng)然,分享之后獲得的成就感也是不言而喻的,這種尊重感一方面會(huì)驅(qū)動(dòng)自我不斷幫助他人,另一方面激勵(lì)自己不斷學(xué)習(xí),形成良性循環(huán).

 

從利己角度來(lái)講,分享可以把你的【隱性知識(shí)】變?yōu)椤撅@性知識(shí)】,從而實(shí)現(xiàn)【讓別人知道你知道】的目的,創(chuàng)建個(gè)人品牌,提升核心競(jìng)爭(zhēng)力。

 

個(gè)人知識(shí)管理是一個(gè)從【海綿式】到【淘金式】的過(guò)程。無(wú)序?yàn)g覽、收集、分類(lèi)整理是海綿期,需要如海綿吸水般發(fā)散式學(xué)習(xí);分享、實(shí)踐運(yùn)用、獨(dú)立探索屬于淘金期,需要總結(jié)和找到適合自己的方法、理論,而不是一味地吸收。

中間是轉(zhuǎn)化期也是轉(zhuǎn)折點(diǎn)。這個(gè)時(shí)候選擇比努力更重要。只有找到合適的環(huán)境,才能去獨(dú)立探索、實(shí)踐應(yīng)用。



九品也盡力為全員創(chuàng)造更加開(kāi)放的探索環(huán)境。幾周前我們舉辦了關(guān)于“如何快速了解一個(gè)新領(lǐng)域,并找到設(shè)計(jì)策略”的研討會(huì),討論了設(shè)計(jì)師在接觸全新領(lǐng)域及客戶(hù)時(shí),該如何快速學(xué)習(xí),從哪些維度、用哪些方法和資源去學(xué)習(xí);以及,如何找到與客戶(hù)的共鳴、發(fā)現(xiàn)潛在問(wèn)題、找到設(shè)計(jì)策略……

研討會(huì)的熱烈程度超乎每一個(gè)人的想象。會(huì)議中大家紛紛分享自己的相關(guān)經(jīng)歷和看法,會(huì)后也將討論成果帶入到項(xiàng)目中進(jìn)行實(shí)踐和修正。


未來(lái)我們會(huì)持續(xù)探索新經(jīng)濟(jì)時(shí)代下設(shè)計(jì)師在各個(gè)領(lǐng)域的角色定位和價(jià)值范圍,優(yōu)化、深化客戶(hù)服務(wù)體系,專(zhuān)精、專(zhuān)進(jìn)地提供服務(wù)。

 

-end-

轉(zhuǎn)載色彩在網(wǎng)頁(yè)設(shè)計(jì)中的有哪些重要角色?

博博

在生活中,不管是瀏覽網(wǎng)頁(yè)還是使用APP,我們都能看到色彩是其中重要的設(shè)計(jì)元素。每一年我們都能看到很多“流行趨勢(shì)預(yù)測(cè)”之類(lèi)的文章,而這些流行趨勢(shì)里無(wú)一不包含色彩。

隨著時(shí)間的推移,設(shè)計(jì)師們?cè)谏实氖褂蒙细哟竽?,更加有策略。有時(shí),色彩用來(lái)突出某個(gè)元素,有時(shí)用來(lái)講好一個(gè)故事,有時(shí)用來(lái)強(qiáng)化品牌的輸出。今天我們就來(lái)舉幾個(gè)例子。


強(qiáng)化背景

幾年前有一個(gè)很流行的趨勢(shì)是采用大膽的背景,現(xiàn)在還是能看到很多例子。在一個(gè)好的設(shè)計(jì)里,豐富多彩的背景能夠讓某一區(qū)域成功吸引注意力。不管你認(rèn)為流行趨勢(shì)是什么,不可否認(rèn)的是,好的背景色能讓一個(gè)部分脫穎而出。

下面這個(gè)設(shè)計(jì)來(lái)自Root工作室,使用黃色背景來(lái)突出切斯特動(dòng)物園的案例研究。黃色背景設(shè)定了這個(gè)案例研究的基調(diào)。當(dāng)然了,并不是所有的案例都使用像切斯特動(dòng)物園黃色這樣鮮艷的顏色,因?yàn)檫@個(gè)案例的設(shè)計(jì)是極簡(jiǎn)風(fēng)格,并沒(méi)有需要特別突出的內(nèi)容,所以鮮艷背景恰到好處。

接下來(lái)這個(gè)例子是Mambo Mambo,它使用色彩來(lái)突出組合的不同部分。有些部分是霓虹黃色,有些是深藍(lán),有些甚至是黑色。在截圖中,我們可以看到,霓虹黃色與綠色搭配,藍(lán)色和膚色搭配,看起來(lái)非常和諧。

在整個(gè)頁(yè)面中,正是這些背景色的使用使不同部分都變得獨(dú)特而有趣。同時(shí)呢,也起到了品牌宣傳的效果。


突出內(nèi)容

顏色運(yùn)用得當(dāng)可以更好地突出想要突出的部分。讓我們從優(yōu)步手語(yǔ)登錄頁(yè)面開(kāi)始,橙色的漸變背景肯定會(huì)吸引用戶(hù)的注意力。這是一個(gè)很棒的設(shè)計(jì)策略,因?yàn)檫@個(gè)頁(yè)面的目的就是教人們基本的手語(yǔ),很大程度上是依賴(lài)視覺(jué)線索實(shí)現(xiàn)的。

接下來(lái)是Kickpush 設(shè)計(jì)工作室的頁(yè)面??磮D上的文字我們就知道,Kickpush希望展示自己與眾不同的個(gè)性。這個(gè)配色方案的選擇就很有目的性,將Kickpush的個(gè)性快速直觀地表達(dá)出來(lái)了。


講好故事

色彩有助于講好一個(gè)故事,Bloom的主頁(yè)就是個(gè)很好的例子。在整個(gè)設(shè)計(jì)中,他們使用的是同樣的電子藍(lán)。相同的配色與其他視覺(jué)元素一起,幫助用戶(hù)從頁(yè)眉滾動(dòng)到頁(yè)腳。如果所有不同的部分都有不同的主色,那么故事的完整性就會(huì)被打破了。

對(duì)于Adobe的營(yíng)銷(xiāo)云登錄頁(yè)面,效果也是差不多的。整個(gè)設(shè)計(jì)是一個(gè)很大的版面,每個(gè)部分都有自己的配色方案,從最頂部的淺藍(lán)色一直到最底部的深紫色。我們可以看到,整個(gè)配色不僅僅是純的UI顏色,照片選用的色調(diào)也與每一種背景色相配。

因?yàn)檫@個(gè)設(shè)計(jì)是一個(gè)很長(zhǎng)的頁(yè)面,顏色有助于講述每個(gè)部分的故事。


激發(fā)興趣,強(qiáng)化個(gè)性

有時(shí),顏色是專(zhuān)門(mén)用來(lái)給設(shè)計(jì)增添趣味性的。為了更有效的使用色彩,有時(shí)大膽的顏色并不一定要在設(shè)計(jì)的前面和中心。

例如,Designmodo自己的Qards著陸頁(yè)面使用了各種各樣的小色塊,從而使得登陸頁(yè)看起來(lái)更令人愉快。


提升品牌

強(qiáng)化品牌,我認(rèn)為這是色彩最有力的作用了,當(dāng)然了,我不是指上文中Kickpush 或是Bloom那種使用大塊背景色的方式,而是批判性的、策略性的使用顏色。

我們很多人都見(jiàn)證了Asana的改版,在新版本中加入了不少顏色。在網(wǎng)站的某些部分,顏色被大量地使用,而在其他部分則不是那么多,這是為了在總體上實(shí)現(xiàn)平衡。Asana選用的顏色多變而充滿(mǎn)活力,搭配的也非常好?,F(xiàn)在,Asana的品牌色彩由亮粉色,橙色和紫色組成,充滿(mǎn)活力??梢哉f(shuō),顏色策略似乎是Asana品牌定位的關(guān)鍵。

Stripe公司的策略也差不多,使用相鄰顏色之間的漸變,比如藍(lán)色和綠色,這可能是這種顏色使用的一個(gè)大趨勢(shì)。品牌整體上是藍(lán)色,同時(shí)也包含綠色、粉色、紫色和橙色。這么多顏色共同配合,增強(qiáng)了Stripe公司的品牌影響力。

最后一個(gè)例子是Goulburn山谷的網(wǎng)站。他們的品牌使用了一些不同尋常的顏色,不過(guò)整個(gè)設(shè)計(jì)看起來(lái)不錯(cuò)。

登錄頁(yè)面中使用的顏色和照片中的截圖是一樣的:綠色略帶橙色。由于照片中色彩的協(xié)調(diào),整個(gè)著陸頁(yè)都很流暢。

總結(jié)

無(wú)論是Asana,用顏色創(chuàng)造更好的品牌;還是Kickpush,使用明亮的紅色背景突出內(nèi)容,讓用戶(hù)意識(shí)到它的與眾不同,我們看到了顏色在網(wǎng)站中的戰(zhàn)略性意義。

最重要的是,顏色有助于塑造個(gè)性,尤其是品牌形象。當(dāng)網(wǎng)頁(yè)設(shè)計(jì)趨勢(shì)發(fā)生變化時(shí),網(wǎng)頁(yè)設(shè)計(jì)中色彩的使用只會(huì)變得越來(lái)越好。


一個(gè)月薪過(guò)萬(wàn)的UI設(shè)計(jì)師,成功的背后究竟經(jīng)歷了什么?(上篇)

藍(lán)藍(lán)設(shè)計(jì)的小編

作為一名專(zhuān)業(yè)的UI設(shè)計(jì),其實(shí)工作職責(zé)無(wú)外乎包括界面設(shè)計(jì)、圖標(biāo)設(shè)計(jì)、動(dòng)效設(shè)計(jì)、切片與標(biāo)注等。

四大分析法打造你的產(chǎn)品說(shuō)服力

資深UI設(shè)計(jì)者

開(kāi)篇明義,這四大分析法就是:市場(chǎng)分析、競(jìng)品分析、用戶(hù)分析、需求分析。從這四個(gè)角度深入分析,就能證明你產(chǎn)品方案的正確性。
其實(shí)干了多年的產(chǎn)品老手,一眼就能看出我說(shuō)的都是「廢話」,誰(shuí)都知道這四類(lèi)分析法是做產(chǎn)品的基本功,做好了當(dāng)然能把產(chǎn)品做好。是的,我寫(xiě)這篇文章還有一個(gè)目的:就是讓大家重新重視這些「基本功」,心態(tài)歸零。
很多時(shí)候,產(chǎn)品經(jīng)理都被各業(yè)務(wù)方需求壓得喘不過(guò)氣,更多時(shí)間在寫(xiě)文檔、畫(huà)原型、跟項(xiàng)目、處理 bug 反饋中度過(guò)。各位正在看本文的產(chǎn)品經(jīng)理可以回憶下,有多久沒(méi)認(rèn)真做過(guò)分析了?

話說(shuō)回來(lái),所謂「認(rèn)真分析」,也是有法可依、有據(jù)可循的。今天就給大家復(fù)盤(pán)下,身為產(chǎn)品經(jīng)理,最需要掌握的四大分析法,都如何來(lái)做。 

一、市場(chǎng)分析

市場(chǎng)分析的官方定義:
對(duì)市場(chǎng)容量、市場(chǎng)規(guī)模及市場(chǎng)特性等相關(guān)內(nèi)容進(jìn)行實(shí)事求是的經(jīng)濟(jì)分析及預(yù)測(cè) 。
包括三大范疇:
  • 從行業(yè)角度,要看行業(yè)有沒(méi)有發(fā)展,市場(chǎng)規(guī)模大不大,政策好不好;
  • 從用戶(hù)角度,要看市場(chǎng)中的用戶(hù)習(xí)慣、用戶(hù)構(gòu)成、用戶(hù)期望;
  • 從自身角度,要認(rèn)清在市場(chǎng)中自己的優(yōu)勢(shì)劣勢(shì),遇到的挑戰(zhàn)等。
如果要用一句話描述做市場(chǎng)分析的目的,就是看你要做的這個(gè)產(chǎn)品,能不能賺錢(qián)。是的,雖然很殘酷,但一款不賺錢(qián)的產(chǎn)品,無(wú)論用戶(hù)體驗(yàn)多好,設(shè)計(jì)多精美,技術(shù)多先進(jìn),仍舊是無(wú)法持續(xù)的。
當(dāng)然,除了能不能掙錢(qián)外,還要進(jìn)一步研究為什么能掙錢(qián),怎么掙錢(qián),怎么掙到更多錢(qián),能掙多少錢(qián)等等。
具體的分析方法,包括:
  • 搜集相關(guān)資料,包括宏觀經(jīng)濟(jì)、行業(yè)競(jìng)爭(zhēng)、技術(shù)趨勢(shì)、市場(chǎng)階段、市場(chǎng)規(guī)模等;
  • 分析市場(chǎng)用戶(hù)基本情況;
  • 分析自身基本情況。
可能會(huì)用到的一些分析模型包括:PEST、SWOT、波特五力等等,這里不再展開(kāi),大家可以按關(guān)鍵詞搜索更多。

二、競(jìng)品分析

競(jìng)品分析和市場(chǎng)分析是相輔相成的,有市場(chǎng)就有競(jìng)爭(zhēng),很少有一家獨(dú)大的情況,因此就需要你思考如何在激烈的競(jìng)爭(zhēng)中脫穎而出。
競(jìng)品分析的目的:一方面是了解市場(chǎng)格局,判斷是否有機(jī)會(huì)切入;另一方面是為了制定有利于自身的競(jìng)爭(zhēng)策略。這個(gè)策略,不僅體現(xiàn)在交互設(shè)計(jì)、使用流程、用戶(hù)體驗(yàn)上,還要考慮運(yùn)營(yíng)、營(yíng)銷(xiāo)、推廣策略,甚至還有資本運(yùn)作方式等。
因此,要求你做競(jìng)品分析時(shí),要先定義清楚你分析的目的是什么,然后自頂向下地進(jìn)行,從行業(yè)格局到功能細(xì)節(jié),都要有所涉獵。

三、用戶(hù)分析

用戶(hù)分析的目的是為產(chǎn)品的立項(xiàng)或優(yōu)化提供定量或定性支持 ,常見(jiàn)方法包括:觀察用戶(hù)行為、聽(tīng)取用戶(hù)意見(jiàn)、收集用戶(hù)數(shù)據(jù)。對(duì)于新產(chǎn)品,比較好用的分析方法是做用戶(hù)調(diào)研。
在用戶(hù)調(diào)研過(guò)程中,最需要注意的就是調(diào)查問(wèn)卷的撰寫(xiě),總結(jié)下我覺(jué)得需要注意的幾點(diǎn):
  • 避免出現(xiàn)誘導(dǎo)用戶(hù)選擇的選項(xiàng),比如:如果給你提供一個(gè)XX功能,你會(huì)不會(huì)用。
  • 避免出現(xiàn)無(wú)法理解的專(zhuān)業(yè)術(shù)語(yǔ),比如:你是否希望我們的產(chǎn)品采用個(gè)性化推薦算法分發(fā)內(nèi)容。
  • 避免出現(xiàn)容易引起歧義的模糊詞語(yǔ),比如:你使用社交電商產(chǎn)品頻率是多少。
  • 避免出現(xiàn)需要讓用戶(hù)思考的問(wèn)題,比如:你每周共花多少錢(qián)買(mǎi)我們的產(chǎn)品。
  • 避免直接出現(xiàn)產(chǎn)品名稱(chēng),比如:你覺(jué)得像喜馬拉雅、得到這樣的知識(shí)付費(fèi)產(chǎn)品能解決你的問(wèn)題么。
還有一點(diǎn)想說(shuō)的是:設(shè)計(jì)每道題的每個(gè)回答項(xiàng)時(shí),都要明確每個(gè)選項(xiàng)你希望帶來(lái)的結(jié)論是什么,這樣才會(huì)促使你不斷完善自己的問(wèn)卷。 

四、需求分析

需求分析是我覺(jué)得四大分析里最難的,也是產(chǎn)品經(jīng)理的必備課題,因?yàn)檫@背后體現(xiàn)的是對(duì)心理的洞察,而「人心」其實(shí)是最難猜的,抓住了人心,你的產(chǎn)品自然會(huì)成功。
需求分析的過(guò)程,要求產(chǎn)品經(jīng)理具備一雙敏銳的眼睛發(fā)現(xiàn)需求,一顆好奇心挖掘需求。日常工作中,你所面對(duì)的需求包括:客觀需求和主觀需求。
客觀需求:是指通過(guò)行為數(shù)據(jù)、市場(chǎng)趨勢(shì)分析、競(jìng)品調(diào)研、用戶(hù)研究、體驗(yàn)問(wèn)題等渠道收集的需求,通常要求產(chǎn)品經(jīng)理時(shí)刻保持對(duì)行業(yè)、對(duì)數(shù)據(jù)的觀察和思考。
主觀需求:是明確有人向產(chǎn)品經(jīng)理提出的需求,你的需求方可能包括老板、客戶(hù)、用戶(hù)、內(nèi)部團(tuán)隊(duì)。日常工作中最復(fù)雜的情況也就是處理主觀需求,因?yàn)椤刚f(shuō)服」是個(gè)非常耗時(shí)耗力的過(guò)程,但也是體現(xiàn)你產(chǎn)品能力的時(shí)候。
具體如何分析需求,其實(shí)已很多方法論,比如威格斯法、KANO模型、Y模型、四象限法等。
建議在每次分析需求時(shí),都用如下句式對(duì)需求定義:
什么人,在什么場(chǎng)景下,為了達(dá)到什么目的,在遇到什么問(wèn)題的情況下,希望采用什么方法來(lái)解決。
以上句式,說(shuō)明了:用戶(hù)角色、使用場(chǎng)景、目標(biāo)定義、任務(wù)說(shuō)明、問(wèn)題描述。幾乎囊括了描述一個(gè)需求的所有要素。
此外,需求分析最重要的還是如何把用戶(hù)需求轉(zhuǎn)化成產(chǎn)品方案,這一過(guò)程要求產(chǎn)品經(jīng)理同時(shí)具備用戶(hù)思維和產(chǎn)品思維,具體做法在此不再贅述。
最后還想再和大家強(qiáng)調(diào)下,分析不是目的,最重要的是通過(guò)分析得出對(duì)工作有幫助的結(jié)論 ,與你共勉。

設(shè)計(jì)視覺(jué)系統(tǒng)化,拒絕野路子

藍(lán)藍(lán)設(shè)計(jì)的小編

Facebook是一個(gè)連接全球數(shù)十億人的社交工具。 面對(duì)這一視覺(jué)系統(tǒng),設(shè)計(jì)師遇到了前所未有的挑戰(zhàn)

雖然每個(gè)工具都能很好地履行其預(yù)期的功能,但它們并沒(méi)有提供令人滿(mǎn)意的整體經(jīng)驗(yàn)。設(shè)計(jì)的UI模式,使用顏色和圖像每個(gè)產(chǎn)品都是不同的。整體看起來(lái)不僅過(guò)時(shí),而且與Facebook的這些專(zhuān)業(yè)人士在個(gè)人生活中使用也脫離聯(lián)系。

我們希望制作出一致,令人滿(mǎn)意的用戶(hù)體驗(yàn),值得我們的商業(yè)產(chǎn)品為公司和人們喜歡。我們還希望通過(guò)改進(jìn)他們所依賴(lài)的工具來(lái)展示我們對(duì)這些業(yè)務(wù)的承諾。

日歷

鏈接

個(gè)人資料

存檔