首頁

如何在Google Play商店中使你的應(yīng)用獲得推薦

ui設(shè)計分享達人

在Play商店中獲取Android應(yīng)用程序可能看起來是一項具有挑戰(zhàn)性的任務(wù)。請遵循以下策略,以最大限度地提高應(yīng)用獲得推薦的機會。

在Play商店中獲取Android應(yīng)用程序可能看起來是一項具有挑戰(zhàn)性的任務(wù)。請遵循以下策略,以最大限度地提高應(yīng)用獲得推薦的機會。


如果您希望自己的應(yīng)用成功,那么在Google Play商店中展示就是重要的一步。


但是,目前 Google Play Store 中有超過250萬個應(yīng)用程序和超過1,300個應(yīng)用程序加入列表,大多數(shù)用戶注意到的應(yīng)用程序競爭越來越激烈。


在谷歌Play商店的Android應(yīng)用總數(shù)exeeds 250萬為2018年11月,按照AppBrain。



即使您排除了低質(zhì)量的應(yīng)用程序,仍然有超過220萬個應(yīng)用程序可供競爭,以便在Play商店中展示您的應(yīng)用程序。


但是,有一些方法可以幫助您的應(yīng)用獲得推薦。

Google Play商店提供了眾多候選名單,包括編輯選擇 / 員工精選 / 精選等令人垂涎的廣告 ,可以策劃應(yīng)用并吸引用戶注意力。


如果你的應(yīng)用在其中一個列表中,就可以在全球范圍內(nèi)提供更多下載、更多用戶和更多粉絲。


雖然Google沒有為應(yīng)用程序設(shè)置特定標準,但仍有一些策略可用于增加應(yīng)用程序在Google Play Store中展示的機會。



為什么Google會列出精選應(yīng)用?


Google發(fā)布精選應(yīng)用列表主要有兩個原因:增加可發(fā)現(xiàn)性和識別出色的工作。


首先,Google Play的列表可以幫助用戶輕松發(fā)現(xiàn)優(yōu)秀的應(yīng)用。隨著Play商店中數(shù)百萬個應(yīng)用程序的推出,用戶很難確定哪個應(yīng)用程序能夠最好地滿足他們的要求。


通過在特色列表中添加應(yīng)用程序,Google向用戶保證其可提供可用性,功能和安全性。


其次,Google Play的列表表彰了開發(fā)人員的出色工作。


對于Android開發(fā)人員而言,沒有什么比看著他或她的工作在數(shù)百萬其他應(yīng)用程序中迷失更令人沮喪的了。特色列表和類別支持為Google Play商店提供優(yōu)質(zhì)且實用的Android應(yīng)用的開發(fā)者。


特色應(yīng)用列表對Android用戶和開發(fā)人員同樣有用。



為何在Google Play商店中要出現(xiàn)重要推薦?


除了獲得自豪感并提高應(yīng)用程序的在線聲譽外,在Play商店中推薦您的應(yīng)用程序還有很多好處。


其中一些好處包括:

  • 增強應(yīng)用可視性

  • 更多的應(yīng)用下載量

  • 增加收入

  • 高品質(zhì),敬業(yè)的用戶

  • 更輕松的應(yīng)用推廣


例如,根據(jù)SensorTower,接收編輯選擇徽章可以將應(yīng)用下載量從4倍增加到高達24,000倍。

上圖顯示了接收編輯選擇徽章如何直接影響應(yīng)用程序下載的次數(shù)。


有這么多潛在的好處,值得為您的應(yīng)用提供最佳機會,以便在Google Play商店中展示。



Google Play商店有3個關(guān)鍵列表


Google Play發(fā)布了3個主要應(yīng)用列表:熱門,新手和策劃。這些列表中的每一個還包含幾個子類別。


“熱門”名單包括 4 個分類:

  • 熱門免費:歷史上的免費應(yīng)用程序

  • 熱門付費:有史以來的付費應(yīng)用

  • Top Grossing:推動收入最高的應(yīng)用和游戲

  • 趨勢應(yīng)用:過去24小時內(nèi)安裝率較高的應(yīng)用


“新建”列表中包括 2 個分類:

  • 熱門新免費:自發(fā)布之日起不到30天的的免費應(yīng)用程序

  • 熱門新付費:自發(fā)布之日起不到30天的的付費應(yīng)用程序


谷歌團隊精心整理中包括 4 個名單:

  • 特色:新推出的應(yīng)用程序

  • 員工精選:經(jīng)常更新的員工選擇的應(yīng)用列表

  • 編輯推薦:最佳Android應(yīng)用的所有時間

  • 頂尖開發(fā):將最好的應(yīng)用程序開發(fā)人員留在Play商店


有這么多的列表,有很多機會優(yōu)化您的應(yīng)用程序,以增加其中一個推薦的機會。



11種方式讓您的應(yīng)用程序在Google Play商店中推出


您應(yīng)該采取11個關(guān)鍵步驟來提高應(yīng)用在Google Play商店中展示的機會:


  1. 分析其他精選應(yīng)用

  2. 改善用戶界面(UI)和用戶體驗(UX)

  3. 優(yōu)化功能和效率

  4. 針對Android進行優(yōu)化

  5. 利用Google技術(shù)

  6. 專注于應(yīng)用商店優(yōu)化

  7. 本地化您的應(yīng)用

  8. 推廣您的應(yīng)用

  9. 與有影響力的人合作

  10. 收集評分和評論

  11. 更新您的應(yīng)用



      1. 分析其他特色應(yīng)用


在Google Play商店列表中展示的第一步是研究已經(jīng)推出的應(yīng)用。


在Play商店做一些研究,選擇一些帶有Editors'Pick和Top Developer等標簽的應(yīng)用程序,并將它們安裝在您自己的Android手機上。


然后,分析應(yīng)用程序,注意它們的共同特征。特別是,檢查應(yīng)用程序的設(shè)計,功能以及使其在類別中的類似應(yīng)用程序中脫穎而出的所有內(nèi)容。您將發(fā)現(xiàn)相似之處并更好地了解它們在Play商店中的特色。


最后,將這些應(yīng)用程序中的內(nèi)容實施到您自己的應(yīng)用程序中,以提高您的應(yīng)用程序獲得Google Play商店推介的機會。


      2. 使您應(yīng)用程序的UI與UX達到一個最出色的狀態(tài)


如果你深入分析一些有史以來最好的Android應(yīng)用程序,你會發(fā)現(xiàn)它們都有一個共同點:無縫的用戶界面和出色的用戶體驗。


成功的應(yīng)用程序?qū)W⒂诰S護高質(zhì)量的用戶界面,并在所有移動設(shè)備和平板電腦設(shè)備上提供獨特互動且一致的體驗。


據(jù)Google稱,所有Android應(yīng)用都應(yīng)在其用戶界面中實施Material Design指南。如果您未能實施這些指南,請不要有將您的應(yīng)用程序選為編輯推薦的想法。


實際上,遵循Google設(shè)定的Material Design標準是在Play商店中推出應(yīng)用程序的首要前提條件。


      3. 優(yōu)化應(yīng)用程序的功能和效率


無論您的Android應(yīng)用程序設(shè)計有多么出色,如果它無法滿足Google設(shè)置的功能和用戶交互質(zhì)量標準,它將永遠不會進入編輯選擇列表中。


在將最終的.APK文件上傳到Google Play商店之前,請確保您已針對Android應(yīng)用商品質(zhì)量指南進行了測試。這些指南為開發(fā)人員提供了改善整體用戶體驗的最佳實踐。他們還提供了一個應(yīng)用程序有資格獲得Play商店特色部分所需的線索。


遵循這些準則,特別是核心應(yīng)用程序質(zhì)量指南,將幫助您優(yōu)化新構(gòu)建的Android應(yīng)用程序的功能和效率,確保您提供盡可能最佳的用戶體驗。


      4. 讓你的Android應(yīng)用程序更加友好


要在Play商店編輯眼中使用Android應(yīng)用,您必須盡可能使其與Android兼容。


如果您的應(yīng)用最初是為iOS開發(fā)的,請確保:


  • 關(guān)注Google的啟動核對表

  • 支持高分辨率顯示器

  • 包含默認的Android按鈕

  • 適用于各種類型的設(shè)備,包括平板電腦

  • 支持和即將推出的Android版本

  • 是一個量身定制的Native應(yīng)用程序,僅適用于Android(或至少適用于Android)

  • 文件大小限制在100MB以下


        5.  利用的Google技術(shù)

每年,Google都會在其年度I / O開發(fā)者大會上為開發(fā)人員介紹一些產(chǎn)品和技術(shù)。 


Google獎勵使用其技術(shù)構(gòu)建的應(yīng)用,例如Firebase,F(xiàn)lutter和Google上的Action。 


如果您成為這些技術(shù)的早期采用者,您的應(yīng)用程序在Play商店中獲得推薦的機會肯定會有所改善。 

        6.注意App Store優(yōu)化


大多數(shù)人都熟悉搜索引擎優(yōu)化(SEO),其中涉及針對搜索引擎結(jié)果優(yōu)化網(wǎng)站。 
同樣,應(yīng)用商店優(yōu)化(ASO)是指優(yōu)化移動應(yīng)用以在Google Play商店和Apple App Store等應(yīng)用商店中排名更高的流程。 


要提高Play商店中移動應(yīng)用的可見性,請注意以下因素: 


  • 圖標:確保您的應(yīng)用圖標足夠引人注目以吸引用戶的注意力。 
  • 標題:使用相關(guān)的關(guān)鍵字詞組優(yōu)化您的應(yīng)用標題。 
  • 描述:保持您的應(yīng)用程序的描述簡短,甜美,簡單。確保它清楚地告訴用戶您的應(yīng)用是什么以及他們應(yīng)該使用的原因。 
  • 關(guān)鍵詞:具有高搜索量和低競爭力的目標關(guān)鍵詞。 
  • 屏幕截圖:上傳您應(yīng)用的一些高質(zhì)量屏幕截圖,如果可能,創(chuàng)建并上傳15-30秒的視頻,以便用戶更熟悉您應(yīng)用的功能。 


例如,免費的照片編輯應(yīng)用程序 Pixlr 上傳了幾個高分辨率的描述性截圖,以清楚地向用戶顯示應(yīng)用程序的內(nèi)容。該應(yīng)用程序的發(fā)布者甚至添加了一個1分鐘的介紹性視頻,以進一步向用戶顯示他們可以使用該應(yīng)用程序做些什么。 



正如您在上面的圖片中看到的,Pixlr有效地使用字幕清楚地告訴用戶應(yīng)用程序的功能和用處。 

        7. 將您的應(yīng)用程序本地化


全球有超過20億活躍的Android用戶,以盡可能多的語言提供您的應(yīng)用程序,在Play商店中推出您的應(yīng)用程序也起著至關(guān)重要的作用。 


將您的應(yīng)用本地化為多種語言始終是明智的決定,可以幫助您提高應(yīng)用在Google Play商店中展示的機會。 


當您嘗試讓全球各地的用戶都能訪問您的Android應(yīng)用時,請務(wù)必查看Google自己提供的本地化檢查清單。 

        8. 有效的推廣您的應(yīng)用程序

除了優(yōu)化Google Play商店的應(yīng)用外,還應(yīng)盡可能在各種社交網(wǎng)絡(luò)和技術(shù)平臺上宣傳您的應(yīng)用。 


投入時間和精力進行推廣不僅可以幫助您獲得更多的應(yīng)用下載,還可以提高您的應(yīng)用在網(wǎng)絡(luò)上的可信度。吸引用戶更有可能引起Google Play商店的注意,他們可能會將其列入推薦列表中。 


要宣傳您的移動應(yīng)用,您應(yīng)該: 


  • 為應(yīng)用創(chuàng)建有效的目標網(wǎng)頁 
  • 使用AdWords宣傳您的應(yīng)用 
  • 在Facebook和Twitter等社交媒體平臺上推廣您的應(yīng)用 
  • 在Android Authority和Android Central等受信任的技術(shù)出版物上發(fā)布您的應(yīng)用評論 
  • 發(fā)布新聞稿以獲得具有高域權(quán)限的媒體的媒體報道 


這些促銷活動將為您的應(yīng)用提供最佳成功機會。 

        9. 與影響者建立關(guān)系
與行業(yè)中的影響者保持健康、持久的關(guān)系也是讓您的應(yīng)用在Play商店中展示的關(guān)鍵。 
Android開發(fā)人員應(yīng)通過以下方式與影響者建立關(guān)系: 
  • 通過LinkedIn與Google Play商店經(jīng)理和編輯聯(lián)系 
  • 與您的區(qū)域移動解決方案領(lǐng)先聯(lián)系 
  • 聯(lián)系已經(jīng)有特色的開發(fā)人員和團隊 
培養(yǎng)強大的專業(yè)網(wǎng)絡(luò)可以提高您在擁擠行業(yè)中的知名度。 

      10.保持您的高評級和高評價 

用戶體驗和用戶滿意度始終是Google的首要任務(wù)。在確定是否推薦應(yīng)用時,Google Play商店編輯團隊會考慮這些相同的因素。 


如果您徹底分析Play商店,您會發(fā)現(xiàn)超過50%的精選應(yīng)用的評分為4.5或更高。 



因此,如果您真的想要推薦自己的應(yīng)用,請確保它至少有50,000次下載和4.5級評分。

要獲得大量下載并提高應(yīng)用評級,您應(yīng)該: 
  • 提供出色的用戶體驗 
  • 讓您的應(yīng)用程序免費獲取 
  • 盡可能多地營銷你的應(yīng)用程序 
  • 激勵用戶審核您的應(yīng)用 
  • 激勵用戶進行推薦 
  • 投資高質(zhì)量,引人入勝的內(nèi)容 
  • 利用influencer和社區(qū)外展 
  • 在社交媒體上主持贈品 
  • 在電子郵件簽名中為您的應(yīng)用添加墨跡 
遵循這些提示可以吸引用戶,生成評論,并最終提高您的應(yīng)用登陸特色列表的機會。 

      11.保持您的應(yīng)用程序不斷更新 

Google和用戶都喜歡經(jīng)常更新的應(yīng)用。 
這并不意味著您每天都需要為應(yīng)用添加全新功能。相反,您應(yīng)該跟蹤用戶面臨的應(yīng)用程序問題,并通過定期更新提供解決方案。 
不要忘記在圣誕節(jié),感恩節(jié)和新年等特殊場合更新您的申請。這是您的應(yīng)用得到關(guān)注的最佳時機,因為Play商店的編輯可能會在特殊場合策劃季節(jié)性應(yīng)用列表。 


應(yīng)用開發(fā)者應(yīng)努力成為Google Play商店的精選內(nèi)容 
通過遵循這些最佳做法,您可以增加在Google Play商店的精選部分中確保信譽良好的推薦機會。 

最重要的是,Android應(yīng)該優(yōu)先提供無縫的用戶體驗,引人入勝的用戶界面和引人注目的營銷,以在Google Play上取得成功。


轉(zhuǎn)自-站酷


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

設(shè)計師的角度分析產(chǎn)品改版-高德地圖_10.0.3

ui設(shè)計分享達人

前言


Hello~各位酷友,之前高德地圖做了一次蠻大的改版,于是這周我就抽空給大家?guī)磉@個系列的第二篇改版分析。還沒有看過第一篇的也歡迎去看看。廢話不多說,直接進入正題。還是一樣,閱讀時長大約15分鐘,泡杯咖啡,進入專注狀態(tài)就往下吧。



一、改版概述


對比版本號:9.1.0(舊)→  10.0.3(新)

測試機型:iPhone7

高德這次更新距離上一次已經(jīng)有一個多月的時間了,版本號也有了一個大的跨越,給我一種憋大招的感覺。以下,我會從這四個方面進行說明:

(1)首頁框架

(2)背板內(nèi)容

(3)常用出行方式選擇

(4)發(fā)現(xiàn)頁


跟之前一樣,還是主要說明有改動的部分,以框架層和視覺層為主要切入點,帶一小部分產(chǎn)品功能上的分析。



二、首頁框架


這次改版用到了一個新的控件,底部上拉式背板(不知道這個控件有沒有更正式的名稱,暫且這么叫它),有的設(shè)計師朋友可能在一些概念性作品里見過類似的控件,這次高德使用它說明了這個控件是落地的。

這個控件之所以受歡迎有以下原因:

首先,它的操作符合我們的手勢操作規(guī)律及擬物原則,交互方式一目了然。平時沒事就這樣滑上滑下都是一個爽點。

其次,它可以設(shè)計出不同高度的固定狀態(tài),如下圖就有三種。這樣能地節(jié)省頁面空間,承載大量的隱形內(nèi)容,同時區(qū)分不同內(nèi)容的優(yōu)先級。


另外,這次改版還加入了常見的底部標簽欄,配合背板,對首頁的內(nèi)容框架布局進行了一個規(guī)整,具體我們看一看下面這張圖:


(1)紅色:原來頂部的搜索欄調(diào)整到了默認狀態(tài)的底部背板上。搜索欄放在底部的方式在目前還是比較大膽的設(shè)計,但對于地圖應(yīng)用而言卻非常適合。首先搜索欄肯定是整個應(yīng)用交互最頻繁的控件,放在底部很大程度上提高了用戶點擊的便捷性,特別對于單手握持的用戶。


(2)紫色:原來底部的附近按鈕改成了便簽欄的第二個標簽。即發(fā)現(xiàn)頁。這個改變節(jié)省了大量的頁面空間,舊版做成底部通欄按鈕層級確實過高了,同時天氣溫度的標識也比較雞肋。


(3)黃色:原來最難點擊的圖標按鈕改成了現(xiàn)在最易點擊的“我的”標簽,提高了這個入口的辨識度。


(4)綠色:舊版首頁分散的懸浮按鈕統(tǒng)一到了右邊,同時樣式都改成了圓形的底板。略微降低了路線按鈕的層級。這里有一個層級區(qū)分的設(shè)計小細節(jié),下方常用的定位與路線按鈕會比上方消息與地圖類別按鈕大10pt。


(5)灰色:原來右邊的一些懸浮小工具按鈕及快捷地址設(shè)置按鈕都從首頁去除,移動到了底部背板的隱形內(nèi)容里。這樣一來地圖的顯示區(qū)域也隨之增加了,被移走的按鈕會在后文提到。


小結(jié):總體而言,首頁的這次大改,主要是把交互區(qū)域都調(diào)整到屏幕的右下方。我猜測目的應(yīng)該是考慮到了很多用戶使用地圖應(yīng)用時是單手握持,處于邊走邊看的狀態(tài),增加用戶的交互效率。另外,標簽欄的使用也增加了入口的辨識度。在視覺感受上,新版首頁會比舊版更簡潔、清晰,同時具有結(jié)構(gòu)性。


三、背板內(nèi)容


接下來要說的就是背板上的內(nèi)容,首先我們還是從內(nèi)容布局上分析一下。


(1)搜索欄,在前面已經(jīng)提到過


(2)工具箱,工具箱在這次改版中也是一個主要的更新點。在舊版中,工具箱的層級是很弱的,在我的頁面里的二屏才能找到。這次移動到主頁的背板中,顯然也是提高了它的觸達率。


同時,原工具箱中的工具較少。在新版中,工具箱中加入了很多的新功能,我數(shù)了數(shù),新版比舊版多了16個功能。排列上使用了歸類式的圖片列表。在這里也有一個設(shè)計上的小細節(jié),頂部我的工具的圖標樣式與下方的圖標樣式是有區(qū)分的,頂部圖標統(tǒng)一加上了圓形彩色底托進行反白,突出了頂部圖標的層級。具體參看下圖:


另外,工具箱調(diào)整到首頁以及加入的很多新功能會跟下面要講的另一點更新有關(guān)。


(3)常用地點

即舊版的地點懸浮圖標改成了現(xiàn)在的列表式按鈕


(4)新手引導教程

點進去就是引導頁,通過動效插畫的形式向用戶說明了本次更新的幾大要點。


小結(jié):如同上文所說,背板的使用是本次更新的主要承載區(qū),綜合考慮了手勢交互、內(nèi)容布局、內(nèi)容優(yōu)先級等因素,非常值得我們進行學習與參考。


 四、常用出行方式選擇


在更新后首次打開應(yīng)用時,有一段引導動畫,主要告訴用戶選擇常用的出行方式,分別是公交與駕車。因為動畫較長無法上傳,有興趣的朋友可以自己去看看,引導動畫也是近期比較火的一種設(shè)計方式。

而選擇不同的出行方式后,地圖樣式與工具箱的默認推薦工具也會有區(qū)別。

可以看到,選擇公交后,地圖里會主要突出公交站的圖標,并弱化其它圖標,讓用戶明確的知道哪里有公交站。


小結(jié):讓用戶選擇常用出行方式充分考慮了用戶的出行場景,讓用戶主動選擇出行方式進行用戶劃分,并據(jù)此提供更精準的服務(wù)內(nèi)容。可以看出,在相對成熟的產(chǎn)品中,功能上的創(chuàng)新是一部分,但是能將已有的內(nèi)容更貼切地服務(wù)于用戶也能創(chuàng)造出很大的價值,并且能讓產(chǎn)品更具備競爭力。


五、發(fā)現(xiàn)頁


周邊推薦時地圖應(yīng)用最能收獲價值的內(nèi)容板塊,在這次更新中,發(fā)現(xiàn)頁面不僅是入口做了調(diào)整,二級頁面里的內(nèi)容也有一定改變。兩版的頂部區(qū)域內(nèi)容是一樣的,都是一個搜索框加宮格式分類入口。區(qū)別在于下方的瀑布流內(nèi)容帖子。舊版使用了兩個分段控件進行了更詳細的分類,但新版做了減法,把所有的選擇器都去掉了,同時也去掉了商戶評分以及營業(yè)時間信息,僅保留了距離位置信息。另外使用了卡片區(qū)分不同商戶內(nèi)容。


小結(jié):簡化頁面的好處在于有效地提高了瀏覽效率。而且仔細思考一下就會發(fā)現(xiàn)舊版的兩個分段選擇控件確實略顯多余。頂部的宮格式分類入口就足以滿足用戶的搜索需求,做過多的分類反而會讓用戶困擾。但我個人認為評分信息還是可以保留的,畢竟是推薦內(nèi)容,能給用戶提供很大的參考價值。


六、總結(jié)


以上就是高德地圖本次更新的主要內(nèi)容。在這次更新中,我認為最值得我們學習的就是它整個改版邏輯是非常清晰的。從用戶場景出發(fā),考慮到用戶的操作手勢以及內(nèi)容優(yōu)先級,具體落實到了頁面的布局。大家也可以從頁面布局再反向思考到它的改版目的。多重復幾遍就能更清晰地理解這次改版的核心。

轉(zhuǎn)自-站酷

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

福格行為模型:讓用戶行動起來

ui設(shè)計分享達人

你還在做個單純的畫圖仔嗎?



  • A設(shè)計師接到需求,第一時間打開花瓣,不管三七二十一就是畫圖,沉浸在自我世界里無法自拔,后面和需求方一對接,發(fā)現(xiàn)完全沒有理解需求方的意思,陷入無止境的改稿。

  • B設(shè)計師接到需求,先看看競品截圖下來拖到ps/sketch里面,抄抄這塊抄抄那塊,拼湊在一起,感覺很完美!然后交給產(chǎn)品就好交差了。

上面2種情況,B設(shè)計師會比A設(shè)計師好一點,但這樣久而久之,完全處于被動的狀態(tài),失去了思考的能力,一邊偷著懶一邊抱怨著設(shè)計沒有話語權(quán);時間久了工作2-4年還是個碌碌無為的卻有著“經(jīng)驗+”設(shè)計師,看著別的朋友已經(jīng)在別的行業(yè)賺的盆滿缽滿,摸著自己頭發(fā)開始懷疑人生,糾結(jié)自己是不是不適合設(shè)計,是不是該換行了,或者有的只是為了滿足溫飽的工資堅持著重復的工作。


  • 但其實想說如果不停留在表面的設(shè)計,你會發(fā)現(xiàn)設(shè)計真的很好玩,很有趣,涉及很寬很廣,雖然自己現(xiàn)在也懂得很少,但每多看一個知識點,每多思考一些,覺得自己無比的充實?。?

  • 本文主要是圍繞BJ fogg行為模型對用戶行為的一些思考,運用到實際的工作中,讓你的設(shè)計更加有理有據(jù),更有說服力??!建議閱讀10-15分鐘~



生活中的行為問題


為什么很多人看到商場打折就會忍不住剁手?為什么那么多人癡迷于抖音?為什么女生很喜歡追泡沫劇?為什么很多人很喜歡發(fā)朋友圈?為什么到情人節(jié)買花的一大堆?....


再例如工作中:用戶期望借助你的產(chǎn)品實現(xiàn)怎樣的目的?用戶為什么會購買你的的產(chǎn)品?用戶基于什么理由去關(guān)注你的產(chǎn)品內(nèi)容?用戶為什么看了你的界面就沒有下文了?用戶是基于什么會再次回到你的產(chǎn)品?

這個模型可以很好的解釋人所發(fā)生每一個行為,行為=動機+能力+觸點


BJ Fogg’s behavior model


  • 這個模型是以耶魯大學教師 Fogg2009 年發(fā)表的一篇論文為中心,總結(jié)了如何從設(shè)計上提高轉(zhuǎn)化率,其關(guān)鍵是Motivation-Ability-Trigger(動機-能力-觸發(fā)),三要素缺一不可;

  • 任何一個行為的發(fā)生,都需要滿足以上三個要素——人們需要有產(chǎn)生行為的動機、要有發(fā)生行為的能力,以及正好有一個合適的觸發(fā)點


  • 也就是說你如果想要用戶發(fā)生某種行為,你必須給到用戶足夠的動機,并且讓用戶有能力去做到,而且有一種能觸發(fā)用戶行動的觸發(fā)器來提醒


  • 根據(jù)這個原理馬上可以解釋:為什么很多人看到商場打折就會忍不住剁手?首先這個人有購物需要的動機,并且具備支付購物的能力,看到商城打折感覺很便宜這是觸發(fā)點,最終觸發(fā)人購物的行為。



已知:行為=動機+能力+觸發(fā);所以想要用戶發(fā)生行為就要從這3個方面去入手


01、動機


  • 我們常說洞察用戶需求,挖掘用戶痛點,其實就是在尋找用戶動機!


  • 做一件事的動機是什么呢?

    • 滿足這幾點:愉悅感(Pleasure)、期待(Hope)、歸屬感(Acceptance)

    • A不斷買口紅,因為不同口紅可以最短時間能讓自己瞬間變得美美噠,看著美美的自己忍不住的開心愉悅,還會期待新上架的口紅色號,收集滿滿的口紅讓A很有歸屬感。

    • B不停刷抖音,生活無趣艱難,看著各種有趣好玩的視頻就能獲取快樂,上下一滑樂趣無限,期待別人更新更好玩有趣的視頻,自己也可以發(fā)視頻獲得別人的贊和喜歡。

    • C經(jīng)??磁枷駝?,生活中平坦無趣,看著超甜歐巴滿足自己所有的浪漫幻想,期待幻想自己也能成為劇中的女主角,沉迷其中,或者是覺得劇中人設(shè)是自己向往的期待,努力所要變成的樣子。


  • 說到動機一定還要了解美國著名社會心理學家亞伯拉罕·馬斯洛提出來馬斯洛需求層次(Maslow's Hierarchy of Needs);總共有5個層次,每一層都有相對應(yīng)不同的需求,且只要某一層次的需要相對滿足了,就會向高一層次發(fā)展,追求更高一層次的需要就成為驅(qū)使行為的動力。相應(yīng)的,獲得基本滿足的需要就不再是一股激勵力量

  • 現(xiàn)在經(jīng)濟的發(fā)展普遍人都滿足了基本的需求,開始有更高層次的需求;所以更需要上面3層成長性需求:情感和歸屬的需要、尊重的需要、自我實現(xiàn)的需要;

  • 挖掘用戶的動機也就先了解目標用戶人群的不同階段需要,尋找其內(nèi)在動機和外在動機,以下是在用戶體驗中應(yīng)用,提升用戶黏度的案例:

  • A:例如你是騰訊的VIP會員,你就可以比別人更早看到你心心念每天追【小歡喜】;——滿足了用戶覺得自己別人更有優(yōu)越感,享受到更尊貴的服務(wù)

  • B:例如你的設(shè)計作品上了站酷首推,受到大家的一致點贊好評,你會更有動力監(jiān)督自己發(fā)作品和學習;——讓用戶充滿信心,獲得平臺的認可倍感成就

  • C:例如你在扇貝里背單詞堅持了100天,在朋友圈曬打卡記錄炫耀,塑造自己渴望成為的群體的對象;——滿足用戶成為自己渴望堅持不懈認真學習的人

02、能力


  • 有足夠的動機之后,還必須要用戶有能力來完成

  • 能力指人本身的能力(例如設(shè)計師很熟練使用ps、sketch、ae;年輕人普遍比老人更會用智能機器...);但有些能力不夠的(例如老人、小孩、能力障礙者,以及有需求的新手)這個時候就需要降低門檻或者提高用戶能力,因為是人性的弱點就是懶呀,就算有這個能力但是動機沒那么強就不會引發(fā)行為了

  • a 降低門檻

  • 降低門檻也是降低用戶成本(時間、金錢、精力...),讓用戶發(fā)生行為變得很容易;因為這個用戶成本越低,越能引發(fā)用戶行為時間,體力、腦力支出,社會輿論以及生活習慣...

  • 例如刷抖音,只需要上下滑動,雙擊屏幕即可點贊,沉浸式體驗不干擾用戶,可以讓用戶最簡單的操作就可以獲得無限的樂趣

  • 例如微信朋友圈點贊,總會存在一些用戶沒有東西發(fā)朋友圈,只想著看看朋友圈,隨手點個贊,還會很有參與感

  • 例如常說的用戶體驗的三個要素:『不要讓我等,不要讓我煩,不要讓我思考』。其本質(zhì)就是降低用戶成本,讓用戶發(fā)生行為變得很容易

  • 舉個反面例子,撥打10086的人越來越少了,太麻煩了,記得以前撥打10086聽一大堆廢話按0才能人工服務(wù),充個值還要跑營業(yè)廳


  • b 提高用戶能力

  • 想要提高用戶的能力,那就得有利益相關(guān)了

  • 例如:淘寶商家后臺一開始是很不好用的,但是還是有很多商家入駐,為什么?因為要賺錢要賺錢呀!

  • 再例如:ps很容易學會嗎?至少沒有美圖秀秀容易,但是設(shè)計師就不用學ps了嗎?不會,設(shè)計師都會ps,當然也可以用sketch替代ps,但是設(shè)計師就要去學不同的設(shè)計技能軟件



03、觸發(fā)


  • 有動機并且有能力,觸發(fā)才能有價值,用戶的行為=動機+能力+觸發(fā);根據(jù)不同動機和不同能力來說用戶的觸發(fā)點也會不一樣

  • 人們的行為并不完全是自己主動選擇的,而是在社會情境和個人因素的雙重作用下產(chǎn)生的。

  • 不同動機不同能力的用戶需要不一樣的刺激

  • 場景刺激:適合高動機的人

  • 高動機能力的人只需一個促發(fā)點即可。低門檻吸引力高的活動,我們只需要將參與的按鈕做的醒目再醒目。例如很多活動會把按鈕做的很有點擊的欲望

  • 高動機能力則需要引導,例如APP大改版時,產(chǎn)品的新手引導;例如游戲剛注冊都會有逐步學習階段,都是從簡單到難;


  • 利益刺激:適合低動機、高能力的人

  • 這種用戶需要更多的事件來激發(fā)他們做某件事的動機;例如我本來沒想點外賣的,朋友分享了一個餓了么紅包給我,我點擊領(lǐng)取了紅包,心想這紅包不能浪費呀,最終還是點個外賣,“紅包”鏈接就是觸發(fā)器,讓我最終點了外賣。


  • 場景+利益刺激:適合低動機、高能力的人

  • 對于利益刺激沒那么直接沒那么誘惑的時候,可以場景和利益一起更強烈的刺激,例如餓了么的超級會員充值促銷活動給人的感官意識是:充會員可以加送無門檻紅包給你,超級劃算超級便宜快來買我呀!



根據(jù)BJ fogg行為模型用戶分類


  • 工作中根據(jù)用戶不同的動機和能力可以分為4大類,并且制定不同的體驗設(shè)計策略


  • 1.有動機有能力用戶

  • 這類用戶簡直是真愛,不需要怎么管的,一些核心種子用戶也是從這里產(chǎn)生的,一些新的功能可以讓他們來測試。這類用戶可以沒那么需要關(guān)注,不需要太有個性的需求,適當提升其體驗就行。


  • 2.有能力沒動機用戶

  • 這類用戶需要激發(fā)動機,結(jié)合馬斯洛需求層次找出用戶不同階段的需求,改變他的意識;內(nèi)在動機是比較難挖掘發(fā)現(xiàn)的,如果感興趣可以移步心理學類的書籍;外在動機送獎勵,例如餓了么會有每天滿20元送獎勵金,分享出去有紅包領(lǐng)取,每日簽到送紅包;還有滴滴打車初期送補貼。


  • 3.有動機沒能力

  • 降低門檻,提高能力,同時要幫助和鼓勵。這塊就很需要建立用戶心理模型,優(yōu)化用戶體驗,精簡用戶操作步驟;例如微信男女老少都會用的產(chǎn)品。


  • 4.沒動機,沒能力

  • 這類用戶可以直接放棄,投入產(chǎn)出比太低,需要降維,使其能力降到匹配意愿的層級。比如典型的微信朋友圈,總有那么些人不發(fā)朋友圈,不聊天,寫評論也不知道寫啥,但是他有夸獎別人的意愿,給他點個贊功能就行。






a、要有足夠的動機。——即你的產(chǎn)品能滿足用戶什么層次的需求

b、要讓用戶有能力完成?!茨愕漠a(chǎn)品是否能讓目標用戶覺得好用、還想用

c、恰如其好的外部觸發(fā)?!茨愕漠a(chǎn)品是否在用戶剛好需要的時候出現(xiàn)并刺激到用戶感官

這三步每一步都是息息相關(guān)的,設(shè)計師不但需要設(shè)計出刺激用戶感官的場景界面,更需要設(shè)計出契合用戶心智一用就會的產(chǎn)品,更需要明白了解目標用戶不同層次的需求


為什么要強調(diào)設(shè)計師有更多思考,主要也是覺得互聯(lián)網(wǎng)更新特別快,UI設(shè)計師從曾經(jīng)炙手可熱的職位,變成很多設(shè)計師難就業(yè),很多公司卻招不到人的狀態(tài);因為更新太快以至于大家都會處于不斷焦慮迷茫的狀態(tài)。于是要求更多技術(shù)傍身,UI設(shè)計師要會插畫要會交互要會用研要會動效要會C4D...很多人覺得插畫熱趕緊去學插畫,動效熱門趕緊去學動效...但是好像缺少了什么??


在【破繭成蝶2】里面我看到更好的答案

里面說到互聯(lián)網(wǎng)下半場的新角色:產(chǎn)品設(shè)計師。提出思維是1,技能是0,意思是對于產(chǎn)品設(shè)計師來說思維是最重要的,而其他的技能要素是1后面的無數(shù)個0,隨著經(jīng)驗累計0會越來越多,你的個人價值也越來越大,但是如果沒有前面那個1后面再多0也于事無補。

轉(zhuǎn)自-站酷

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

iOS 13 隱秘的細節(jié)②:原生APP的細節(jié)變化·上

ui設(shè)計分享達人

拆解iOS 13原生APP的細節(jié)變化,及其“影響”。

undefined


0.前言

在上一篇《iOS 13全局組件》中,主要講述了新版系統(tǒng)中的分段控件、Switch、Sheet彈窗、Context Menu等組件的細化及影響。

從這篇開始,開始講述iOS 13原生APP的設(shè)計細節(jié),以及對設(shè)計師的影響。


開始前,依舊先明確下文中用到的機型和系統(tǒng)版本:

設(shè)備1:iPhone 7,iOS 12.4

設(shè)備2:iPhone X,iOS 12.2

設(shè)備3:iPhone 6S,iOS 13 Developer beta 6


-


下面開始原生APP的相關(guān)內(nèi)容:




2.1 計時器

iPhone的計時器是個特別好用的功能。

日常生活中,類似“小睡一會”、“蒸煮東西”、“女友敷面膜”這些場景都能用到計時器。過去4年,我平均每天使用8次以上計時器。


雖然iPhone的計時器已經(jīng)非常好用,但在某些場景下,尚有不足:

比如,設(shè)置一個80分鐘的計時,中途看時間,雖然屏幕上顯示還剩28分鐘。但卻無法直觀掌握計時的進度(百分比)。有時睡迷糊了,忘了最初設(shè)置的總時長,導致不清楚睡了多長時間...

在iOS 13新版計時器中,Apple做了一些調(diào)整,很好的解決了上述問題:


變化1:新增圓形的進度條,如下圖:

進度條可以方便用戶掌握計時進度。


變化2:新增“到點”的時間(幾點幾分)

用戶不用自己換算,就能知道計時結(jié)束的具體時間是幾點幾分。


變化3:鈴聲入口位置下移:

一般而言,用戶在使用計時器時,通常的操作是:第一步:選擇時長、第二步:點擊開始。

并不會出現(xiàn)調(diào)整鈴聲這步操作,可以說,過去鈴聲放在中間的布局就很雞肋。要么礙事、要么被忽略...

PS:過去四年,我從未察覺到有設(shè)置鈴聲的功能。囧

前端學習與工作中常用網(wǎng)站推薦

seo達人

一.視頻學習網(wǎng)站

1.慕課網(wǎng)(我的最愛,里面有很多免費的視頻)



2.騰訊課堂 



。。。



當然還有很多其他的視頻學習網(wǎng)站,但我覺得就這兩個就夠質(zhì)夠量了。



二.前端免費模板下載

1.html5tricks



有很多有趣的小程序



2.源碼之家 



各類模板灰常之多,不過也有很多廣告



3.代碼家園



整個網(wǎng)站看起來舒服,廣告很少



4.模板之家



廣告較多



5.魔客吧



有些要money



6.站長之家



。。。



模板網(wǎng)站就推薦這些吧,差不多夠用了。當然,我們下載這些模板的目的不是為了抄襲,而是為了參考學習。(手動滑稽:) )



三.圖片圖標logo素材

1.標志在線



免費設(shè)計logo



2.阿里巴巴矢量圖標



圖標特別多,而且基本上都是免費的



3.iconmonstr



免費圖標下載



4.懶人圖庫



素材很多,不知道要不要錢



5.loading.io



看名字就知道是下什么的了吧



6.preloaders



進度條下載,有些要錢還是dollar,不過也有很多免費的



。。。



好吧,就這些。



四.其他

1.JS格式化



如果你的編輯器不支持格式化js代碼的話可以試試



2.css代碼兼容



css代碼復制上去,自動會幫你生成兼容的css代碼,是不是很厲害!不過兼容IE幾我也不太清楚,你們自己去看看吧



3.配色



這是給你網(wǎng)站配色的,有興趣的可以了解下



4.html、css、js壓縮,js多文件合并



es6代碼需先轉(zhuǎn)es5再壓縮,當然,也可以使用fis3構(gòu)建壓縮html,css,js;fis3還可以將圖片轉(zhuǎn)成webp格式(ios有兼容問題)



5.圖片壓縮



基本上是無損壓縮,效果很不錯



6.圖片轉(zhuǎn)換



轉(zhuǎn)webp格式圖片



7.雪碧圖 (似乎訪問不了了)



選中雪碧圖中的圖片,自動生成css代碼。如:background: url('imgs/example.png') no-repeat -433px -51px;width: 33px;height: 33px;



8.html在線編輯工具



可以在線運行html代碼



9.rgb,rgba,十六進制等顏色相互轉(zhuǎn)換



10.HTML特殊字符編碼對照表



11.改圖寶



修改圖片尺寸,生成二維碼,生成印章,圖片加水印...



。。。



 



最后,再推薦一些比較好的書



《css世界》、《ES6標準入門》阮一峰、《JavaScript權(quán)威指南》、《JavaScript高級程序設(shè)計》(紅皮書)、《你不知道的JavaScript 上中下冊》

————————————————


關(guān)于Costco,你可能不知道的10件事兒

資深UI設(shè)計者

8月27日,中國大陸第一家Costco在上海開業(yè),因為人滿為患,上午開業(yè),下午就被迫暫停營業(yè)了……

Costco開業(yè)的第二天,為了保證購物體驗,Costco開始實行了限流政策,將賣場人數(shù)控制在2000人以內(nèi)……

上海市民們依舊熱情未減,有人早上4點半就去Costco門口排隊了,大多數(shù)人6點半就到了,因為限流,來晚就進不去了……

27日晚上,我發(fā)了一條朋友圈,附了一張在Costco照的,抱著一大包狗糧的照片:

大家都問我是怎么擠進去的。

其實這不是在上海的Costco,而是在美國的Costco。

今年1月,我?guī)ш犎ッ绹螌W,專門去參訪了Costco公司的總部。

Costco的高管Jay B.Smith負責接待了我們,他給我們分享了很多Costco的經(jīng)營細節(jié),都是不為外界所知的。

同時,他告訴我們Costco很快就會在中國上海開業(yè)了,我們也代表中國消費者采訪了他許多問題,特別有收獲。

所以,今天,我想把這些“關(guān)于Costco,你可能不知道的事情”整理出來,獨家分享給你。

01 會員制,并不是Costco成功的關(guān)鍵原因

Costco最早開始推行會員制的時候,其實遭遇了巨大的失敗。

人們當時是不接受,也不理解會員制度的,沒有多少人來辦會員,Costco差點就死掉了。

那Costco是如何起死回生的呢?

它做了一個關(guān)鍵的改變:給高級會員2%的消費返點,每年的返點額度最高可以達到500美元。

高級會員每年的年費是120美元,一個家庭每個月只要在Costco消費500美元,一年下來,這120美元的會員費就可以返點回來了。

而如果你每個月消費500美元以上,你甚至還可以賺到額外的錢。

對于一個中產(chǎn)大家庭來說,平時需要購買食品、日用品、衣服等生活用品,偶爾還需要購買電子產(chǎn)品或者其它大件,每個月500美元的消費也不算太高。

加上Costco的商品物美價廉,本身就比別的渠道有價格優(yōu)勢,只要每個月消費500美元以上,省了會員費不說,還可以獲得額外的返點,何樂而不為呢?

就這樣,Costco迅速獲得了第一批會員。

這些會員辦了卡之后,既買到了物美價廉的商品,又拿到了額外的返點,同時還享受到了Costco把顧客寵上天的服務(wù)。

因此第二年的續(xù)費率高達96%,Costco也越做越成功。

02 Costco最不愿意做的事情就是擴張

Costco每年在全球范圍內(nèi)只擴張25家門店,相對來說,擴張速度算是比較慢的。

因為Costco最不愿意做的事情就是擴張。

為什么???

Jay B.Smith告訴我們:擴張,是最好的讓客戶失望的方法。

擴張?zhí)欤浅H菀讕碛脩趔w驗的下降,這是我們最不愿意看到的事情。

因此,對于擴張這件事,Costco一直是非常謹慎的。

03 25%自營商品+75%品牌商品

Costco的商品中,有25%是自有品牌的商品(比如它著名的自有健康品牌科克蘭Kirkland Signature),剩下的75%是其他品牌的商品。

為什么這么分配呢?

因為它要用25%的自營品牌,來倒逼其他75%的品牌降價。

Costco有經(jīng)營自己品牌的能力,因此它就有底氣跟大品牌說:“你要是不降價,那我就用自己的品牌做了?!?

這就導致了大品牌愿意降價來給Costco供貨,Costco也因此能給用戶提供比別的渠道便宜得多的商品。

一開始,很多大品牌是不愿意和Costco合作的,因為它們其他的零售店要保留高利潤。

但是當Costco越做越大,越來越多的大品牌愿意來costco了,比如勞力士,比如愛馬仕。

04 Costco一開始其實是面向中小企業(yè)的

很多人覺得Costco就像是沃爾瑪旗下的山姆會員店;但其實,Costco一開始更像麥德龍。

Costco最初本來是打算做中小企業(yè)生意的,大包裝倉儲商品直接賣給企業(yè),而不是賣給個人消費者。

但是因為覆蓋面太小,Costco差點死掉。

之后Costco才轉(zhuǎn)型,決定面向個人消費者。

05 Costco為什么非常重視肉類商品?

Costco為什么非常重視肉類商品?

因為肉類商品是非常有粘性的。

Jay B.Smith告訴我們:消費者非常喜歡Costco的肉類,肉類商品會吸引消費者一而再、再而三地來Costco購買。

不像可口可樂、薯片這種標準化商品,肉是非常差異化的商品,你在不同地方買到的肉,質(zhì)量肯定是不一樣的。

你只要把肉類這種差異化的商品做到極好,就會積累消費者的信任,增加消費者的粘性。

所以,Costco非常重視肉類商品的質(zhì)量。

06 Costco為什么可以把東西賣這么便宜?

很多人都覺得,Costco可以把東西賣這么便宜,是因為它靠會員費賺錢。

但是靠會員費賺錢,只能說Costco有把東西賣便宜的動力。

那它把東西賣便宜的能力從何而來呢?

第一點,是因為它的包裝很大。包裝越大,就能賣得越便宜。

第二點,是因為它的品類很少。

沃爾瑪有13萬SKU(品種),而Costco只有4000個。

因為品類少,單個品類的銷量就可以做到極高,Costco就擁有了很強的與供應(yīng)商議價的能力。

第三點,是因為它很多商品是自營,可以自己控價。

比如,Costco有自己的養(yǎng)雞廠,它砍掉了所有中間環(huán)節(jié),最終一只能夠喂飽全家的烤雞,只賣4.99美元。

一只烤雞4.99美元,35人民幣,這在美國是極其便宜的。很多用戶因為買到這么便宜又量大,味道還不錯的烤雞,簡直幸福感爆棚。

07 Costco目前是全美最大的紅酒廠商

還有一點你可能不知道,Costco目前是全美最大的紅酒廠商。

因為Costco賣出的紅酒量實在太大。

但是它并不賣很多種類,它只賣幾款最暢銷的紅酒。

08 Costco其實還做金融生意

在美國,對很多人來說,Costco的會員卡同時也是銀行卡。

Costco和Citibank(花旗銀行)合作,發(fā)行了一種聯(lián)名卡。

既可以作為Costco的會員卡,也可以當做信用卡使用,在Costco消費可以享受2%的返現(xiàn)。

這也就意味著,Costco其實同時也在做金融生意,幫助信用卡的發(fā)行方來發(fā)行信用卡,同時來分享信用卡的刷卡收益,這可能也是Costco一個非常重要的收入來源。

在中國,平安銀行也和Costco發(fā)行了一種聯(lián)名信用卡,會員費可以減100元,同時在Costco消費可以獲得最高1%的返現(xiàn),白金卡每年最高返現(xiàn)1440元。

09 Costco的周轉(zhuǎn)率極高

像Costco這種零售企業(yè),想要賺錢的一個特別重要的方法,就是提高周轉(zhuǎn)率。

Costco的周轉(zhuǎn)率非常高,是11.8,接近12。

什么意思?

Costco用一筆錢進貨之后,一個月之內(nèi)就能把貨物賣出去。

這也就意味著,同一筆錢,Costco一年可以周轉(zhuǎn)12次。

我們來算一筆簡單的賬。

假如一個貨物放在一個普通超市,三個月才賣出去,那么用來進貨的這筆錢,一年只能周轉(zhuǎn)4次。

很多人都知道,Costco的利潤率最高不超過14%。我們假設(shè)它的利潤率是10%。

那么1塊錢的進貨款,在普通超市,一年周轉(zhuǎn)4次,就只能賺4毛錢。

而Costco一年周轉(zhuǎn)12次,就能賺1塊2。

所以,周轉(zhuǎn)速度越快,零售企業(yè)的利潤就越大。

在Costco有一句名言,叫做,降低成本最好的辦法,就是提高銷售。

什么意思呢?

如果想要降低成本,就要提高每天的出貨量,這樣周轉(zhuǎn)率就會非常高;周轉(zhuǎn)率變得非常高,資金成本就會變得非常便宜。

所以,真正的成本,是資金成本。如果你理解了這件事兒,你就會理解到底什么是Costco。

10 Costco在中國會做電商嗎?

Jay B.Smith告訴我們Costco馬上就要在中國開店了。

我們當時問他:Costco會打算在中國做電商嗎?

Jay B.Smith很謙虛地回答說:電商其實是我們一直不擅長的事,美國有一些企業(yè)做得特別好,比如亞馬遜,我們要向它學習。

但是,我們還是希望專注于做自己擅長的事。Costco所擅長的,是在線下做供應(yīng)鏈管理。

所以,Costco知道自己所長,也知道自己所短。

目前來看,就算Costco在中國要做電商,它也會把主要的精力放在線下,把線下的服務(wù)做到。

最后的話

最后,附上Jay B.Smith給我們分享的一組數(shù)據(jù)(截至2019年1月):

  1. Costco在全球共有736家門店,其中:美國516家,加拿大94家,墨西哥36家,英國28家,日本25家,韓國13家,中國臺灣地區(qū)13家,澳大利亞8家,西班牙2家,冰島1家;
  2. 擁有9270萬持卡會員;
  3. 年營業(yè)額:1310億美元;
  4. 會員續(xù)費率:90%;
  5. 全球擁有24萬名員工 。

Costco是全球第二大零售商,第一是沃爾瑪。

它是把零售效率做到的典型案例,是每一個零售企業(yè)學習的標桿。

參訪完Costco,我自己是非常震撼的。它能夠獲得今天的成功,很大程度上,要歸功于它死磕自己、為用戶謀利的精神,以及它強大的供應(yīng)鏈管理能力。

在中國,也有很多向Costco學習的企業(yè),比如小米,比如拼多多。

最后,依然祝福Costco,希望它能夠在中國,越走越遠。

文章來源:人人都是產(chǎn)品經(jīng)理

如何用“全鏈路思維”讓設(shè)計更加符合需求方的預期

ui設(shè)計分享達人

篇首語:


隨著互聯(lián)網(wǎng)時代的發(fā)展,尤其近幾年進入“互聯(lián)網(wǎng)寒冬期”以及失去人口紅利之后,企業(yè)對各個崗位要求都變得“非?!眹栏瘛τ赨I設(shè)計而言,把作品做的非常牛X,顯然已經(jīng)無法滿足市場需求和用人需求了。


前期的鐵三角“產(chǎn)品經(jīng)理、交互設(shè)計師、UI設(shè)計師”很有可能結(jié)合變成是“交互視覺二合一”甚至是“產(chǎn)品交互視覺三合一”的狀態(tài)。在一些企業(yè)你會發(fā)現(xiàn)有一些崗位上的缺失。出現(xiàn)這種情況最大的原因是,很多公司會把一些職能進行合并用來節(jié)省成本?,F(xiàn)在仍然有大多數(shù)的公司并沒有交互設(shè)計師的崗位,但是交互設(shè)計的職能不代表沒有,而是被產(chǎn)品經(jīng)理或者視覺設(shè)計師兼任了。


說到這里大家可能會說,大企業(yè)資金雄厚,不缺少任何職能崗位。是的,沒有錯,但例如“華泰證券”,“浦東發(fā)展銀行”等,不再是UI設(shè)計而是用戶體驗設(shè)計師了。那么作為UI設(shè)計師、運營設(shè)計師、品牌設(shè)計師(以上統(tǒng)稱為視覺設(shè)計)的我們,該如何順應(yīng)時代發(fā)展,更加符合當下的市場規(guī)律,成為一名優(yōu)秀的用戶體驗設(shè)計師呢?


當我們拿到需求方(產(chǎn)品或運營)的設(shè)計需求時,不再是盲目的直接找參考、找素材開始了,而是用產(chǎn)品思維模式,理解“產(chǎn)品目標”、鎖定“目標用戶”、切身體會“用戶場景”、遵循“用戶行為習慣”等的方式,充分理解需求方所提出的設(shè)計需求,進而設(shè)計出更加符合需求方心理預期的設(shè)計作品。


因為與需求方“同頻”思考才會設(shè)計出符合需求的設(shè)計,難道不是么?


本文目的:本文引入“全鏈路思維”模式,幫助視覺設(shè)計師提升思維高度,通過“分析需求”、“拆解需求”、“競品分析”等三個緯度思考,并將這些分析結(jié)果轉(zhuǎn)化為設(shè)計方案。


正文


一、全鏈路思維


最近所謂“全鏈路思維”的話題很火,但事實上,全鏈路早就不是什么新鮮的概念了,而且也并非什么崗位頭銜(和全棧、什么都能干不是同一概念),更接近于一種設(shè)計思維與方法。


近幾年,設(shè)計的發(fā)展趨勢從UED(以用戶為中心)變成UGD(以用戶為中心,以業(yè)務(wù)增長為導向,不以結(jié)果導向的KPI都是耍流氓),對設(shè)計的價值考核也越來越清晰,同時對于設(shè)計師的能力體現(xiàn)要求更高。行業(yè)上升發(fā)展趨勢要求設(shè)計師更懂行業(yè)(掌握行業(yè)間的差異)、更懂用戶(洞察用戶的需求)、更懂數(shù)據(jù)(善于分析業(yè)務(wù)數(shù)據(jù))、更懂增長(投入產(chǎn)出比)。


在需求階段,我們比較傳統(tǒng)的一種流程,是被動從產(chǎn)品經(jīng)理處接受已被加工為具體方案的需求,對需求產(chǎn)生的背景并沒有什么深刻的接觸和理解。而在進行全鏈路設(shè)計的業(yè)務(wù)場景中,需求方不會直接給你一個加工好的答案,甚至他們自己都沒想清楚問題出在哪里、應(yīng)該如何解決,而更多是帶著一個提升某業(yè)務(wù)指標的原始訴求或一堆零散的原始用戶反饋來找你;至于怎么從中引導對方發(fā)現(xiàn)問題、分析問題、歸納機會點、輸出能幫助達到商業(yè)目標的產(chǎn)品設(shè)計方案、甚至協(xié)調(diào)推動落地,都需要設(shè)計師作為 Owner 去思考和負責。


“全鏈路”這個詞應(yīng)該是2016年從阿里出來的,對于“全鏈路”思維的理解,行內(nèi)有不同的理解方式,筆者結(jié)合工作總結(jié)出以下幾種方法:

需求分析 > 拆解需求 > 分析競品 > 確立設(shè)計方案



二、用戶體驗


對于用戶體驗的理解,根據(jù)思考維度的不同其結(jié)果往往是眾說紛紜,由于各個職能崗位之間工作側(cè)重點以及專業(yè)度的不同,溝通起來是有成本的,只有用戶為中心的“用戶體驗”思維才是各個職能崗位之間的唯一溝通《通用語》。例如:當產(chǎn)品向設(shè)計傳達產(chǎn)品需求時,產(chǎn)品無法用視覺角度去闡述產(chǎn)品,設(shè)計也無法用視覺專業(yè)知識向產(chǎn)品解釋設(shè)計理念,你只能用“用戶體驗”思維去解釋你的設(shè)計方案。當然,如果對業(yè)務(wù)場景非常了解,兩相結(jié)合,溝通起來效果更佳。


那么什么是用戶體驗,唯一的核心只有一個,那就是“解決問題”

解決用戶具體某個需求點,讓用戶使用起來更佳容易,并且給用戶留下深刻的印象(轉(zhuǎn)化率)


解決了用戶某個問題點并印象深刻,用戶才覺得用著舒服。注意,這里的舒服指的是“舒爽”而非“酸爽”哦~。說到這里不得不再次提及老生常談的,用戶體驗5要素:

表現(xiàn)層 > 框架層 > 結(jié)構(gòu)層 > 范圍層 > 戰(zhàn)略層


那么以架構(gòu)層與結(jié)構(gòu)層為例

(一)、架構(gòu)層:頁面布局(各類控件及信息擺放),頁面布局的核心點在于:恰好


當一個功能恰好出現(xiàn)在,用戶期望出現(xiàn)的位置上,即符合了“用戶的心理預期”,也符合了“用戶行為習慣”,那么用戶用著是否“舒爽”?所謂,以用戶為中心指的就是,迎合用戶的行為習慣及心理預期,讓用戶感到恰好、舒爽,同時感到被照顧、呵護的感覺:你好懂我~

大家都知道,一個頁面最佳視域為:左上、右上、左下、右下,左上最佳,右下最次。功能類控件(如:評論,點贊,發(fā)布,分享)在一段信息區(qū)域的右側(cè),不是說右側(cè)不好么,這是因為為了符合人體工程學,右側(cè)好點擊原理(左撇子除外)。


(二)、結(jié)構(gòu)層:信息架構(gòu) (信息層級梳理及頁面流),核心點在于:瘦身


結(jié)構(gòu)層相對于架構(gòu)層較為抽象,我們可以將他理解為“鏈接”。架構(gòu)層是針對單頁面結(jié)構(gòu)設(shè)計,而結(jié)構(gòu)層是將單頁面鏈接在一起,從而形成了系統(tǒng)。

拿app舉例:架構(gòu)層決定了點擊頁面圖標和按鈕后頁面跳轉(zhuǎn)到哪一頁。通過刪除、組織,隱藏和轉(zhuǎn)移,將復雜的結(jié)構(gòu)變的簡化,也是提高用戶體驗的手段。例如QQ5.0的升級,通過漢堡導航及tab標簽將功能整合,似的應(yīng)用在感覺上苗條了很多。


以阿里巴巴(1688) APP 8.0為例:


(三)、怎么做好頁面布局及信息層級梳理:核心在于準確理解產(chǎn)品需求


也許大家都遇到過這樣的情況:當產(chǎn)品經(jīng)理看到你的設(shè)計方案時,突然找到你并且要求你,“這里放大,那里縮小,哦不,你給我放大的同時縮小,這個顏色我要五彩斑斕的黑,哦不,我的意思是@#¥%”


遇到這樣的情況,設(shè)計師要無條件的遵循么?產(chǎn)品經(jīng)理對于視覺有自己的審美,當他發(fā)出需求時腦子里已經(jīng)有了2-3個設(shè)計方案,只是他不會做,設(shè)計方案沒有符合他的心理預期(以至于指手畫腳)。甚至他的審美經(jīng)過這么多年優(yōu)秀作品都熏陶,不會比任何一個設(shè)計差,只是他無法用設(shè)計專業(yè)知識去指導你罷了。


這個時候設(shè)計師該怎么做?出現(xiàn)這種情況只有這幾種可能:沒有同頻思考、沒有準確領(lǐng)悟產(chǎn)品目標(意圖),進而對信息架構(gòu)、信息層級理解有誤、沒有把重點信息清晰體現(xiàn)、功能類控件,沒有做好有效的視覺引導。以上統(tǒng)稱為:需求理解錯了。


說到需求理解,據(jù)一個簡單的例子:假如有個用戶說:“我想吃蛋糕”,那么注意了,如果真的給用戶蛋糕,那就完蛋了。首先分析用戶為什么要吃蛋糕:就喜歡吃蛋糕?喜歡吃甜的點心(別的甜點能否替代)?還是說只是單純的餓了,不知道該吃什么,只是突然想到了蛋糕,那么可否用其他我能提供的什么東西去替代?


所以,這個用戶的需求不一定就是蛋糕,蛋糕只能是訴求,解決溫飽的訴求而已,但不一定是需求,他的需求是,解決溫飽的食物而已,如果不多問一句,不就產(chǎn)生了“放大的同時縮小,五次斑斕的黑”么?因為對需求的理解錯誤,沒有準確的理解產(chǎn)品目標,才導致設(shè)計方案才會出現(xiàn)錯誤,難道不是這樣的么?



二、需求分析


有人會問:“視覺設(shè)計師還需要像產(chǎn)品經(jīng)理那樣做需求分析么?”,正如上文中提到,要與產(chǎn)品經(jīng)理保持“同頻思考”,還要準確的理解產(chǎn)品需求。不需要做,但并不代表不會或者不去思考。因為需求分析是“全鏈路思維”模式的前提。那么對于視覺設(shè)計師而言,不需要像產(chǎn)品經(jīng)理那種專業(yè)度,只需要思考以下幾點即可:


(1)為什么要做這個需求(業(yè)務(wù)目標)

思考:業(yè)務(wù)方為什么要提出這個需求,為了提升轉(zhuǎn)化率、用戶留存、曝光/流?、點擊率、訪問率、注冊率,也就是業(yè)務(wù)方的核心目的是什么。


(2)產(chǎn)品期望得到什么結(jié)果(產(chǎn)品目標)

思考:產(chǎn)品為了達到業(yè)務(wù)目標,采取的策略是什么,通過什么功能實現(xiàn)的。產(chǎn)品的核心功能及交互流程是什么。


(3)誰來使用這個功能(目標用戶)

思考:此業(yè)務(wù)目標是針對哪些人群的,這些人群有什么共同的特點,和行為習慣。


4)他們?yōu)槭裁匆褂眠@個功能(用戶需求)

思考:這些人群有哪些共同的需求點,產(chǎn)品目標是否滿足這類人群的核心需求,解決了哪些痛點。這些人群期望怎樣的結(jié)果。設(shè)計師該如何引導用戶,理解產(chǎn)品目標。


(5)他們在什么情況下使用這個功能(用戶場景)

思考:在這樣的業(yè)務(wù)目標下,用戶在什么場景使用該功能,為什么使用,會不會有反感,如果我是用戶,我的感受是什么。


其實,業(yè)務(wù)目標和用戶的需求是矛盾的。比如,業(yè)務(wù)方希望提升注冊率,但對于用戶而言,注冊與否并不敏感,或者根本不想走一遍繁瑣的注冊流程。這時產(chǎn)品就需要在特定的場景下,在某個功能流程中恰好出現(xiàn)注冊功能,讓用戶不得不注冊,因為用戶不注冊就得不到他剛好想要的服務(wù)或體驗。這個時候設(shè)計師要考慮的是,通過設(shè)計營造一種喜悅的氛圍,不讓用戶感到反感。因此設(shè)計師的核心價值在于,如何平衡業(yè)務(wù)目標和用戶需求之間的矛盾,做出有效視覺引導。




三、拆解需求


拆解需求指的是,當設(shè)計師分析需求方的需求后,將需求拆解成其對應(yīng)的視覺解決方案。上文中提到,需求分析不需要達到產(chǎn)品經(jīng)理的專業(yè)度,但“拆解需求”必須達到專家級程度。因為這部分是需求分析后,如何理解需求方的需求(業(yè)務(wù)目標、產(chǎn)品目標)的關(guān)鍵所在。這時,我們視覺設(shè)計師要思考一下幾點:


1、信息層級

(1)信息層級的分類(在明確需求后要對信息進行劃分及拆解)

(a)用戶能否在最短的時間閱讀到信息、

(b)哪些信息是屬于業(yè)務(wù)流程范圍的、

(c)哪些信息是產(chǎn)品想要突出表現(xiàn)的、

(d)哪些信息看似不重要但沒有還不行、

(e)信息描述前后是否統(tǒng)一,會不會給用戶帶來困惑


(2)信息層級的權(quán)重

在明確主要信息歸類后,通過視覺上的,黑、白、灰,把層級表達清楚。明確信息權(quán)重,權(quán)重高的是否優(yōu)先展示,有沒有誤導用戶。


2、功能層級

(1)功能優(yōu)先級權(quán)重劃分(在明確功能后要對功能進行分類及拆解)

(a)哪些功能優(yōu)先級最高,哪些是屬于主業(yè)務(wù)流程及功能流程、哪些功能是子功能、

(b)哪些功能產(chǎn)品經(jīng)理并不想突出,但用戶卻需要的、

(c)同一個頁面,同一功能多次出現(xiàn),產(chǎn)品經(jīng)理的目的是什么、

(d)產(chǎn)品不同時期,功能的視覺變現(xiàn)是否有差異、


(2)交互層邏輯是否貼合用戶場景

在明確業(yè)務(wù)目標與產(chǎn)品目標后,設(shè)計師要反復驗證交互邏輯是否合理,邏輯是否符合該用戶場景。


(3)交互體驗是否流暢

在明確目標用戶與使用場景后,把自己融入到使用場景中,反復驗證交互流程??词欠穹蠘I(yè)務(wù)目標與產(chǎn)品目標,同時看交互流程是否流暢,有沒有給自己帶來障礙。


(4)用戶操作是否便捷

如果自己是用戶,操作是否符合用戶行為習慣,有沒有恰好出現(xiàn)在該出現(xiàn)的位置上,視覺展示是否引導合理,視覺引導有沒有給用戶帶來誤區(qū)。


3、頁面布局

在明確目標用戶與使用場景后,把自己模擬成目標用戶,思考頁面布局是否符合用戶行為習慣和心理預期。主流程下的控件是否在視覺上有點擊欲望,會不會反感。(用戶體驗中已有詳細說明)


4、狀態(tài)的查缺補漏

各類交互狀態(tài),如,圖標點擊后的狀態(tài)(移動端、pc端)、hover 狀態(tài)(pc端)、非主業(yè)務(wù)流程下的功能提示(如:錯誤提示、缺省提示)。這些產(chǎn)品經(jīng)理往往會忽略掉,或者文檔里也會給出過,要注意觀察及時查缺補漏。


5、視覺的有效引導

在準確的理解產(chǎn)品需求,做到“同頻思考”后,分析信層級和功能優(yōu)先級及權(quán)重劃分,將這些在視覺設(shè)計的過程中做有效的引導,并時刻查缺補漏。這個時候?qū)τ谀男┬畔⒑凸δ苄枰怀?,哪些信息和功能需要弱化,在頭腦里有個清晰的認知和思路。讓信息和功能恰好出現(xiàn)在用戶期望的位置上,并且解決產(chǎn)品目標為目的,也就是上文中提到的用戶體驗的核心點,解

決問題。


值得注意的是

視覺設(shè)計師是對產(chǎn)品方案的進一步完善,以用戶為中心的用戶體驗思想,用視覺引導的方式引導用戶實現(xiàn)產(chǎn)品目標的,而非只會照著原型圖毫無思想的畫圖。同時要讓用戶無論在視覺上還是體驗上,都能感受到“舒爽”而非“酸爽”。


產(chǎn)品經(jīng)理給出的原型,重心在業(yè)務(wù)邏輯,因此,為了提升用戶體驗、避免給用戶帶來誤區(qū)和障礙,設(shè)計師要以產(chǎn)品思維(產(chǎn)品思維和業(yè)務(wù)思維是不一樣的)在業(yè)務(wù)及產(chǎn)品目標、主功能邏輯不變的情況下,重新劃分信息層級、做好頁面布局,做好視覺引導。



四、競品分析


通過需求分析(理解需求)、和拆解需求(明確設(shè)計目標)后,在正式進入視覺設(shè)計之前,視覺設(shè)計師們通常要先找一波資料(找參考),如果只是這樣,那么僅僅是尋找視覺表現(xiàn)手法而已(什么風格、什么顏色)。本文中所提到的競品分析,不是產(chǎn)品競品分析也不是交互競品分析,而是為了視覺設(shè)計而準備的視覺競品分析?;凇叭溌贰彼季S模式下通常需要考慮一下幾點:


1)我們的方案和競品的區(qū)別在哪里,為什么不同。

跟競品之間的區(qū)別很重要,因為每個產(chǎn)品業(yè)務(wù)目標與產(chǎn)品目標,以及產(chǎn)品處于的階段都是不一樣的,即便看著很類似也不可以盲目參考。


例如:產(chǎn)品階段的不同,對于“搜索”功能的要求是不一樣的,產(chǎn)品初期由于信息量不夠,搜索不出太多的內(nèi)容。屬于沒有還不行,有了還不能太明顯,不能誤導用戶去搜索,而是要用分類功能。因此,即使產(chǎn)品經(jīng)理給出了“”搜索”功能,在視覺上也要弱化變現(xiàn)。但你如果參考了成熟期的產(chǎn)品,可想而知你設(shè)計出的“搜索”會是什么樣的了吧。


(2)競品是怎么做的,優(yōu)點在哪里,解決了哪些問題,他們?yōu)槭裁催@么做

我們要找到與本產(chǎn)品業(yè)務(wù)目標與產(chǎn)品目標基本一致的競品去對比,切勿只是原型基本類似就以為目標一致。因此,先要看這個競品都解決了哪些問題。


3)什么是我們可以借鑒的,是否可以改進

在確定目標基本一致后,要分析哪些可以借鑒,能不能比他做的更好,如果只是抄襲,那就沒有意思了。


4)那么設(shè)計該如何表達,比競品做的更好

經(jīng)過上述分析,在這個階段對于視覺設(shè)計師而言,設(shè)計方案基本在腦子里已經(jīng)成型了。這時對于什么風格、什么顏色,才基本符合產(chǎn)品預期。在結(jié)合需求拆解的方式,拿出可行的設(shè)計方案。


轉(zhuǎn)自-站酷

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

el-table + el-form實現(xiàn)可編輯表格字段驗證

seo達人

表格輸入信息很常見,因此表格的驗證也很必要,el-form提供了輸入框驗證.可以和表格結(jié)合起來用,使用效果
 
 
HTML:
<div class="table_box">
  <el-button type="primary" class="submit_btn" @click="addTable">添加</el-button> <!-- 如果不想展示錯誤提示信息,可以加上show-message參數(shù) --> <el-form :model="productRuleForm" ref="productRuleForm" :rules="productRuleForm.rules" :show-message="false">
    <el-table
      :data="productRuleForm.tableData" border
      style="width: 100%">
      <el-table-column
        prop="date" label="日期" width="180">
        <template slot-scope="scope"> <!-- prop的規(guī)則: 在普通的form表單中是一個對象,prop是對象的屬性. 表格是由多個對象組成的數(shù)組,在寫prop是需要根據(jù)索引給值.這里的tableData就相當于對象的屬性 !-->
        <!-- rules也要單獨給 --> <el-form-item :prop="'tableData.' + scope.$index + '.date'"
            :rules='productRuleForm.rules.date'>
            <el-date-picker
              v-model="scope.row.date" value-format="yyyy-MM-dd" placeholder="選擇日期">
            </el-date-picker>
          </el-form-item>
        </template>
      </el-table-column>
      <el-table-column
        prop="name" label="姓名" width="180">
        <template slot-scope="scope">
          <el-form-item
            :prop="'tableData.' + scope.$index + '.name'" :rules='productRuleForm.rules.name'>
            <el-input v-model="scope.row.name"></el-input>
          </el-form-item>
        </template>
      </el-table-column>
      <el-table-column
        prop="phone" label="電話">
        <template slot-scope="scope">
          <el-form-item
            :prop="'tableData.' + scope.$index + '.phone'" :rules='productRuleForm.rules.phone'>
            <el-input v-model="scope.row.phone"></el-input>
          </el-form-item>
        </template>
      </el-table-column>
      <el-table-column
        prop="address" label="地址">
        <template slot-scope="scope">
          <el-form-item
            :prop="'tableData.' + scope.$index + '.address'" :rules='productRuleForm.rules.address'>
            <el-input v-model="scope.row.address"></el-input>
          </el-form-item>
        </template>
      </el-table-column>
    </el-table>
  </el-form>
  <el-button type="primary" class="submit_btn" @click="submit">提交</el-button>
</div>

 


        

 

js:

data () { return {
      productRuleForm: {
        tableData: [{
          date: '',
          name: '',
          phone: '',
          address: '' }],
        rules: {
          date: [{ required: true, message: '請選擇日期', trigger: 'change' }],
          name: [{ required: true, message: '請輸入姓名', trigger: 'blur' }],
          phone: [{ required: true, message: '請輸入電話號碼', trigger: 'blur' }],
          address: [{ required: true, message: '請輸入地址', trigger: 'blur' }]
        }
      }
    }
  },
 methods: { // 添加一行  addTable () { this.productRuleForm.tableData.push({
        date: '',
        name: '',
        phone: '',
        address: '' })
    }, // 提交數(shù)據(jù)  submit () { this.$refs['productRuleForm'].validate((valid) => { if (valid) {

        }
      })
    } 
            

}

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

原型該畫到什么程度?

資深UI設(shè)計者

原型的不同階段,含義和作用也各不相同,更加認清了原型在工作中的用途,希望對各位也有所幫助~

不知你有沒有這樣的經(jīng)歷:為了不讓原型看起來丑,會糾結(jié)各種細節(jié)處理(間距、大小),結(jié)果造成工作周期延長,精力損失;為了讓原型接近于真實效果,會思考各種精致布局,結(jié)果leader來一句‘你現(xiàn)在做這么好看干嘛,這個功能都沒確定好’....在各種階段畫出了不合適的原型。


所以今天想聊聊‘交互原型’這一話題,也算是對自己成長的一個總結(jié)和沉淀。


文章目錄:

·原型的不同階段

·原型與用戶體驗的5個層面

·原型產(chǎn)出的原則

Image title




Part1:原型的不同階段


其實我覺得畫原型和做設(shè)計的理念是一樣的:沒有好壞,只有是否合適~

當產(chǎn)品經(jīng)理/交互設(shè)計師沒認清當前的需求階段時,無論你畫的好不好看,都會出現(xiàn)一些糟糕的現(xiàn)象:一開始就注重細節(jié)處理、在原型需要重點輸出時,又忽略功能與邏輯上的思考、在功能未確定時追求精致頁面效果...


下面是我對‘原型’的理解,所繪制用于表示不同階段下的需求特征。

Image title




01.想法階段:


在產(chǎn)品需求的初始階段,功能概念都比較模糊,大部分想法都停留在腦海和口述上(工作中典型的場景,如團隊風暴、需求討論、會議評審)。需要我們不停地理清概念想法,驗證需求的合理性、目標是否正確。


所以這個階段的強調(diào)是:產(chǎn)品雛形 - 將我們的想法、概念需求可視化出來,并加以討論驗證。因此,最合適的方式就是用‘草圖’表達,快速產(chǎn)出快速修改,能即時看見產(chǎn)品的雛形。

Image title


常用‘草圖’勾勒產(chǎn)品雛形,除了可以表達想法、探索方向外,好處還在于:

a. 能提升你快速思考、驗證假設(shè)、優(yōu)化設(shè)計流程的能力。

b. 能展示你思考問題的過程(設(shè)計思維),體現(xiàn)專業(yè)能力。

Image title



02.修改階段: 


這階段的產(chǎn)品目標和方向較為清晰,接下來需要優(yōu)化原有的概念想法,為產(chǎn)品創(chuàng)建一個信息架構(gòu)、梳理功能邏輯等工作,方便在需求評審會、團隊討論中推動產(chǎn)品功能的進展。 


該階段強調(diào):理清目標 - 根據(jù)用戶訴求、業(yè)務(wù)目標、運營需要等不同目標點,逐步梳理出原型上需要展示哪些功能內(nèi)容(界面布局、信息取舍)。

Image title


所以對產(chǎn)品經(jīng)理/交互設(shè)計師來說,只需產(chǎn)出一個大體上看得明白、能理清產(chǎn)品功能的‘中保真原型’即可。方便即時修改,向產(chǎn)品定型/高保真原型過渡。

Image title



03.確定階段:


到了這個階段,產(chǎn)品需求的功能布局、信息設(shè)計已全部確定,這時一份全面、嚴謹?shù)?strong>‘高保真原型’就尤為重要。


一方面可以為視覺同事的UI輸出、開發(fā)的落地實現(xiàn)等提供依據(jù)。另一方面在各種工作場景中,高保真原型都能發(fā)揮很大的作用,如交互評審、領(lǐng)導過稿、A/Btest、demo演示等等。

Image title


這一階段強調(diào):細節(jié)核對 - 因為關(guān)系著UI輸出、界面實現(xiàn)等工作,所以需要注意各種交互細節(jié),以防出現(xiàn)設(shè)計、流程上的漏洞。


有2個核對緯度上的檢查:


a. 規(guī)范對齊


若團隊內(nèi)部有設(shè)計規(guī)范時,一定要對齊字體大小、顏色、布局、間距等視覺元素。且能復用已有樣式就盡量復用,避免出現(xiàn)“一個功能,兩種樣式”的情況,如圖:

Image title


b. 交互走查


高保真原型輸出后,需要根據(jù)交互自查表,一一梳理原型說明是否存在漏洞,以防出現(xiàn)異常流程和內(nèi)容狀態(tài)。Image title


另外,當你想要獲得用戶反饋、測試你的想法是否為業(yè)務(wù)/用戶創(chuàng)造價值時,盡量使用高保真原型。原因在于:能夠產(chǎn)生真實的操作效果、給用戶帶來‘身臨其境’的瀏覽體驗。

Image title

最后總結(jié)一下,不同階段的原型用途:


·草圖:快速表達想法、驗證需求、展示思考過程。

·中保真原型:梳理大體產(chǎn)品框架,繼續(xù)優(yōu)化功能。

·高保真原型:為UI輸出與開發(fā)實現(xiàn)提供依據(jù)、測試用戶反饋、制作交互demo、向領(lǐng)導過稿等等。

Image title





Part2:原型和用戶體驗5個層面


另外我還發(fā)現(xiàn),結(jié)合‘用戶體驗5個層面’來看不同階段的原型,兩者是多么地吻合、有理有據(jù)。


01.戰(zhàn)略層和范圍層 - 草圖


產(chǎn)品想要做什么?如何去滿足戰(zhàn)略目標?在構(gòu)思把目標和需求轉(zhuǎn)變成功能和內(nèi)容時,用草圖的方式是極為合適的:快速表達、即時驗證,能讓概念想法馬上‘可視化’出來。

Image title



02.結(jié)構(gòu)層 - 中保真原型


想法表達后,需要為產(chǎn)品構(gòu)思一個具體的框架結(jié)構(gòu),根據(jù)業(yè)務(wù)目標和用戶訴求,不斷地修改產(chǎn)品功能、信息設(shè)計,慢慢完成產(chǎn)品的定型。所以這時候只需產(chǎn)出一個大體上看得懂、方便修改的中保真原型即可。

Image title



03.框架層 - 高保真原型


這是原型設(shè)計的最后階段,產(chǎn)品關(guān)系已理清、功能內(nèi)容已確定。這階段注重原型的界面細節(jié)處理,如梳理異常流程、信息的不同狀態(tài)、是否對齊規(guī)范等等,以便后期的界面實現(xiàn),所以一份高保真原型就尤為重要了。

Image title



04.表現(xiàn)層 - UI效果圖


原型確定后,接下就是UI優(yōu)化階段了,這時候產(chǎn)品的最終效果也就出來了。產(chǎn)品的下次功能迭代,也是根據(jù)此UI效果圖的基礎(chǔ)上進行原型優(yōu)化、修改。

Image title





Part3:交互原型的原則


最后簡單說下,原型產(chǎn)出的幾個原則:‘使用灰色圖’和‘復用已有樣式’,避免在今后工作上踩坑:


01.使用灰色圖


原型就要有原型的樣子,大面積的彩色布局,很容易讓人覺得這是UI效果圖(視覺同事可不背這個鍋),尤其是在交互評審會上,這種細節(jié)更應(yīng)該注意。



02. 復用已有樣式


這個上面已經(jīng)說了,能復用樣式就復用,避免出現(xiàn)“一個功能 兩種樣式”的情況,否則和視覺、開發(fā)同事對接原型時,會造成一定的理解干擾。



總結(jié):

以上對交互原型的一些見解,若有描述得不當請多指教,下面是總結(jié)文件(轉(zhuǎn)發(fā)截圖給我可領(lǐng)取)。

Image title


文章來源:UI中國

element ui在table中放入input且實現(xiàn)驗證

seo達人

<template>

  <div class="app-container" style="overflow: auto;">

    <el-table

      :data="list"

      size="small"

      element-loading-text="Loading"

      border

      highlight-current-row

    >

      <el-table-column label="會員賬號">

        <template slot-scope="scope">

          <el-form :model="scope.row" :rules="rules">

            <el-form-item prop="login">

              <el-input v-show="true" v-model="scope.row.login" placeholder="請輸入會員賬號"/>

            </el-form-item>

          </el-form>

        </template>

      </el-table-column>

      <el-table-column label="真實姓名">

        <template slot-scope="scope">

          <el-form :model="scope.row" :rules="rules">

            <el-form-item prop="real_name">

              <el-input v-show="true" v-model="scope.row.real_name" placeholder="請輸入真實姓名"/>

            </el-form-item>

          </el-form>

        </template>

      </el-table-column>

      <el-table-column label="會員昵稱">

        <template slot-scope="scope">

          <el-form :model="scope.row" :rules="rules">

            <el-form-item prop="nickname">

              <el-input v-show="true" v-model="scope.row.nickname" placeholder="請輸入會員昵稱"/>

            </el-form-item>

          </el-form>

        </template>

      </el-table-column>

      <el-table-column label="會員手機">

        <template slot-scope="scope">

          <el-form :model="scope.row" :rules="rules">

            <el-form-item prop="mobile">

              <el-input v-show="true" v-model="scope.row.mobile" placeholder="請輸入手機號碼"/>

            </el-form-item>

          </el-form>

        </template>

      </el-table-column>

      <el-table-column label="操作">

        <template slot-scope="scope">

          <el-form ref="scope.row" :model="scope.row">

            <el-form-item>

              <el-button @click="handleSubmit(scope.$index,scope.row)">重試</el-button>

            </el-form-item>

          </el-form>

        </template>

      </el-table-column>

    </el-table>

  </div>

</template>

<script>

import { retry } from '@/api/table'

import { validateName } from '@/utils/validate'

import { validateMobile } from '@/utils/validate'

 

export default {

  data() {

    // validator

    const validateNameInput = (rule, value, callback) => {

      if (!value) {

        return callback(new Error('此項必填!'))

      } else {

        callback()

      }

    }

    const validateMobileInput = (rule, value, callback) => {

      if (!value) {

        return callback(new Error('手機號碼必填!'))

      } else if (!validateMobile(value)) {

        return callback(new Error('請?zhí)顚懻_的手機號碼格式!'))

      } else {

        callback()

      }

    }

 

    return {

      list: [],

      // input框失焦校驗

      rules: {

        nickname: [{ validator: validateNameInput, trigger: 'blur' }],

        real_name: [{ validator: validateNameInput, trigger: 'blur' }],

        mobile: [{ validator: validateMobileInput, trigger: 'blur' }],

        login: [{ validator: validateNameInput, trigger: 'blur' }]

      }

    }

  },

  created() {

    this.fetchData()

  },

  methods: {

    fetchData() {

      const errorData = JSON.parse(this.$route.query.errorData)

      this.list = JSON.parse(errorData)

    },

    handleSubmit(index, row) {

      // 提交校驗

      if (validateName(row.login) && validateName(row.real_name) && validateName(row.nickname) && validateMobile(row.mobile)) {

       //數(shù)據(jù)提交和錯誤catch

    }

  }

}

</script>

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

日歷

鏈接

個人資料

藍藍設(shè)計的小編 http://sillybuy.com

存檔