<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設計分享達人

          “文中示例相關數據都為假的模擬數據,而非真正的商業數據,以此聲明”

          度量是什么

          【度量Measure】是一種測量評定對象的方式,它幫助我們結構化的獲取對象的狀態與變化,我們運用這些數據進行洞察,轉化為有用的信息,幫助決策和優化,這個過程也是分析診斷的過程。

          那日常會有怎樣的一些信息獲取呢?(這里面包含了數據也包含了一些正負性的反饋)

          我們對一個功能上線進行一組完整的項目結果質量數據模擬:


          • 凈交易收入額比去年同期上升2.0%,達到2千萬

          • 訂單量為222,比上周上升了2.0%(對交易產生直接正向作用)

          • 方案產出數共222件,比上周上升了22.2% (對內容產出有直接的提升)

          • 用戶的滿意度為2.2 ,上升了2% (之前是2.0)

          • 用戶使用表現出沉靜,輕松的情緒(比之前挫折,晦澀要好很多)

          • 功能點擊,周活躍2200,點擊率22%,周留存22.2%(0-1)

          • 功能渲染和可交互時長為0.2秒加載完成。用戶在使用時交互順暢無卡頓(符合業界前端質量交付標準)

          這段描述符合整個產品使用的過程,它似乎是一個多面體,幫助我們了解整個產品黑盒。這個描述越精細越多維,我們得到的信息就越清晰越客觀。(包含多元數據內容,并對數據已進行比對和使用,得到一定的有效信息)反之,假如哪個環節出現問題。我們能清晰看到問題出現的環節,并且通過其表征的信息進行問題的深挖(再細化相關數據或者關聯的層次)。


          我們可以拆解到這幾個層次的數據

          業務結果、用戶反饋(態度與情緒)、行為點擊、系統性能

          可理解為:良好的產品運行-》用戶流暢使用-》良好的用戶反饋-》預期的產品轉化結果


          從獲取方式來說,大致可以從兩個大角度(這里從廣義的范疇去分)

          【qualitative research定性研究】:快速從樣本中判斷問題的性質和方向

          【quantitative research定量研究】:數據的驗證性,全面性、追蹤性


          定量獲取

          系統承載業務內容的運作,可以記錄各種各樣的明細數據表,在海量數據中,進行科學的關聯與細分。以大數據驅動為最終目標,其特點是:數據的全面性和自動追蹤獲取。

          業務結果

          追蹤問題:產品是否符合市場需求?產品是否良性發展?


          業務型數據是圍繞著整個商業建設和運作階段而產生的數據。是最能體現產品、商業價值的部分??梢詺w納為三類:內容建設->流量訪問->商業交易。是商業鏈路中產生的具有直接商業結果的數據。


          內容建設 是指經過人為輸入,系統流轉產生的比如商品、文章、方案等等具有實質內容價值的數據。是具有生產過程的(一般是經過一系列的操作完成的)。


          流量訪問/分發 則是針對商業內容的使用/運作,比如某個商品的瀏覽,某個內容的傳播等等。這些和營銷相關具備人群效應的數據也屬于業務數據。最常見的就是曝光量點擊量,而在中后臺系統中則是以訪問瀏覽為主。


          商業交易 則是最直接的商業結果型數據,最常見的就是網站的GMV(成交金額:包括:付款金額和未付款。)

          訂單交易額、注冊會員數等等。


          以某平臺中相關的業務數據為示例



          業務結果的分析,是根據不同業務發展,確定核心業務指標,以及建立對核心指標的拆解邏輯。

          它或許是個計算公式?;蛘呤莻€一級指標到二級關聯指標。例如以下,這里暫時不展開來講。



          對于業務數據的獲取,我們大部分是直接通過后端的數據庫沉淀下來的。但如果涉及到商業數據的細分(按照商業目標進行階段性或者類別型的追蹤監測)。比如想知道會員的vip的分層情況?;蛘咧滥承袠I商品的生產細分情況等等。這些雖然可以通過后端拉數據,讓數據分析師或者運營整理出來,但是每次都有加工成本,也沒有辦法看到實時數據,這時候就會要考慮去做細分埋點,下文會提及到埋點方式。

          行為點擊

          追蹤問題:產品使用情況如何?用戶瀏覽習慣如何?

          用戶行為數據,是圍繞用戶訪問某產品過程的用戶行為軌跡數據。其中大體包含了用戶量、曝光量、點擊量、瀏覽量、訪問時長、停留時長等等觀測用戶使用情況的表征數據。

          這里是一組典型的平臺用戶使用行為的描述,而這些行為的最終,是產出了上面的業務數據(訂單與成交金額)

          訪問首頁->點擊并瀏覽商品詳情->點擊客戶咨詢進行咨詢->點擊購買提交訂單->點擊支付,支付完成

          由此我們可以解釋,行為數據與業務結果之間的關系,并且兩者的關注點也是有差異的,在行為鏈路中,我們更注重每一層的轉化關系以及用戶為什么沒有向下轉化的障礙點。


          再以B端管理系統為例

          B端的管理系統具有典型性,可以用點線面來歸納,點指的是諸如事件曝光點擊等。線指的是用戶使用路徑,面則是廣義的綜合性觀察,比如流量分布,比如區域熱圖等。通過觀察這些,可以觀察到用戶的使用率和使用路徑。并且得知用戶使用產品是否真的貼合需求,設計的是否合理高效。



          行為數據要結合具體的場景或者維度去觀察,才能產生更有用的信息。


          運用行為數據,我們可以去做很多分析:漏斗分析、留存分析、流量分布分析、路徑分析 、單頁熱力分析、點擊分析、 人群分析等等,這些都是分析方式,在后續關聯篇章中會去探討。


          行為數據的獲取是依賴于埋點的,在業界有兩大類埋點方式:全埋點、手動埋點。

          行為數據的三大事件類型基本可以歸類為:曝光事件、點擊事件、停留事件

          對于C端側重于曝光、點擊。對于B端側重點擊、停留 (從流量轉化與訪問效能兩個角度來說)


          以上介紹了業務結果和行為點擊兩種數據,而這兩種內容,都會涉及到埋點采集這件事,這里我們介紹下關于埋點采集數據這件事情。

          埋點采集

          追蹤問題:如何根據人物、場景、動作制定精準的采集方案?


          埋點,是對特定數據的采集,由前端埋點和上報、進行數據處理和數據分析。一般數據埋點分以下三種:



          全埋點雖然是所有數據可按需可查,但是因為它的數據量極大,且需要2次定義和清洗,所以只能對通用性質的數據進行采集。而針對性的內容,由數據采集定義后,由前端上報后,可能做到定點,定期精細具體的統計。

          兩者大致能產出什么數據分析呢?主要以平臺/系統這個角度看:


          整體分析-通用全埋點

          用戶活躍、用戶留存、用戶跳出率、用戶停留時長、用戶流量分布...


          局部與特定分析-手動埋點

          關鍵事件點擊率、關鍵入口渠道流量總計與分布、關鍵鏈路漏斗、關鍵具體區域曝光與停留時長...


          為了獲取更精準的業務/行為數據,我們一般會采用手動埋點的方式,所以前期 第一階段會在場景中確定分析目標,然后梳理相應需要的指標,書寫明確的埋點需求是很重要的一個環節,書寫的足夠明確,才能和業務、前端、數據分析師進行準確的溝通,分析目標一致,然后上線后建立相應的數據看板。



          注意點:采集方式|統計口徑|數據精準度校驗


          那怎么定義數據分析時的埋點需求呢?可以用以下方式去描述:

          1. 什么用戶=用戶定義

          2. 什么時間=時間戳

          3. 什么環境=地理位置+網絡環境+硬件環境+軟件環境+哪個頁面(來源頁面)+什么位置

          4. 什么行為=事件ID+命名

          5. 什么條件=可以以某個行為或者業務交易為條件

          6. 結果如何=用戶操作的結果


          示例:

          一個后臺系統懸浮幫助功能使用的情況需求




          一個搜索使用的情況需求



          這2個是比較細致的數據采集的描述。規則了統計的對象,范疇,以及條件,結果觀測等等的需求,大家可以在業務和行為數據相關采集中,試著撰寫下這樣明確的需求。這樣的數據采集才具有精準的分析價值。

          人群標簽

          追蹤問題:用戶都是哪些人,誰使用了這些功能 ?


          人群標簽可以理解為數據型用戶畫像。為什么在這里提及,因為大量數據(特別是具體的采集數據)都會涉及到人群這個角度。人群也是定量數據中最具有獨立觀察價值的數據。


          人群標簽就是根據人群特點,進行描述分類,對人群打標簽。我們根據不同的獲取路徑,可以大致分兩類。


          一類是利用基本數據進行定義,比較簡單直接

          從不同的端,可以獲取用戶的基本來源,如訪問端的類型,或地理位置等,可以定義為“客戶端用戶”、“江浙滬用戶”等。


          通過唯一用戶ID所匹配的一系列用戶注冊時的基本信息內容,如性別、職業、行業、興趣等??梢远x為“女性用戶”、“定制類用戶”等。


          還有一類就是復合型自定義,一般是根據用戶的業務、行為數據或者類別屬性來定義的,它非常的靈活聚焦。

          使用某類條件公式來定義某一波用戶


          如我們將購買能力從高低來分層用戶:月購買小于5000的為中購買力用戶,大于5000的為高購買力用戶,周活躍大于2但無購買記錄為潛力用戶。


          另外一種構建用戶范疇的方式:通過“時間、地點、事件”等一系列復雜描述來勾勒圈選用戶

          如我們定義“第一次訪問站點時,在首頁有關注過每日推薦“的用戶。


          這里的復合定義很多時候都會用到多指標多維度。是一種深度結合業務場景來圈選人群,定義用戶的方式。



          人群標簽,不僅幫助我們細分數據,知道“到底是什么人做了什么事”,聚焦使用人群的各項指標健康情況。最終,還可以定位產品,定位人群,精細化運營產品:現在的用戶大致都集中在哪些人群中?哪些功能是頭部用戶需要的?哪些功能最受基礎版用戶的歡迎等等。在探索商業需求的時候,更容易找到抓鉤,去深挖商業價值。


          常用畫像的場景

          1.定性用戶畫像:通過調研,熟悉角色日常生活或者工作場景環境,定義基本用戶畫像 
          如:用戶訪談、用戶旅程圖


          2.定量用戶畫像:用定量的數據做某些值的規則,來圈定用戶人群

          如: 用戶生命周期、問卷分發、運營活動


          某產品生命周期使用示例:


          系統性能


          追蹤問題:產品使用起來流暢嗎 ? 


          性能數據一般指由產品進行頁面渲染及前后端交互時,監測到的時長數據。觀測系統性能,是因為系統數據量很大時,在產品渲染交互環節中,容易產生卡頓,造成用戶體驗的下降,導致流失率。而系統性能,一般是由性能監控等產品產出質量報告。在一些瀏覽器中,也有嵌入的插件統計報告。


          這里大致介紹下業界google最新的關于7大性能指標的定義


          這其中,最重要的3大核心指標是:

          LCP:頁面的速度指標
          FID:頁面的交互體驗指標
          CLS:頁面的穩定指標


          可以通過官方出品,安裝 web-vitals-extension 插件來獲取三大核心指標,也可以通過通過安裝 Lighthouse 插件來獲取如下指標,現在已經內置在瀏覽器中




          定性獲取


          定性數據,是由用戶那里獲取信息,直接判斷問題的性質和方向,快速展開挖掘和收集。 
          它的獲取方式主要是 面對面研究:


          即選擇典型用戶角色,針對問題或者內容進行集中測試或者訪談:用戶訪談、焦點問題調研、可用性測試等。

          「ps:另外一種 自動化研究:圈人群進行在線問卷調研投放,聚合大量樣本進行交叉或者聚類等等分析,是一種樣本量的統計方式。具備一定程度的樣本數量,可歸為定量統計分析?!?nbsp;


          比較常用的是:系統可用性量表(SUS)、有效性、滿意度和易用性的問卷(USE


          不管哪種方式,我們都是圍繞“可用性”這個角度去進行評估和研究的。業內可用性這個詞稱為:“Usability”「ISO9241/11」中有明確的相關定義:一個產品可以被特定的用戶在特定的境況中,有效、高效并且滿意得達成特定目標的程度。可用性關注的是用戶與對象在互動過程中的有效性(effectiveness)、效率(efficiency)和滿意度(satisfaction)。


          用戶反饋中我們獲取到什么樣的信息,我們第一:明確用戶對此內容的態度,觀察用戶行徑中的順暢度,感受用戶認知反饋。第二:詢問其嚴重程度和影響程度,正面負面情緒。這兩層是由表及里的,互相關聯。但側重有所不一樣。


          用戶態度


          追蹤問題:用戶使用后,滿意度如何? 

          通常用到以下幾種度量



          而這些內容中一般包含數據是

          1.觀察與記錄實驗性數據(描述性狀態情況) 
          2.主觀數據和偏好數據(出自于自身的想法) 
          3.情感層面數據(使用系統后最終的感受或者過程中的心情) 
          4.結果性數據(比對/選擇內容,得出結論) 


          而從場景分我們如何使用這幾種度量呢?


          引用自:Tom Tullis Bill Albert {Measuring the user Experience} 用戶體驗度量 


          不難發現,我們最常用到的是「自我報告式的度量」

          它比較寬泛的反應了產品綜合情況。這里舉一個自我報告度量涵蓋的范疇



           

          用戶情緒


          追蹤問題:用戶使用后,在情感上反應如何?


          初步知曉用戶反饋情況后,可以深入用戶情緒感受,進行點狀問題的挖掘。進而對問題進行定性分析追蹤和程度評級。用戶在一定嚴重情緒影響下,是對產品會產生排斥的,所以有時候對情緒的收集,能讓我們對內容具備敏感度。且在設計過程中,充分建立共情和同理心。


          情感描述模型是指對情感狀態進行定義,并描述其表達性特征的方法,主要可分為離散描述模型和連續描述模型。 

          連續型描述模型往往認為人類的情感狀態是分布在若干個維度組成的某一個空間中,不同情感狀態之間不是獨立的,而是連續的,可以轉化的。


          這里我們介紹一個連續描述模型: 喚醒度(Va-lence-Arousal)模型
          「Va-lence-Arousal」:用兩大象限歸納了人們的情緒:正面與負面情緒的變化。激動和平緩情緒的變化。構建了一個立體的情感空間。 


          當度量情緒變化階梯時,可以試著使用連續情緒。比如:挫折——》生氣、沮喪——》厭煩等。而有些程度詞是和時間長度有直接關系的,比如說疲憊。我們需要關注場景特點,用戶可能會長時間沉浸式體驗時,它是否能接受打擾,是否會因為一些內容受挫。這些都會導致他最終直觀感受的好與壞。


          舉例子來陳述:

          1.產品設計過程中,串聯用戶使用流程時,流程的長短和任務路徑會產生直接用戶感受-》是否足夠輕松 
          2.運營產品過程中,在哪些環節中穿插特定內容可以打造用戶峰值體驗?!愤@個推薦不錯,好貼心,驚喜 
          當這些生動的情感詞匯,被考慮進產品設計中時,很容易讓我們得到一個具有溫度感,具有更良好接受度的產品。 
          在度量實施方式上,我們可以在用戶旅程圖中,在問卷或可用性測試部分,考量使用卡片分類法,或表情評分板對用戶的情感進行收集。(基于情緒感知更為直接有共情性)。 


          情緒評分卡:


          在各種用戶態度反饋中,我們也可以直接去獲取針對性的情緒化度量表進行5分表計量評分。


          具體方式:

          第一步:卡片分類法,預設10-20組情緒關鍵詞,讓用戶選2-3個關鍵詞,確定影響面。 
          第二步:確定程度:1-5評分機制確定程度。 


          以下為目標設定的取詞示例:


          嚴重評級


          追蹤問題:什么問題是至關緊要的,需要馬上解決的? 
          定性內容的收集完成后,一個比較重要的事情就是針對問題去做2次整理和評級。 
          嚴重性評估有助于集中精力解決關鍵的問題,清晰說明每個一個嚴重等級的意義。對每個等級都盡可能用實例說明。 


          常用評估:


          高中低評估

          -會讓參加者心煩或沮喪,但不會導致任務失敗的問題。

          -這類問題會顯著提高任務的難度,但不會直接導致任務的失敗。

          -所有直接導致任務失敗的問題。遇到這類問題后基本沒有可能再完成任務。


          綜合因素評估



          多維度的評估




          前兩個較常用,后兩個看產品及技術配合


          1. 對用戶體驗的影響

          2. 預期的發生頻率

          3. 對商業目標的影響

          4. 技術/實現成本評分(0=低,1=中,2=高)



          數據層次結構總結


          以上是我們對分層數據獲取的一些整理,希望大家對于數據涉及到的概念有一個粗略的認知。當然如何運用數據做好度量這件事情,本身還需要一些串聯的方法,比如使用度量框架(Heart模型),運用合理的分析流程(GSM),搭建追蹤式看板,基于問題的度量報告或者自我評估報告等。都是靈活運用到以上數據立體的分析產品質量的過程。 


          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          截屏2021-05-13 上午11.41.03.png



          文章來源:站酷   作者:酷家樂UED

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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


          量化設計價值(二)體驗度量深度實踐

          ui設計分享達人

          前言


          體驗目標的達成,需要合理且客觀的度量方法,體驗度量的實踐,需要度量框架的有力支撐。提高競爭優勢,提升客戶態度,保障產品可以即時的響應客戶的需求。本篇文章的實踐方法全部來源于酷家樂B端產品業務中的實踐案例,重點在于度量框架的深度實踐,如果我們的經驗能夠幫助到您,歡迎交流討論。 


          一、體驗度量怎么做?


          “體驗”是用戶純主觀的感受,從這個情況來看是很難被度量的?!绑w驗”同時也是一個比較抽象的概念,如果把一個抽象的概念拆解成一個可執行的策略,拆解的過程如何保證策略的有效性,是我們一直在思考的。面對酷家樂工具型、SaaS型、平臺型并存的產品體系,且存在錯綜復雜的用戶需求和業務訴求。在這樣的前提下對方法的確立需要更加的冷靜。 

          如何確定方法?我們需要的是一個完整的度量框架,以及能夠聚焦用戶體驗層為驅動,分解并有力的去解決問題。經過大量的實踐和驗證得到,抓住一個擊破點作為產品體驗提升的目標,并一種合理的方式進行推導和驗證,這是一種最直接度量體驗的標準流程性方式,這里的目標必須是:


          • 體現用戶主觀感受或者具有行為驅動的目標。

          • 基于業務目標定義+用戶訴求了解后,得到的以用戶為中心驅動的用戶行為。



          二、度量模型怎么選?


          面對設計圈內已經存在的和部分大廠創造的度量模型,評估優劣后最終我們選取了HEART模型。因為HEART是個比較全面和具備更多擴展性的分析框架,同時足夠的權威和標準,而且市面上的模型基本都被HEART的五維囊括。除了這些考慮因素外,再給出以下幾個明顯的優勢點:


          • 1、HEART同時涵蓋了定性和定量的不同數據維度。

          • 2、HEART框架同時包含了:宏觀和微觀的層面

          • 3、HEART模型并不單純的再定義體驗質量,同時也鏈接了商業價值。把用戶體驗的原則和收益驅動的指標關聯在了一起。


          undefined


          三、HEART模型簡介


          1.什么是HEART模型?


          多個大廠利用HEART模型拆解框架得到了深度結合業務的度量框架。是個比較全面和具備更多擴展性的分析框架。HEART是GOOGLE公司在實踐中提出,基于產出更好產品為目的,用來衡量產品整體體驗的度量評估模型。 

          它包含五個維度Happiness(愉悅度)、Engagement(參與度)、Adoption(接受度)、Retention(留存度)、Task success(任務完成度)組成,是Google用戶體驗研究團隊在實踐中為了準確的度量用戶體驗而總結提煉出的一個框架。 


          2.HEART模型的特性與應用場景


          目前市面上還存在PTECH、TEENS等體驗度量模型,而HEART模型的特性在于它”以用戶為中心“進行度量,同時度量維度全面,既包含宏觀的愉悅度,也有微觀的任務完成率,同時關注產品上的留存率,與業務目標保持緊密。在評估方式上,既有定性評估的愉悅度,也有定量評估的參與度、留存率等,可對用戶使用產品情況做一個完整的評估。 

          undefined



          四、HEART模型的詳細拆解指南


          undefined


          第一步:確定體驗目標

          體驗目標是體驗度量的開始,準確的目標決定了度量的質量。要提煉出準確而有效的體驗目標并不容易,通常會引入產品功能等業務因素,使體驗目標不夠單純,拆解出來的指標所反映的數據也很難歸因到體驗。故復雜項目可提煉多個體驗目標相互補齊,但每個都必須準確而具體。 

          那么如何確定體驗目標呢?

          體驗無法脫離于具體的產品服務存在,用戶的整體體驗感知積累于每一個接觸觸點,大多觸點常規而平庸影響不大,必須識別出達成業務的關鍵觸點進行深入分析,已提煉出體驗目標。 

          整體的思路是:首先分析業務目標,并就業務目標所落地的產品服務的鏈路進行拆解,分析鏈路后,找到其中對體驗有決定性影響的因素,提取其因素后,即形成體驗目標。


          undefined
          1.確定業務目標
          業務目標是整個產品服務的最終目的,體驗作為產品服務的重要評估維度,需要與之對齊。業務目標與所選取項目范圍有關,從整個產品到特定功能模塊,或者某個行為鏈路都可作為參與項目。根據選取的項目來確定業務目標,如“保持產品新舊改版的平穩過渡,降低改版造成的斷約率”、“提升用戶自主解決問題的能力,降低運營服務的壓力”等。注意業務目標與產品目標的差異,后者是對前者的產品化闡釋,可以具體到某項產品服務目標上。產品目標和體驗目標可以共同服務于業務目標,實現價值的達成。 

          ?示例:
          業務目標:在設計工具中商品素材的查找效率,輔助家裝設計師快速構建方案,提升其簽單率 
          產品目標:優化現有商品素材的查找邏輯,降低家裝設計師查找商品素材的成本 

          2.拆解產品鏈路
          產品目標需借助于功能鏈路來達成,將該目標達成過程的邏輯呈現出來,并分析其跳轉路徑、操作觸點,就是鏈路拆解過程。整個鏈路過程是用戶價值的直接承載,任何一個觸點的失效都將影響到整條鏈路順暢和效率。就鏈路整體而言,觸點越多、鏈路越長,操作成本越大;就某個具體觸點而言,其效率、易用性、易理解度也將影響整體的價值傳達。 

          為完整的拆解出整個產品鏈路,需要從“用戶側”、“系統側”進行分析,用戶側代表用戶視角下的功能使用流程,是主要考慮的維度,體現了以用戶為中心的設計思路;系統側代表系統在用戶交互過程中的需要執行的行為,是系統邏輯的直接體現。兩者的交互作用,將完整表達“信息”的流轉過程,最終作用到產出物上。 

          ?示例:商品素材搜索鏈路




          3.分析觸點并提取決定性因素

          選取對整個鏈路有重要影響的觸點進行設計維度上的分析,以找出決定觸點目標達成的決定性因素,這個決定性因素就是我們體驗上需要著重優化的點。在尋找“決定性因素”的過程中,避免將系統性能、業務功能、業務信息因素篩選出來,需要聚焦在設計維度上,諸如交互行為、界面布局、信息呈現、系統反饋等。 

          ?示例: 
          “確認輸入行為”、“搜索結果分類”、“不同分類的區塊劃分”、“結果數量”等。 

          對已拆分出來的各種設計因素來說,哪些算是決定性因素呢?一個很簡單的判斷方式是:反向判斷,即假設缺失這個設計因素,或不完整是否會對該觸點有“阻塞性”影響。 

          如有嚴重阻塞影響,則證明該設計因素很大程度上決定了觸點的目的達成,屬于決定性因素;若設計因素有中等的、輕微的影響,則可能不是本次優化的重點,不作為決定性因素。如“搜索結果的分類”影響用戶對搜索結果的信息獲取,是決定性因素?!按_認輸入行為”是常規設計行為,不算決定性因素。 
          當然,具體問題具體分析,在不同的功能場景下,同一種行為的影響程度可能不同。 

          需要注意的是,決定性因素的選取必須在具體的觸點中才有意義,脫離后無法判斷是否有阻塞性影響。另外,某些設計因素是否是決定性可能在跨觸點中體現出來,需要聯系整個鏈路進行交叉分析確定。




          4.體驗目標的提取與表述

          找到決定性因素及其為什么決定性的原因后,需要為其設定一個設計目標,來指示應向什么方面優化這個決定性因素。決定性因素只是現有功能的一種解法,可能存在其他更優解法或優化方向,我們需要基于決定性因素概括出“設計目標”,以新的設計目標來指引我們的優化設計。 

          ?示例: 

          決定性因素“搜索結果的分類”,引申出的設計目標為“更清晰的信息層級”、“更完整的信息”。



          通過鏈路觸點的分析,決定性因素的提取,設計目標的匹配,我們已對設計優化方向有了準確的了解。這個時候需要從設計師視角做一個完善而精準的”體驗目標“的表述。


          一個體驗目標需要與具體設計場景關聯后,才能產生具體而明確的價值,即設計目標落地到場景中后產生價值,表述思路是:在某個具體的鏈路觸點中,我們期望怎么達成這件事??赏ㄟ^格式進行填寫: 
          使/什么用戶/用什么  做什么事/設計目標/完成什么事 

          ?示例: 
          家裝設計師  使用搜索功能  搜索素材時  對結果展示清晰的信息層級  來快速找到需要的商品 


          第二步:確定度量維度

          引入HEART模型的重要原因,正在于它的度量維度。由于它的度量維度多方位的表述了產品的使用情況,度量緯度不是一種標準,是一種分析框架和角度,決定了體驗目標應該被如何度量,進而影響信號的確定和指標的拆解,因此度量維度的選取至關重要。 

          HEART提供了豐富的五個維度,根據其定義,提供了你幾個可以衡量的視角。在實踐過程中,因每個體驗目標所對應的觸點的場景、交互、產品目的不同,我們只需要找到符合定義的維度即可。反過來看,一個與體驗目標不相關、不匹配的度量維度不能很好地度量體驗。 

          需要注意的是,HEART模型因其維度的廣泛定義,不僅僅可用于體驗目標的度量,也可以對產品目標、業務結果進行度量,對體驗目標的度量因要從產品因素中剝離出體驗問題,相對來說較為復雜,是本次敘述的重點。



          第三步:確定信號

          首先信號可以被定義為是一種信息的載體,其承載的信息往往反映的是用戶對體驗目標的成功或是失敗的結果,對信號的準確獲取將直接影響到對下游指標的確立。 

          信號的確定需以上游度量維度為標準范圍并引用體驗目標為重要判斷依據,避免過度發散,保證精準規范的同時,去結合當前有無體驗變量基準值作為條件,并使用成功或者失敗的結果來評估體驗目標的達成情況,最終提煉出信號。 


          以度量維度為標準并引用體驗目標確定信號

          通過逐一對度量維度進行體驗變量提取,有基礎值則進行對比的方式,無基礎值則使用趨勢的表述方式,結合業務目標的情況下,去概念性假設體驗目標的正向或反向結果,最終通過標準的格式提煉出信號,信號的提煉的可以用固定的格式進行書寫: 格式:用戶   用什么   做什么   體驗變量   趨勢&數值


          尋找體驗變量
          基于HEART模型的整個分析框架,拆解出最高頻和貼合體驗目標的常見體驗變量庫。在此框架的指導下,可以快速尋找需要的體驗變量。 

          ?示例: 
          (體驗變量:易操作度;有基準值) 家裝設計師 使用搜索功能 搜索素材時 易操作度 達到4.2
          (體驗變量:易操作度;無基準值) 家裝設計師 使用搜索功能 搜索素材時 易操作度 上升

          確定信號的注意事項
          ①信號的成功或失敗要能在行為或態度上準確的體現出來,失敗信號可能比成功更容易定義; 
          ②信號要易于被追蹤; 
          ③信號的敏感度要高,易于被檢測; 
          ④信號應與目標有高的相關度,同時避免被其他因素影響; 
          ⑤一個目標可能對應多個信號; 

          第四步:確定指標

          指標是衡量目標的參數,用于準確的描述目標。但通常很難直接從目標中確定出指標,需要借助于對信號的分析。信號是信息的載體,其中包含著變量信息,提取其中變量信息,即可獲得一個初始指標。 
          初始指標反映了客觀的原生數據,需要對原生數據做處理后,可得到一個能精準描述體驗目標的指標。 



          對數據進行處理

          體驗變量所直接產生的屬于原生數據,而一組數據通過某種分析加工后,可以成為一個更有價值的信息,如均值、中位值。選擇對數據進行哪種方式處理,受目標的影響較大,每一種數據處理方式,都有指向特征,通過與目標的匹配,可以選取出合適的數據處理方式。




          確定指標的注意事項

          ①指標應與目標和信號密切相關,指標越明確越清晰越好; 
          ②標應方便被持續追蹤,對信號的描述更敏感,方便做A/B測試。 

          ?示例: 


          案例A

          度量維度:愉悅度

          信號:家裝設計師    使用搜索功能    搜索素材時    易操作性達到4.0

          體驗變量:易操作度

          數據:易操作度評分

          指標:易操作度評分的均值



          五、總結


          看似復雜的體驗度量監控指標的拆解,可以概括為“體驗的問題定位”——“體驗的目標度量”——“體驗的客觀追蹤”。 

          1.“問題定位”是監控目標的根據,必須來源于具體的業務鏈路才有被分析和量化的可能,它是體驗問題在業務鏈路中被抽取出來的關鍵,并轉化為可度量的指標來進行監控,最終為后續數據洞察和可視化提供準確的數據來源,否則流于主觀,監控體系建立在不可靠的體驗目標之上,當然也就不可能有助于解決體驗問題。 

          2.而“目標度量”所運用的HEART模型作為度量維度,相當于一種體驗的定義標準,闡釋了什么是它所定義的用戶體驗。HEART模型以其全面的度量維度,能很好地實踐這一點。必須注意的是,對HEART模型下的五個度量維度的細化闡釋可能受不同產品特性、產品階段影響而不同,最終轉化出不同的客觀指標。 

          3.“客觀追蹤”是對在度量標準下的客觀變化的捕捉,捕捉其變量特征,建立常態指標,成為可靠的可監控的指標。 

          4.另外,除了準確的定位、度量、轉化的邏輯推導外,參考業務目標進行范圍收斂,也是非常重要的工作,它影響著每一個推導環節,以避免偏離產品方向,有效的過濾弱關聯或無關聯的因素。

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          截屏2021-05-13 上午11.41.03.png



          文章來源:站酷   作者:酷家樂UED

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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


          如何講述你的設計

          ui設計分享達人

          在工作中常常被問到如何表達講述自己的設計,為了讓自己的設計有理可依,對接上下游匯報工作的時候,總結以下一些方法和觀點,幫助不知從何講述自己設計的人一些語言技巧。  

          以下僅是個人觀點,用作探討交流,文中所有舉例均為本人工作設計輸出。

          設計師能做出好的設計,卻缺乏系統化的語言包裝,“如何講設計”不該讓它成為難題,做一個有產品思維的設計師,讓你的設計以理服人,我們要不止停留在視覺表層,更要從多緯度看待產品設計,本文將從以下三點簡述:01.產品設計的五個層面,02.講述設計的流程,03.關于本次總結

          做好產品設計的第一步,是了解產品, 要對于產品的需求如何確定、產品定位如何決定有一個基本的認識,在產品常識里面最重要也最常用的就是產品設計的五個層面,也簡稱用戶體驗五要素——

          作為UI設計師,所處的視覺設計是表現層,是確定產品的最終形態,因此也處于產品設計的頂層(能被看到),是一個具象畫的呈現;其次,往里推框架層,是確定產品外觀,將界面信息和導航設計有序歸類,讓用戶使用或者理解;結構層是為用戶設計一個結構化的體驗,將零散的元素轉化為有序立體的空間;范圍層確定產品的功能和需求;最后戰略層是確定產品目標和用戶需求;底層邏輯結構決定上層意識形態表現,因此在設計前我們要知道產品是屬于洞察階段,設計中是屬于產品設計解決方案階段,整體的產品設計是一個概念通過無數個層面的努力,經過時間,轉化為具象表現的過程,所以我們在完成一項設計時,應該講述一個完整的設計思路 ,不要讓自己的設計思路僅停留在表面。

          整個產品的設計產出是一個抽象到具象化的過程,設計的前期屬于產品洞察階段,這個時候一般由團隊的老板領導結合當下市場需要,有用戶的需求就有商機,想出產品大致的方向(戰略層)然后通過產品經理整合梳理高層的意見確定產品大致的功能和內容輸出原型(范圍層),交給交互設計師優化產品細節邏輯和信息具體框架,經過研發評估能夠技術實現產出交互稿(結構、框架層),這里已經過渡到設計解決問題執行階段,最后是給到界面設計師美化視覺產出高保真(表現層)。

          也就是到我們自己設計輸出之前要經歷這么多,如果能在講述自己設計的時候,提前去了解這些,那么設計內容就不愁沒法兒講,光是闡述自己的設計思路就可以講出一個故事,這也是為什么現在很多品牌賣貨都開始營銷產品背后的故事由來。我們設計能做好,也要會用語言推銷自己的設計成果。

          設計是對于某件事精心準備的過程。好的設計作品,應該擁有完整的設計流程,因此我們在講述自己設計作品的時候,有一套完整系統化的方式是非常有效的。完整的設計流程包含以下4個步驟:

          第一是我們需要去了解設計的需求背景,知道大概的方向—— 

          1. 來源(簡單理解就是誰提出的問題)需求有可能是你的老板、你的產品經理、或者交互設計、或者視覺上的問題··· 

          2. 背景(籠統一點,就是這個需求是新需求還是原來有然后進行改版優化)需求的基層性質是什么,原本調性是什么,我們要做什么樣的產品··· 

          3. 目標(目標一般都是需要解決什么問題)搞清楚為什么做這個需求,能解決什么痛點,不做無用功。

          誰提出的問題,是新的需求還是舊的問題,或者我們要解決什么?圍繞這幾個方向將你的設計概述出來,會讓非專業的人也能聽懂你做了什么,舉個簡單的例子,我們公司后臺一個很小的產品bug需求,往往這種需求就是產品經理的一個截圖和他標注的兩句話——

          然后你完成了這個需求單,在傳達給非產品經理以外的人的時候,你有可能是以下轉述方式——

          毫無疑問,你就是將需求者的意思一字不落的轉達了,但是對于其他的聽者來說,你的轉述平平無奇、毫無意義,甚至都沒有印象你做了什么,所以你應該講清楚這個需求的背景—— 

          設計需求來源是誰,原本屬于產品哪個模塊(來源),他原來功能是怎么樣的,界面上展示的結構哪里有問題(背景),視覺用了什么樣的方式改成什么樣,解決了什么痛點(目標)

          講清楚誰給的需求,需要解決什么問題,是在原來的基礎上不變動邏輯的情況下增加了什么達到了什么目的,才讓你的敘述更完整,聽起來更有邏輯。如果是一項新的需求,沒有背景,那還得從設計分析說起,設計分析就是讓你更專業的去做事,設計分析分為——用戶分析,設計目標,和設計手段三個要點:

          首先用戶分析就是,分析你做的東西給誰看,而用戶又分為群體用戶和獨立用戶,在c端常見的就是獨立用戶,他們通常不定性,且有很多特征;在b端,目標用戶一般是群體,他們大多數是有場景特性和行業特性,針對獨立用戶和群體用戶,我們得出的用戶特征、基本信息、需求結論也是不一致的,所以我們應該結合產品的調性分析一下我們做出來的設計究竟給誰看給誰用。常見的用戶分析方法有:用戶畫像、用戶訪談、問卷調查、焦點小組、眼動測試、用戶反饋以及大數據分析,這些方法中最簡單的是用戶畫像,就是舉實際的例子列出真實用戶的特征信息及使用場景。B端用戶分析方法常用大數據分析和用戶反饋,這兩種方式通過對接需求的上下游就可以得知。

          通過用戶分析得出需求結論,滿足需求就能達成設計目標——

          設計目標結合卡諾模型來分析,卡諾模型—反應產品性能和解決用戶需求的滿意度的一種非線性關系,具體想了解的可以自行百度,站在巨人的肩膀上我們看得更遠。 卡諾模型具備4種屬性 :1.必備屬性:滿足這個需求,用戶滿意度不會上升,但不滿足這個需求,用戶不滿意會大幅度降低 ;2.期望屬性:提供個性化需求,用戶滿意度會上升,不提供此需求,用戶滿意度會降低; 3.魅力屬性:用戶意想不到的效果,提供此屬性,用戶滿意度大幅提升,不提供也不會降低 ;4.無差異:無論提不提供,用戶滿意度都不會改變,根本不在意;因此在做需求的時候我們應該盡力滿足基本需求和期望需求,而可有可無的需求盡量不去做,降低效率。幸福需求是不容易達到的,如果能滿足是非常棒的~這里就像是滿足了設計心理學的三個層次——本能、行為、反思。

          接下來是大家都熟知的設計手段,適當的講一些述專業的設計技法,用不同的手段去實現的主畫面,最后達到完成設計目標這樣的結果,會讓你顯得更專業。設計的手段有很多種,這里主要講述常用的三種,構圖排版(采用什么構圖方式,為什么這樣構圖是因為什么設計原則)、色彩運用(為什么使用這個顏色,因為這個顏色給人的心里感知是什么樣的)、設計風格(采用什么風格最貼近產品調性,為什么用這個風格),但是講設計時一定要記住產品的調性,不能偏離產品本身,不要盲目套用絢麗的技法,否則是不合適的。

          很多時候面對非專業需求方收稿時,可能看到如下話語———— 

          (心里是不是xxxx····“萬馬奔騰”,用個文明點的詞)

          非專業人士無法理解這二者的區別,他們認為他們的設計手段能達成設計目標,而作為專業設計師的我們就應該引導對方說出設計目標,再用我們專業的手段去滿足對方的目標,去實現減少改稿次數,而不是讓非專業人士去指導專業人士修改設計手段。分清這兩者的區別,我們就可以在設計引導中更加主動。用設計分析的方法來講述設計,舉個例子——

          會議管理——會議預約移動端優化,因為這是我們原有產品EKP里面的模塊,PC端和移動端都有,因此用戶可能是群體也可能是個人。所以針對獨立用戶和群體用戶都做一個用戶畫像,得出他們的一些需求結論,然后目前幸福需求是沒有的,純屬個人建議,日后如果有此功能,想必用戶的滿意程度也會大大提升。

          概括一下已完成的整體主要頁面,分析設計目標: 

          頭部屬于流量量較高的區域,采用卡片式設計,將會議內容置于此處,作為頁面信息關鍵層,采用左對齊方式排版,突出會議標題和時間提醒用戶。

          通過不同的顏色標簽,區分參會人員狀態—— 

          待進行未有操作反饋,選用橙色,屬于可以持續進行并有明顯提醒作用 

          已做反饋屬于成功操作,選用已有用戶認知心理的綠色 

          已知信息拒絕參與,是不太重要的,屬于不再進行的階段,選用灰色

            

          接下來是設計作品的產出過程,一般情況下不可見的過程,為什么要去講,  因為一個東西從無到有是很不容易的一件事,如果能講述過程,就可以引燃情緒共鳴,讓別人記住,讓自己的設計作品也能有始有終—— 

          設計過程一般分為四個階段:初期階段、中期階段、最終定稿;具體的關鍵詞和描述可以通過以下方式提煉出來,這里就不做詳細說明了。

           

          拿運營宣傳來舉個例子,我們公司中秋節月餅禮盒包裝主視覺設計——整個過程應該是有一個系統化的說明的,省略為寫字的地方是我們可以插入的具體圖片和過程,步驟差不多就是上述這些,可以有最初階段的頭腦風暴-提取關鍵詞-清晰定位到中期階段的團隊合作—風格擬定-精選方案-細節刻畫以及和物料方溝通對接的打樣確定工藝等等過程…再到最后定稿的體驗還原-問題優化…主畫面的誕生是不容易的,強化這種過程參與,讓不被看見的事也能展現。如果實在不好記錄,你可以從一開始就截圖你繪制的過程——

          上圖是用PS截圖,再用時間軸將每一幀動態循壞播放,導出GIF然后截一張不變的底圖合成就可以了。

          最后是數據驗證階段,這個是設計落地的直觀證實,包含主觀認可和客觀數據,具體內容就是通過用戶或者專業的人士反饋給你設計落地的好壞,來判定你做的是否優秀成功。通常這一塊的數據決定你驗證你前面所有的過程,只要按照該流程認真做了,最后效果通常不會太差,如果出現很大的偏差也往往是意料之外的,因該尋求團隊一起解決,不是某一個人的問題。

          根據以上最后我們總結,好的設計就是滿足以下4個方面:好看,好用,好記,能實現。設計師要考慮的維度不僅僅在視覺層面,什么是有產品思維的設計師,就是在執行時候要考慮上下游不同職能的工作內容,如果你的設計不能實現,再好看也是白費功夫的~從產品交互視覺多層面談設計,會讓你的設計包裝顯得不那么單調,系統化的方法總結到此,不足之處多多包含~謝謝你的閱讀!

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          截屏2021-05-13 上午11.41.03.png



          文章來源:站酷   作者:YiVi_eleven

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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


          做好國際化體驗設計,你應該知道的事

          ui設計分享達人





          章節一:為什么要堅持國際化設計?



          堅持走國際化設計的背景

          出海早已成為中國互聯網公司的不二選擇。相比在國內廝殺,國外有更多的人口/政策/資源紅利。并且因為互聯網的可復制模式,使得成熟的經驗可以快速運用到國外,從而搶占先機。而做好國際化的本質就是【做好每個地區的本地化設計】,想用一套國際化的標準去用在全世界的各個地區取得成功是非常困難的

          那有什么好的方法和理論能夠讓設計提前著落,為業務帶來一線用戶信息和設計價值呢?接下來我將給大家介紹一些實際的方法和案例幫助大家做國際化的設計,讓自己的設計價值有理可依


          *以下內容與公司無關,更多的是基于筆者國際化工作經驗的復盤,如有錯誤,歡迎指正(Salute~)



          寫在前面

          首先我們要知道,一套通用的設計標準很難在多個國家吃的開,從而拿到用戶信任

          我們先來看個案例,這個是日本UBER司機端和日本滴滴司機端對比

          最明顯的區別在于,滴滴國際化在日本業務和Global業務這塊,司機端采用的是移動端(global)+平板端(日本),而UBER則是一套方案解決全球問題,可能有些人會問,一套設計不是成本更低,效率更高么,為什么非要制作兩套。這就要從決策成本的角度去考慮問題,而日本市場相對于滴滴其他地區市場有著完全不同的因素,涉及到了資本,使用場景,市場地位,用戶畫像等多方因素決定,這時的【成本與效率】已經無法排在做與不做的第一位了,接下來我們通過兩張照片來看下日本司機的接駕場景

          通過照片我們是否發現日本司機的畫像其實和全世界其他的出租車司機都不太一樣?是不是明顯發現他們的年紀相對的更大一些?會穿制服佩戴白手套? 那年紀更大是不是意味著司機的視力會相對于中年人有所下降,白手套是否會影響他操作屏幕交互,那針對這么不同用戶群體是否需要單獨設計呢?最終的目標是占領市場的話是否要根據本地情況去服務好當地司機呢?


          那我再來舉兩個例子來看看,我們來看看針對日本本地化做的特殊設計細節在哪些方面?



          案例一:針對司機群體老齡化設計———大屏幕設計:

          日本屬于老齡化國家,司機平均年齡更是在50歲以上,高齡人群的視力相比于青年處于退化階段,因此對于高齡人群來說在駕駛的過程中去讀和操作小屏幕來說是一件非常痛苦的事情,UBER采用的是一套國際化的設計語言并沒有針對日本的市場進行單獨的設計,DiDi在日本則是針對司機群體采用了單獨平板端設計,更大的屏幕降低了司機誤操作可能性的同時,也能將字體放大,盡可能讓司機方便識別



          案例二:針對日本司機人文的設計———語音接單

          “日本服務業發達,體現在服務的細節。出租車司機出于對客戶的尊重,都會戴上白手套。但是在帶著手套的時候,司機很難去點擊屏幕進行操作,而且在行車過程中,觸碰屏幕本來就是不合規的行為。無論是從法律層面還是價值觀層面我們都不鼓勵司機做出這種行為,于是開發了語音接單的功能??紤]到司機群體的年紀特征,我們選用了在日本相對普及又好識別的“了解しました(りょかいしました)”進行快速語音接單,在新版本上線后,司機可以通過屏中屏的方式去學習語音接單功能,只有他完全掌握這個功能才會為他完全展現,如果司機因為自身原因無法很好地說出那句話,我們依舊會為他保留按鈕輸入的方式”------國際化業務中的本地化設計


          (圖片來自于SUXA文章《國際化業務中的本地化設計》-呂誠)




          國際化設計的思維框架

          通過兩個日本的案例我們能明確一個點【國際化實質就是做好每個地區的本地化設計】

          怎么樣讓國際化的設計有法可依,我們先來看懂一個關系框架。做好一個產品實質是服務好每一個場景,那一個場景由哪幾個方面組成,簡單來說是由【業務】+【用戶】組成,這并不難理解,我們作為產品設計師,首先是背靠業務,解決公司的商業訴求,給業務帶來利益的同時給用戶帶來更多的使用價值然后獲得用戶的認可。在這個過程中,我們會將商業訴求和用戶價值進行一個有效的結合,從而滿足雙方,但是還不夠,因為一個場景還依賴客觀的條件,比如時間和空間維度,最終也會影響整體的質量,我們將所有的因素通過包含關系展示出來

          接下來我們往細的方向進行拆解,【業務】根據公司行業,階段的不同以及基礎能力的不同,呈現的點也不盡相同。最核心的點在于當前所屬階段,是1.0階段力求生存下來,還是說2.0和競品之間產生差異化,還是活3.0去打敗競品階段。在不同階段設計師要了解的事情也不同,對于1.0階段來說,更精準的展示出用戶畫像和了解當地的文化與習慣是重中之重。但是到了2.0則應該更加關注產品目標與競品的差異化競爭,通過差異化(殺手級)的功能形態獲取更多的搖擺用戶

          不同的賽道,業務不同,打法也不同。我今天主要想講的就是左右場景的另外一個因子【用戶】。那如何定義一個用戶呢?我們先來列舉些具象的特征:

          【外貌/文化風俗/地域特征/語言等】是一個用戶的畫像的基礎組成,但是光有畫像基礎并不精確,因為每個國家的【法律/政策]同樣會影響用戶的行為。而在當今的互聯網模式下,用戶體驗的提高必須得考慮各地區【硬件的水平以及當地的網絡狀況】,最后就是如何與【本地化的設計團隊進行友好的合作】讓體驗和設計策略能夠更加精準的傳達到真實用戶手里,獲得用戶認可,特別是在20年后,疫情的爆發導致設計師無法到前線進行真實有效的實地探測,那么加強合作以及對齊目標,為業務拿結果將是重中之重,接下來,我將對于每個影響【用戶】的因子進行舉例講解








          章節二:如何快速了解你服務的用戶



          做任何的設計都離不開用戶畫像,而做國際化設計一定也繞不開-霍夫斯泰德文化維度理論

          可能你知道,在給拉美客戶做單的時候他們會要求你的界面顏色亮麗,看起來更加奔放,而在給亞洲客戶做單的時候則會相反,整體看起來更加約束。但是你能清楚的知道背后的原因么?如果不清楚那你的這塊分辨更多是依賴于經驗和他人的總結。那有沒有一套理論能夠很好的去輔助你去分析你的客戶用戶畫像,去支撐你的設計。答案是有的,他就是【霍夫斯泰德文化維度理論】


          霍夫斯泰德文化維度理論(Hofstede's cultural dimensions theory)是荷蘭心理學家吉爾特·霍夫斯泰德提出的用來衡量不同國家文化差異的一個框架。他認為文化是在一個環境下人們共同擁有的心理程序,能將一群人與其他人區分開來。通過研究,他將不同文化間的差異歸納為5個基本的文化價值觀維度


          百科連接:霍夫斯泰德理論詳情 (<-點擊快速查看)

          完全不懂的可以看看上面的鏈接,我們這里跳過部分解釋….通過文化將維度理論我們將文化價值觀劃分成6個維度

          了解完霍夫斯泰德理論以后我們該如何去使用呢?我們先從拉美用戶和日本用戶的差異對比開始

          通過霍夫斯泰德官網查詢我們可得知差距最大的兩個分別是【男性化與女性化(Masculinity versus Femininity)】與【長期取向與短期取向(Long-term versus Short-term)】,差值比例達到了46和44.

          接下來我們來對【差值較大】以及【分值較高】的因素進行解釋和舉例,去理解背后的原因



          男性化與女性化(Masculinity versus Femininity)

          日本是個生性好斗競爭意識強烈的民族。在日本企業中工作狂是他們男性氣質的一種表現;而日本男主外女主內,62%的女性在第一個孩子之后選擇辭職,也是男性氣質的另一表現.

          在日本想要成為一個出租車司機,就要在5年之內不能有任何違規,某些地方還會有特殊的考試,這里面的合格率并不高。并且在通過考試之后再在通過一系列的評分后,才能被評為A級或者AA級別的出租車,雖然這僅僅只是一張小貼紙,但是他也代表著一個出租車司機的榮譽。在這一方面,也體現日本社會的男性氣質的確定性。

          相比較日本,巴西人更會以家庭為中心、以教育為重心、博愛、具有個人風格意識。家庭是關鍵。家庭是巴西人生活的中心,也是其社會的核心價值觀。對于一個家庭而言,家人共同用餐的時間是非常重要的,還有星期天的燒烤活動,能讓更多的遠房親戚和朋友聚會。所以在巴西你很難看到休息日去工作的同事,甚至無法聯系上他們:)



          長期取向與短期取向(Long-term versus Short-term)

          日本人將生命視為一個非常短暫的時刻,所以調查發現日本人普遍相信宿命論,他們鼓勵節儉和現代教育的努力,作為為未來做準備的一種方式。

          巴西相較于日本經濟落后,人民的收入水平普遍不高,很多司機收入僅僅能夠維持一家的支出,很難有結余,在巴西工資會按照周維度支付,以保證一家人的生活開支能夠承擔。

          針對巴西的情況我們做了適合當地政策和環境的本地化服務。錢包1.0的時候我們先是和當地的銀行合作推出了巴西99卡,允許司機隨時提現且提現速度遠遠大于了當地的其他銀行(48小時),那這種優勢在收入較低的司機群體當中就會發揮很大的優勢。在3.0的改版中,我們將錢包打造長了本地生活平臺,我們允許司機通過平臺去完成轉賬/水電費/電話費/還款等行為,原本需要走到線下便利店的服務被我們搬到了線上,更是大大的方便了使用99卡的群體。未來呢,我們將加大加多權益,達到使用場景獨占的目的。通過這些服務為我們給用戶帶來了使用價值,同時我們也給業務帶來了價值,更多的綁卡滲透率為我們后續的推廣和矩陣式的打法提供了導流的入口

          (99與當地銀行合作的線上本地生活功能-99Pay)



          不確定性的規避(Uncertainty Avoidance)

          日本地處自然災害頻發地帶,沒有豐富的自然資源,生存條件不太好,所以日本人有很強的危機意識,學會了為任何不確定的情況做好預防措施,對待事情也希望有明確性

          而巴西雖然處于平原,沒有自然災害,但是因為社會安全因素,整個社會對于社恐事件還是有較強烈的危機意識,所以司機會更加關注接送流程中是否會前往不安全地區,以及乘客的質量

          (日本司機的真實駕駛場景)


          費用收取的正確與否也是服務體驗優秀的表現,日本司機會用計步器進行計價,如果涉及到了其他的費用則會使用單獨的計算器進行精確計算,這么做的原因是為了避免計算錯誤給乘客帶來困擾和爭執,那從這個環節來看,司機為了規避【計算錯誤的可能】而預備了計算器,減少了差體驗的可能


          在巴西,滴滴如果對司機派單如果過遠會或者是危險地區會進行提示,允許司機取消派單。并且根據調研司機群體特別是夜班司機會有隨身攜帶防護性的武器用來自我保護,那么也能很好的說明整個社會對于社恐事件還是有較強烈的危機意識。那么做為設計師,是不是意味著可以把危險地區的派單做的更加醒目,讓司機能夠更快識別,更快決策,而不是為了平臺和用戶利益進行隱藏。是不是可以把安全鏈路透傳做的更強,讓司乘都能更加快捷第一時間選擇自助服務









          章節三:繞不開的硬邊界



          法律法規的約束

          每個國家的發展階段不同,對于隱私重視程度不同,因此針對不同地區的海外市場,作為業務的合作伙伴設計師們需要針對不同的市場配套不同的安全合規方案,這一點格外需要注意,不然會被罰的很慘,通常獲取地理位置/賬號信息保留是每個公司都非要需要的,因此在空投其他國家之前需要了解是否立法關于隱私相關的法律,如果有則需要通過配置化將其他國家上線的隱私條款和設置方式復制過來使用

          LGPD和GPDR風控合規

          簡單來說就是要做到信息安全,保護個體隱私。大家都知道在中國我們的信息被侵犯的體無完膚。其實在國外也是一樣,各種權限,各種信息默認保留和上傳。但是隨著各國的重視,個人隱私也逐漸走向明確的法律保護層面。在拉美有LGPD,在歐洲有GPDR


          GDPR 是(The European General Data Protection Regulation )的縮寫,即通用數據保護條例。是歐盟議會和歐盟理事會在?2016?年?4?月通過,在?2018?年?5?月開始強制實施的規定。

          GDPR 意義在于推動強制執行隱私條例,規定了企業在對用戶的數據收集、存儲、保護和使用時新的標準;另一方面,對于自身的數據,也給予了用戶更大處理權。也就是說在18年生效之后,如果再有歐洲任何公司App不對用戶的數據進行合規處理,擅自收集信息就將會受到嚴懲



          智能硬件的普及度以及新舊

          硬件的普及率以及新舊差異也同樣影響著本地化設計,通過調研和外界公布的數據我們得知,在拉美高端手機的占比遠遠低于發達國家。因此在給發達地區做設計的時候可以考慮更多體驗上的拓展,但是在給發展中國家做設計的時候則需要進行小屏幕最小尺寸的適配,這樣做是為了最好的進行向下兼容,從而保證所有用戶都能夠使用。同樣,如果你在給發展中國家做設計,那么復雜的動效和高清晰解析的大圖最好是不要去做的

          (網上后臺數據展示截圖)



          當地的網絡環境和下載速度及物流環境

          拉美國家,基建水平滯后,網絡下載的速率波動較大,且存在不穩定的情況,以及流量費用的價格差異。因此某些設計手法在較發達國家能帶來體驗但是在發展中國家可能會是災難


          舉個例子,司機端的歷史列表如果存在400條記錄,如果司機有訴求想刷新查看更多的訂單,是一次性下拉刷新展示全部好呢?還是一次性展示50條好呢?還是一次性展示20條呢?


          答案是一次性展示20條是最穩妥的選擇,因為網絡的不穩定性,一次性加載太多數據會導致過長時間,而網絡不穩定極有可能導致下載失敗,并且一次性下載太多數據可能并不符合司機查詢的最初訴求,反而浪費司機的寶貴流量,最終會引擎流量消耗過快引發進線,這里的決策是損失一些用戶的體驗去保障司機的收入,但是在拉美因為手機的性能/網速的穩定且快速/套餐足夠便宜,因此我們可以嘗試使用一次性加載全部的數據,這樣能讓體驗感受更好

          (99信用卡的申請權益展示/激活流程頁面)


          再舉個例子,拉美物流相對沒那么發達,且因為政治/經濟局勢的不穩定性,導致物流包裹存在無法送達的情況,如果收件人不知曉當前的狀態而超出了等待的預期,那么他就會進線詢問。那在這個場景我們有什么更好的辦法?是否可以透傳更多的包裹進度方便收件人查看,再者再將用戶導流到客服自助而非進線?這樣的好處一來體驗的鏈路完善了,讓司機可以找到自助的出口,二是方便我們可以更好的了解哪些地區收到郵寄的折損率最大?從而探索新的業務,發現新的機會點








          章節四:生活習慣和歷史文化遺留帶來的本地化策略



          收入/支出方式占比反映了一個群體的現狀

          聊這個話題前我們先將選擇的范圍進行收縮,聚焦在一個國家的一個群體內去看會比較容易解釋。在巴西司機的收入的往往只能支撐下一周的家庭支出,難有結余。這也導致司機會選擇雙開(同時使用UBER接單或者其他競品)或者進行其他賺錢的方法,如果整個群體都是這樣的情況下,那么司機的忠誠度(這里指的忠誠度不是貶義詞,而是每周的出車時長)必然下降。那樣對于大盤的運力來說便是損失。那有沒有什么辦法幫助司機更好的應對這些問題


          我們該如何思考這個問題,通過馬斯洛的需求理論我們能夠將人的訴求歸為三類,基礎的生存訴求/歸屬感和成就感。那這三種可以再細化成兩類,物質層面的訴求和精神層面的訴求。司機愿意在滴滴平臺跑單是基于了物質層面。那么,我們是不是可以豐富收入以外的獎勵形式,提供活動獎勵或者權益的折扣,又或者嘗試下小額貸款,那這些是不是可以給用戶帶來價值點呢?


          精神層面我們是不是也有發揮的空間,對于補貼,往往是有限的。那如何做到持續長期刺激司機群體?如果一個乘客對于司機進行了表揚和小費的激勵,是不是可以給司機帶來更大的信心去服務好乘客,那我們是不是要加強這方面的透傳。是不是可以給司機提供虛擬獎勵,讓司機存在足夠的擁有感和成就感,讓司機群體也能感受到平臺對他們的看重。如果勛章可以,那等級是不是也是成就之一呢?



          現金與線上支付普及與思考

          不同的國家線上和現金的支付比例大不相同,這里受經濟環境和政治環境影響較大??偟膩碚f習慣了線上支付的習慣后就很難回到現金支付的環境,因為確實更加方便便利。一個國家大量使用現金支付的情況下,往往是互聯網公司能做的發力點和藍海。核心做法是通過核心業務導流到錢包模塊,在與當地的銀行和機構進行合作,增加卡和賬戶的滲透率。然后通過做權益和服務,滿足用戶的生活訴求,從而達到場景獨占。最終將會讓公司的業務矩陣從單核的核心業務到核心業務+本地生活




          文字的適配/i18n翻譯的本地化(不同地區/國家語言精準翻譯,拒絕里語/文字長度折行問題)

          這里我們需要提到一個概念,i18n(其來源是英文單詞 internationalization的首末字符i和n,18為中間的字符數)是“國際化”的簡稱。在資訊領域,國際化(i18n)指讓產品(出版物,軟件,硬件等)無需做大的改變就能夠適應不同的語言和地區的需要。對程序來說,在不修改內部代碼的情況下,能根據不同語言及地區顯示相應的界面。 在全球化的時代,國際化尤為重要,因為產品的潛在用戶可能來自世界的各個角落。通常與i18n相關的還有L10n(“本地化”的簡稱)


          了解完i18n的相關背景以后我們大概可以把他定義成做國際化翻譯的一個中臺,所有的本地化設計在經過研發代碼實現后,都會進過他們去對文案進行翻譯校對,最終變成當地人可以理解的話術落地到界面上,從而進行本地化的空投,但是這里面往往存在一個適配優化的問題。大家知道英文的單詞平均長度要長于漢字,而西語和葡語是英文的1.25倍到1.5倍之間,而俄語的長度更是能達到葡語的1.25倍。那么面對多國空投的適配不僅僅需要i18n進行精準翻譯,還需要把控字符長度,避免折行和省略問題


          我們來看下下面這個例子


          (不嚴謹的快速翻譯,只是為了更方便的展示不同文化下的文字長度)


          不同國家的語言不同,文字也不同,則會存在單詞,句子長度/行高的差異。如果一個產品在初期沒有做好適配的話,到后期替換當地語言的時候極有可能出現文字溢出的問題,這也是為什么在做海外設計的時候最好拿當地的語言進行設計,能初篩出一些細小的問題 ,避免在和翻譯中臺對接的時候因為文案太長提供的空間不足而修改頁面間距和留白的適配問題



          中東國家客戶的產品需要注意適配

          如果你服務中東客戶,務必需要呈現出當地的閱讀排版方式(尊重本地化設計)具體的適配細節這里就不過多說了,網上搜索【RTL適配方法】即可

          (Material Design中的RTL適配)



          縮寫是否合適(日期/業內專屬名詞)- 時間格式/貨幣符號/聯系方式/地址等

          格式也是做國際化中一個非常常見且體現專業度的地方,不同國家的時間展示方式不同,會影響用戶的閱讀,舉個例子“03/08/2019”,如果在A國理解是2019年3月8號,在其他國家復用是會存在理解成2019年8月3號的,更別說我們加上的星期之后的展示方式。這就要求我們在進行開新的國家的時候務必于前線進行更好的溝通,保障閱讀的習慣和當地一致,那貨幣符號/地址等也應該遵守當地的習慣去展示,通常的解法是設計團隊去收集信息并且與前線當地人員進行交流確認,將格式記錄下來,最后與研發根據上線的國家展示不同的格式

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          截屏2021-05-13 上午11.41.03.png



          文章來源:站酷   作者:大寶蛋

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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


          toB設計系統 - 在平平淡淡中開花結果

          ui設計分享達人

          年少時,經常聽到身邊的同事聊一些名詞概念,羨慕之余猶豫羞于提問,導致我經常會陷入其中無法自拔,痛苦不已;過了這么多年,大多數概念都隨著工作的原因慢慢被理解和消化,或逐漸消失或不再提及。但唯獨,“設計系統”這個詞陰魂不散,反反復復的出現在我的面前,特別是在面試這個場景下,幾乎每一場都會有這個詞被提到。

          也可能是每個候選人的認知不同,對設計系統的理解略有不同,有的朋友會認為設計系統是玄學,大話一套套的,根本沒卵用;也有的朋友會把設計系統和設計規范劃了等號。其實怎么理解跟輸出環境有很大的關系,不同的產品在不同的階段一定程度上對設計系統的依賴是有一定偏向性的,這就會導致設計師的認知偏差;

          也源于最近做B端稍微多一些,不如今天就以toB產品為例來嘮嘮我認知下的設計系統是什么以及如何幫助設計落地執行的。


          理論上來講,設計系統分為兩個大部分,一部分是指導思想,另一部分是實際產出;前者去指導后者執行,二者的關系像極了競技運動中的教練安排的“戰術”和球員場上的“執行動作”,如果用一張圖來表示,大概就是這么個事:

          通過上面這張圖不難發現其實設計規范也就僅僅是系統中的一部分而已, 核心在設計語言的定義上,這是一個復雜的推理過程,需要對業務和設計同時有很深的理解,牽扯到很多虛虛實實結合的部分,我試圖總結了一些平時的思考來重點說一說這幾個模塊。


          1. 語言構成

          需要強調的是,要設計一套“設計語言”,首先需要聚焦到“語言”這個詞上,通常我們認知里的語言無非是一套溝通方式,因為我們對他習以為常,所以并沒有更進一步的了解,我試圖去查了下語言的來源,以及為什么世界上會出現這么多語言之類的問題,搜過出來的結果很多很復雜,但概括來說就是支撐一套語言的核心分為“語言特性”以及“語言構成”這兩大部分。

          第一塊,詞匯:ta的作用是讓你表達出想法,就好比如果你跟我一樣English is not good的情況下,還嘚嘚瑟瑟的出國游玩,一定也經歷過用“蹦單詞+比劃”的方式去問路、點菜吧,典型的通過word的方式傳遞信息。

          另一趴,語法,ta會讓你更順暢的表達出自己的想法,通過對詞匯的重組和編排,信息傳遞的有效性被大大增加,你可以通過“主動賓”來陳述觀點或表達疑問,盡可能的豐富此刻你的所思所想。就像上面的例子,按照語法規則稍微調整一下,看起來就順暢多的多了~

          那么如果映射到設計上,顯而易見,組件庫對應詞匯,交互流程對應語法;所以你會發現當我們不斷迭代產品的時候,我們無非就是想把產品當做一件事情講清楚罷了。

          但需要注意的是,設計師喜歡用更多的組件去表達想法這個事本無可厚非,但千萬別過于執著,因為很多“組件”針對性極強,通用和復用的價值不高,這就像我們經常聽到的網絡詞匯一樣,一旦過了生命周期,這些詞就像成了過眼云煙,大概率不會再有用處。所以針對這種情況(之前的文章也有提到過),我建議要在組件的分類上下功夫,建立不同類型的分類幫助你應對不同的場景,也可以有效的避免組件庫的肥胖癥:

          再就是當一套組件被創造出來,ta需要遵循一定的規則形成一個完整的頁面,跟我們造句幾乎一模一樣;所以這個時候充當語法的交互流程就至關重要?,F實情況下,往往交互形態是千變萬化的,經常性的會因為業務場景的不同創造一些流程出來;但如果是基于語言的背景下,我們需要盡可能的抽練一些標準化的規則形成語法,我們稱之為“設計模式”

          這段鬼話理解起來太麻煩了,我試著翻一下大概就是:“為了避免重復造輪子,就搞了幾個通用的流程,以保證產品開發流程的效能問題”,嗯,就這么個意思...
          以material design為例,官方給出了給出了很多規則,我仔細看了看,重新編組和分類了下:

          我從中挑了搜索這個比較通用的模式來簡單講下;拋開組件的“點”思維,需要我們定義的是“信息交互”的“線性”流程,我試著把其中的每個環節提煉了出來,抽練了一個流程出來:

          通過上圖也許你會發現“模式”注重的是流程節點的體驗感知(用戶跟產品交互的一來一往),并注重封裝成標準化方案。另外有一點,我把整個搜索的過程分為了2個個小線程——輸入行為和消費行為,這是為了以后團隊協作更好的理解這條模式的運作方式,以及之后的拓展,舉個例子:產品經理決定加一個歷史搜索(就是顯示用戶過往的搜索結果),這個時候設計師就可以把這個功能當做一個拓展包,直接扔到這個主干里來:

          綜上, 模式最重要的起點和終點(可以理解成為目標和結果),那么中間的過程就是可以被隨意定制和改變的,這也是模式的靈活性。

          另外,toB CRM鼻祖salesforce在自己的設計網站上公布了他們的設計模式,給出了一些特定的場景下的解決方案,不過寫的相對更偏組件流程一些:

          總的來說呢, 設計模式在互聯網設計的發展上,一定程度把交互設計師的價值充分利用了,因為ta的存在,讓設計系統不再是UI設計師的專屬,更不是幾個顏色和字號就可以被定調的,ta的作用一直都是幫助一款產品在成為優秀產品的道路上,傳遞出更“別具一格”且“優雅”的信息;

          PS . 插個有的沒的的小話題,一個很好玩的事,如果你細心琢磨的話,也許會發現其實組件本身也是帶有一定的潛在交互,這種交互不需要你特意安插,天生就有,就好比一個按鈕擺在那,在沒有任何引導的情況下,正常人也知道點一點。所以映射到語言里,語法貌似并不是必要的(當然ta的存在是為了設計系統更完整,產品更好),比如這個爛大街的梗:

          這種現象是著名的“貝葉斯理論”,利用相關信息總結出未知信息,也就是說我們的大腦是可以通過殘缺的信息來補足未知的信息的,人類的大腦真的是奇奇妙妙啊~


          2. 語言特性

          相比構成,特性這個就好理解多了,相當于設計原則這類的,我們需要通過一定的規則約束對語言有一個明確的指向;比如現代漢語就具備適應性、開放性兩大特征。

          同樣的,設計系統在被不斷使用和執行的路上需要有明確的引導,一方面幫助現有產品應對迭代的需求,另一方面保證組件、模式的不斷擴容滿足各種適應性場景,與之匹配的就是“設計原則”了。

          但不得不說,作為面試官我個人不是很喜歡作品集里描述設計原則的時候就3個詞:“簡潔”“高效”“清晰”。并不是討厭這三個詞,而是當我追問候選人為什么是這三個的時候,我得到的回復基本是Material Design(或其他大廠的設計系統)就是這么寫的亦或是其他很蒼白的回答,這無疑是暴露了對設計系統的認知殘缺,是一個非常掉分的互動過程。其實,當google、IBM、salesforce在對外宣講他們的設計原則的時候,也許就只有兩個字“清晰”,但背后或許有非常多的思考,甚至超乎你我的想象。

          但...異乎尋常的是,AntDesign 的設計原則寫的很"深奧",憑我的功力真的看不出背后的東西,也不知道如何指導設計(也許他們是在探索設計哲學吧哈哈哈哈):

          在我設計過B端產品里,我更希望盡可能的把 設計原則按照不同角色視角的方式去劃分,舉個例子:
          假設現在我們正在為一款工具類SaaS系統做設計(0-1階段),這個時候最好確定一個方向來綜合考慮業務訴求、產品訴求、設計訴求和最重要的用戶訴求(這基本包含了從生產到實用這條流程線上的所有角色),ta們分別承載著不同角色的不同期望,互相成就又彼此制約;所以需要從4個角色的不同角度分別提取訴求:

          當我們對上述各方訴求梳理清楚后,首先要精準的概括和整理這些內容的權重和占比(需要注意的是,雖然允許多個原則存在,但也要有一定的側重和比例,這種做法在順暢的環節上不會有所建樹,但在多個原則沖突的情況下為了保全大局,順應占比最大的原則是相對穩妥的選擇,一定程度上可以幫助設計師規避掉不必要的糾結或撕逼的過程);再然后基于當下的情況產出相應的原則,形成整套設計系統的王炸:

          但在實際操作中,高度整合后的設計原則雖然指明了方向,但缺失了可衡量性,這就會導致“認知偏差”的情況,因為每個人對圖例中的“高效”或“靈活”理解不同,會對同一個事物有不同的理解,就跟“小馬過河”這個典故一樣,小松鼠覺著水很深,小馬卻覺著也就那樣;也正是基于此,需要設計師們在此基礎上拆分明確的細則,幫助整個團隊建立統一認知:

          到這一步基本上設計系統就被定了調了,我們可以明確對一個設計進行評判和衡量,以“清晰”為例,我們有個B端產品里面有個表單填寫的頁面,需要用戶提供一些個信息,前兩天,團隊一個設計師做了個方案是把表單新開tab,但產品覺著不夠清晰,反而覺著蒙版的形式更清晰。他就很疑惑,明明信息獲得了更好的展示咋就不清晰了?

          說到底,是我們在做設計定義的時候,對“清晰”的認知就是偏薄的,這個案例里面顯然第一個方案對信息的展示更加充分明了,但在這個場景下“清晰”并不僅僅指的是信息呈現,產品經理希望用戶透過浮層能確認當前處在哪一步(或哪個頁面)也同樣是一個維度;從這個case里,你會發現,定義一個原則真的不僅僅是搬運一個名詞這么簡單,所有的原則和特性必須遵循易于操作且合理,這樣才是一條合格且優秀的原則。

          ps . Salesforce的Lightning設計系統是我最喜歡的design system之一,原因很多,其中很重要的一條是因為他們真的是把“美”作為一個很重要的原則

          嗯~nice,非常符合設計師的三觀,也很真實,很實在哈哈哈哈~


          唉媽...啰嗦了一大頓,終于講到了設計規范了,作為設計系統的中樞,設計規范承接了指導思想和設計落地兩者,更像一本說明書,我挑了個點重點說一下(前面費了太多口舌了,實在是沒有力氣再寫下去了哈哈哈哈);

          色彩體系的定制往往是重災區,最常見的做法是把顏色用色塊的方式一字排開,一排叫做品牌色,一排叫做輔助色,還有一排是灰度:

          這種定義存在很大的風險,就跟菜譜只告訴你需要哪些食材,不告訴你配比一樣,做出來的菜大概率是一塌糊涂,難以下咽。所以如果你正在建設一套團隊協作級別的設計規范,務必要把“協作”當做最重要的事,用比例的方式來告訴你的隊友他們應該怎么做:

          同理,其他的模塊,比如字號,間距,圖標,我都建議盡可能的“場景化”,讓設計規范有一定的代入感,這樣會大大提高設計的效能和品質。


          拋出這個問題,是因為經常在不同的場合聽到“設計系統是扼殺設計師的創造力”之類的觀點;我個人是很難以認同這個的,對design system的最大誤解就是限制設計師的想象力。首先設計系統本身就是一個龐大且復雜的設計觀集合,需要調動整個團隊的想象力和創造力,最終達到一個統一共識才有可能被實施和執行;其次,創造力并不全是設計個btn或者彈窗,真正能展示創造力的是像樂高一樣,通過零件(組件)拼裝成各種各樣的令人嘆為觀止的創意,那才是我理解的創造力

          另外從系統性思維上講,如果在不考慮資源的情況下,我倒是挺支持每一位設計師都自己去設計一套設計系統,因為在我們平時看來,2/3年經驗的設計師和10年的設計師他們的產出物或許不會差太多,但對設計觀架構的能力千差萬別,前者依賴感覺和直覺素養做事,后者更靠縝密的邏輯和推理來做事;我更喜歡后者多一些,并不是因為他們講起自己作品的時候聽起來多么高大上,而是因為依據推理方法可以時刻保持輸出的穩定性。

          如果你了解NBA的話,你一定知道美職籃里天賦最高的運動員 - 麥迪,他有過35秒13分驚為天人之作,把心理素質和身體極限展示的淋漓盡致,但就整個職業生涯來說,并不算特別突出,對比同時代的科比來說,他的個人/團隊成就都還顯得差點意思;天賦不算頂級的科比通過不斷的自我訓練和戰術研究能夠保持20年的穩定輸出,贏得了5個總冠軍戒指,成為了我們這一代球迷心目中的“神”。

          我無意詆毀這兩大巨星,也無意內卷,只是想說,做事,終究不能托付給“天賦”和“靈感”,勤奮和努力在一定程度上也許可以幫你飛到更高。

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          截屏2021-05-13 上午11.41.03.png



          文章來源:站酷   作者:負能量補給站

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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


          產品設計細節剖析

          ui設計分享達人

          前言


          在設計領域,相較于平淡無奇毫無重點的界面設計,其具有良好視覺層次結構的設計更受用戶青睞。在設計過程中可能會糾結于各種可能性,比如是讓文字變大還是變小,或者增加(或減少)元素周圍的留白,顏色是該深一點還是淺一點等。其實不管何種呈現方式,設計出美觀、高效和可用的UI界面需花費很長的時間,需經過反復的修改,最終才能打磨出令用戶滿意的產品,在滿足公司戰略及功能需求的情況下,其修改和優化還可以從細節上入手。





          2021 | 第03篇分享目錄(031~045


          031.「支付寶」避免超額消費的花唄鬧鐘

          032.「滴滴出行」關懷模式-老年人的出行福利

          033.「愛奇藝」搜索分類-讓結果更精準

          034.「美團」突出折扣金額-引起用戶貪便宜心理

          035.「餓了么」訂單備注提示-為防疫工作貢獻一份力量

          036.「快手」不打斷視頻播放的評論功能

          037.「微博」行為預判-有效提高評論的完成效率

          038.「淘寶」搜索結果-你試過長按商品卡片嗎?

          039.「boss直聘」雙重toast彈窗-快速感知頁面類型/內容

          040.「餓了么」店鋪營銷文案-看“我”就把“我”吃掉

          041.「微信」你使用過圖片備注嗎?

          042.「即刻」排版設置-幫你緩解視覺疲勞

          043.「拼多多」通過搜索關鍵詞建立情感鏈接

          044.「微信讀書」替身書架-幫你瞞天過海

          045.「網易云音樂」視頻歌單-邊聽邊看更便捷





          031.「支付寶」避免超額消費的花唄鬧鐘


          產品體驗:

          在支付寶花唄的消費鬧鐘功能里,可設置每個月的消費限額,當花唄支付使用超額后,會收到對應的消息提醒。

          設計思考:

          隨著互聯網的迅速發展,人們生活水平提高的同時、消費水平也越來越高。各種消費信貸產品如雨后春筍一樣冒出來?;▎h自出現后就深受人們的喜愛,首先是便捷的支付方式;其次花唄的申請門檻比較低,不論是學生,還是無業游民或其他沒有穩定收入的,只要芝麻信用分達到650分以上就能開通,在擁有額度后,就可以在支持花唄支付的平臺提前預支消費,到次月再還款,因此花唄的便利性就完全體現出來了。但總是有一部分用戶在每月出賬單需要還款時才發現,消費的額度遠遠高于自己的收入,甚至無力償還。

          花唄新推出的消費鬧鐘功能,對于花錢沒節制的用戶來說,真的特別好用。在消費鬧鐘里設置提醒金額,點擊確定設置即可,當使用金額超過用戶設置的金額,將會收到提醒消息。此功能既可以減少用戶超額花費的可能性,也能有效避免用戶因無力償還賬單而給平臺帶來的經濟損失,可謂是一舉兩得。





          032.「滴滴出行」關懷模式-老年人的出行福利


          產品體驗:

          在滴滴出行的設置中開啟關懷模式,系統會將字體放大且展示功能極簡的打車模式頁面,方便老年人使用;

          設計思考:

          滴滴出行主要面對的是年輕用戶群體,因涉及到支付寶、地圖等線上線下功能的結合,操作流程復雜且使用起來學習成本較高。在當前移動互聯網時代下,老年人如何能真切感受到現代智能科技所帶來的便捷、人文關懷和尊重,是如今的移動平臺所要解決的問題。

          滴滴出行的關懷模式,就是專為方便老年人出行而推出的。老年用戶在APP設置中心開啟后,可快速進行一鍵下單操作流程。關懷模式支持大號字體顯示,能提前設置五個常用地址,方便在下單時進行一鍵操作,簡化了下單流程及刪減了部分頁面內容。不管是大號字體還是精簡流程,都便于視力不好的老年用戶叫車出行,不僅有效降低了在線叫車操作的復雜程度,也能緩解老年用戶在叫車過程中出現的不確定性和焦慮感,提升了出行效率。





          033.「愛奇藝」搜索分類-讓結果更精準


          產品體驗:

          在愛奇藝使用搜索時,展開搜索框前面的類型,可選擇全網、圖搜劇和詞搜劇,以更精確的匹配搜索結果。

          設計思考:

          很多設計師認為搜索很簡單,設計一個搜索框加搜索圖標放在主頁頂部就搞定 了,然而并非如此,需要站在用戶的角度考慮搜索前、搜索中、搜索后各個階段的用戶體驗。搜索作為一個功能入口,除了簡單的呈現及引導方式之外,搜索結果也是也是非常重要的,用戶的搜索操作不是目的,結果的精準度及視覺傳達才是重點。大部分搜索的呈現就是提供搜索框,用戶一上場就開始碼字,然后在海量的搜索結果中去找到自己想要的內容。然而用戶并沒有什么耐心,不管是花大把的時間查找結果還是不停的更換關鍵詞重來,都有可以讓其失去耐性,轉而扭頭就走,導致平臺的用戶流失。

          愛奇藝APP在搜索功能中進行了分類,比起常見的全局搜索其結果更加精準,通過全網、圖搜或詞搜類型改變搜索范圍,便于用戶在最短的時間內找到自己想要的結果??梢韵胂?,當我們在百度查找需要的內容時,面對幾萬乃至幾十萬的結果匹配時,翻過幾頁后,要么放棄、要么換掉關鍵詞。愛奇藝的分類型搜索縮小了查找范圍,降低用戶的時間成本,還能提高對用戶的信任度,以增加其使用粘性。





          034.「美團」突出折扣金額-引起用戶貪便宜心理


          產品體驗:

          在美團的酒店列表價格區域,除了有劃掉的原價和優惠之后的價格外,還特別突出展示了優惠的實際金額,非常顯眼,以彰顯其優惠的力度。

          設計思考:

          商家們都知道,定價策略是營銷中一個十分關鍵的組成部分,是影響交易成敗的關鍵因素,但也難以確定,既要考慮成本的補償,又要考慮消費者對價格的接受能力??v然如此,當商家們把最低的價格擺在消費者面前時,才發現“理想很豐滿,現實卻骨感”,總是有那么一群人在感性的消費,即使碰到折扣后的價格依然過高,但只要優惠力度夠大,就感覺夠刺激,常規剁手。

          一路走來才發現,唯有套路得人心,例如:拼多多的砍價,砍到手后低價購買,算是平臺補償的免費宣傳費;美團的高額滿減,是在提高原價數倍之后才有的折扣;線下商家撤離前的虧本清貨,可能是被選剩下的瑕疵產品......。在這些案例中,如果商家直接把折扣后的實際價格擺在那里,部分用戶根本不屑一顧。

          美團的酒店列表,在價格區域除了常規的原價、現價之外,還突出展示已減金額,拋開現價不說,如果優惠的金額給力,足以引起用戶的注意。這是企業慣用的利益引誘手段,屢試不爽, 通過下單就讓利的方式來促進商品的轉化,引起用戶的貪便宜心理,只要優惠的數值夠高,就能引起用戶的注意力和消費欲望,將用戶的思維轉換至優惠力度方面,而忽略市場價格及性價比,會誤以為商家優惠的金額即自己賺到的錯覺,促使用戶下單完成轉化。





          035.「餓了么」訂單備注提示-為防疫工作貢獻一份力量


          產品體驗:

          在餓了么確認訂單頁面,為了有效的控制疫情傳播,頂部會提示“為了減少接觸,降低風險,請修改下方備注”,進入備注頁面,輸入框的占位符和快捷輸入都優先展示避免接觸取餐的方法參考。

          設計思考:

          疫情爆發期間可謂是人心惶惶,經過所有人長時間的有效配合及預防,終于得到了緩解。疫情控制之后,人們對病毒的防范意識有所增加,通過自律做到盡量減少與他人的接觸,但在忙到的生活和工作下,很多情況總是不可避免,比如病毒防范意識降低而造成無意識的接觸、工作中的外賣取餐和寄收快遞,都會造成額外的接觸。

          在餓了么APP上訂餐下單時,系統會給予明顯的免接觸防疫提醒,在訂單的備注中優先展示免接觸取餐方式參考,如掛門把手、放門口等,給病毒防范意識降低的用戶敲響了警鐘,提醒用戶盡量使用無接觸方式取餐,不僅能降低病毒在人與人之間的相互傳播,還為防疫工作貢獻了一份力量。





          036.「快手」不打斷視頻播放的評論功能


          產品體驗:

          在快手觀看短視頻,打開評論,頁面從底部彈出,視頻繼續以播放狀態等比例縮小置頂,編輯評論不影響播放。

          設計思考:

          當我們在線上看到一件事物,有互動需求和強烈的表達需求時,此時評論功能不僅能滿足用戶需求,還能增加參與感,對增加用戶黏性大有作用。評論作為一個重要級的功能存在,在需要時會打斷用戶的當前瀏覽或操作,通過跳轉頁面或彈窗來幫助用戶解決互動需求,跟原本的頁面是一個上下級的關系。

          在快手APP看短視頻,無論是編輯還是瀏覽評論都可以齊頭并進。觸發評論后,頁面從底部向上彈出,視頻的頁面占比范圍會以播放狀態等比例縮小并置頂,類似我們在看電影時的橫屏和豎屏,視頻觀看及評論兩不誤。這種交互方式在滿足用戶下一個需求時,并不中斷上一步的需求,避免原本看視頻的思路被打斷,有助于用戶跟隨視頻播放的思路即興發揮評論,這也是一個容易設計師被忽視的好功能。





          037.「微博」行為預判-有效提高評論的完成效率


          產品體驗:

          當我們在微博列表中的某條信息處停留5秒并無任何操作時,此條微博下方會自動彈出評論框,系統通過行為預判感知用戶對該內容感興趣,引導用戶去發表自己的想法。

          設計思考:

          評論在很多應用中都有著舉足輕重的作用,尤其像微博這樣的大型并開放式的信息平臺,更有著弘揚先進的思想和精神,揭露和抨擊腐敗現象及不正之風,對各種不良現象形成強大的輿論壓力,實現有效的監督。即便是網絡水軍、鍵盤俠(惡意重傷除外,畢竟大部分用戶還是理性的“噴子”),當風聲一邊倒時,都會逐漸走向真理化。在我們所接觸的應用中,評論操作的方式都是通過用戶的手動觸發。

          微博編輯評論除了用戶手動觸發之外,其還有一種非常人性化的系統感知觸發。當用戶在列表中的停留5秒且沒有任何操作時,系統通過行為預判感知用戶可能對這條信息感興趣,即自動彈出評論框,引導用戶操作,能增加產品跟用戶之間的交流互動。微博的行為預判是引導用戶、縮短用戶行為路徑的有效設計手段,在用戶沒有作出行動觸發的情況下進行理解用戶可能會出現的操作行為,減少冗余步驟,簡化操作流程,運用最少的路徑和行為來達成用戶目標,有效提高評論的完成效率。





          038.「淘寶」搜索結果-你試過長按商品卡片嗎?


          產品體驗:

          在淘寶的商品搜索結果里列表,長按某個商品卡片區域,會彈出該商品多種類型的tab,有相似、同款、同品牌和同店,便于用戶更精準快速找到自己需要的商品。

          設計思考:

          對于有目標需求但不是特別明確的用戶來說,關鍵詞搜索無疑是最好用的一個功能,當面對海量的搜索結果,可能會眼花繚亂,找到喜歡的商品時,要么銷售量太低、要么價格過高,反正總有有那么一方面自己不滿意,不得已,只能把當前商品的精準關鍵詞經過搜索框再來一遍。

          在淘寶APP就無需這么麻煩。商品的搜索結果列表有個隱藏的功能,只需長按商品卡片區域,就會彈出相似款、同款、同品牌、同店鋪的類型tab欄,方便用戶能夠快速根據自身需求篩選比價,可免去不必要的麻煩操作,節省大量時間,如果你還未使用過此隱藏的交互功能,就趕緊試一試吧。





          039.「boss直聘」雙重toast彈窗-快速感知頁面類型/內容


          產品體驗:

          boss直聘頂部的職位tab在切換成功后,除了除了有職位更新toast提示外,屏幕中間還會通過toast彈窗提示當前頁面職位類型,并突出顯示。

          設計思考:

          關于toast彈窗樣式及出現的場景,猶如市場上的大白菜,所見過多的不能再多了。例如某個步驟操作成功、tab切換頁面、下拉刷新等,是一種輕量級的反饋,以小彈框的形式出現,一般出現1到2秒會自動消失,且可以出現在屏幕上中下任意位置。對于設計師來說,在頁面上增加toast的作用,就是將操作的結果直接反饋給用戶。

          Boss直聘APP在tab欄成功切換頁面后,除了有清晰反饋操作結果“推薦職位已更新”之外,還在屏幕中間用另一個更加顯眼的toast彈出明確職位信息。其實用戶在切換tab欄時,此操作行為不僅僅是切換頁面,所對應的類型才是首當其沖,當明確類型無誤后才會將思維轉向內容,職位彈窗在屏幕中心提示,占據有利地形,除了讓用戶清楚當前頁面交互狀態之外,還能快速感知類型是否為自己所需。另外還有防錯作用,避免用戶操作失誤后,在自己還不清楚的情況下去瀏覽內容而浪費大量的時間。





          040.「餓了么」店鋪營銷文案-看“我”就把“我”吃掉


          產品體驗:

          餓了么的外賣店鋪列表及推薦商品下方都有極具誘惑性的廣告文案,一句話概括味道、服務、優質推薦等。

          設計思考:

          今天吃什么?隨便;那吃肯德基吧?不好,太油膩了;那到底吃什么?隨便......。這應該是最標準的選擇性困難綜合癥晚期,尤其是給女朋友點外賣,你會發現原來“隨便”就是天大的謊言,表面上看似什么都可以,實則什么都不可以。

          餓了么每個店鋪下方都使用了一句簡短的文案概括菜品的味道、店鋪服務或招牌推薦等,在文案中結合用戶較為關心的利益點抓住眼球,引導目標進入店鋪,從而瀏覽店鋪的內容。店鋪廣告是商家可以進行內容營銷的重要場所之一,可充分利用文案向用戶進行宣導,讓其感受到店鋪的用心之處,增強用戶體驗,優質的文案不僅能帶給用戶驚喜,還有一種神秘色彩,用戶可能會抱著試一次心理想法,從而形成轉化。

          另外對于吃什么、難以選擇的用戶,平臺可以通過文案的吸引,增強用戶的占有欲望,讓其快速做出決策,避免在選擇的時候難以抉擇,即便做出決定后仍然疑慮其它的選擇是不是更好,從而導致時間的浪費,精神上的焦慮。





          041.「微信」你使用過圖片備注嗎?


          產品體驗:

          微信好友昵稱除文字備注外,還可以使用圖片備注,保存成功后即可在設置備注頁面描述區域看到此前備注的圖片,好友信息也增加了描述入口。

          設計思考:

          當我們的微信好友過多或因好友隨時改變昵稱的原因,而經常找不到,我們就會隨手備注一個昵稱或標簽,以便需要時方便查找,但針對當面即時添加的好友,就算使用的昵稱備注,可依然沒有印象怎么辦?

          其實微信的備注功能比我們想象的要強大,除了昵稱備注外,還可以使用圖片備注。當我們因工作接觸的人較多需要添加好友時,短時間是沒有辦法把所有好友的個人信息都記熟,這時候圖片備注就能助我們一臂之力了,另外還可以直接把客戶的名片作為圖片備注,將單個好友的信息集合,實現一功能多用。對于記性不好或短時間內添加好友較多的用戶非常實用。





          042.「即刻」排版設置-幫你緩解視覺疲勞


          產品體驗:

          在即刻APP的排版設置里,開啟“中文標點擠壓”和“段間距”,文本內容會自動減小中文符號后面的間距,且段與段之間也會增加留白,提高視覺舒適度。

          設計思考:

          我們在看文章或電子書時,都有過這樣感覺,當篇幅較大時,到了一定時間,就會產生視覺疲勞或專注度減弱的情況。視覺疲勞的強弱程度,用戶除了自行調整外,平臺還能通過設計手段提升用戶體驗來緩解,常見的網絡文章會在不同位置穿插圖片來減輕用戶的視覺壓力,其電子書也會通過短篇幅的翻頁來緩解視覺疲勞。

          在即刻APP的系統設置中,可通過排版設置提升瀏覽體驗。開啟中文標點擠壓,文本將自動減小中文標點符號后的空白區域,避免間隔太大造成脫節,去掉不必要的空白,還能為內容節省空間,畢竟內容才是產品最重要的部分,所以不要沒理由的去掉特地為它預留空間,“擠擠總還是有的”;其次開啟段間距,即段與段之間視覺更加明顯,第一反應就能感覺出這是兩段內容(段落的結尾如果跟上一樣最后平齊,傻傻分不清是銜接上一段還是新的一段),讓用戶瀏覽文本內容的思維更清晰且減少思考,提升節奏和視覺平衡感。





          043.「拼多多」通過搜索關鍵詞建立情感鏈接


          產品體驗:

          在拼多多搜索“生日蛋糕”時,商品搜索結果呈現的同時,會有滿屏的蛋糕表情落下,以示祝福。

          設計思考:

          商品搜索框,顧名思義就是搜索商品使用,用戶需要查找某個商品時,輸入關鍵詞,系統通過后臺數據對關鍵詞進行匹配,然后按照特定是順序呈現出來,旨在滿足用戶的搜索需求而生。

          拼多多搜索功能除了滿足用戶的基本需求外,還增加了一個小細節,搜索部分特定的關鍵詞,結果頁會使用趣味化的微動效。比如,在搜索“生日蛋糕”后,會有滿屏的蛋糕表情落下,給予用戶生日祝福,通過營造情感氛圍,獲得用戶的認可,跟用戶建立情感鏈接以鼓勵繼續下一步操作。同時平臺用趣味的微動效生日祝福通過情感、人性化的交互方式更受人用戶青睞,可以讓用戶感到心情愉悅,進一步增加用戶的信任度及粘性。





          044.「微信讀書」替身書架-幫你瞞天過海


          產品體驗:

          使用微信讀書,如果自己所看的書籍不想別其他人知道,或者想假裝自己在看某個領域的書籍,可在隱私設置中開啟替身書架,既可以保護隱私,還可以滿足面子心理。

          設計思考:

          有人說,線上看書的效果沒有看紙質書籍的效果好,其實并非全部如此,主要因人而異,比如線上看書可以有效利用碎片化時間、不分場景等,不管是線上還是線下,都沒有明確的界定,只要能堅持就好,堅持是一件很不容易的事情,比如很多用戶喜歡把自己在看書這件事告訴所有的朋友,利用營造人設以追求自己的面子心理,通過好友的夸贊轉化為自己堅持下去的動力。

          微信的替身書架就可以滿足用戶的多種需求,通過隱私可以設置一個“分身”來代替真實書架,開啟后,替身書架將代替真實書架顯示在個人資料中,除了隱藏自己真正閱讀的書籍,保護閱讀隱私,讓自己不被“視奸”外,還可以滿足用戶的面子(裝X)需求,滿足用戶想要被看到的一面,利用替身書架經營自己人設的需求,比如最近在讀的書籍類型、領域等,通過“造假”的方式滿足自己的虛榮心,來獲得他人的認同感。替身書架一定程度上可以通過裂變手段把獲取的新增用戶轉化為活躍用戶,同時滿足了用戶保護隱私和營造人設的需求,一舉兩得。





          045.「網易云音樂」視頻歌單-邊聽邊看更便捷


          產品體驗:

          在網易云音樂聽聽歌時,如果遇到喜歡的視頻,也可以收藏到視頻歌單了,從我的-收藏和贊入口進去就能看到。

          設計思考:

          一直以來,歌單是網易云音樂的核心功能,網易云音樂也是唯一一個將歌單作為核心架構的音樂產品,當我們碰到一首非常喜歡曲時,可能也會鐘情于該歌曲的MV,邊看邊聽似乎能更好的融入歌曲的“靈魂”中,如果我們需要再次播放該MV,就要從這首歌曲處找到相應的入口。

          網易云音樂8.0版本最新推出了視頻歌單功能,延續了用戶喜歡的“歌單”模式,根據自己喜歡的歌單主題,將MV,視頻、mlog內容聚合在一起,做出一個好聽、好看,好玩的視頻歌單,讓音樂動起來,省去了以往每次找視頻的一系列繁瑣操作,優化路徑,讓邊聽邊唱的體驗更加便捷。





          結語:


          設計師需要養成體驗產品的好習慣并將優秀的產品細節記錄下來,加強自己的記憶,不僅能提升自己的語言組織和總結能力,也為日后輸出優秀的作品當鋪墊,對自己的能力提升以及未來的職業發展帶來便利。


          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          截屏2021-05-13 上午11.41.03.png



          文章來源:站酷   作者:大漠飛鷹CYSJ

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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




          10個讓用戶一眼就愛上的設計心理學知識

          ui設計分享達人

          一個優秀的設計不僅要解決正確的問題,同時也是給用戶創造積極的情感。在過去,實體產品可以通過人類的五感來創造情感體驗,但對于如今的數字化產品來說,這似乎很難達到,因為只是在屏幕上進行枯燥的交互來獲取服務。


          所以,數字化產品設計師們需要更深入的理解每種類型的情感,以及創造它們的心理學原則。


          根據唐.諾曼(Don Norman)的研究,人們對一個物體產生情感有三個層次:本能、行為和反思。


          undefined

          • 本能層: “用戶想要的感覺是什么”

          • 行為層: “用戶想要做什么”

          • 反思層: “用戶想成為什么樣的人”


          在第一層,用戶將通過視覺和與產品的交互設計中產生情緒。因此,這是UI設計師擅長發揮的地方。除了美學和基本的平面設計原則外,下面是我在工作中經常應用到設計中的心理學原則。


          格式塔原理


          相似律

          人類的眼睛傾向于將相似的元素連接成一個組,而大腦會認為這些元素都有相同的目的。 


          undefined


          因此,在設計具有相同功能和內容的界面元素時,就應該要保持一致性。(彩云注:這也是為什么要保持一致性的理論解釋)


          應用場景: 導航、控件、卡片、banner、內容、分頁


          連續律

          人眼會將連續的元素視為一組。這一定律與對稱性和相似性非常相關,通過在一個序列上設計相似和重復的元素,我們可以將用戶的視線引導到我們想要的方向,它能使得閱讀信息更加連貫和清晰。

           

          undefined


          一點點的切割是在暗示用戶,這里還有更多的內容等待你去查看。


          應用場景: 菜單、列表、排序、輪播、服務進度


          封閉律

          當看到一幅不完整的圖像時,大腦會依賴之前的經驗進行填充。 


          undefined


          這是圖形和logo設計中常用的規則,但是在產品設計中,我們也經常把它用在圖標和Loading設計中。


          應用: 圖標、loading、數據可視化


          相近律

          這是UI設計中的一個基本規則,因為人眼會將任何相鄰元素視為一個組。 


          undefined


          在設計的時候,我非常注重使用間距來將元素組合在一起。我通常使用大空間來分隔大內容組,然后使用小空間來分隔大內容組中的小內容組。


          應用場景: 導航、控件、卡片、banner、內容、分頁


          對稱律

          我們的大腦喜歡看到對稱和平衡的東西。它是所有設計領域中使用最頻繁、最安全的法則。它幫助我們創造一種穩定和秩序的感覺。 


          undefined


          當設計需要簡單和諧可視化的產品時,我經常使用對稱律。當用戶需要關注重要的事情時,它也能讓他們感到更舒服。缺點是,如果過度使用,產品會變得乏味和單調。通常,我用標題或CTA按鈕來更好地強調和號召行動,打破畫面的單調格局。(彩云注:CTA是call to action的縮寫,中文通常翻譯為行為號召??梢岳斫鉃橐龑в脩酎c擊的行為都算是行為號召)


          應用場景:控件,banner,強調內容,產品顯示,清單,導航。


          背景分割

          這個定律是關于人眼傾向于注意脫離背景或組合的事物。 


          undefined


          我使用這個規則引導用戶的眼睛看到重要信息。它通常是一個卡片設計與一個輕投影在背景之上的層。此外,構建整體也是應用這一規則的一種方式。


          應用場景:卡片、內容、列表、服務、摘要


          共同命運法則

          在同一方向上移動的元素被認為比固定的元素或在另一個方向上移動的元素更相關。這個規則應用幫助我們建立組和狀態之間的關系。 


          undefined


          在制作動畫時,我經常更明確地使用這個規則。然而,我們仍然可以適用于許多不同的因素。


          應用場景:導航/下拉菜單,折疊,手風琴,工具提示,產品滑塊,視差滾動和指示器。


          2. 焦點原則


          當我們看東西時,我們的眼睛傾向于首先關注最突出的元素。理解這種行為將幫助我們在設計中創建一個“錨點”,從而推動用戶查看我們的場景之后的內容。


          undefined

          應用場景:內容、落地頁、價格、產品頁、banner 


          3. 雷斯多夫效應


          (彩云注:維基百科解釋為指個人對學習材料或所見所聞的資訊,容易記住最特殊的部分的現象。例如:有一些參考書將重要的資料,以不同顏色或特殊的字體標示出來,就是利用雷斯多夫效應來加深讀者的印象。)


          這也被稱為隔離效應,它表明人們傾向于注意并記住與其他部分不同的部分。這條規則很容易與焦點定律混淆。不同的是,應用此規則的元素通常是獨立的,沒有為用戶導航更多信息的額外功能。 


          undefined

          應用場景:定價表、促銷banner、不同會員介紹 


          4. 本能反應


          基于現實世界打造的視覺體驗。比如,當我們看一個視頻,每個高潮笑話時都有旁白跟著一起笑時,我們會更容易發笑(彩云注:想想《快樂大本營》)。用戶會喜歡我們的設計,如果它讓他們感覺良好和舒適。


          (彩云注:這個理論的意思是說盡可能讓用戶產生沉浸感,把產品用到真實的環境上,比如大家平時使用的手機樣機,把設計的界面放到這些樣機中就能夠給人直觀的感受到應用后的效果,也是這個理論的運用)。 


          undefined

          應用場景:產品配圖、插圖、攝影 


          5. 色彩心理學


          有很多研究表明顏色對我們的潛意識有特別的影響。對顏色的看法也因性別、宗教和文化而異。這張彩色心理學海報就足夠了(彩云注:感興趣的可以自行翻譯研究下)。


          undefined


          此外,我們不要忘記從早期到現在一直在廣泛使用的顏色,這些顏色的使用更符合用戶習慣:

          紅色:錯誤

          綠色:成功

          藍色:進行中

          黃色:警告


          6. 形狀心理學


          undefined


          就像顏色一樣,人類的潛意識對不同的形狀也有不同的反應。例如:

          圓形、橢圓形:傳遞積極的信息,通常與社區或關系有關。

          方形和三角形:帶有強烈的信息,通常與力量和穩定聯系在一起。

          豎線:代表強度、力量或攻擊性。

          橫線:表示平靜、相等、安靜。


          7. 雙碼理論


          這一理論解釋了人類需要視覺和語言信息來盡可能快地處理信息。此外,人類是視覺動物,我們的大腦處理圖像的速度是處理文本的6萬倍。為了最大化設計的有效性,我們不應該去掉解釋性的文字。


          (彩云注:根據這個理論,在做作品集時,就應該盡可能的多用視覺化語言,文字作為輔助,對于視覺設計師來說,能用圖表達的就盡量減少文字的比重。) 


          undefined


           一個很明顯的例子就是導航欄。大多數新的應用或具有復雜功能的應用都同時設計了圖標和文字標簽。 


          undefined



          8. 并行設計


          人類的眼睛傾向于看到平行因素比其他因素更相關。我經常使用這一原則對同一屏幕內的兩組不同內容進行分類。最容易看到的例子可能是Facebook messenger界面,當帖子并排排列時,消息是平行的。 


          undefined


          9. 共同區域


          這一原則類似于格式塔原則中的相似定律,但它并不是完全相似。共同區域原則是通過我們使用分隔線、形狀或顏色的方式創建的。 


          undefined


          如果一個界面需要用戶滾動更多來查看內容,我們應該有一些方法來更清楚地劃分它,而不僅僅是使用間距。


          應用場景:列表清單、信息流

           

          10.掃描圖形


          根據NNGroup UXPin等組織或團體的各種研究,兩種最常用的掃描模式是“F”和“Z”。

          • F的使用最為廣泛,尤其是對于內容量大的網站。

          • Z用于不太注重文本的網站,通常強調在最后的號召行動。

          一旦我們理解了如何使用這些模式,我們就可以選擇布局并有效地安排元素來實現我們的設計目標。 


          總結


          第一印象是最令人難忘的,積極的體驗可以在用戶和產品之間創造持久的關系。如果能讓用戶在一開始就喜歡上我們的設計,就能為我們的產品創造了一個很好的優勢。

          (彩云注:這些都是非?;A的理論,但基礎的厚度才是決定后期發展高度,我現在越來越能體會到這一點了,也希望大家能重視并加強基礎的學習。) 

           藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          截屏2021-05-13 上午11.41.03.png



          文章來源:站酷   作者:彩云Sky

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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


          淺談圖表編輯系統的構建

          ui設計分享達人

          undefined


          一、項目背景


          RayData作為一個系列的可視化工具,內容資產作為基礎的構成發揮著重要的作用,在日益更新迭代的過程中,會發現每條產品線對圖表組件的需求都很繁重,無法避免地重復開發。通過開發通用型組件可以一定程度的解決問題,但是存在靈活性差,組件庫維護困難等問題,而且內部產品圖表庫各自獨立,缺乏統一的設計語言。



          通過對類似競品的調研,發現圖表做為承載數據信息的組件,本身只是工具,它的使用體驗優劣還往往取決于業務需求、數據類型、圖表本身的視覺效果接受度等因素。而且圖表類型的豐富和靈活程度,使用的框架及響應時間,商業或免費和開源狀態也都是評判標準之一。

          無論是小而美的個人項目還是大數據可視交互管理系統,項目生命周期的前四分之三階段,進行的緩慢糾結,充斥著大量需求變更,新想法的臨時加入。當多個項目同時展開,圖表組件效果是否靈活多變、復用性的高低對制作人員生產力、客戶方耐力、項目最終達成時雙方的消耗力有極大考驗。



          通過對類似競品的調研,發現常見的可視化圖表庫都存在自身的局限性,體量大,功能冗余,更新緩慢。最終促成了我們從兩個維度入手,提煉關鍵詞,簡化并轉化成圖表庫系統的功能點。




          二、設計方案


          圖表存在很多分類方式,基于形狀命名、作者命名、抽象概念命名和數據結構命名等。

          為了更好的幫助使用者快速定位,我們簡化了圖表大分類,依據人對形狀輪廓最初的感知,調動直觀的感受來進行分類和命名。


          整個圖表庫的設計層包含顯性和隱性的兩種,顯性的規范面向用戶,隱性的規范面向開發。
          通過調研常見的工具類產品,結合對產品易用性的理解,我們把產品的顏色方案提出來單獨定義一個全局的顏色方案,以便一套配色貫穿整個項目使用,然后對通用的設置和個性化設置分開設計。



          可視化的組合來源有四種:視覺暗示、坐標系、標尺以及背景信息。
          其中視覺暗示是比較重要的組成,以直角坐標系結構為例,對大分類下的參數進行深入挖掘。




          1. 通用設置


           - 對圖表表現形式的考慮


          從設計的角度出發,我們希望賦予圖表樣式更多的可能性,開放高度自定義的調節參數。


           - 數據強調的表達


          通常用戶在初次瀏覽圖表時會把注意力放在圖形的差異化上,比如突出的顏色、突出的圖形,但并沒有及時將所有的數值聯系起來,之后才會進行比較,然后再看整體、分布和多變量關系。在顏色和屬性系統中單獨設置最大值、最小值的顏色和樣式,可以使得圖表展示信息的信息維度更高一層。



          2. 顏色配置方案

          數據可視化是基于物理世界反饋的信息,通過用各種視覺變量(例如圖形、顏色、維度)把數據進行編碼、再現的過程。
          色彩是數據可視化中濫用和忽視最嚴重的變量之一,也是所有視覺變量中最富于變化的一種。


           - 顏色方案的細粒度覆蓋


          信息圖表除圖形外感官最明顯的就是顏色,為了能夠達到圖表設計的高度自定義,色彩的搭配、自定義的程度,每個圖元都有對應的顏色設置。


           - 對圖表質感的考慮


          從設計的角度出發,嘗試在顏色系統中加入陰影、發光、全局陰影等結構,進一步還原設計的圖形處理習慣,豐富圖表的表達。


           - 預置顏色方案


          可視化項目的配色一般來源于實際需求和3D場景效果的搭配,通常是不能預判配色的。
          在這種情況下如果需要幫助項目的快速搭建,預置方案就要做到覆蓋面廣,適應性強,控制取色范圍,由此提出以下原則。




          3. 參數方案


           - 布局方式


          制定規范時候我們確定了默認的布局方式,綜合實際使用,以柱狀圖為例,寬度滑塊的最大對應100%寬度,圖形撐滿,更貼近使用者的直覺,另外考慮到多端融合,涉及到一些放大預覽的功能,默認選用百分比布局更合理。

           - 數據文本位置


          在實際配置圖表時候,圖形和文字的位置關系千變萬化,為了應對這種情況我們引入了文字基線位置和相對位置作為位置參照。使用中配合偏移量調節基本能覆蓋所有的情況。


           - 圖表代碼


          為了應對項目靈活配置的需求,我們把圖表編輯和Config參數結合,可視化控制生成的圖表Config參數,直接導出到項目使用。



          4. 交互適配優化


           - 不同終端hover交互效果


           - 不同終端預覽交互效果




          5. 動效規范


          除了勻速動畫,為了達成更自然的動態效果,引入緩入緩出速度曲線,同時為了達成更豐富的表達,增加了一條簡潔的回彈曲線

          undefined


          動效是圖表數據表達的一個重要構成,針對圖表的動效,通過總結圖元的運動方式,結合Material Design的一些處理方式,整理了一套圖表元素動效規范集合。

          undefined


          三、設計執行


          1. 編輯效果演示


          針對缺乏靜態數據等真實數據源,檢驗生成圖表的視覺效果的問題,我們為用戶提供了指定范圍隨機數生成功能,可以快速生成與應用項目數據相類似的效果。
          顏色配置方案能在同一項目中起到控制整個顏色風格的作用,可以快速應用到圖表上。

          2. 圖表自定義調節項



          圖表庫在項目中的應用

           藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          截屏2021-05-13 上午11.41.03.png



          文章來源:站酷   作者:RayData實驗室

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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



          熱門的手機用戶輸入設計模式

          ui設計分享達人

          對于任何手機應用程序,如果沒有來自用戶的一些初始和正在進行的輸入,就不會發生任何事情。因此,手機產品設計師、開發人員和產品經理必須了解允許用戶這樣做的最佳方式。

          雖然手機應用程序以及使用它們的用戶通常是獨一無二的,但是有許多常見的模式(新模式和舊模式)被用來解決這個特定的問題。


          用戶輸入設計的6個目標


          在我們深入研究模式之前,了解用戶輸入設計的六個主要目標是很重要的:

          1. 選擇合適的輸入和資料登錄方法

          2. 減少輸入量

          3. 設計有吸引力的數據輸入屏幕

          4. 使用驗證檢查來減少輸入錯誤

          5. 設計所需的輸入文檔

          6. 制定有效的輸入控制


          模式的概述


          在記住以上設計目標的前提下,下面是我們在將本文中詳細介紹的設計模式的概述,在我們的電子書《2014年手機用戶界面設計模式》中有更詳細的介紹:

          1.智能鍵盤
          2.默認值&自動完成
          3.立即沉浸(或“惰性注冊”)
          4.操作欄
          5.社交賬號登錄
          6.巨大按鈕
          7.滑動操作
          8.通知
          9.顯性控件
          10.可擴展輸入
          11.撤銷


          1.智能鍵盤


          Facebook記事本,Android聯系人


          問題
          用戶希望快速輸入信息。


          解決方案
          當用戶點擊應用程序中允許輸入信息的部分時,給他們與輸入數據相關的鍵盤。這使他們不必在字母數字屏幕之間尋找正確的按鈕,或者多走一步來訪問鍵盤。這不僅方便了用戶,而且還指示了需要從用戶那里得到什么類型的輸入。手機平臺允許相應地標記文本字段,這允許在哪些按鈕顯示在更顯著位置方面有一定的靈活性。


          例如,在地址簿或撥號器中輸入電話號碼時,用戶不需要完整的鍵盤。當他們點擊這些字段時,數字小鍵盤就會彈出,而不是整個鍵盤,這樣就減少了不必要的按鈕,簡化了操作過程。類似地,點擊瀏覽器中的URL欄會彈出一個稍微修改過的鍵盤,其中“/”和“。com”按鈕顯示在空格鍵旁邊,而不是符號鍵后面。通過連接到系統提供的這些智能鍵盤類型,你的UI可以根據用戶當前嘗試的操作進行調整。


          2.默認值&自動完成

          Skype, Flightboard


          問題
          用戶希望快速完成操作。


          解決方案
          通過為用戶提供預先填充的默認值或基于先前輸入的數據的提示,預測頻繁選擇的項并使用戶更容易地進行數據輸入。這可以與自動完成功能相匹配,比如在谷歌Play Store搜索中,通過加速來顯著改善用戶體驗。這種模式在標準化用戶輸入和在問題發生之前預測問題方面特別有用。例如,Skype會自動為輸入的電話號碼匹配國家代碼。從用戶的角度來看,這是有意義的,因為他們不習慣定期輸入這些信息,但在這種情況下,這種匹配很重要,因為Skype是一個國際電話應用程序。


          另一種實現方法是保存用戶輸入的最后一項,并在用戶再次輸入或搜索時顯示這些最近使用過的項。例如,Flightboard在搜索框下面列出了以前使用過的位置,以避免用戶再次輸入。大多數地圖或導航應用程序也采用這種模式,在搜索方向時自動輸入用戶當前位置,為用戶節省幾次點擊,因為這是最常見的情況。


          3.立即沉浸(或“惰性注冊”)

          Wunderlist


          問題
          用戶希望在注冊之前先嘗試一下。


          解決方案
          越來越多的應用程序允許用戶在任何事情發生之前——甚至是注冊或登錄之前——立即沉浸在應用程序中。


          記住,他們一次只能做一件事,而且測試每個新產品的時間有限。隨著應用程序的日益專業化,在扶持它們之前找到高質量的用戶或客戶越來越重要——他們可能會討厭你的產品或很快意識到它不是他們想要的。向用戶詢問注冊賬戶所需的信息可能是一件很困難的事情,而且會降低甚至是適合的訪問者的注冊率。在積極的方面,通過讓他們立即體驗你的產品,他們更有可能被吸引,因為他們能夠在第一次體驗時深入探索應用程序。這比我們接下來討論的onboarding walkthrough UI模式更好,因為它向用戶展示而非告訴他們應用程序如何工作。


          對于Carousel或Duolingo等依賴用戶數據來運行的應用程序來說,允許延遲注冊是沒有意義的,但Wunderlist或Houzz等應用程序可以允許用戶在要求他們確認身份之前進入并使用該應用程序。通常情況下,注冊會帶來一些額外的好處,比如在Wunderlist中進行跨設備同步,或者在Houzz中創建一本想法書,這會讓注冊變得更有吸引力。延遲注冊并不總是一個好主意,但是選擇“注冊前試用”可以很好地提高你的應用程序的參與度。


          4.操作欄

          Facebook Paper, Behance


          問題
          用戶希望快速訪問常用的操作。


          解決方案
          從應用程序的操作欄(或iOS術語中的“工具欄”)提供對重要操作的快速訪問。雖然導航條主導了web和早期的手機應用程序設計, 但其他模式的使用,如折疊、滑出式工具欄和側邊欄、指向所有內容的鏈接、按鈕轉換、垂直的和基于內容的導航,產生了更簡單的應用程序視圖,用戶可以專注于一級和二級操作,而不是二級導航。常見的操作有:在應用程序中搜索、共享和創建新內容。這個存留的菜單可以幫助用戶熟悉UI,還可以通過專注于與用戶相關的重要操作清除一些混亂。


          5.社交賬號登錄

          undefined

          Beats Music, Flipboard


          問題
          用戶需要一種更簡單的注冊和登錄方式。


          解決方案
          整合社交賬號登錄方法,允許用戶通過現有賬戶登錄。這意味著他們少了一個需要擔心的用戶名/密碼組合,同時,你也不必擔心密碼的安全性。Facebook、Twitter和谷歌是主要的OAuth登錄提供商,根據平臺和目標受眾的不同,你可以在你的應用程序中提供所有這些或其中之一,而不是讓用戶建立一個他們可能會也可能不會在未來使用的單獨的帳戶。使用這個注冊和登錄模式也可以為你提供一些基本的關于用戶的數據(當他們使用應用程序時,會自動填充數據), 同時,通過不強迫用戶在剛下載的陌生應用程序中輸入他們的詳細信息,讓他們更加舒適。這個簡單的特性可以在很大程度上改進你的UX,因此這種模式正在成為一種期望。


          6.巨大按鈕

          Tinder, Shazam


          問題
          用戶希望立即知道他們可以采取哪些操作。


          解決方案
          理想的觸屏點擊目標大小可能是72 px,但是一些應用程序,像Tinder,也會給你巨大的按鈕讓你確切地知道該做什么, 無論你在什么位置,無論你在做什么,你都能很快完成操作——很難錯過這些巨大的按鈕,即使你沒在仔細看。這在更簡單的應用程序中尤其有價值,因為在這些應用程序中,用戶需要執行的操作非常有限,因此更有理由讓他們在各種情境中更容易地執行這些操作。例如,Shazam是用來看電視或聽音樂的,它實際上只做一件事。對于試圖在這種分心狀態下進行多任務處理的用戶來說,巨大的按鈕是一個巨大的改進。


          7.滑動操作

          Carousel


          問題
          用戶希望關注特定的內容。


          解決方案
          允許內容被滑動或移動。這為用戶提供了一種非常直觀的方式來處理屏幕上的信息。例如,谷歌中的“卡片”現在可以在你不需要的時候被滑走,以清理雜物;類似地,Tinder中的配置文件可以向左或向右滑動,以表示積極或消極的響應。這個模式與我們在導航模式中討論的滑動視圖不同。在這里,滑動手勢被用于一項操作,而不僅僅是瀏覽。有些應用程序結合了兩種滑動模式,比如Carousel,它可以讓你通過將照片滑動到一邊來瀏覽多張照片,也可以通過向上或向下滑動來分享或隱藏照片。郵箱推廣了電子郵件客戶端的左右滑動操作,允許你分別通過向右或向左滑動將郵件標記為已讀或安排為待處理。Secret用讓你發現新菜單的方式來讓你發現新動作。向左滑動一個secret代表你喜歡它。


          8.通知

          LinkedIn, Facebook


          問題
          用戶希望了解他們應該瀏覽的新活動或操作。


          解決方案
          通過標記新內容來突出最近的活動。這個模式有幾種實現方式。例如,在標簽上放置一個計數徽章是由iOS推廣開來的,但現在這也可以在許多其他應用程序中看到,如LinkedIn、Facebook或Quora。Twitter在通知按鈕上也這樣做,但它在時間軸圖標的頂部還有一個小點,以更微妙的方式指示新的活動。另一種顯示通知的方式是在應用程序中使用一個向下拉的橫幅來顯示新活動。Facebook應用程序也能做到這一點,當新聞推送中出現新條目時,它會彈出一個小窗口。


          9.顯性控件

          Secret


          問題
          用戶希望快速訪問那些二級的或僅與應用程序中的特定部分或內容相關的控件。


          解決方案
          清理雜物,讓用戶只在需要時才發現特定的操作。這些看不見的控件可以通過任何手勢來訪問——滑動、輕擊、雙擊、長按等等(我們在手勢模式中討論過)。這使你能夠將這些操作保留在屏幕之外,從而節省一些寶貴的空間。例如,Secret使用手勢而不是可視控件。向右滑動,就會出現一個動作菜單,這是我們前面介紹過的折疊模式的簡化版。在創建內容時,用戶可以在背景上水平滑動或垂直滑動手指來改變背景的顏色和圖案,或者在使用圖片時,可以改變圖片的亮度、飽和度或模糊度。沒有其他控件允許你這樣做——也不應該有其他控件。這種UI設計模式非常直觀、清晰,你一定會看到更多這種類型的交互。Pinterest是另一個使用手勢隱藏動作按鈕的應用程序。長時間按下一個圖像,就會出現一個按鈕,用戶可以通過將彈出控件拖動到該按鈕上來對其進行固定或評論。


          Uber是這種設計模式的另一種實現方式。Uber還可以讓你在預訂和查看車費估算之間進行切換,只要你選擇了你想要的乘車類型,就可以通過點擊滑塊按鈕來查看車費估算。這是一個簡單而又重要的UI設計模式,每當我在做五件事的同時還想搭個便車,同時還要確保Uber不會用峰時價格來騙我的時候,它都會讓我微笑。Snapchat和Facebook Messenger允許你在需要的時候通過滑走所有朋友的賬戶來訪問這些功能。


          10.可擴展輸入

          YouTube


          問題
          用戶希望關注內容,而不是犧牲屏幕空間給控件。


          解決方案
          設計當用戶點擊時會展開的控件。這使得大多數控件在用戶需要它們之前都不會出現。例如,YouTube和Facebook通過將搜索欄隱藏在一個圖標后面來節省屏幕空間,當用戶點擊這個圖標時,它就會展開成一個搜索欄。


          11.撤銷

          Gmail, Chrome


          問題
          用戶希望在沒有中斷(例如:確認)的情況下快速地執行操作,但是可以選擇恢復意外操作。


          解決方案
          為用戶提供一個簡單的方法來撤銷他們的操作,而不只是要求他們事先確認。在某些情況下,某個操作可能會導致不方便或數據丟失,例如刪除電子郵件或編輯一些文本。用戶可能因為不知道會發生什么而完成了一個動作;一個寬容的用戶界面可以讓他們體驗到更多的參與感和友好。對于高級用戶來說,撤銷功能也很強大,他們會喜歡在整個過程中不用UI反復詢問他們是否確定要繼續操作,就能更好地控制局面。在解釋將要發生的事情時,確認彈出窗口可能很有用,但是用戶可能直到看到操作的結果才會理解其含義。在這種情況下,最好是讓開,同時提供一個安全網絡,以防出現錯誤。


          獲取用戶的輸入
          時刻記錄你應該從用戶那里獲得輸入的位置,他們是否曾經查看過這些輸入區域,他們使用這些輸入控件的頻率,他們從哪里來,又從哪里進入應用程序(即用戶流),等等。不斷地重新安排、重新排序、調整大小和調整這些控件,直到你獲得更多所需的操作。當然,當用戶能夠提供輸入時,要深入考慮他們實際上是如何使用你的移動應用程序的——確保你在設計應用程序時沒有遺漏什么明顯的東西。

          文章來源:站酷  作者:馬克筆設計留學

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

          Web產品的適配設計選型

          ui設計分享達人

          開篇


          • 寬度單位我是用百分比還是px?還是rem?區別是什么?

          • 什么是屏幕尺寸、屏幕分辨率、屏幕像素密度、設備像素、css像素?瀏覽器窗口大小和設備大小和分辨率大小區是什么區別?

          • 什么是響應式網站,自適應又是什么?兩者有何區別和聯系?

          • 百分比寬度布局和流式布局和前者的關系是什么?

          • 既然響應式這么流行,為何淘寶、京東等沒有去做,而是單獨開發了一個移動端版?這里面有那些坑需要避開?



          歷史長廊


          在早期,硬件設備落后,網頁使用的是絕對靜態布局為主,絕對固定寬度的布局被稱為是靜態布局(StaticLayout),也有叫固定布局(Fixed Layout)。


          后隨時代變遷,技術發展。因瀏覽器的增多,開發者們忙于兼容各種瀏覽器。在這個期間,實際已經有了針對各設備適配的解決方案,只是未成為主流,這種新布局方式叫自適應布局(Adaptive Web Design,簡稱AWD)。

          在當時,大多指的就是寬度自適應布局。在這種新思想下,又出現了兩派的具體解決方案:百分比寬度布局和流體式布局(Fluid Layout)。


          在當時,大家都還沒有響應式布局的概念,但此時出現了一個新的詞--漸進增強。漸進增強出現后,另一個詞優雅降級也隨之出現了。這里只是舉個典型的例子:gmail和qqmail。這兩個都是百分比寬度布局,都屬于自適應布局,但有區別。


          qqmail就是css hack的完美體現,你用任何一個瀏覽器,幾乎可以看到同一個樣子的郵箱,為的是用戶體驗統一。gmail則使用了漸進增強,你的瀏覽器越新越強,你看到的效果就越好,為的是用戶體驗增強。再后來,Google發布了Android,移動互聯網爆發,html5標準發布。


          互聯網大戰從PC打到了手機。手機雖然屏幕變小了,但是卻提供了更豐富的功能,用戶要求不斷提高,網站更加看重的是用戶體驗了,所以,谷歌式的漸進增強被廣泛認可,結合自適應的思想,出現了響應式布局 (Responsive Web Design)的概念——2010年由Ethan Marcotte提出。


          描述響應式界面最著名的一句話就是“Content is like water”——無論用戶正在使用筆記本還是iPad,我們的頁面都應該能夠自動切換分辨率、圖片尺寸及相關腳本功能等,以適應不同設備。



          現如今,為何需要考慮多設備的兼顧呢,依然是因為時代發展與生活方式的變遷:

          • 即便是PC或Mac用戶,有查顯示只有一半的人會將瀏覽器全屏顯示,而剩下的一般人使用多大的瀏覽器,很難預知;

          • 臺式機、投影、電視、筆記本、手機、平板、手表、VR……智能設備正在不斷增加,“主流設備”的概念正在消失;

          • 屏幕分辨率正飛速發展,同一張圖片在不同設備上看起來,大小可能天差地別。

            結合自身產品用戶訪問瀏覽器分辨率

          • 鼠標、觸屏、筆、攝像頭手勢……不可預期的操控方式正在不斷出現。

          因此我們需要在了解基本布局方式的特征下,選擇適合自身產品的布局實現方式。


          布局方式對比


          靜態式、自適應、流體式、響應式布局,A+R混合布局的特點對比如下


          靜態式布局:

          窗口縮小后內容被遮擋時,拖動滾動條顯示布局。不管在哪種設備,哪種瀏覽器上瀏覽都是一個樣。移動設備上則顯示太小或不全。



          自適應布局:

          用自適應技術(Adaptive)我們可以開發和提供不同的布局來為類似純觸屏或者混合觸屏設備這樣的一類具體場景提供最好的體驗。


          分別為不同的屏幕分辨率設備設計不同的樣式布局,相當于多個靜態布局組成的一個系列合集,每個靜態布局對應一個屏幕分辨率范圍,頁面通過百分比自動適配設備屏幕分辨率和可視窗口大小,當可視窗口改變時,不會出現橫向滾動條,UI,圖片,文字會自動縮放,元素內容、布局、交互方式基本不變。



          彈性布局:

          以百分比作為頁面的基本單位,可以適應一定范圍內所有尺寸的設備屏幕及瀏覽器寬度,并能完美利用有效空間展現最佳效果。



          流體式布局:

          屬于自適應的一個子集,也是通過百分比自動適配設備屏幕分辨率和可視窗口大小,不同于百分比自適應的是隨著窗口大小的改變,頁面的布局會發生小的變化,可以進行適配調整,這個正好與自適應相補。



          響應式布局:

          如果從廣義上講,響應式布局實際上就是更好、更機智、更靈活的去實現自適應,他們都算是一種彈性布局。再通俗點講響應式重在于「響應」它會隨著設備屬性(如寬高)的變化。


          頁面的設計和開發應當根據用戶行為以及設備環境(系統平臺、屏幕尺寸、屏幕定向等)進行相應的響應和調整。具體的實踐方式由多方面組成,包括彈性網格和刪格、布局、圖片、css media query的使用等。


          狹義上講,響應式網頁設計指的是一個網站能夠兼容多個終端——而不是為每個終端做一個特定的版本。



          A+R混合模型布局

          R和A上的區別

          當響應式設計在基于預定義斷點之上用CSS或者JS調整布局和內容。調整方法提供基于用戶代理和設備類型的預結構化模版。


          他們之間主要的區別是DOM結構,當采用響應式思維開發時,HTML代碼在各種情況下都會一樣(除非你用JS移除某些DOM節點),而在自適應開發中我們可能會有不一樣的代碼結構和體驗。


          R采用流體+斷點,在斷點之間,頁面依然會隨窗口大小自動縮放(通過fluid grid),直到遇到斷點改變界面樣式布局甚至內容。R一般來說需要在網頁設計初期就開始(通常采用mobile first策略),所以舊的網站要做RWD很可能要完全重建。


          A只在針對幾種分辨率(如320,480,760,960,1200,1600px)進行優化,在斷點之間的自動過渡比較少。而A則采用保留現有桌面網站(desktop version)而對于更小的分辨率做針對性的優化(適應),減小重構的成本。



          兩種設計思維都是有效的,需衡量在項目中有多少組件、復雜性如何以及是否存在一種體驗是適合所有用戶的。開發web應用時經常會用到響應式設計,例如通過自適應開發來構建定制化體驗。


          兩種方法各有利弊,但是如果同時使用它們到底會得到什么呢?A+R模型結合了基于單個主要臨界點的自適應和響應式方法。


          混合式布局就是為不同終端設備的屏幕分辨率定義布局(適配各種尺寸的PC、手機、穿戴設備等等),在每個布局中,頁面元素隨著窗口調整而自動適配,混合了百分比、像素為基本單位的組合方式??梢园鸦旌鲜讲季挚醋魇菑椥圆季?、自適應布局的融合。



          自適應布局、彈性布局、混合布局都是響應式布局方式的一種。其中自適應布局的實現成本最低,但拓展性比較差;而彈性布局與混合布局效果都是比較理想的響應式布局實現方式。


          很多時候,單一方式的布局響應無法滿足理想效果,需要結合多種組合方式,但原則上盡可能是保持簡單輕巧,而且同一斷點內(發生布局改變的臨界點稱之為斷點,后面內容會講到)保持統一邏輯。


          否則頁面實現太過復雜也會影響整體體驗和頁面性能。一般通欄、等分結構的布局適合采用彈性布局方式,非等分的多欄結構布局則需要采用混合布局的實現方式。


          選型

          如何考慮實踐過程中的判斷呢。一是看應用場景,二是看如何設計“響應式”方案。簡單、輕量的頁面直接用media query實現響應性就很好。比如blog、小型企業站之類?,F在的CSS框架基本都具備響應性。


          但請注意響應式不僅僅是響應式布局。對于大型站簡單用media query是遠遠不夠的。于是在同一個controller層上,識別UA,渲染不同版本的模板,組合相應的靜態資源。這也算是響應式。開發及維護成本明顯提高。

          當各個版本間的差異很大時,維護成本很可能會大到無法接受。即便分開做,架構上也要調整,后端服務化,應用層app化。


          根據不同公司的技術特點,調整的成本也難講是否可行。對于大型站,分開做更清晰,同時用響應式組件解決復用、功能同步的問題。總之,根據場景響應式可以從各種層面,各種粒度上做。這是現代web開發的特點。


          建議開發一套響應式電腦網站(過渡到平板端,不過渡到手機端)和開發一套響應式手機端網站(過渡到平板端以下的尺寸,不過渡到平板端)響應式布局有可能造成冗余的代碼較多,對研發的要求也更高,比如如何更好地讓圖片,適配,UI動畫自適應各種布局。


          大站還是要考慮數據計算和承載的問題,會對桌面和移動端輸出不同數據,減輕壓力。



          實踐與技巧

          首先,我們需要了解幾種分辨率的差別。


          ps:原生應用可查詢橫縱兩個方向的像素密度,通常瀏覽器可查詢1個系統像素對應多少物理像素。而設計角度通常需要參考的是所獲取的系統分辨率


          以一個SaaS類后臺產品為例,對于基本流量來自Web端網頁的產品而言,需要了解當下的瀏覽器分辨率現狀 Web端不同屏幕分辨率占比情況,數據來源百度統計,如圖所示:



          如上所述,選擇適配方式時,設計目標為:區分web與pad端可共享的設計布局大于手機端,且產品規劃上web端為主流量來源,pad端屬于短期兼顧??紤]技術維護成本與開發成本的平衡,于是判斷需要選擇A+R模式來完成產品的跨端設計。


          自適應(A)方法能讓我們在不同的設備上有不同的體驗、內容甚至是功能。如將960px作為主要的自適應臨界點,根據全局統計信息定義,我們會得到一些相似處:

          • 左側的可視區代表整個屏幕小于960px時的具體布局和內容

          • 右側的可視區代表整個屏幕大于等于960px時的另一種布局



          在使用響應式(R)技術時,我們可以利用主要臨界點創建兩個互不相同的體驗情景,每種體驗里,我們都可以在可用空間內定義二級臨界點去調整布局。



          通過結合自適應和響應的方法,我們得到A+R模型。利用自適應技術,我們將致力于體驗和功能,作出兩種不同的情景設計。使用響應式組件,我們可以處理上下文內的UI組件和布局。



          這種設計方法要求設計師真正了解他們想要提供的體驗,以便于定義要遵循的模型。此模型非常適合那些在較少功能或結構完全不同的小型移動設備上運行的大型APP。就像你看到的,你的產品將具有很強的靈活性,但同時也很復雜。


          因為你要處理不同的代碼庫和環境(非強制性),Twitter、Facebook和Github將此模式應用在他們的移動網站上。如果你在移動設備上瀏覽這些網站,則可以根據移動用戶的期望來檢驗它們是如何改變的用戶體驗的。


          其他輔助手段


          刪格

          柵格系統可以幫助我們設計,但卻不能保證我們的設計。它有多種可能的用途,并且每個設計師都可以尋找適合其個人風格的解決方案。對于簡化復雜的響應式布局規則而言,這是一項十分有效的輔助手段。


          1. 列和槽(Columns and Gutters)列(Column)用于對齊內容。其中的槽(Gutter)是指相鄰列之間的空間,把控頁面留白,有助于分隔內容。



          2. 頁面邊距(Side Margins)頁邊距是指內容和屏幕邊緣之間的空間。將邊距寬度定義為固定值,這些值決定了每個屏幕尺寸的最小呼吸空間。



          3,用于組成柵格的列數稱為列結構。8、12、16和20是響應式布局中最常見的幾種列結構。而這取決于我們對產品的設計要求。12列結構是相對靈活的。它可以進一步細分,將內容排列在4-4-4或3-3-3-3大小的文本框中,也有部分設計系統采用來24列的形式,如Ant-D

          4,斷點是指屏幕尺寸的特定范圍,列結構、列寬、槽寬和邊距都取決于斷點。在這個范圍內,布局會根據可用的屏幕尺寸重新調整,以獲得最佳的布局視圖。


          如果較小的屏幕有足夠的可用空間容納內容,則列將按比例縮小。如果一列的內容無法在較小屏幕上顯示,該列將垂直放置圖文內容。

          5,網格規則,列跟槽的寬度是以網格作為基本單位來做增減,所以應該先定義好柵格的原子單位,“網紅款”8點網格指的是設計頁面時,也應該遵循8點規律。值得注意的是,列跟槽的值盡量取8的倍數,但不是非得是8的倍數。


          產品中各類元素應該遵循這個倍數原則(圖標、組件大小等),不同的設計系統根據自身需求,設定這個規則。例如在Material Design中使用的是2X網格。

          6.流體柵格與混合刪格

          流體柵格有不同寬度的列,固定的槽和固定的邊距。流體柵格有靈活的內容寬度,根據屏幕大小變化在流體柵格中,列可以增長或收縮以適應可用空間。


          混合柵格既有不同的寬度,也有固定寬度。在現代布局中,一些元素超出了網格邊緣,與屏幕邊緣對齊。頁眉、頁腳、出血都是一些常見的例子。


          如果內容寬度大于可用的屏幕尺寸,那么一個固定柵格就會轉變成一個適應屏幕可用空間的流動柵格,以充分適應內容。

          結語


          設計需在技術方案前介入,根據你的產品特點,進行設計方案評估,可借助的手段有刪格,網格規則等,設計斷點規則時,需關注設備的常見系統分辨率。


          移動和桌面設計的差別遠不止是布局問題。只要有足夠的編程量,這些差別是可以通過響應式設計來解決的。事實上,你可以認為如果一種設計不能兼顧兩種平臺的主要差別,就不能算是合格的響應式設計。


          但是,如果確實想要處理好平臺間的所有差異,我們就回到了原點:進行兩種不同的設計或者使用A+R的模型,在尋求合適的過程中,關注技術的革新。


          A與B不是硬幣的正反面,它們為了解決同一個問題而生,是同一種思想的延伸。

          文章來源:站酷 作者:酷家樂

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



          日歷

          鏈接

          個人資料

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

          存檔

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