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

          信息有各種形式,圖、文、視頻、音頻等,而承載信息的形式也多種多樣。
          本文意將信息容器進行整理歸納,以總結出一些經驗規律。



          Part 1

          ————————

          信息容器的概念


          信息容器是承載信息的載體,位于內容層。要理解信息容器的概念,首先要理解界面中的層級關系。一個界面除了豎直方向和水平方向維度,還有縱深維度


          從底層(遠離用戶)到頂層(靠近用戶),基本上可以分為以下幾層:

          1. 背景層

          2. 信息層

          3. 局操作(各種常駐于屏幕的bar、懸浮按鈕等)

          4. 浮出層(模態類型的浮出層還需要有蒙版進行隔斷)



          本文要討論的“信息容器”,指的是信息層上,裝載信息的載體。信息的類型多種多樣,可以是文字、圖片、視頻、各種操作控件等。




          Part 2

          ————————

          信息容器的常見類型


          常見的信息容器主要有2大類:列表卡片。


          在整理案例的時候,我不禁產生了一個疑問,到底什么是列表,什么是卡片?如何界定和區分兩者?這個問題乍一聽有點無厘頭,列表不就是列表嗎,多個布局一致的狹長單元組合在一起,就形成了列表。那么什么是卡片呢?和屏幕兩側保持一定間距,帶圓角的就是卡片嗎?


          我們不妨先看看下圖案例:




          2.1 列表和卡片該如何界定?

          為什么類似的布局形式,上圖中,圖1給人感覺是列表,圖2給人感覺是卡片,圖3既像列表又像卡片?

          從內容層面來說,包含的信息類型有:文字、圖標/圖片、按鈕。幾乎沒有太大區別。

          是什么導致我們觀感上的不同呢?

          電商案例也許可以給出答案。



          從電商產品的商品列表頁中可以看到,用戶可以自主選擇兩種不同的商品展示模式:列表模式卡片模式。

          這兩種模式幾乎可以對應“列表”和“卡片”兩種信息容器樣式。完全一致的信息量:主圖、標題信息、價格信息、輔助信息,相似的展示效率(一屏展示約4.5個商品),不同的信息容器展示形式給人不同的感覺。


          單純從信息層面或者視覺層面都不能界定列表和卡片,如果多維度疊加限定又太繁瑣,因此本文給出的列表和卡片直接的區別界定是:可以自主定位關鍵線索,規劃視覺瀏覽動線。如果視覺瀏覽大方向是豎直的,那么就歸入列表范疇,瀏覽動線不是豎直而是折線的,都算在卡片范疇。



          2.2 常見的信息容器分類:

          除了上面說的,最常見的兩類信息容器:列表和卡片之外,還有另外兩種形式,分別是:無容器和復合容器。

          這些容器具體有哪些特點,我們一一來看。






          Part 3

          ————————

          列表


          列表的定義:將結構一致的信息單元在豎直方向上鋪陳下去,形成的信息集合。

          不同場景要呈現的信息側重不同。


          舉例幾種常見的列表形式:

          1. 用戶/消息列表

          2. 圖文列表

          3. 功能列表

          4. “卡片型”列表


          3.1 用戶/消息列表

          用戶/消息列表的內容結構很清晰,頭像+身份+內容提要+輔助信息。

          圖片天然地比文字更具有吸引力,視覺上的優先級排序是頭像>身份>內容提要>輔助信息。

          當然用戶可以很方便地選擇關注的對象是圖片還是文字,這體現了列表的優越性,瀏覽動線豎直,可以方便用戶根據自己想要的索引快速定位。


          這里值得討論的是頭像用方形還是圓形的問題,相信大家都想到過這個問題,同樣是社交產品,qq是圓頭,微信是方頭,這里邊有什么原因呢?

          本文嘗試分析一下,僅是個人意見,歡迎討論。



          按照理論,圓頭親切的形狀感知更加適合輕松基調的產品,方頭嚴謹的形狀感知更加適合嚴肅基調的產品。這解釋了電商類型產品(淘寶、京東)的信息通知一般都是圓頭的,匹配輕松愉悅的網購體驗,而金融類產品(支付寶)多是方頭。對于同是熟人社交類產品的微信和qq來說,qq用戶層年齡偏低,屬性相對更加活躍,更加輕松的圓頭可能更適合此類用戶。


          以iOS為例,當用戶向左滑動列表時,呼出針對該列表單元的操作。具體列表對應具體操作,操作項數量不同。


          方案A:

          優點:操作底板寬度適應文案,不會出現空間局促的現象。

          缺點:當文案字段長時,列表被推出屏幕外的內容較多,當用戶操作分心時,可能會忘記正在操作的對象,雖然這種情況極少發生。


          方案B:

          優點:操作底板固定,文案折行規則明確,既不會造空間擁擠,被擠出屏幕外的列表區域可控。


          方案C:

          優點:搭配圖標,視覺更豐富。

          缺點:圖標占據了一定高度,導致文案無法折行,列表被推出屏幕外的內容較多,與方案A類似。


          綜上,個人認為方案B是最合理的,對于文案長度的寬容度高,即便文案較長,也可以保證視覺和諧,并保留較多列表內容。


          用色策略上,使用的是為大眾所接受的“語義色”,一些具體的顏色在長期經驗積累中形成了固定的語義。


          當用戶觸發了帶有一定破壞性的操作時,需要用戶進行二次確認

          并不是所有情況都需要二次確認,二次確認的樣式也有多種。


          同樣都是模態視圖,要表達的信息也相似,都是要求用戶進行選擇,為什么有些產品選擇將對話框居中,有些產品選擇將對話框放在底部?這里涉及到關于模態視圖的相關知識點,本篇文章旨在討論信息層面的內容,模態視圖涉及到了浮出層的內容,將在下篇文章中進行詳細探討。本篇文章不做過多延展。



          3.2 圖文列表


          信息流產品一般是由圖片+重點文案+標簽(可有可無)構成。

          不同性質的產品想要突出的重點不同,根據內容的重要性權重來分配視覺占比。


          從上方幾個例子中我們可以看到:

          在圖文比例從左到右依次提升;

          圖文布局案例1-3使用了左文右圖的方式,案例4-7使用了左圖右文的方式。


          搞清楚如何圖文布局和設置圖文比例,就基本解決了資訊流頁面最關鍵的問題。



          資訊列表或稱feed流,主要根據用戶喜好定向推送內容。除了從用戶日常瀏覽、搜索等行為中提取用戶喜好信息,用戶主動反饋的信息精度更高,用戶不惜花費更多操作成本來提示產品,對內容不感興趣。


          從視覺上說:

          1、提交反饋的入口(小而淺的icon)都不明顯,有些產品用“更多”來提示用戶,有些產品用更加負面的“關閉”來提示用戶。當用戶對內容產生較為強烈的反感時,才會注意到屏蔽入口。常規瀏覽時,該圖標不會影響用戶注意力。

          2、反饋形式采用模態對話框,用戶需要選擇具體操作,是屏蔽內容或作者、還是舉報或不感興趣。

          3、對話框是否有指向性:從表意明確的角度上來說,帶有箭頭的氣泡更有利于用戶定位對象。


          從交互上說:

          反饋入口熱區較小,容易誤觸,大多數情況下,用戶不會注意和點擊該圖標,用戶是以瀏覽為主要行為。




          3.3 功能列表


          列表索引一般還是定位文字為主要形式,不同用戶的認知水平不同,圖標表意始終是一大難點,多用為輔助記憶或單純提升視覺美觀。圖標雖然是體現設計風格的重點,但是在具體情境下,如設置頁,用戶更加在意快速找到自己要找的內容,多度的圖標樣式,實際上會折損用戶的檢索效率。


          一般功能頁面或放置許多功能,常常會超過十幾項,這種情境下,檢索效率低下是一個痛點。

          如何提高檢索效率?—— 分組



          分組給用戶提供了認知線索,根據格式塔原則,用戶總是傾向于把距離近的、樣式統一的元素歸位同類。

          毫無分組顯然對于檢索是不利的,用戶需要逐一瀏覽,該情況適用于列表項無法分組時,如果有分組條件,務必分組,幫用戶節約篩選成本。


          UI界面中,列表的分割方式常見的有以下3種:

          1. 線條分割

          2. 塊面分割

          3. 間距分割



          3.4 “卡片型”列表

          在我們的固有觀念里,大圓角,不通欄,有投影的形象就是卡片。

          這種樣式也越來越盛行,許多產品嘗試將列表也用“卡片化”進行包裝。

          雖然是相當細節的點,但是精細化處理之后的結果就立刻會與批量化處理的結果拉開差距。

          產品級的風格統一來源于點滴細節。





          Part 4

          ————————

          卡片


          卡片的類型繁多:單列大卡片、泳道、內容流(兩列網格、瀑布流)、宮格


          4.1 大卡片

          從內容展示效率上來講,單張大卡片就占據占據屏幕(劉海屏)超出一半的高度,用戶需要不斷滑動屏幕瀏覽下方內容,操作成本較高。大卡片形式對內容本身,如圖片的質量要求很高。這種模式常見于圖片社區或垂類電商產品,圖片社區(如躺平)本身較為小眾、即便是UGC(用戶產生內容)單元,用戶上傳的圖片素材平均水平也較高,垂類電商(如Nike)圖片品質由編輯控制,質量高且穩定。以上類型產品不以量吸引用戶,用戶往往更加在意內容本身是否優質。用戶沒有帶著明確的目標,心智更加類似于瀏覽雜志。產品提供什么內容,就進行瀏覽。從上方案例可見,除了微信讀書之外的3款產品首頁都沒有突出搜索功能,而是以信息流呈現為主。


          與列表分割一致,卡片也有對應分割方式。


          大卡片占據屏幕面積大,理論上大卡片的內容質量是經審查的。部分產品不存在大卡片容器的交互,點擊卡片直接進入詳情頁。部分產品通過比較低調的方式向用戶收集對于內容的意見。如微信讀書長按卡片,可以選擇不再顯示該卡片內容,產品收集反饋,對于用戶喜好的描述可以進一步具象準確。長按不是一個高頻手勢,用戶觸發該手勢往往是試探性的,代表用戶確實對于內容有意見要傳達。躺平使用了簡約三小點樣式的“更多”圖標來收納不常用的收藏和舉報操作。




          4.2 泳道

          何為泳道?顧名思義,常見的滑動手勢是上下方向滑動,但有時也會出現橫向滑動的情況。一系列對象在一條橫向軌道內左右滑動,該類型的形式組合在一起,就好比泳道賽道一般。


          可以橫向滑動以查看內容的呈現形式,稱為“泳道”。泳道可以有多種形式。



          停止位置隨機:

          內容與手勢相關度高,比較自由,但停止位置隨機,不能保證停下后用戶能完美看到當前卡片的所有信息,需要用戶微調卡片位置。


          停止位置固定:

          根據用戶滑動速率,模擬物理慣性和摩擦,判斷最終展示哪張卡片,并將卡片呈現在屏幕中部,確保卡片上的信息都可以讀取。這種交互更加合理,給滑動設置卡點,類似banner效果。




          4.3 雙列卡片

          雙列卡片可以看成是大卡片(單列)的另一種表現形式。這種形式更加提高了空間利用率,對于單一信息展示更加克制。平衡了效率和效果,是電商、圖片社區、視頻等產品類型的首選表現手法。


          雙列卡片可以細分為兩大類:

          卡片流(對齊)、瀑布流


          卡片對齊:

          優點:規整統一,視覺動線清晰,瀏覽舒適。

          缺點:對主圖尺寸要求高,確定的比例會對商品展示有一定局限。


          瀑布流:

          優點:圖片尺寸寬容度高,滿足一定比值區間即可。保證商品的展示完整度。錯落的布局容易形成節奏。

          缺點:不容易進行比較,若要進行圖片間的對比,比較困難,視覺動線混亂。



          兩列式的卡片布局需要注意內容層與背景層的區分。

          大多數產品的背景層是淺灰色,內容層是白色,色差可以建立區分。部分產品背景層是白色,或者說取消了背景層的概念,那么要建立卡片之間的區分,就需要通過間距或者卡片加底色的方式。


          個性化推薦模塊對電商產品尤其重要,準確地將用戶可能感興趣的產品推薦出去,可以減少用戶的搜索、篩選步驟,提升購買效率和愉悅感,從而提升用戶對產品的評價。因此,不斷收集用戶的喜好相當重要,盡管各種算法已經讓產品顯得越來越智能,但依舊要給用戶留下提建議的入口。

          上文介紹了資訊類產品中,用戶如何給出對于具體信息的反饋,電商類產品原理也大同小異。


          從功能上來說,淘寶、閑魚、京東,都是通過用戶手勢(點擊圖標或長按卡片或兩者皆可)來呼出選項,用戶通過選擇來表達意見,從而使推送更精準。


          從視覺上來說,淘寶和閑魚的反饋形式類似,都是在卡片上添加一個黑色半透明蒙版,將有限的選項豎直碼放在卡片上,類似小型模態的概念(但是這里不同于嚴格的模態視圖,沒有限定用戶必須要做出選擇,用戶可以直接劃走)。而京東的邏輯不同,使用了傳統阻斷性模態視圖的處理方式,將下方卡片用蒙版遮擋,希望用戶專注于選擇。


          從阻斷感上說,京東的阻斷干是最強的,將用戶從原本的瀏覽行為中提取出來,請用戶嚴肅地做出對于當前商品的反饋。這樣收集信息的效率更高。由于選項是盛放在帶有指向性的小氣泡之上,針對性足夠,且延展性好,氣泡的高寬都可以調整,而淘寶和閑魚的處理方式,在極端情況下,如選項超過5項時,所有內容放在卡片之上,空間就很緊湊。


          這類操作比較隱晦,可點擊按鈕很不明顯,長按手勢也不常用。同樣是當用戶有明確反饋需求時,才會尋找反饋入口,一般情況下,用戶不會注意到。以用戶常態下的瀏覽行為為最優先。


          閑魚的交互做的很細致,蒙版出現采用了水波的形式,用戶抱著要吐槽的心態,這種精致有巧思的小動效在一定程度上可以緩和用戶的煩躁的心理。



          除了電商類產品,部分視頻類產品長按卡片也會呼出對應效果。

          案例1和案例2,長按卡片,都是出現視頻片段的預覽。效果類似iOS的3Dtouch,在相冊中按壓具體照片即可預覽。而案例3,點擊“更多”圖標,呼出操作。然而選項只有1項,不符合邏輯,單一的選項無法構成“選擇”,這會讓人有點摸不著頭腦。



          4.4 宮格/網格

          如果把界面看作是一張大網格,不同的內容占據著不同位置、不同面積的頁面區域。

          除了我們已經熟悉的“有序”布置,如從上到下依次排列內容(大卡片),或者從左往右依次排列內容(泳道),還有更加靈活多變的排布方式可供選擇。

          布局的本質是分配界面面積,用以盛放內容,同時運用面積對比進行突出。除了面積對比的方式外,還有其他方式可以突出關鍵內容。





          Part 5

          ————————

          無容器 & 復合容器


          無內容的呈現形式比較簡單:內容直接置于背景層之上。減少視覺負擔,內容為主,形式為輔。

          復合容器是指超過一種的容器形式的組合,如卡片中包含列表、卡片中包含泳道等。


          5.1 無容器


          5.2 復合容器




          Part 6

          ————————

          組合與強調


          不同的信息容器組合在一起,搭建一個分工明確的界面。界面中不同的信息需要套用合適的形式去呈現。有層級就有對比,對比越大,層次拉得越開,重點就越突出。


          建立對比的策略:

          色彩對比、面積對比、樣式對比、Z軸高度對比、靜態動態對比




          文章來源:站酷  作者:doo_W

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

          狀態可見性原則,你真的弄懂了嗎

          資深UI設計者


          這一年,更多的是關于交互的思考。如果說界面是外表的話,那么交互就是其靈魂,只有交互合理的產品,才能夠讓用戶更好的使用,而交互細節成熟的產品對體驗上的提升則更巨大。寫這篇的起源是平日在設計評審時或多或少會遇到以下的交互問題:

          在思索如何能夠盡量避免遺漏細節的過程中,發現狀態可見性原則對于這些細節有比較重要的指導意義。這一原則想必大家都不陌生,但可能并沒有引起大家的重視,且網上大部分文章對于此原則的解釋都比較簡短。因此在探索過程中產出了這篇比較詳盡的關于狀態可見性原則的深度解讀。目錄如下,重點已圈好~

          大家可以根據上述目錄來進行選擇性閱讀,當然全文閱讀也是極好的~


          1.1 相關問題闡述

          我們在開頭闡述了可能遇到的一些問題。而以上情況的出現,都源自于我們在設計時思考的不夠全面,很多時候都忽略了某些情況下的設計,導致有些關鍵體驗上的問題未被發現。我們可以看下微博和知乎在斷網下點贊的例子。


          可以看到,微博在斷網下依然有點贊動作的反饋,且沒有任何異常提示,這樣會導致用戶大多數以為此次操作是成功的。但知乎在斷網情況下,點贊是不能生效的,且有消息提示“異常提醒”。這樣的話其實就能夠讓用戶明白此次操作沒有成功。在這種場景下,微博的點贊就屬于“不恰當的反饋”。而這些設計,都可以歸因于狀態可見性原則的范疇。


          1.2 狀態可見性原則定義

          讓我們先了解一下狀態可見性原則的定義。這是尼爾森(Jakob Nielsen)-人機交互學博士,于1995年1月1日發表了「十大可用性原則」。而可用性原則位于十大可用性原則之首。


          雖然只有這么一句話,但其中包含的意義比較重大。我們現在所使用的系統,都運用了狀態可見性原則,如果沒有,那么系統幾乎會掉入不可用的現象。而系統在使用體驗上的差異性,有很大一部分原因也在于可見性原則運用的好與壞。


          我們來舉一個生活中的例子來幫助大家理解。當你手機沒電,你用充電器連接手機時,在連接的一瞬間(恰當時間),手機狀態發生變化(恰當反饋)讓你成功獲取手機正在充電的信息(系統狀態)。如果在某個環節出現問題,比如連接上手機2分鐘后(不恰當時間),手機狀態才發生變化。那么你肯定會認為哪里出現了問題。這就是狀態可見性原則的基礎運用。


          那么我們如何能夠深刻理解一個原則呢,最簡單的做法就是將其拆分,并結合實例理解。下面通過原則拆解來進行深刻解讀。

          我們將拆解分為以下三個部分,下面的篇幅會更詳盡地進行說明


          2.1合理時間的定義和表現

          時間在這里指的就是系統的響應時間,而合理則可以理解為時間的長短。這句話可以理解為從用戶執行操作到反饋出現的間隔時間是否正常,是否有影響到用戶的正常體驗。


          當我們在進行打字輸入時,我們敲擊鍵盤的同時,屏幕上就會出現對應的文字。而如果出現文字的反應時間過長,我們就會感覺到明顯的卡頓,此時的響應時間就會變得“不合理”。


          根據Robert B. Miller在他的研究《人機對話的響應時間》中以及其它相關資料,制作得出以下結論圖

          以上是人機交互響應時間的總覽,接下來細節深化每個時間點對應的操作。

          我們先看100ms以內的。我們平時使用的小組件動畫,比如說按鈕反饋,勾選反饋,以及其他需要瞬時反饋的操作,基本都是在100ms內完成的。

          在看100ms-1s區間的,在這個期間進行的動畫,用戶能夠很清晰的看見動畫發生的過程,而又不顯得遲鈍。我們普通UI中應用的動畫則大部分在100ms-500ms這個范圍內?!緸楹卧谶@個時間內呢,個人的理解是:對于發生在UI界面內的動畫,100ms內的動畫太快,人只能感受到開始和結束的狀態,不能看見發生過程,因此一般大于100ms,而500ms是用戶即時感知的最長時間,因此小于這個范圍內的動畫較為合理】

          最后看下1s-10s這個區間的:在這個階段,最有可能進行的就是相關頁面的加載行為,或者某些小型文件的上傳和預覽。針對于這種情況,我們一般會在加載進行中,添加對應的加載效果,來緩解用戶的焦慮和等待情緒。

          最后則是10s以上的,一般用于大型文件的上傳或者弱網環境的加載過久。

          大約10秒鐘后,用戶的情緒將達到極限,內心將開始產生疑惑,超過10秒,用戶往往會離開網站,而不是試圖繼續恢復他們一開始想要做的事情。


          因此,我們在進行系統設計中,需要對超過這一時間內的行為,進行對應的反饋。比如加載超過10s的時候,我們是不是需要給用戶提供離開的選項,或者提示用戶重新加載這樣一種行為。我們可以看下高德和美團在加載中的例子

          我們可以看到,在到達10s后,美團自動給出了一個當前網絡不可用的,請檢查網絡的提示,并終止了加載進程。而高德地圖則是沒有任何提示,自動結束了加載。相比之下,美團能夠讓用戶明白為什么中斷了該進程,也就擁有了更好的用戶體驗。


          且對于一般情況下都超過10s以上的形式,我們無須讓用戶停在當前頁面等待。比如微博或者抖音的視頻上傳,一般會消耗比較久的時間,因此當用戶點擊上傳后,都只會留一個小地方來展示上傳進度,用戶隨時可以做其他的事情,這樣有效避免了用戶長時間等待的問題。


          以上則是常見的在合理時間內的表現,但目前也存在一些特殊場景:

          比如時間延遲,圖蟲和微博會在用戶停留幾秒后增加評論區域的顯示,根據用戶停留時間,判斷用戶對當前內容感興趣,以此來增加用戶的互動。

          類似的這種設計還有抖音的評論分享,當超過一定時間后,評論圖標自動變為朋友圈圖標。而在PC端,也有一個很典型的案例,不知道大家注意到沒有,就是關于hover的延遲。我們在使用hover顯示時,一般可能大家認為中的都是鼠標移動上去立刻顯示,但在某些應用場景中,延遲300ms再進行hover顯示,會更合理,舉例如下:

          大家可以看到上圖,在你快速移動時,是不會顯示下方的補充說明的。在停留大概300ms后,則會出現提示。其實這里對應了兩種用戶場景。第一種是快速移動的場景,有利于用戶切換不同頁簽時不打擾用戶;而在停留時,用戶則是想要看更詳細的信息。因此在這里使用hvoer延遲既能不打擾用戶,也能滿足用戶的不同需求。


          這里是之前做的一個案例,就是由于沒有考慮到hover延遲,從而使得用戶在快速移動時會讓hover的信息產生干擾。

          以上的內容都是針對于時間的詳細解釋。只有了解在對應的時間系統處于哪種狀態,我們才能夠滿足狀態可見性原則中“恰當的時間”這一原則。從而更好的對系統進行對應的交互設計,讓用戶在使用產品時獲得優秀的體驗。


          按照目錄接下來應該講反饋了,但在反饋之前想先提及一下頁面信息呈現。只有當用戶理解當前頁面所表達的信息后,才能夠進行接下來的操作,從而得到對應的反饋。在這里主要提及兩個點,一是核心信息,二是預期信息。

          加餐時刻1:界面核心信息的呈現

          一個用戶界面如果沒有核心信息的呈現,那么給到用戶的反饋是很弱的,用戶第一眼都不知道從界面中能夠獲取什么內容。尤其是在移動端核心信息的呈現更為重要:

          比如上述兩個案例,在界面上只呈現了最重要的內容,移除了其他全部干擾內容,讓用戶更聚焦。當然平時接觸到的不可能全部是這種頁面,我們在頁面信息呈現較多時,也需要進行重點信息的呈現。在這里放一個動態的案例讓大家對比一下重點區分的形式

          加餐時刻2:界面預期信息的呈現

          除了核心信息,還有預期信息的呈現,說白了其實就是元素的可交互性與不可交互性。當事情按照用戶預計的方向運行時,用戶會有強烈的控制感。在PC上,用戶可以使用鼠標懸停來判斷該元素是否可交互,但在移動設備上,用戶只能通過點擊來判斷是否為交互元素


          這就要求我們在移動端設計時需要清晰地考慮到可交互元素與不可交互元素在外觀上的區分。我們先來看一個關于微信的例子:

          大家可以看一下微信的數字呈現,除了默認的黑色字體外,是不是還出現了一種淺藍色字體。而你點擊藍色字體,則發現可以調出動作面板。而黑色字體則不會。


          這就是利用顏色的區分來引導告知用戶部分信息的可點擊性。而目前關于移動端可交互元素如何設計,如何讓評審時不再聽到“你這個看著像不可點的”這句話。根據相關資料和過往項目,總結出以下幾點:

          首先根據目前人們的認知,基礎控件類型的都是可以操作的,比如按鈕,導航欄、底部標簽欄等。下圖為工作中做的一些基礎控件:

          拋開基礎控件,剩余重點是文字類。文字類在不加任何提示的情況下,用戶會默認為不可操作的對象。一般我們通過下列幾種方式來體現其可操作性。

          介紹了可交互性,那么再來講一下不可交互性的元素。不可交互的部分有一個非常重要的點,就是應該需要讓用戶認識到該元素為什么是不可交互的,不對用戶造成困擾

          不可交互的處理方式一般分為置灰和隱藏兩種方式。我們首先來看看置灰無反饋類別的使用場景:

          還會存在一種置灰有反饋類別的使用場景,而對于非按鈕類狀態的置灰,經過資料和相關調研,發現可以根據其使用場景來設置是否給出反饋,比如網易云音樂的音樂列表場景。

          除開置灰的另一種場景就是隱藏,工具類應用對于隱藏這個操作使用得較多,比如我們平時使用得sketch和figma也基礎應用了這一操作場景。

          好了,說完了用戶界面的相關內容,只有了解上述內容,讓用戶明白界面哪些是可交互,哪些不可交互。才能夠讓用戶進入到下面的“恰當反饋“。


          2.2恰當反饋的定義和表現

          在這里我先講手勢操作,因為手勢操作是前提,然后再講反饋設計。


          2.2.1 手勢操作

          反饋的前置條件是操作,我們在加餐中已經告知了如何引導用戶操作,但在移動端中可能還包含一些隱藏的手勢操作,利用不同的手勢可以達成不同的操作響應。我們來看一下這個案例:

          這是即刻對同一個控件進行了兩種手勢的定義,但大部分用戶可能對于第二種長按手勢的功能其實是不知道的。這樣的功能來說對于新手用戶來說是處于不易發現的“彩蛋“功能。又比如下方的知乎雙擊點贊,以及最近微博更新的連續點擊效果:

          如果我在這里不進行事先說明,可能部分用戶還不知道。但好在上述兩種方式的設計前提是建立在不影響主功能使用的,用戶依舊可以通過其他操作來完成。


          說這些的是為了表明,我們在設計反饋時,要考慮到手勢操作的用戶認知程度,一些特殊的手勢操作雖然能提高用戶的操作效率,但用戶如果都不能發現,何談提高效率,更多的作為“隱藏彩蛋”功能出現。因此我們在產品設計中要盡量注意去使用常規手勢而不是非常規手勢。下列歸納了部分手勢:

          大部分情況下我們其實使用“點擊”和“滑動”就可以完成大部分系統操作。如果我們需要加其他操作最好在用戶第一次進入時加上引導。

          當然,在某些情況下,我們是需要將常用的操作,轉化為不常用的操作,來防止用戶發生誤操作,比如下方的keep在運動中停止的按鈕,考慮到運動的場景,單純的點擊很容易被誤觸。因此keep對“結束”這一功能采用“長按+引導”的方式來防止用戶誤操作:

          OK,接下來正式進入反饋這個環節。


          2.2.2 反饋設計

          反饋就是當用戶對于系統進行相關的操作后,系統對應引起的一系列變化。反饋從類型上可以分為視覺反饋、聽覺反饋和觸覺反饋。


          聽覺反饋和觸覺反饋在這里簡單講一下,一般在我們的設計中使用的比較少,聽覺反饋目前用的最多的是語音助手和地圖類工具在息屏時后的反饋,比如下方的高德地圖反饋,能夠讓你在進行開車或騎行時,即使關掉屏幕,也能通過語音反饋知道此時正在導航中:

          而震動反饋最開始是在蘋果內的應用,包括你在知乎上進行點贊,appstore下載應用,都會進行對應的反饋,讓你的感受“實體化”,提升使用體驗。


          而目前在其他app上,也逐漸開始了應用,比如大家熟知的微信“拍一拍”,在拍頭像的同時會伴隨著震動反饋;以及iMessage的反饋,它會在煙花綻放的那一剎那有震動反饋,給用戶更真實和有趣的體驗。

          好了,最后來講視覺反饋,視覺反饋是我們目前最常見的反饋,也是平日里接觸最多的交互反饋。視覺反饋可以分為以下三種類型:

          控件反饋舉一個最常見的案例,就是我們按鈕的狀態變化,我們通常可以看到狀態有以下幾種變化:

          大家對上述按鈕的狀態可能都比較熟悉,但在很多情況下可能會忽略一些其他控件的點擊狀態,比如我們看下方的一個例子:

          這是點擊“收藏”按鈕時兩個不同點,一個沒有點擊狀態的感應,一個有。這其實也是之前我比較疑惑的一個點,從功能性上來講,它并不影響后續的使用。但這種點擊狀態在官方文檔上到底有沒有明確說明呢,特意去查了下官方文檔,在IOS中的設計原則中有這么一段描述(黑字加粗部分)

          并且在IOS的原生應用中,基本都遵循這一原則:

          雖然有這樣一條原則說明,但并沒有特別嚴苛的規定我們必須要這樣做,因為即使沒有這種反饋,也不會特別影響用戶的整體操作,更多的是帶來使用體驗上的提升。因此大家可以在平日的使用中根據產品的設計階段,特別是在優化體驗的時候,可以考慮這一部分。接下來我們看一下頁面反饋

          當我們觸發的可交互元素不涉及頁面的跳轉,那么此時的反饋多數用于當前頁面本身的反饋。而一般是由alert、toast、action sheet等來構成的。我們需要利用這些控件來對用戶的相關操作給出反饋,比如下面躺平和夸克的例子,當用戶操作時有對應的后續反饋:

          再來看一個有對比性的例子:

          上圖是QQ音樂和網易云音樂對于退出賬號這一場景采用的不同控件,那么這兩種控件哪種使用得更為合理。從用法上來說,兩者都沒有錯誤,但目前的移動端設計在這個場景逐漸傾向左側的設計形式。因為從使用程度上來說,左側的Action sheet 的級別會弱于右側的Alert,對用戶的打斷程度會更弱,且Action sheet可以通過點擊空白處來取消,而右側的alert在移動端大部分都是模態的,只能通過操作來取消。


          因此對于這兩種需要根據使用場景來進行區分。一般來講,Alert更適合用于對系統操作有一定風險或者很重要的操作【需要引起用戶強烈注意】,Action sheet則相對于Alert更輕量化,對用戶的打斷較弱。


          關于頁面反饋這部分還有些控件有比較細致的區分。比如toast提示適用于更輕量化的場景反饋,因為全網彈窗相關的內容也有很多了,在這里不細講。但大家在使用控件時需要注意下列IOS官網上的一個原則規定:

          原則上盡量不去打斷用戶,給予輕量化的信息反饋,除非是某些需要引起特別注意的場景。關于這個的舉例,我們可以看下京東和淘寶在加入購物車的例子:

          淘寶是使用傳統的toast來進行加入成功的反饋,而京東則是利用一個小動畫來達到告知用戶已加入成功的提示。相比之下京東的提示則更加有趣和輕量。因此我們除開傳統的控件外,也可以利用動效來進行更為恰當的反饋。最后,我們來講一下頁面跳轉反饋:

          這可能是大部分設計師都一直忽略的問題。在我們的設計說明中,也一直很少涉及到頁面跳轉的單獨說明。而開發一般會按系統默認的方式去設計。


          那么在頁面跳轉中,一般涉及到以下幾種方式,左右切換,上下切換以及聯動性切換。很多設計師其實并沒有太注意左右切換和上下切換的區別方式。那么在這里進行詳細的說明下:

          最常見的跳轉就是左右切換。在大多數情況下,我們一般采用的是這類跳轉方式。且該方式應用在大多數應用程序中:

          這種方式也跟我們平時的視覺順序有關,我們一般看事物都是從左到右的順序來進行的。這種場景普遍存在于界面中,比如一般性的頁面切換,功能進入等;接下來我們繼續講上下跳轉:

          根據資料總結上下跳轉的場景應用有以下:

          1.觸發的新頁面相對于當前頁面是臨時性的操作 (微信發紅包,新添加群人員,新建筆記本,新建話題等),一般用上下的跳轉方式:

          2.跳轉前后的頁面存在比較緊密的強關聯性,想讓兩個頁面的聯系更緊密,可以采用這種方式。比如QQ音樂和網易云的歌曲列表和播放頁之間就采用的這種方式。

          大家觀察一下,同樣的上下跳轉方式,為什么網易云的整體看上去更加自然柔和呢,除了運動節奏外,還因為在整體的運動過程中,網易云以唱片為聯動點,將兩個頁面聯系起來,從而更加地柔和,這也就是接下來要講的第三個跳轉方式:聯動跳轉。

          這種跳轉方式一般會以頁面中的某個控件作為前后頁面的承載點,從而讓兩個頁面的聯系非常緊湊,視覺上更加舒適美觀,但同時開發難度也比較大,適用于比較固定的某些頁面。除了我們熟悉的APP Store外,我們看下面兩個案例:

          聯動頁面的好處,就是能整體的頁面銜接的更加柔和自然。我們也可以發現,在很多的概念設計中,用得最多的過渡動效也是這種聯動設計,比如下方來自Sang Nguyen的概念設計

          因為要想提升頁面的整體柔順效果,目前來看聯動的方式是最為好的,但同時其實現難度也較大。


          2.3如何讓用戶理解

          這是原則拆解的最后一個小部分,其實就是通過前面兩部分的拆解,原則已經講述得差不多了。而讓用戶了解,在我看來,就是我們給予用戶的反饋能夠讓用戶看懂。


          首先看下這個案例:

          大家可以看到文案一的整體表述,其實會讓用戶迷茫,到底哪個是撤回的操作,哪個是取消的操作。而文案二整體的文案和按鈕都有非常清晰的指向,能夠讓用戶清晰理解其意圖,達到繼續操作的目的。我們再看一下開頭的知乎反饋的例子,其實設計上還可以更進一步:

          通過文案二的進一步設計,能夠讓用戶在知道操作異常的同時知其原因,幫助用戶快速解決當前問題。其實文案這部分的內容,在個人看來,一是盡量少用專業術語或者含糊不清的詞語來反饋給用戶;二是在告知用戶出錯時,盡量附帶簡短的原因說明。這樣用戶更好地去理解想要表述的內容。


          OK。寫到最后,你會發現以上所講的內容,其實都是在闡述一個原則——“狀態可見性原則:系統應該在合理的時間內通過適當的反饋,始終讓用戶了解正在發生的事情?!毕嘈糯蠹椰F在已經知道什么是合理的時間,什么是恰當的反饋,以及如何讓用戶理解。通過這樣的一個原則,我們能夠更好地去考慮到交互上的細節呈現,例如一個可交互元素的不同狀態,點擊后的反饋等。其實原則整體與我們的很多知識相關聯,這也是知識體系的一部分。


          最近學到的關于知識體系的認知,就是你在學習一個新的知識的同時,能夠把你的舊知識串聯起來,這樣你的整體知識才不會碎片化,而是體系化。通過這樣的方式,你在透徹認知一個原則的同時,能夠聯想到各種關聯場景,從而能夠把整體的設計及交互做得更完善。


          最后想說:經典的原則之所以經典,你會發現雖然它是很早之前提出來的,但具有時代超前性。在面對如今產品應用場景和形態都發生巨大變化的當下,它仍然適用。


          文章來源:站酷  作者:進擊的M

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

          從視覺、交互和技術三方面,系統分析2021設計趨勢

          資深UI設計者

          想要探索未來趨勢,必然需要了解當下和過去的事情。因此,我們需要先來回顧下 2020 年的變化吧。

          2020 年因為疫情,讓協作、云端、即時通訊、遠程會議、AI 智能等等,成為了遠程辦公的必需品。目前,疫情在國內已經獲得了控制,后疫情時代已經到來,許多最初沒有的習慣,在發現新的工作模式更加有效率后,也就繼續保留了下來。這些保留下來的習慣,也將在 2021 年會有更進一步的發展。

          1. 大廠的變化

          在視覺設計層面,各大設計語言陸續推出了新的設計版本,更為突出各自設計風格,以建立自己的視覺護城河。谷歌發布了 Android 11,Apple 發布了 iOS14,微軟持續宣傳他的 Fluent UI 設計理念。在國內的辦公領域,騰訊文檔推出了類似 Fluent UI 設計理念的風格,石墨文檔依舊保持獨特的東方韻味,飛書發布了飛書文檔,繼承飛書本身簡潔的 UI,以及活潑的插畫風格。

          谷歌的 Android 11

          基于 Material Design 設計的 Android 11,裝飾上運用了簡潔的幾何圖形,UI 細節上開始趨向圓角的運用,色彩方面選擇了更為協調的配色,對比之前版本純度有所降低,顯得更為高級。

          蘋果的 iOS 14

          UI 設計延續原有的風格,清晰的字體,大圓角的運用,加上豐富的動態效果,并且新增了許多貼心的新功能,例如懸浮播放視頻、主屏幕的 Widget。

          微軟的 Fluent UI

          這是微軟為跨平臺,而提出的設計解決方案。支撐設計概念的關鍵詞有深度、材質、動畫、光線等等,這聽起來感覺與 Material Design 特別相似。不過在最終的視覺呈現上微軟會更接近于真實世界,例如,透明的毛玻璃效果,或更為立體的圖標等。

          2. 社區中的熱門設計

          Behance 和 Dribbble 在 2020 年出現了許多以 3D 插畫為主視覺的設計方案,因為技術的發展,設計師借助 Figma 或 Dimensions 就可以輕松的創作所需的 3D 素材。關鍵的這不是設計方案中的“花瓶”,因為在 Mac 的最新系統 Big Sur 中,已經開始運用了 3D 圖標,相信在以后 3D 的運用場景將會不斷的被挖掘出來。

          從視覺、交互和技術三方面,系統分析2021設計趨勢

          2020 年初時在 Dribbble 流行起來的一個風格叫“新擬態”,這是將投影運用到極致后出現的效果,正如作者所說的:“讓我們想象一下,如果在移動界面設計中,投影的形式發展的更好的話,那將來的界面將會是什么樣的,這是我的愿景?!毙聰M態在視覺上表現確實很驚艷,為此 Android 還制作了一個新擬態的 12 宣傳視頻,但是,主觀感覺這應該很難廣泛運用到實際產品當中。

          從視覺、交互和技術三方面,系統分析2021設計趨勢

          1. 設計服務于內容

          設計專注于表現內容,這是從包豪斯到現在一直遵循的規則,而這個理念也將會持續下去。設計目標終將是需要把關鍵信息傳達到用戶手中,讓用戶知道自己為什么在這,這里有什么,并且能到哪里去。

          技術的發展,形式也一直在發生變化,提升信息傳達效率,這已經不單是平面設計專屬。學會運用動效、交互或智能推薦等綜合的方法,來達到設計目標,會是將來常用的設計手法。

          從視覺、交互和技術三方面,系統分析2021設計趨勢

          2. 更大的圓角

          在以前由于屏幕分辨率太低,窗口四角正常會運用直角,因為圓角會出現鋸齒或者模糊,影響界面美觀。而先如今移動端屏幕質量早已超過紙媒的印刷技術,圓角也開始被廣泛的運用。另一方面圓角在之前的認知中,是兒童的專屬,是更為親和力的表現形式。而經過近幾年的發展,這個偏見正在慢慢改變,因為圓角也可以做的很高大上,也能設計的很潮流。

          蘋果總是第一個吃螃蟹的公司,Mac 的最新系統 Big Sur 整體變得更加圓潤,窗口四角從以前的 10px 增加到 20px,并且全新的控制中心也沿用了 iOS 14 的設計風格和設計布局。值得再一提的是,微軟 Win10 的概念稿中也開始嘗試運用起了圓角。所以這個趨勢是蠻值得關注的一點。

          從視覺、交互和技術三方面,系統分析2021設計趨勢

          從視覺、交互和技術三方面,系統分析2021設計趨勢

          從視覺、交互和技術三方面,系統分析2021設計趨勢

          3. 用有含義的插畫提升用戶體驗

          設計師常常會陷入形式主義,而忽略了本該表達的內容,特別是在插畫上。也許這個道理每位設計師都懂,但為何還是會前仆后繼的撲倒在自我滿足的陷阱中呢?也許原因中會有一點是,當內容過于直接表達,或者元素過于普通,就很容易讓作品變得毫無趣味,這就是矛盾所在了。

          那如果設計師既不想脫離內容,又不想設計出乏味的設計,怎么辦呢?這就需要讓插畫具有含義,而不是淪為純粹的形式。優秀的插畫所承載的信息量,能夠遠比文字或界面 UI 來的豐富。

          從視覺、交互和技術三方面,系統分析2021設計趨勢

          4. 新材料新擬態

          包豪斯有個教學目標,“培養感覺清晰,認知準確的設計師”。因此在包豪斯的基礎教學中,會讓學員研究各種材料的不同屬性。在 UI 設計當中,我們也能制作出各種各樣的材料,在擬物化的時代就能證明這一點。但在 2020 年初時,當某位設計師發現了一種新材料,并把這種材料運用到了 UI 設計當中,一時間火爆整個社區,這就是上面提到的“新擬態”。

          這世界是充滿可能的,所以我相信在未來還會有更多的材料會被發現,或者被以新的方式使用。例如,在 2020 下半年又有一種風格開始回歸“毛玻璃”,其中我們所知道的釘釘,在釘釘 6.0 的設計概念中就融入了毛玻璃的效果。在社區中,毛玻璃也被運用到 UI 的各種場景中卡片、彈窗或圖標等。實話實說,毛玻璃的材質的確能增加許多品質感。

          從視覺、交互和技術三方面,系統分析2021設計趨勢

          5. 自然的界面和運動效果

          這里所說的自然,是能讓人感到熟悉和安心,是以人為本的設計。王敏老師說過:“科學求真,藝術為美,設計從善,設計可以作為結點,讓真善美實現統一。”連接人與產品之間的紐帶是 UI 界面,它需要承載不僅是信息內容,還有用戶體驗,因此,以人為本的設計終會贏得用戶的喜愛。

          自然運動效果,不是那種大開大合的酷炫效果,而是讓界面過渡更為自然合理。想要讓界面體驗更為自然,那必然要遵循真實世界的物理規則,例如,重力、摩擦力、向心力、浮力等動態效果。

          從視覺、交互和技術三方面,系統分析2021設計趨勢

          6. 來自未來的風格

          科學技術的快速發展,讓我們感覺未來近在咫尺,但又十分迷茫不知何去何從。我相信承載 UI 的媒介,必然不僅僅是現在我們所使用的各種設備。VR、AR 或全息影像等技術的發展,將使得 UI 設計會有更多的可能性。賽博朋克 2077 也許真的離我們不遠,那種滿世界無處不在屏讀的社會,怎樣的設計才能真正滿足需求呢?這是我們需要長期思考的問題。

          從視覺、交互和技術三方面,系統分析2021設計趨勢

          7. 深色模式

          在 2020 年各大廠都推出了暗色調模式,這已成了現如今 APP 的標配。除了深色模式外,以后還會在可視性、場景和實現成本等因素方面,更進一步的打磨。

          從視覺、交互和技術三方面,系統分析2021設計趨勢

          從視覺、交互和技術三方面,系統分析2021設計趨勢

          從視覺、交互和技術三方面,系統分析2021設計趨勢

          1. 更具裝飾性的平面插畫風格

          雖然在 2020 年不管是社區,還是實際項目,許多設計師都開始熱衷于 3D 插畫,就連蘋果微軟也不例外。但是 Google 卻繼續堅守自己的設計風格,扁平的裝飾性插畫,例如 Android 11 就運用簡單的幾何圖形進行裝飾,相關的插畫也是更多運用的扁平風格,這種堅持必然會有其重要的原因。

          裝飾性插畫在各種屏幕的適配性更廣泛,并且在繪制成本和實現成本方面也會更有優勢。在屏幕媒介還沒發生顛覆性改變前,我認為扁平的裝飾性插畫在未來將還會大放異彩。

          從視覺、交互和技術三方面,系統分析2021設計趨勢

          從視覺、交互和技術三方面,系統分析2021設計趨勢

          2. 情感化的插畫設計

          后疫情時代的遠程辦公,我們需更加考慮如何緩解合作的疏離感。如何拉近人與人之間的協作,打破遠程的空間桎梏,讓合作更具沉浸感。這時情感化的設計就能充分體現它的價值,例如,這幾年開始火的 emoji 頭像,或者各種表情包,它們讓溝通的雙方產生情感共鳴,而不是面對著冷冰冰的屏幕。

          從視覺、交互和技術三方面,系統分析2021設計趨勢

          3. 插畫的組件化與創新

          皮克斯運用技術的創新,提升了質量和效率,從而改變了整個動畫的歷史。對于我們來說,未來的插畫需求會越來越多,并且還要求獨特的創新性,這就需要有更優的解決方案。

          Ant Design 的 HiTu 在 SEE Conf 的時候提出了解放圖形化生產力,那就是將插畫各部件組件化,這有效的提升插畫效率。然而在插畫庫的維護方面,還需要設計的創新。因為效率的提升,讓設計師能有更多時間,專注于更有創造性的工作,然后將新的創意理念融入部件,最終完善整個插畫組件庫。

          從視覺、交互和技術三方面,系統分析2021設計趨勢

          從視覺、交互和技術三方面,系統分析2021設計趨勢

          從視覺、交互和技術三方面,系統分析2021設計趨勢

          從視覺、交互和技術三方面,系統分析2021設計趨勢

          1. 多屏協同辦公

          凱文凱利在《必然》里討論了關于未來的生活方式,他認為我們的未來環境會充滿各種屏幕,它將會在各種事物的表面出現,屏讀會從我們起床開始到晚上睡覺,一直出現在我們視野中。如今的人們每人都有各種各樣設備,因此,多屏協同辦公是必然的趨勢,不管你是與人合作,還是獨立工作。

          萬物互聯已經是很久的話題了。在 2020 年華為的鴻蒙系統,發布了跨設備進行的分布式交互,實現了多屏協同。我感覺,這將是很重要的一步。

          從視覺、交互和技術三方面,系統分析2021設計趨勢

          從視覺、交互和技術三方面,系統分析2021設計趨勢

          2. 秒驗身份認證

          身份認證是信息安全最關鍵的一步。我們通常會用身份 ID 加密碼進行登錄,并且為了驗證你不是機器人,還會加上人工輸入驗證碼,如果再有其他的設置選項,那我們的登錄交互就會被拉的很長,有時還會出現登錄失敗的情況。在如今浮躁的社會,許多用戶也許在前幾步就已經失去了耐心。

          移動設備擁有有豐富的傳感器,并且精度也在逐年的提高。隨著指紋、面部、虹膜等等技術成本的降低,這些技術也開始越來越普及化。如今使用新的識別技術,很輕松就能完成各種身份認證。

          從視覺、交互和技術三方面,系統分析2021設計趨勢

          3. 單手交互的挑戰

          當年喬幫主一直堅持的單手操作,而如今,手機屏幕逐漸越來越大,單手操作已是一種奢望。為此,各手機品牌想方設法的改變交互方式,為的就是能實現單手操作,并且為此作為宣傳的噱頭。iPhone 輕點兩下 home 鍵或向下輕滑虛擬 home 鍵,就能讓整個內容向下移動半屏,從而方便單手操作頂部功能。

          想達到目標的第一步,就是辦法讓拇指能觸及到功能。但我們還需要進一步思考的是,拇指本身的靈活性并不高,并且也只能是單點觸控,那怎樣的交互形式能滿足日益復雜的交互需求呢?

          從視覺、交互和技術三方面,系統分析2021設計趨勢

          4. 折疊屏

          屏幕可拓展,將會是移動辦公的重要轉折點。不管是需要長篇編輯的文字,還是畫板無限大的表格,或者是需要強大美化功能的演示,這都需要足夠大的屏幕才能有更優的體驗。折疊屏的出現讓手機能代替平板,滿足更多使用場景。折疊屏目前由于成本的原因,在大眾眼中還屬于新事物。但我相信成本在未來不會是問題,更重要的問題是,屏幕形式的變化,對于交互來說將會有哪些影響,并且如何挖掘其中真正的潛力。

          從視覺、交互和技術三方面,系統分析2021設計趨勢

          從視覺、交互和技術三方面,系統分析2021設計趨勢

          從視覺、交互和技術三方面,系統分析2021設計趨勢

          1. 關注隱私保護

          自 MIUI12 隱私功能發布后,APP 訪問隱私頻次大幅下降,這使得應用的行為越來越規范,也因此獲得了用戶、國家相關機構和媒體的認可。

          在凱文·凱利的《必然》中描述了這樣的一個未來景象,我們的各種狀態將會被設備所跟蹤,大到你的地理位置,小到你的心跳,你所經歷的一切都將被上傳到網上,設備能通過對過往的分析,給你推薦各種商品或服務。這很美好,但同時也存在許多風險。在《竊聽風云》的電影情節中,就是由于先進的竊聽技術,造成了各種無法預估的災難。所以這是一把雙刃劍,在技術進步的同時,我們也需要時時刻刻關注隱私的保護。

          從視覺、交互和技術三方面,系統分析2021設計趨勢

          2. 智能自動化辦公

          在 2019 的 Google I/O 大會上,Google Lens 展示的 AR 點菜功能可以智能識別用戶掃描的菜單并將美食網站上的相關推薦直接呈現在屏幕上。當識別到小票信息時,可快速提取小票上的金額,且可自動彈起計算器快速幫助用戶計算人均消費,節省人工計算的時間成本。

          在辦公場景下,如何幫助用戶減少無謂的工作,讓更多精力專注于內容。把排版規范、素材提取、文件管理、功能查找等瑣碎的事情,交給人工智能來完成。在以前工業時期有機器的賦能下,人們的生產效率進行了一次飛躍,而下次的效率提升將會是人工智能。

          從視覺、交互和技術三方面,系統分析2021設計趨勢

          3. 腦機

          是否希望自己學會“量子閱讀法”呢?也許 5 分鐘實現十萬字快速閱讀不是夢。Neuralink 發布了 Link V0.9 版的腦機接口,并且已經在動物上進行實驗,他們通過把一塊微芯片植入猴子的大腦,然后讓其通過意念玩電子游戲。雖然這產品在人類普及的概率幾乎為零,但是這也算是人類向前邁出了一大步。

          這只是一個開始,未來的設備將不局限于可穿戴,而會是與人體緊密相連?;蛟S可以想象一下,在未來人們會像在醫院預約掛號一樣,在科技公司樓下排隊更新升級身體里的“機械器官”。

          從視覺、交互和技術三方面,系統分析2021設計趨勢

          4. 虛擬現實&增強現實

          如果要說接下去哪個技術變革,將對我們生活工作產生重大影響,我認為將會是 VR 和 AR。在溝通方面,體驗將會變得更為真實。遠程溝通常常效率很低,其中很重要的一點是空間的距離感,而空間的距離會產生雙方鏈接的不穩定性,因為雙方無法達成眼神、肢體等信息的交流,有時候一個眼神或者動作就能完成的事情,需要反復的語言交流,甚至會陷入各種尷尬的境地。

          除了溝通之外,在工作、生活、學習等領域,VR 和 AR 也將會有更多可能,媒介的屬性不再是二維平面,而是三維空間,這使得它能提供更為沉浸式的交互體驗。

          受疫情影響,遠程辦公、網上購物和在線學習等進入了更多人的生活中,這已經成為當今的人類文化,我相信這只是剛剛開始。回望 10 年前,智能手機還是新鮮事物,而如今已是大眾商品,在未來 10 年后回看今天,某些事物也將是相同感受。

          從視覺、交互和技術三方面,系統分析2021設計趨勢

          5. 5G 運用

          依稀記得上大學時 4G 時代的到來,旁邊的人都在說網速多快多快,聽歌看視頻一點都不卡。

          而如今 5G 開始普及,網速也再次提升,但外界對其的評價褒貶不一,其中最為常見的話題就是“5G 對我們的生活將會有什么改變呢?”,有人覺得它只會提高我們每個月的話費,也有人提出 VR/AR 全景直播、高清遠程會議、無人機作業、自動駕駛等技術將會更為成熟。

          不管如此,5G 在 2020 年度過各種坎坷,最終普及到我們每個人身上。5G 對許多領域都會有質的影響,特別是依賴網絡環境的場景。其中就有辦公領域,大文件上云、協同辦公或遠程會議,5G 將會給這些場景提供更好的體驗,也會讓更多可能變為現實。

          從視覺、交互和技術三方面,系統分析2021設計趨勢

          這篇文章是對當下的思考,也希望能對 2021 年的工作帶來些許幫助。在這過程中越是總結,越是對未來的趨勢感到迷茫,一篇文章并不能囊括所有內容,不足之處也希望理解。在未來或許會有數不盡的黑天鵝,也可能因為技術爆炸,使得新的潮流突然的興起,未來是無法預測的,所以,就讓我們一起擁抱變化吧~

          文章來源:優設  作者:Alan Hu

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


          B端項目的設計思路和方法

          資深UI設計者

          前言

          對于一直做 C 端產品設計的同學來說,面對復雜又陌生的 B 端業務,難免會有些頭“禿”,設計師該如何應對?或者說我們如何更好地完成項目?并挖掘和發揮設計價值?B 端產品通常具有較高的業務門檻和業務深度,對于設計師也具有一定的挑戰性,本文根據自己的這一年的 B 端工作經歷,總結了一些設計方法以及自己的經驗。希望會對處在這個領域感到迷茫的設計師有所指引和幫助。

          B 端產品業務目的明確,業務邏輯和場景相對比較復雜,所以對設計師的要求更高,要更清晰理解 B 端業務,下面是我轉 B 端產品設計時的一些思路:

          轉變自己角色定位

          針對之前一直做 C 端的我來說轉戰到 B 端業務,也面臨著兩個端的設計反差,B C 端的商業屬性、產品定位、用戶人群、視覺呈現、業務邏輯/流程都不盡相同,這將是一場知識遷移的過程。

          需要轉變自己之前的整個設計思路和角色定位,從之前被動接需求做圖,只做執行輸出設計稿,轉被動為主動。也深知設計和產品的配合就是互相成就,互相補位。面對之前不太熟悉的 B 端那些較為復雜的業務場景和邏輯,盡量讓自己在和產品需求對接時,提前介入,思維前置,全鏈路思考主動提出對產品的一些想法,難點或疑惑點都可以,也可以幫助自己梳理需求,了解從根本要解決的問題是什么,需求背后其核心是達到什么用途與目的,也想辦法去收集來自用戶、業務方的反饋,或主動去進行競品調研,用戶調研,這樣不僅可以讓我們更清晰的了解用戶需求和業務場景,在這個過程中,往往也會更容易挖掘出需求的突破點,找到更好的解決方案和更有價值的驅動點,為業務賦能。不再只做被動接受的工具人,也會要求自己去做“項目推動型設計師”,盡量讓自己全鏈路的參與其中,在每個環節尋找可挖掘和貢獻的價值點。

          大廠出品!幫你快速掌握B端項目的設計思路和方法

          大廠出品!幫你快速掌握B端項目的設計思路和方法

          系統學習業務相關知識

          轉變了自己的定位后,由于自己負責的 B 端項目,是之前沒有接觸過的業務,很多業務場景無法使用設計 C 端產品時的同理心來對待,又有較高的業務門檻和業務深度的,首先我認真系統的學習業務涉及到的一些相關知識,可以幫助了解自己手里的設計工作的業務細節,和產研團隊多方面溝通產品的需求,弄清每個步驟的業務邏輯,不懂可以多問多學,在產品評審需求的環節,一定要將業務邏輯理解透徹再考慮應該如何進行設計實現。要問問為什么業務流程是這樣,每一個頁面的跳轉每一個功能的用途以及業務含義是什么等等,多出幾版樣式進行探討最優方案。

          大廠出品!幫你快速掌握B端項目的設計思路和方法

          分析洞察產品業務場景

          設計工作的開展前,首先需要分析產品的背景是什么,要做什么,要提供用戶什么服務?調研分析一下它的競品狀況是怎樣的?現在是什么發展階段(一般 b 端的產品競品是極少的),不管是網上查找還是書籍搜尋了解一些行業內的資料,也可以找一些間接競品吸取靈感。了解產品的目標用戶群有哪些(用戶畫像)?不同角色的用戶會有哪些權限?以及分析業務存在哪些重要的流程,背后設計的意圖和產生的價值是什么,要解決用戶或業務上的哪些痛點。進行了初步的業務分析以后,大致分析下使用場景,在需求分析階段,要對產品本身和行業本身有一些基本的認知。

          大廠出品!幫你快速掌握B端項目的設計思路和方法

          設計執行&落地策略

          B 端產品的邏輯較為復雜,在交互及體驗上的要求也要更為謹慎。所以設計上需要更加克制和理性,B 端產品雖然視覺上交互上的整體要求沒有 C 端那么高,但是需要做到每一個功能點能夠清晰明確的展示,并且讓用戶知道每個功能按鈕或頁面的使用意圖。避免功能堆砌關系混亂。

          在產品設計之初,需要全面考慮,把握產品設計的大方向與業務發展的一致,同步搭建頁面通用的設計框架,統一的視覺設計語言,通用的組件的規范,可快速復用提效設計,即可把更多的精力投入到梳理產品邏輯及交互方式和功能的視覺表現上。也要時刻與產研團隊保持溝通,從技術和設計層面綜合考慮,哪種視覺呈現方式更合理,哪種方式更提效更穩定,支持的場景更全面…確保當前產品方案可行性。全面打造產品體驗的一致性,實現有序、統一的操作體驗,總之核心重點:界面清晰易懂,用戶的操作門檻低,能夠快速的使用產品,高效、專注完成任務。

          復盤結果定期總結經驗

          項目上線后,及時復盤總結也尤為重要,這也是我接下來要重點去做的事情,可以通過回顧和思考,來歸納分析自己做的成功與不足的地方,把那些對后續有幫助的、復用性高的經驗加以總結,沉淀自己的一套方法論。復盤是設計師自我提升的有效方式,也可以賦能團隊為團隊提效,提升自己的價值。

          大廠出品!幫你快速掌握B端項目的設計思路和方法

          寫在結尾

          啰嗦說了這么多,比較細碎,不乏邏輯凌亂的片段,但也算自己對 B 端設計的一些想法吧~B 端產品承載的信息和邏輯比較復雜一些,所以需要對功能層級的劃分呈現多考慮一點,需要有清晰的邏輯,多站在企業用戶的角度去考慮,使任務能夠精準化觸達,毫不拖泥帶水是設計 B 端產品最重要的工作。

          文章來源:優設  作者:58UXD

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

          值得反復學習的「交互設計5大定律」

          資深UI設計者

          推導

          在介紹重新定義的交互設計定律之前,我們先來回顧一下經典的《交互設計 7 大定律》

          值得反復學習的「交互設計5大定律」,一篇帶你全部學完!

          費茨定律告訴我們要節省操作時間應該怎么做:放大目標對象,減小目標距離。

          席克定律告訴我們要節省決策時間應該怎么做:盡可能的減少選項的數量。

          米勒定律告訴我們人類記憶的上限,所以要將信息數量控制在 4±1 內。

          接近法則告訴我們相鄰≈相關,所以要根據信息親密性組織其位置關系。

          泰思勒定律告訴我們復雜性是守恒的,我們要平衡復雜性的天平向誰傾斜,以實現整體效益最大化。

          防錯原則告訴我們用戶出錯是不可避免的,我們只能減少并降低其犯錯的可能性。

          奧卡姆剃刀原理告訴我們如無必要,勿增實體,設計要盡量的簡約。

          不知道你看完以上 7 個定律有什么感受,我的感受是,他們彼此之間有些重合(奧卡姆剃刀原理、席克定律、米勒定律都在傳達信息要精簡),但用其概括交互設計的精髓,又覺得不夠完整(做到這幾點就夠了嗎?),整體交互設計的精髓要義并沒有表達地很清楚(如何用一句話來概括交互設計的目標?)

          帶著這幾點疑問,我重新去思考到底什么是交互設計的底層設計目標?到底哪些交互設計定律能更好的體現其本質?以下是我思考的結果:

          值得反復學習的「交互設計5大定律」,一篇帶你全部學完!

          交互設計的終極目標是改變和影響用戶的行為,達到期望的業務結果,比如下單率、搜索率等結果指標,結果指標因產品而異,不具有普適性,不可一言以概之。而在交互設計的過程中,以交互設計定律為指導的過程指標是通用的,幾乎可以說放之四海而皆準,我把這四個過程指標概括為四字箴言:少快好省。怎么理解呢?

          • 所謂少,就是信息功能要精煉,要一目了然,要盡可能減少功能/信息的復雜度。
          • 所謂快,既是性能也是效率,指的是要盡可能快的響應用戶的操作,達成用戶目標。
          • 所謂好,就是產品的設計必須達成行業一流的設計標準,讓用戶用的順手、滿意。
          • 所謂省,就是省心省力省時,能夠幫助用戶節約時間,降低操作和認知負荷。

          基于這樣的過程指標,我挑選了 5 個設計定律來進行設計指導,下面我們逐一來看。

          奧卡姆剃刀原理

          奧卡姆剃刀原理告訴我們:如無必要,勿增實體,即“簡單有效原理”。對于工業產品適用,對于軟件類產品也是如此。因為任何增加的非必要信息和功能,都會帶來生產/維護成本的增加,以及用戶認知/操作成本的增加。在現今這個注意力稀缺的時代,復雜會讓人望而卻步,也容易使人迷失,而精簡的產品更利于人們的理解和操作。

          典型案例:

          值得反復學習的「交互設計5大定律」,一篇帶你全部學完!

          小米的電視遙控器設計和傳統遙控器設計相比,對奧卡姆剃刀原理的運用非常極致,相信大家都可以感受到精簡前后的視覺/操作/認知負荷的降低。

          我們再來看一個互聯網產品設計的案例:

          值得反復學習的「交互設計5大定律」,一篇帶你全部學完!

          19 年初,外銷瀏覽器做了一次視覺煥新大改版,從交互結構到視覺界面變化都比較大,所以我們就增加了新版本的滑屏引導,告訴用戶有哪些界面及功能的變化,結果新版灰度期間,信息流滲透率下降了 33%,搜索下降了 18%,經過仔細的數據排查,發現都是滑屏引導惹的禍,當把滑屏引導去掉后,搜索和信息流的數據都恢復正向了。

          19 年底,我們做的另一個運營活動也經歷了類似的教訓。當時錦鯉很火,我們就做了一個錦鯉大作戰的小活動,畫面精致,獎勵也比較誘人,但是發現活動上線后轉化率效果卻不及預期,我們再次把矛頭對準了蒙層引導,通過去掉蒙層引導,CTA 按鈕場景化,并增加微動效,轉化效果立刻得到了提升。去掉不必要的引導,讓界面自己會說話,這也是奧卡姆剃刀原理的一個體現。

          值得反復學習的「交互設計5大定律」,一篇帶你全部學完!

          米勒定律

          米勒定律告訴我們:人們工作記憶平均能記住的元素數量僅為 4±1。所以我們在設計時,首先要運用奧卡姆剃刀原理,盡可能的去做減法,盡量將數量控制在 4±1 的范圍內。如果選項較多,且減無可減時,就需要對信息/選項進行分類和分組,保證類別的數量在 4±1 的范圍內。

          典型案例:

          值得反復學習的「交互設計5大定律」,一篇帶你全部學完!

          對于像手機號、銀行卡號、身份證號這種類型的信息,因為其固有的信息長度無法做精簡,所以在信息組織時就會采取分組的方式,保證分組的數量控制在 4±1 的范圍內。

          另一個案例也是關于我們的外銷瀏覽器:

          值得反復學習的「交互設計5大定律」,一篇帶你全部學完!

          左一是改版前的頁面,功能有 12 項之多,且產品認為減無可減了。我們的交互設計師通過對頁面功能使用頻度及產品功能的重要程度進行分析,將功能劃分為了三大類:重要功能,常用功能,必備功能。然后通過強化、保持和收納的方式將其進行右圖所示的呈現,界面復雜度迅速降低,功能清晰度和操作便捷度顯著提升。

          多爾蒂門檻

          多爾蒂門檻告訴我們:系統需要在 400ms 內對使用者的操作做出響應,這樣才能夠讓使用者保持專注,并提高生產效率。

          先來看一組模擬的響應效果:

          值得反復學習的「交互設計5大定律」,一篇帶你全部學完!

          △ 圖片來自作者「超人的電話亭」

          從這組圖片可以感受到,當圖片在 400ms 內時,是勉強可以接受的,但當時間延長到 600ms 及以上時,人們就會感受到明顯的延遲、等待和卡頓感。

          值得反復學習的「交互設計5大定律」,一篇帶你全部學完!

          多爾蒂門檻對響應時間的上限給出了參考,而后續的研究則給出了更細致的響應標準,比如元素的點擊反饋應控制在 0.1s 左右,盡量不要超過 0.14s,單個元素入場退場時間應控制在 0.2s 左右(入場一般比退場稍慢),而頁面的轉場時長根據頁面大小和轉場動效的復雜度盡量控制在 0.3s-0.4s 之間。只有響應時間符合上述標準,才不會讓用戶對產品的流暢性有所懷疑。

          雅各布定律

          用戶將大部分時間花在別人家的網站(產品)上,而不是你的。這意味著他們希望你的網站(產品)跟別人的有相同的操作方法和使用模式。雅各布定律告訴我們:作為設計師,我們必須要多研究把玩各種 App,這樣我們才能夠對當下產品的設計趨勢有更直觀的感受。

          對于新入行的設計師,我會建議大家好好研究一下 ios 和 android 的 OS 規范,了解平臺的特性,同時再翻翻下面這些書籍,了解各種常見的設計模式,豐富自己的設計組件庫。

          值得反復學習的「交互設計5大定律」,一篇帶你全部學完!

          此外,在做某種特定類型的產品設計時,也非常有必要做行業及競品分析,這樣才能確保我們在做產品設計時,可以延續用戶的主要視覺及行為習慣,減少用戶的學習及使用成本。

          值得反復學習的「交互設計5大定律」,一篇帶你全部學完!

          以視頻 App 為例,行業內的頭部產品在產品框架及元素布局上都具有高度的一致性,這也是雅各布定律的一個體現。

          可感知性原則

          操作前有預期,操作時有反饋,操作后可撤銷。這是十年前我入行時接觸到的一句話,我不知道是誰提出來的,但卻是這些年我做交互設計最重要的一條參考原則,我將其簡單命名為可感知性原則。

          操作前有預期,指的是要符合視覺認知原理,符合行業設計習慣,讓用戶一看就懂。

          操作時有反饋,指的是操作時要即時反饋,就近反饋,并且反饋合理。

          操作后可撤銷,指的是任何操作都盡量讓其可撤銷,讓用戶無后顧之憂,安心探索。只要存在用戶行為的交互,這個準則都是可以用來檢驗的,以下圖為例。

          值得反復學習的「交互設計5大定律」,一篇帶你全部學完!

          當我們想要刪除某張照片時:

          操作前有預期:工具欄位于默認的底部位置,有刪除圖標+文字明確示意的功能按鈕,讓用戶一看就知道應該選擇哪一項操作。

          操作時有反饋:點擊刪除按鈕時,刪除按鈕有一個灰色的點擊態,隨后馬上出現一個確認彈窗,而且是就近位置出現,確認彈窗上提示簡單,按鈕用的是 CTA 的形式,操作交互一目了然。

          操作后可撤銷:當用戶確認刪除后,照片消失,但是還可以去最近刪除的文件夾中,恢復照片。

          結語

          到這里,交互設計 5 大定律就全部介紹完成了,圍繞交互設計的過程指標,少、快、好、省依次展開,給大家介紹了奧卡姆剃刀原理、米勒定律、多爾蒂門檻、雅各布定律、可感知性原則。

          值得反復學習的「交互設計5大定律」,一篇帶你全部學完!

          也是為了滿足米勒定律的 4±1 原則,我將交互設計定律濃縮成了 5 條,如果在此基礎上加一條的話,我會在「好」的指標下,增加一條「格式塔原理」,它包含的 7 大設計原則。格式塔原理是做設計排版的基石,絕對值得所有設計師反復學習、研究和運用。

          文章來源:優設  作者:VMIC UED.Joyce

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

          用戶訪談實例參考

          資深UI設計者

          總是有人問我:“你是如何做訪談研究的?”,每次我會都極力解釋我的方法和技巧。我會提及研究計劃、TEDW提問框架、避免詢問有關未來的問題,以及要注意避免提出引導性的問題。

          TEDW是一種開放式的問題框架,有助于在訪談中建立起“對話式訪談”,而非僅僅是“問答式訪談” 。TEDW由以下四個單詞的首字母組成:

          • 請告訴我更多關于…(Tell me more…)
          • 請解釋一下…(Explain…)
          • 請描述一下…(Describe…)
          • 請帶著我回顧一下…(Walk me through…)

          然而,我一直糾結于要如何描述我的訪談方法和技巧。我很少照著某個腳本開展形成性訪談(generative research interviews),相反,我通常會根據參試者的回答來即時提出新的問題,因此我很難整理出一套完整的訪談問題。如果我發現某個有趣的線索可能會帶來一些深刻的洞察,我甚至有可能在可用性測試當中適當脫稿追問。

          經過多年的實踐,我覺得自己對用戶訪談已經游刃有余。雖然我在訪談前還是會緊張,但總的來說,訪談已經是我一周工作中的高光時刻了。我認為用戶訪談是了解他人生活的窗口,我很幸運能夠一窺究竟。對我來說,用戶訪談是用研工作中最酷的部分,這也是為什么在面對我最常收到的提問卻無法回答時,我會如此沮喪。

          所以,我決定做一些新的嘗試,也許會有幫助。與其整理一份我執行用戶訪談的基本框架,倒不如來1場訪談案例,記錄完整的對話內容,這樣可能更有幫助。

           

          案例背景(The idea)

          我的未婚夫(一位產品經理)毛遂自薦,愿意成為我的研究對象。我們深入討論了好多話題,最終決定聊一聊他的愛好:桌游(board games)。在本次訪談示例中,我們共同交流,以便更好地了解他的桌游購買決策。

           

          訪談過程(The interview)

          我只記錄了前30分鐘的對話內容(完整的訪談大約持續了1小時) ,但它足以給你帶來啟發。

          N指代本文的原作者Nikki,C指代原作者的未婚夫。

           

          開場白(Introduction)

          N:我叫妮基。我現在正在參與一個項目,該項目的主要目的是了解人們對桌游購買的心智和實際購買的決策過程。作為這家公司的用戶體驗研究員,我想了解你對桌游的看法,以及你在購買決策時的思考過程。本次訪談大約30分鐘,你的回答沒有對錯之分,因此我希望你可以如實作答。你的反饋不會傷害任何人的感受。我們將會借助你的反饋和意見,幫助改進我們的產品和目標。不過在我們開始之前,你還有沒有什么疑問呢?

          C:以上我都能理解。

          N:好的。在我們正式開始前,你介意我對本次訪談進行錄音嗎?

          C:完全沒問題。

           

          正式開始(Diving in)

          N:好的,太棒了。正如我先前提到的,我想更好地了解你對桌游購買的想法。首先,能否請你回想一下最近一次你購買桌游的經歷(購買的目的最好不是送禮或其他),請帶我回顧一下從“你開始意識到想要或需要這款桌游”,到“最后真正買下它”的過程的完整過程。

          C:好的,沒問題。我確實很喜歡桌游。我并不是說我需要那么多桌游,但對我來說,它就像德語版的《霍比特人》。我希望擁有各種各樣的桌游,而且我覺得你的問題需要明確一下“場景”,比如一起玩桌游的人是誰。我最近一次買的桌游叫做《契約石》(Charter Stone),當時我和朋友吃過早午餐,在回來的路上路過一個桌游商店,然后我就進去了,最先吸引到我的實際上是這款桌游的包裝盒,我覺得包裝盒設計得非常精美。除了包裝盒之外,這是一款傳承型桌游(legacy game,傳承型游戲是指會隨著游戲的進行與玩家的選擇而產生變化的桌游,在傳承型游戲中的變化大多是永久性的,也就是在做出決定后便必須承受后果,無法撤銷),也就是說 ,你在桌游中每次的不同選擇,都將會對后續發展產生持續影響 。

          通常情況下,我在購買桌游時,都會參考一個挺熱門的叫做BoardGameGeek的網站(BoardGameGeek,桌游極客是一個桌游排行網站,被桌游玩家奉為圭臬,號稱是桌游界的Wikipedia), 它類似于桌游的線上大本營,這個網站里有交流桌游的社區,還有對桌游的評價,包括桌游的復雜度、玩家數量,和玩法機制。桌游有許多不同的玩法,你可以把它想象成電子游戲,在電子游戲中你可以建立基地,可以進行第一人稱射擊,或者也可以玩賽車。桌游也是如此,它有各種各樣的玩法,人們對于玩法的喜好也各不相同。所以當時在店里,我訪問這個網站并迅速查了一下這款桌游,發現它的評分很不錯。當時我算是沖動消費了一把,當場就買下來了。這個桌游的玩法、主題、設計都是我喜歡的類型,BoardGameGeek 上的前幾條評論也都是好評,所以我就買了。

           

          N:哇,太棒了。你剛才的這一番話信息量十足啊 。那么接下來我可能會回到你剛才所說的內容中,進一步和你聊聊你所提到的信息。你說你把它買下來了,能否麻煩你再詳細描述一下這部分內容呢?你當時是在商店里就買下來了嗎?

          C: 在之前,我也看了其它桌游。我拿手機稍微查詢了一下,看看BoardGameGeek上的評論,看看比較知名的測評博主是怎么說的。這個游戲的評價總的來說很好。所以我就拿著它,然后在店里轉了一會兒。大概就是看看還有沒有其他什么可買的。那天沒看到什么別的我確實想要的東西,也沒有什么吸引我眼球的。所以我就只買了這款《契約石》桌游,整個過程非常簡單明確。

           

          N:好的?;氐絼傞_始的時候,你提到你進入桌游商店然后發現了《契約石》這款桌游,當時有什么特別的東西吸引你走進那家店嗎?

          C:對我而言,那是一家本地的桌游商店,它離我住的地方最近。我在那買過一些桌游,他們一直很友好,也很和善,而且店里可選擇的桌游非常多,這點非常好。當時我們吃完早午餐,這個店離我們吃飯的地方只有兩條街,很近。星期六一般是我的愛好專享日。我有好幾個愛好,所以如果某個愛好相關的商店就在我附近,我可能就會進去逛逛看,看看有什么可以買的,就是這樣。

           

          N:好的,也就是說,這家店有位置優勢,你可以很容易地順道拜訪這家店。另外你提到了《契約石》的包裝盒吸引到了你,你說這個盒子是“精心設計(well designed)”的 ,你能否介紹一下你所說的精心設計具體指是什么。

          C:這個例子真的很有趣,因為它的包裝盒上幾乎什么都沒有,就像蘋果公司的產品包裝盒一樣,只會讓你知道你面前有一臺iPhone,然后沒有任何其他信息了,差不多就是這樣?!镀跫s石》的包裝盒白白凈凈,非常干凈,它在商店里的桌游叢里格外顯眼,這就是我一眼就注意到它的原因。然后我翻到盒子背面,上面簡要介紹了游戲的玩法機制,就是我剛才提到的自己喜歡的那種,是一款建造策略型的游戲(building strategy and building games)。上面沒有過多的設計,非常干凈清晰,這給我留下了非常深刻的印象。我喜歡傳承型的游戲,喜歡筑城游戲。很明顯,在那個時候,我買它的理由還沒有那么充分。但是我確實對它很感興趣,于是我就去查BoardGameGeek,然后得到了一些信息。

           

          N:那確實很有趣。剛剛你有提到《契約石》的包裝盒很獨特,是因為盒子看起來很簡潔,并且沒有太多內容嗎?你能舉個例子描述一下桌游包裝盒上通常會有哪些內容嗎?

          C:好的,這取決于是什么盒子。一般來說你可以從盒子側面得到很多信息,我是說通常情況下你是可以看到的,當然也有特殊情況。正面的話一般是標題或插圖,側面或背面會有說明,你可以了解到一些功能信息,比如玩家數量、桌游大致用時。另外也會有一些玩法的介紹,比如是骰子游戲、紙牌游戲,還有就是我之前提到的玩法機制。然后背面通常會有一張圖或貼紙,告訴你盒子里都有些什么。

          拿我最喜歡的桌游《權力的游戲》(Game of Thrones) 或者《帝國開拓者》(Imperial Settlers)舉例:在盒子底部,你可以看到這個桌游配置好了之后的樣子?!镀跫s石》這個盒子卻沒有這樣做,因為它偏重以劇情模式展開,它是一款傳承型桌游,你并不清楚里面都有什么牌。當你打開盒子時,會出現一個重要提示,讓你不要讀卡片。你需要通過故事模式來玩,游戲的走向會因你的選擇而不同,因此你無法預先知道游戲的內容,即使盒子背面告訴你游戲的相關信息,這也沒有典型代表性,因為每個玩家的選擇不同,他們的游戲展開也會變得不一樣。所以我認為在這一點上,它和我玩的大多數游戲都很不一樣。我覺得這個方式很好,讓游戲過程充滿了懸念。

           

          N:那真的太有趣了。你之前提到因為盒子上沒有太多的信息,所以你去BoardGameGeek查看評論、玩法機制以及其他信息。不過在我們進行深入交流前(以及你如何經歷《契約石》之旅之前),我想先請問一下,當你已經從盒子上獲得了該桌游的所有信息后,你還會去訪問BoardGameGeek嗎?

          C:會的。BoardGameGeek是一個相當不錯的社區。它非常多樣化,就像是桌游的線上權威信息源,是一個購買桌游前你一定要去尋找參考的地方。比如,如果你正在玩一個桌游,你對規則不是很確定,或者你覺得它有兩套相互沖突的規則,那么幾乎每個我認識的人在訪問官網之前都會先去BoardGameGeek,因為這里明顯更容易找到能夠解決問題的人,因為相較于官方,BoardGameGeek上的玩家可能已經經歷了無數次的測試。同時,如果有人得到了官方回復,他們會在這個網站上更新。所以BoardGameGeek確實非常權威 。它上面的信息也很詳細,你想找的東西都會有。說實話,這個網站不是顏值最高的,但是它確實是最強大的。你想找的都能在BoardGameGeek上找到,這點非常好 。再回到你方才的問題,我差不多每次都會用BoardGameGeek。有時我在家上網瀏覽桌游時,我也會參考BoardGameGeek 。我會參考大概5、6個權威博主的測評意見 。

           

          N:很酷,這太棒了,謝謝你。這些真的很有幫助。你能回憶起某一次在線上或店里購買桌游,但是沒有參考BoardGameGeek的經歷嗎?

          C:好的,但是這種情況只會出現在我以前玩過這個桌游的時候。比如,我已經和朋友一起玩過了《權力的游戲》,實際上這也是我目前最喜歡的桌游,已經買來好幾年了。這款桌游是朋友介紹給我的,當時我們一起玩了一整天,后來我就立刻在亞馬遜下單買了。因為我已經玩過這款桌游,對桌游已經有了一定的體驗感受,我傾向于把BoardGameGeek作為參照 ,可以參考一下其他人的經驗,看看是否適合我 。也就是,如果某個桌游我已經和朋友一起玩過,而且我自己也非常喜歡,那我就會不去查BoardGameGeek,而是直接購買 。

           

          N:嗯嗯,真有意思。所以,如果你已經體驗過某款桌游,那么你就可以不借助BoardGameGeek,而是直接購買桌游。

          C:是的,因為如果已經玩過這款桌游的話,我就能很清楚地知道自己是否喜歡它。就像我剛才說的,我在接觸陌生桌游時,會去看看BoardGameGeek。你也可以看看包裝盒,上面的信息量不會太多,但一般來說你大概也能知道這個游戲是怎么一回事。我倒不是指這個桌游的具體玩法,這又是另一回事了。市面上有很多桌游,但并非每種都是好玩的。不好玩的原因也有很多。所以我更愿意相信社區里的游戲玩家的喜好。確實,我有時會因為某個喜歡的游戲在社區里不受歡迎而錯過它,但總體來說,不論是游戲本身還是購買游戲的過程,BoardGameGeek對我的幫助都很大。

           

          N:好的,所以你剛剛聊到的就是你參考BoardGameGeek的過程。

          C:是的,這樣會更有效。我有時也會在躺床的時候偶然看到一些信息,有時也會聽朋友提到一些,或者在上網或逛游戲極客書店的時候看到一些,但總的來說BoardGameGeek是主要的桌游信息來源,就是類似于“玩這個桌游是一種什么樣的體驗?”的游戲信息。偶爾也有這種情況發生,比如我的朋友被推薦了某款桌游,然后我的朋友再把這款桌游推薦給我,在這種情況下我直接去試玩。但如果我自己沒有玩過這個游戲的話,我可能還是會去看一下BoardGameGeek,即使這個游戲是朋友推薦的,你可能還是會有猶豫。

          對,我覺得還是得看情況。我有很多玩桌游的朋友,他們的游戲偏好和我就不一樣。也會有一些朋友會和你有幾乎相同的游戲品味,如果是他們推薦的游戲,我可能會毫不猶豫地把它加購物車。所以,在BoardGameGeek上了解別人對游戲的看法還是挺有意思的 。

           

          N:好的。你之前好幾次提到你很在意游戲的“體驗”,要么是你本人親身體驗,要么從BoardGameGeek上查找,你好像特別想了解“那會是種什么樣的體驗”。你能否再跟我聊聊你所認為的游戲“體驗感”,尤其是在BoardGameGeek上想查找的那種?

          C:好的,BoardGameGeek其實特別適合用來量化這一點。他們有兩個主要的指標,一個是復雜度。一個是極客評分。游戲復雜度是按照游戲的復雜性來評定的,分值在0到5之間。而極客評分則是用來說明游戲的好評度和排行榜名次 。例如,我知道我最喜歡的兩個桌游《權力的游戲》和《帝國開拓者》在榜單上的位置。所以我以這兩個桌游作為基準線,將其他游戲與之對比,當然,這也和我購買桌游的目的有關。如果這是一款聚會類桌游,就是你和其他人一起玩的游戲,那就不一樣了。通常來說,人們會把《反人類卡牌》(Cards Against Humanity)或《抵抗組織》(Resistance)這樣的游戲歸類為聚會類游戲。對于這類游戲,我們想要簡單點、不那么復雜的,因為和你同玩的人可能以前沒有玩過這個,游戲需要讓大家都能參與進來。像《權力的游戲》這種比較復雜的游戲,就比較適合那些硬核游戲愛好者,你可能得玩上五六個小時,甚至更久?!稒嗔Φ挠螒颉吩贐oardGameGeek上的復雜度評分和對應的的極客評分很高。你還可以從中了解游戲的大致玩法。但我對骰子游戲就不是很感興趣。我不喜歡概率相關的東西。我更喜歡那種可以自行規劃的策略游戲。比如擲骰子這種缺乏控制感的游戲,我就不怎么喜歡,我覺得很沒勁。哪怕我贏了,我也不會認為我玩了一場厲害的游戲,只會覺得運氣不錯罷了,這好像不是我所感興趣的。

           

          N:我不知道你對這個問題有沒有答案,對于骰子類游戲,它們的復雜度是不是也各不相同?或者說它們的復雜度是否有可能不同?

          C:這個問題很好。我不怎么玩骰子類桌游,所以對這方面不是很了解。我覺得這取決于是什么樣的游戲,如果擲骰子是游戲機制的一部分,你的復雜度評分仍然可能會很高。如果這個游戲只是擲骰子,那復雜度評分可能會低一些。大富翁游戲(Monopoly)算是一個相當簡單的游戲了,人人都可以輕松上手,擲骰子,擲幾個數就走多遠。游戲主要基于你當時的運氣,而這是我很不喜歡的地方。有一款由《權利的游戲》制作方出品的桌游,叫做《太空堡壘卡拉狄加》(Battlestar Galactica),那里面就有搖骰子的機制,但游戲里同時還有許多其他的機制,骰子實際上只是模擬了太空戰的隨機元素或發生的事件,擲骰子本身只是一個很小的環節,不過走錯路的時候,還是挺煩人的,但骰子本身確實存在。但這確實是一個非常好的游戲,雖然擲骰子是我不太喜歡的一種機制,但我能理解在那種情況下,你必須有一定程度的隨機性,否則這個游戲就無法進行了。但是在比如《權力的游戲》這樣的游戲里,就不會存在同樣程度的隨機性了,對吧?你可以很有策略性、很有控制感,可以一直掌控游戲,或者也可以掌控周圍的其他玩家。

           

          N:太棒了,非常感謝。那么我們再回到你剛才提到的那2項評分上,也就是復雜度評分和極客評分。對于極客評分,這是否類似于對桌游品質的整體性評分?比如,可能是0到5星?0到10星?

          C:嗯,對,極客評分是0-10分的。還有另外一個排名得分,我太不記得排名得分是從哪里來的了,它不是來自復雜度,因為可能有些游戲的復雜度很高,但人們仍然喜歡它,而它也的確很復雜。所以據我所知,復雜度的分值并不納入排名得分的計算當中。我覺得排名主要是受極客分值影響的。比如,《權力的游戲》的極客評分是7.6,復雜度評分是3.65,當然這也是我的參照基準。舉個例子,盡管我知道有些游戲的極客評分是比《權力的游戲》高的,但我并不喜歡玩,也就是“游戲排名很高,但不是我的菜”,《詭鎮奇談》(Arkham Horror)就屬于這樣的情況,它的游戲類型和《權力的游戲》相近,但我不喜歡它。

           

          N:好的,這聽上去很有趣。這引出了我的下一個問題,復雜度和極客評分這兩個指標你都會考慮嗎?這兩個指標對你來說一樣重要,還是有所偏重?

          C:不不,對我來說極客評分通常更重要。復雜度的話,網上有很多很不錯的參考資料,比如游戲指南之類的,所以復雜度評分對我來說不算太重要。唯一個會在意的情況就是,如果我發現某個聚會類桌游非常復雜,我可能就不會買它,因為我不想挨個教大家怎么玩。我想要的是大家能快速上手,然后玩得開心的。我不會花1個小時向10個人解釋這些規則,這對任何參與其中的人來說體驗都不,這也是《權力的游戲》的上手時間會這么長的原因之一,即使他們已經看完一個20分鐘的視頻教程,你可能還是要花半個小時來解釋這些規則。在第一局之后,他們可能就知道應該怎么玩了,之后的第二局對他們來說可能就會好玩得多?!稒嗔Φ挠螒颉返纳鲜謺r間很長,但對我來說,這是值得的,這個游戲確實非常好。但如果是像聚會類桌游,比如像《抵抗組織》或《炸彈貓》(Exploding Kittens)這樣的,你能在10分鐘內把它解釋清楚,他們的復雜程度比較低。而像《權力的游戲》、《帝國開拓者》這類復雜的游戲,他們的復雜度得分更高,游戲的內容比較復雜,但是對于硬核玩家來說,這是一款很棒的游戲。我不會和我父親玩這個,因為他不太喜歡這類游戲。但如果是我桌游圈的朋友,他們就非常喜歡這種程度的游戲。當然可能還會有人覺得這類游戲的復雜度對他們來說有點高,但依然可以有其他的折中選擇。

          N: 太棒了,酷,很完美。如果我理解正確的話,極客評分比復雜度評分更重要一點。

          C:是的。

          N:但這其實也要視情況而定。

          C:對。

           

          N:好的。你提到你基本上是以《帝國開拓者》和《權力的游戲》為參照基準的。你能談談你所說的參照基準具體是指什么嗎?

          C:好的,這個主要就是給自己一個錨定點。這樣我就知道這兩款游戲位于“我真的很喜歡”的位置上,也知道社區對這兩款游戲的復雜度和極客評分大致是什么樣。當我再看其它游戲的時候,把它們與基準線對比,我就可以大致知道它們的好壞了。這其實就是一個錨定點,我用自己熟悉的游戲和其他游戲作比較。不過這樣做不一定都是對的。有些游戲可能評分是更高的,但我卻不是很喜歡。也會有些游戲的評分真的比較低,但我卻很喜歡。所以這只是一個判斷某款游戲好壞的基點而已。

           

          N:好的。能否跟我分享一下這種情況:某一款桌游的評分低于你的基準線,但你卻很喜歡它,甚至還購買了它。

          C:唔,好問題。

          N:不一定要說出桌游的確切名字,我更想知道是你有沒有這樣的經歷。

          C:有一款游戲叫做《七大奇跡》(Seven Wonders) ,我都已經打算買了,但我沒有那么喜歡它。這個游戲確實很不錯,玩得時候我也樂在其中,但它沒有像《權利的游戲》或《帝國開拓者》那樣地吸引我或者說黏住我。我也說不清是為什么,可能我自己都不清楚原因。也許我更加喜歡《權利的游戲》或《帝國開拓者》那樣的主題。確實《七大奇跡》的極客評分更高,但不是我的菜,它并不那么吸引我去玩。當我在想“嘿,今天為什么不玩一局桌游呢?”的時候,這個《七大奇跡》從來不會像《權利的游戲》或《帝國開拓者》一樣地直接從我腦海里跳出來。這就好像是我的默認選項,說明我是真的很喜歡這些游戲。

           

          N:嗯嗯,你這么說可真有趣。也就是說,你不一定是不喜歡,只是它沒有直接在你的腦海中蹦出來,或者說沒能勾起你的欲望。你剛才說你也不清楚為什么。但是我在想,你之前也提到玩法機制和主題類型是你選擇桌游的依據,那會不會是這方面的原因呢?

          C:有可能。人真的會深陷于正在做的事情之中,不可自拔?!稒嗔Φ挠螒颉肪褪且粋€你可以連著玩五六個小時的游戲。它的小說和電視劇我都看過了,你需要在游戲中扮演某一個特定的家族,比如我扮演拜拉席恩家族。然后每當我失去一個步兵,那我就會非常投入的大喊:“噢不!我丟了一個步兵!” 。同樣,《帝國開拓者》的時間花費雖然比較短。但是你需要在招兵買馬搶占優勢,擴張你的帝國,這個游戲也是挺棒的?!镀叽笃孥E》也是這樣,精品游戲是非常有策略性的,會有不同的游戲方式,但是《七大奇跡》的游戲時間要短得多,我覺得最多1個小時。這里也會有不同的陣營,但你確實就不會那么喜歡它們,至少我上次玩的時候就覺得它不是特別吸引我,可能是游戲的“投入產出比”失衡吧。

           

           

          N:你剛剛提到了游戲的“投入產出比”失衡,能否請你解釋一下你所說的“投入”具體是指什么呢?

          C: 我提到的“投入”,可以是為所在陣營或者隊伍獲勝的投入,也可以是為所選擇的世界古代文明獲勝的投入,當然還有更多可能。像《權利的游戲》、《帝國開拓者》這類游戲的暢快感會更加持久,就像做完決策后那種興奮感仍然余音繞梁,三日不絕。當我回想自己的游戲經歷的時候,我覺得我的經歷足以和《權力的游戲》里驚心動魄的權力爭奪相媲美。你會記得某個時刻某位玩家的精彩操作,就像《權力的游戲》中的暗箭傷人或《帝國開拓者》中的組合出牌一樣。有時你或對手用了某一招,破壞力驚人,然后你好像就學到了很多?!镀叽笃孥E》的可重玩性很高,每次都像是新的游戲一樣。但是我不記得在玩它的時候會有那些讓我覺得“我去(Damn)!也太棒了!”,或者我(痛惜或不甘地)覺得“?。。?!”的時候。而這恰恰就是我想從其他游戲里獲得的那種感覺,我想這可能就是那本《上癮》書提到的那種。

           

          N:好的。我不確定你是否可以回答得我這個新問題。但是,如果你可以改變《七大奇跡》的設定,讓它更接近于《權力的游戲》或者《帝國開拓者》,你會怎么做呢?

          C:這是個好問題。不過我大概有一年沒玩了,所以不太記得清了。我不確定我會不會這么做,畢竟他們是不同的游戲。有些時候我不希望我所玩的游戲都一樣地高投入。我覺得《七大奇跡》的策略性很強,它舍棄了很多玩《權力的游戲》的時候可能會有的情緒。它其實很不錯,我不確定自己是否愿意改變它。我是喜歡它的,我剛才也提到,玩《七大奇跡》的時候我是開心的,只不過那是另一種樂趣罷了。

           

          N:這挺有意思的。好的,那我們再回到你的桌游購買決策。所以,《七大奇跡》擁有更高的評分對吧?

          C:對,《七大奇跡》 的極客評分更高,但復雜度更低 。

          N:好的,所以《七大奇跡》的極客評分更高這一點促使你買它的嗎?

          C:對。當時買這個游戲是因為有幾個在巴黎一起玩《權力的游戲》的朋友剛回到倫敦。當時《權力的游戲》我們已經玩了很多次了,所以我們想嘗試一下別的游戲 。《帝國開拓者》我們已經有了,所以沒有理由再買它。我們去了一家我們經常光顧的桌游館,我們和店員聊了聊,他告訴我們《七大奇跡》很熱門 ,可以考慮一下。我們查了查BoardGameGeek,看到這款游戲的評分很高,所以我們就買了。整個周末我們幾乎都在玩這個游戲。我覺得它集合了那些我們想要的且不同于以往所玩過的游戲的元素。我不想再買同樣類型的游戲了,我們想體驗一些不一樣的。這就是當時我購買《七大奇跡》的場景。其實我在BoardGameGeek上也好幾次看到有人推薦它,所以這是一款很受桌游社區青睞的游戲。所以買它應該是不錯的選擇。

          N:好的。所以你買下這款桌游,然后帶回家和朋友一起玩了 ?

          C:是的。

           

          N:好的。那么你覺得在BoardGameGeek上找到的信息中,有沒有可以幫助你決定不要買某款游戲,或者讓你再重新考慮是否需要購買的?從你先前所說的來看,極客評分和他人的推薦似乎格外能影響你的購買決策。

          C:可能某款游戲很好,我也知道為什么它的評分很不錯 ,但這個游戲就不是我喜歡的類型。購買桌游的本質其實就是找到你喜歡的或熱愛的東西。什么信息幫助我決定重新考慮?你指的是讓我決定不買這個游戲,還是轉向購買其他游戲呢?

          N:你問得非常好,我猜兩者都算吧。不如我們先談談第一點。如果某款游戲,以你的眼光來看它并不差,它的評分也不錯,但你就是不喜歡它。你有沒有這樣的經歷呢?

          C:嗯,說實話,我所買的游戲都是我喜歡的,只是不同的游戲我有不同的喜歡理由,在不同場景下的偏好也不同。所以說實話,我也想不到這樣的經歷。

          N:那有沒有什么類似于《七大奇跡》的,評分很高,但你后悔買了它。

          C:其實沒有哪個游戲是我后悔買了的。有些游戲是我不常玩的,可能我沒有充分發揮出某些游戲的購買價值,也就是游戲的單次平均花費。像《權力的游戲》的售價就超過了100歐,它本身并不便宜,但這么多年下來這個游戲我大概累計玩了不止100次。然而有些游戲可能50歐元左右,但我可能只玩了五六次。但每一次我玩這些游戲的時候,都是樂在其中的。每一款游戲都是有不同的使用場景的。

          N:所以你既沒有后悔的時候,也沒有過想要退貨的時候?

          C:沒有。

          N:那你有沒有過想用某款游戲交換另一款的時候?

          C:也沒有,我挺喜歡收集桌游的。我喜歡擁有各種各樣的私人收藏品。我對書也是這樣,我收藏了很多書。

           

          復盤一下!

          我自然也是會犯錯的。相信在這里訪談里我也犯了不少錯。我建議你以這個訪談為例,標出你覺得可以做得更好的地方,也標出你希望可自己的訪談里可以避免的內容!

          因為我的訪談對象是我的未婚夫,所以我稍微不是那么正式,不過我平時的語調和風格確實就是這樣的。

          以下是一些我有所遺漏或者需要加以改進的地方:

          • 需要讓受訪者簽署保密協議和知情同意書。
          • 可以增加一些暖場問題。我最喜歡的暖場問題有:
            1)你有什么興趣愛好?
            2)你平時空閑的時候會做些什么?
            3)你最近嘗試過什么新東西嗎?
          • 我說了太多的“棒(awesome)”和“酷(cool)”。
          • 要避免詢問關于未來的問題。

          翻譯:Sheffey   審校:Grace Gogh & 天蛙 |   UXRen翻譯組 #363譯文
          作者:Nikki Anderson
          原文標題:《An example of a generative research interviews》

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

          如何打造用戶喜愛的產品

          資深UI設計者

          一、角色職責

          產品經理經常會面對來自四面八方的需求,例如來自公司高層、業務方、用戶調研反饋等等。如何評判哪些創意點子值得投入開發資源,通常PM會借助MRD來完成這個工作,也就是評估產品機會。其實很像我工作中遇到的「需求來源分析」。

          在評估并確定好產品機會后,還要探索產品的解決方案,包括不僅限于產品設計重點、產品流程、交互體驗等,也就是「定義要開發的產品」。

          通過我會采用敏捷開發的方式,也就是小步快跑,快速迭代,先尋找MVP方案即明確產品的核心價值,一個版本迭代一個核心價值的內容。這需要PM在基于公司業務的基礎上,了解用戶想要什么,再去對需求進行本質的思考(目的、價值、行動、驗證)。

          這里對于產品新人,我總結出來的一個經驗是:時刻保持對需求的思考而非項目管理。也就是不要花過多時間在和開發一起奔東奔西解決問題,而是多花去思考需求本身。我剛做產品經理的那個月,經常會把自己當成「項目經理」。

          很典型的就是自己的需求小,但總是推這個推那個,對需求的思考不夠。

          因為人總是會沉溺于「能夠解決問題的興奮感」里,例如一起和開發找到了用戶的問題所在,一起和開發把問題解決了,很開心的那種感覺。我記得當時在梳理轉介紹口徑,一起和測試花了整個下午找到口徑不對的問題點并解決,當時覺得「好開心啊解決了一個問題」。

          但是當導師問我整個下午做了什么,我回答這個時,她問我「你是不是覺得挺開心和興奮的?但是你學到了什么呢?」似乎并沒有。

          因此不要沉浸在這種興奮感里面,初當PM,就應該踏實地、一步一步地去把每個需求思考透:思考場景、用戶的需求怎么來、怎么滿足、哪種方式更合適、如何自洽…盡管和「跟開發一起解決問題」相比真的很難,但是也要讓自己跳出舒適圈,逐步克服,3-5個月之后,就會發現一個不一樣的自己!

          二、評估產品機會

          在我看來,這些問題不涉及具體的解決方案,只是幫助我更好地明確待解決的問題是什么以及問什么,類似于黃金圈法則的「why/how」。

          在接業務方的需求時,難免會聽到他們一上來就和PM討論解決方案,這時PM就需要幫助業務方思考清楚產品要解決什么問題,為什么要解決這個問題,目標是什么。

          盡量避免將評估產品機會留到和解決方案一起考慮,因為當解決方案遇到困難時,這樣的做法會讓自己把產品機會也一并放棄,這可能就是典型的「沒有思考好為什么做」的現象。

          在上述10條「如何評估的問題」里,私以為最難回答的就是第一個問題——產品要解決什么問題(產品價值)。

          解決什么問題,背后就是在問:這個需求,解決了什么用戶在什么時候的什么場景下,遇到的什么問題,并且能夠獲得什么結果,也就是自己一直反復練習的「用戶場景」。這個問題,不光是PM需要思考清楚,產品運營也同樣很重要。

          上個月接到運營側一個需求,是希望讓產品側支持一個活動玩法,讓剛購買體驗課的用戶分享邀請海報,然后給予金幣獎勵,以下對話(非原話,大概意思):

          • 我:這個活動的目的是什么?
          • 運營同學:促進轉介紹,提升轉介紹例子數。
          • 我:具體目標是多少?
          • 運營同學:因為之前沒有做過這個,所以只要是做了就肯定會有效果。
          • 我:那是否可以根據已有的數據,來預估目標呢?另外為什么是選擇這個群體來做?
          • 運營同學:因為我們的體驗課用戶體量很大,每個月有xxxx這么多,加上這只是隨手轉發,還能獲得獎勵,不好么?
          • 我:試想一下,一個剛購買體驗課的用戶,他連我們品牌的課程是怎么樣的都不知道,他為什么要幫我們去推廣宣傳?這部分用戶最想做的就是趕緊有人來聯系他、告知怎么上課然后趕緊體驗體驗課程內容。所以反而是應該促進這部分用戶趕緊去上課,提升CC的服務效率和質量。

          因此可見,我們去梳理剛購買體驗課的用戶的場景,根據自己體驗來說,會是「我剛購買了體驗課,怎么上課???有沒有老師來服務我?幾點上課?。可险n前要準備好什么嗎?上完課作業遇到問題該找誰?」這類的場景問題。

          對于這批用戶,最早讓他們做轉介紹的時機,可能是出現在「上完體驗課」那一刻。比起和他人談論解決方案,一開始就需要明確目的和場景。

          三、產品原則

          Marty Cagan 對產品原則的定義是:是對團隊信仰和價值艦的總結,用來指導產品團隊做出正確的決策和取舍。它體現了產品團隊的目標和愿景,是產品戰略的重要組成部分。

          在團隊內,產品原則是整個產品團隊的戰略指南,一般是產品負責人帶頭制定。所以通過觀察和學習,也可以了解公司的企業文化和團隊的價值觀,讓團隊在認知上保持一致。

          或許在某些時候,會因為方向不一致導致沖突,產品原則所制定的優先級和目標就可以幫助團隊成員達成一致。

          例如,團隊首先應該確定哪個目標對用戶最重要,是易用性、響應速度、功能、成本、安全性,還是用戶隱私?只有先統一對產品目標和目標優先級的認識,大家才能在此共識上進一步討論各種方案的合理性與可行性。

          四、產品驗證

          一些產品團隊對自己的產品往往過于自信,只顧埋頭開發,總想等到公開測試的時候再收集反饋意見,但總是亡羊補牢為時已晚。這樣的做法可能會導致產品在上線時與達成目標相差較遠。

          作者提出的三方面測試,第一點是可行性測試。這點完全可以在產品方案ing(產品邏輯輸出過程中)時去和開發討論。

          對于小需求,直接詢問即可;對于大需求,開發需要提前進行技術預研,討論哪種技術方案對需求的實現更合適,兼容性和后續需求的拓展性更包容,有何技術障礙,是否需要跨部門的開發聯動等等。

          對于產品新人,切忌因「不好意思、這樣問會不會很蠢等胡思亂想」而不去詢問。因為等到需求文檔寫完、需求評審過程中發現技術障礙的代價遠比起初大得多。

          或者是在產品設計過程中,可以自己去百度一下某些問題的技術方案,拿捏不準再去問開發,這樣做一來會讓開發覺得你比較有「誠意」(因為你是已經帶著自己的思考和解決方案去和開發溝通了);二來自己也能掌握基本的技術知識,能比較理解開發在說什么。

          第二點是可用性測試。對于作者提到的「真實的用戶、目標的用戶」,或許不是在每家公司都能頻繁地直接地接觸用戶,但是也可以這么解決:如果我的需求是forB端,那拿著原型去問班主任、業務主管(目標用戶)的意見,了解他們的使用習慣即可。

          但如果我的需求是forC端(可能是學員、家長),一種方案是在電話調研時順便詢問;一種方案還是去問班主任,因為他們是離家長最近的人;還有一種方案是加一位家長作為微信好友,長期保持電話聯系,向朋友一樣詢問意見。

          雖然作為產品需要向張小龍學習,10s內變成產品白癡地去體驗一款產品,但產品經理終究不能代替真實用戶的反饋意見,如果實在無法接觸用戶,或許身邊的開發、測試都是值得一試的「真實用戶」呢~

          五、管理上司

          導師在我剛成為產品的時候,反復和我強調「向上管理」。

          或許上司對產品新人來說,像是一種權威、嚴肅、面無表情的「怪獸」哈哈,比較幸運是能遇到像朋友一樣的導師,但是我們更應該去思考,如何做好「向上管理,積極反饋」。

          我的做法是:

          1. 前三個月每天寫日報,總結當日工作,更重要是寫下自己對工作、成長的思考(進步與不足);三個月之后每周寫周報。
          2. 日常不管遇到什么問題,都必須帶著自己的解決方案去和老大溝通。因為老大比我有經驗,我能想到的問題她都能想到,但是她更希望聽到我對這個問題的思考程度如何。不要讓上司成為作答者,而是選擇者。
          3. 及時反饋。當老大主動問你一個項目的進度或某個問題的答案時,就已經說明你的反饋慢了,老大沒有在他需要得到答案的時候得到,所以才來問你。因此需要摸清老大的喜好,比如什么時候有空聽你的反饋,在她忙的時候盡量不要一長串釘釘轟炸….之類的。及時反饋的內容包括不僅限:交代給你的任務的進度;某個問題的處理結果和時間;項目遇到的風險及當前解決方案;事情進展不順利的困難障礙。
          4. 學會向上司借力。這一點是很難去體會和做,但也是很重要的。借力,是指向他人借其力,借到力,借好力。為什么是很難去體會和做,因為我剛開始工作,總會擔心去麻煩別人,習慣自己去解決問題。但正是因為這樣的思考,我很難去邁上更高臺階。原因在于一個真正優秀的產品經理,是懂得團隊每個人的長處,提供機會去發揮隊友的長處,比自己埋頭苦干,更容易做成事。老大也是一樣的,有一些事情,你不會不要硬撐,就需要及時向老大借力。在她的幫助下,你更明白下次怎么做,如果你不說,老大怎么會知道你需要借力呢?
          5. 尋找對標對象。對標對象即為你可以學習、你想具備像ta一樣有某種能力的人。這個人可以是你的導師,也可以是你的產品總監。導師很大的一個好處是在于,你可以從他身上找到自己不足的地方,然后模仿并刻意練習,久而久之掌握你想得到的能力。例如我的導師,我會經常觀察她是怎么和別人溝通的,怎么說服別人,怎么做需求評審…,這是職場上成長的最大幫助技巧了!

          六、產品經理的反省清單

          在這本書的最后,Marty Cagan給出了一份產品經理的反省清單。從產品價值、產品設計、到產品管理、團隊管理,都是我們每個人都需要去思考的問題。所以其實雖然人人都是產品經理,但做出好產品真的是難于登天呀!

          最后我認為作者在「尋找出色的產品經理」中說的很對的一點,也是給自己今后從初級到高級產品的掌握能力,如下所述:最寶貴的經驗不是行業知識或技術(這些都可能過時),而是打造優秀產品的流程、領導產品團隊的能力、應對產品擴張的經驗、個人對自己的認知,以及自我激勵的能力。

          文章來源:人人都是產品經理  作者:莫琳

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



          微信朋友圈被“折疊”,透露出怎樣的產品設計思路?

          資深UI設計者

          微信作為一個用戶體量龐大的一個熟人社交平臺,在我們日常生活和工作中都會用到;而微信經過不斷地發展也更新了很多新的社交功能,并且具有商業價值,朋友圈也是其中一個;本文作者分享了關于微信朋友圈被“折疊”的產品設計思路,我們一起來看一下。

          最近微信朋友圈被“折疊”的設計引起了網友熱議,褒貶不一。

          有的人認為每天不用被鋪天蓋地的刷屏廣告“淹沒”了,有動力多刷一會朋友圈,終于有機會在茫茫廣告里找到朋友的動態;但也有反對的聲音,認為微信管的太寬了,如果不需要看,用戶早就主動“屏蔽”了,希望微信團隊可以改回來。

          微信背靠10億用戶,每一個小的設計改動,都有可能引起“全民轟動”;面對如此龐大的用戶群體,以及千人千面的需求,微信團隊表示:

          “朋友圈是用戶分享和關注朋友們生活點滴的空間,一直以來批量或高頻次發送營銷性信息的行為,存在侵擾用戶安寧、減損用戶朋友圈體驗的問題,(因此)被較多用戶投訴?!绷硗?,團隊還表示:“根據《微信個人帳號使用規范》,此類內容(營銷信息)一經發現,騰訊將根據違規程度對微信帳號采取相應的處理措施,包括但不限于折疊內容、將內容處理為僅發布者自己可見等。”

          當產品面臨質疑時,如何從眾多的聲音中,抽絲剝繭,刪繁就簡,找到與產品定位真正匹配的核心需求?通過下述三方面思路分析,我們一起來看看要如何抓住產品的核心用戶。

          一、共情

          解讀他人的真情實感,即為共情,又叫做同理心,是體驗他人內心世界的能力。

          它包含三個方面的含義:

          • 觀察、收集用戶的言行舉止,深入用戶內心去體驗他們的情感和思維;
          • 透過用戶的經歷和個性,理解他們的本質性需求;
          • 運營設計語言和信息傳達技巧,把對用戶的共情傳達給用戶,并影響用戶取得真實反饋。

          最近娃哈哈集團和斗羅大陸熱門IP聯合,推出新版低糖風味酸奶飲品,深度共情年輕消費群體。那么,他們是如何做到的呢?

          結合了騰訊視頻熱播國漫《斗羅大陸》最新劇情,女主小舞“獻祭”而死,而廣告恰恰演繹了,喝了酸奶飲品小舞即刻“元氣回歸”。

          首先對觀眾遺憾的心情,給予及時“補償”;其次,運用廣告語言,分別讓男女觀眾產生強烈的帶入感,比如:

          • 小舞說:“哥,你真不愧是唐門營養師”。(滿足男性用戶的成就感)
          • 唐三說:“每一種滋味都是為你”。(滿足女性用戶的安全感)

          我們在來看看小紅書上面的部分評價內容,提到劇情、口味,低糖、適合誰喝,顏值高,均透露出對飲品的關注和喜愛。

          娃哈哈集團借用《斗羅大陸》IP作為橋梁,將用戶渴望找到安全感、成就感的自我體驗,寄托在自己的產品上,叫做“心理投射”式營銷。

          所謂“心理投射”說得直白一些,就是“借物傳情”,“借景抒情”,人們把自己內心的感受和內容,通過客觀世界反應出來;因此,常??梢詮囊粋€人對他人對看法、以及自身的興趣愛好,推測這個人的心理特征和意圖,而不僅僅通過語言來解讀他們的需求。

          二、不自覺欲望

          在訪談的過程中,提問是研究用戶動機的可行性方法之一,但訪談不僅僅是語言交流,還包含肢體語言、微表情以及隱藏在內心深處的沖突和欲望,這些需求屬于用戶的不自覺欲望。

          如果說自覺欲望是用戶清晰的知道自己想要什么,那么不自覺欲望,就是連用戶自己也說不清,道不明的欲望;如果把用戶的自覺欲望比喻成冰山表面,不自覺欲望就是冰山深入海平面以下的部分。

          比如,明知道吃蛋糕要長胖,但是還是忍不住要吃;明知道熬夜對身體不好,但是還是忍不住刷手機到午夜。

          那種“忍不住”的感覺就是人們最深層的需求,吃甜食、刷手機可以讓人心情愉悅,讓人產生放松的感覺;而“控制”需要人們用意志力去規范,而非出于“本性”。

          娛樂性產品重在激發人們的不自覺欲望,釋放本性,比如《和平精英》為了讓新手盡快融入游戲,自動匹配“機器人”和玩家戰斗,讓玩家贏得“很爽”,等玩家對游戲產生情感依戀,再逐漸增加和真人匹配的戰斗。

          而教育類產品要運用用戶本性,鼓勵用戶形成良好自律性;比如在記單詞第一天,寫下學習計劃并鼓勵分享出去,在為用戶細化目標的同時,“分享”行為形成一種“自我形象壓力”,設計者撬動用戶內心,向往自己變得更好的本性,慢慢讓用戶形成學習習慣。

          三、透過數據看本質

          以上我們從“釋放-壓抑”的縱向深度上討論了用戶面對自己欲望的處理方式,接著,我們在“自我-適應”的橫向緯度來看看用戶的處理方式;在社會中,人們在歸屬群體和獨立自我之間進行權衡,兩者向來也是此消彼長的關系。

          比如,年輕群體在選擇“追求自我”還是“適應環境”方面,也有了新的突破和巧妙的和解,具體體現在95后大多屬于獨生子女;他們是互聯網最原始的居民,童年伴隨著網上社交一起成長,更樂于在互聯網上尋找志同道合的朋友,而非身邊的熟人社交;形成一種“獨而不孤”的社交氛圍,在“獨處”和“融入”環境方面相得益彰。

          通過上述縱橫兩個緯度的標尺,我們可以建立消費動機分析模型,來解讀大數據行為標簽背后消費群體的渴望。

          以B站為例,通過分析B站用戶的興趣標簽,“順藤摸瓜”式的洞察B站用戶群體的核心需求;數據清洗后,我們收集到以下12個緯度的興趣熱門標簽:

          游戲高玩、漫畫達人、生活記錄、音樂家、好奇心學霸、吃貨軍團、時尚潮人、運動健將、鏟屎官、數碼發燒友、愛豆粉絲、汽車科技。

          根據對上述興趣的理解,每個標簽可以按照如下表格進行拆分解讀,最后對每種傾向進行統計。

          合計出心理動機傾向最明顯的三個象限是:樂享釋放、融合溝通、活力探索。

          而這些心理特性,正是符合B站作為24歲以下,年輕用戶最愛的,文化社區的產品定位,把B站打造成用戶釋放自我、融合溝通、活力探索的平臺。

          B站的激勵機制,極大鼓勵up主的創作細胞,同時開發了他們探索的內在需求,為B站產出海量內容;而這些內容更好的滿足了廣大用戶樂享釋放、融合溝通的訴求,形成“自產自銷”的良性循環。

          2020年,B站彈幕頻率出現最高的詞語是“爺青回”,折射出年輕群體對青春、活力生活的渴望與留念;它頻繁出現在B站彈幕上,也從另一個側面反應出在B站是可以讓這樣的情緒棲息的場所,是B站深根目標用戶,并獲得良好反饋的體現。

          四、基于情感共鳴的取舍之路

          最后,我們再來看看陪伴我們每個人的微信,產品定位很明確的指出是:“用戶分享和關注朋友們生活點滴的空間”,舊版微信的開屏畫面,暗示著“孤獨”的個人與世界“相連”的深深渴望。

          而剛剛升級的8.0版本,開屏動畫簡單的幾句:“我看見你,我看見笑臉,我看見煙花,我看見一首歌,我看見你看見的”迅速讓用戶產生共鳴感,拉近產品和用戶之間的距離,激活用戶的“有你陪伴不孤單”的不自覺欲望;而新功能鼓勵用戶分享情感,情感外化的設計也很快上來熱搜。

          朋友圈自動折疊的內容,通常是用戶直接復制、粘貼的內容;對于眾多微信創業者來講,思考如何做出有個人特色IP的朋友圈,想辦法不斷輸出優質內容來打動你的朋友,才是事業成功的制勝法寶。

          微信團隊在龐大的用戶群體中,做出與產品定位匹配的“取舍”決策,也將對產品的穩定發展,具有深遠意義。

          文章來源:人人都是產品經理  作者:設計師的翻車日記

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


          UI設計中的用戶體驗設計

          ui設計分享達人

          設計到了瓶頸時候需要打破瓶頸的好方法就是否定,否定自己之前做的一切東西開始去探索學習新的設計方向與用戶體驗。

          前言——用戶體驗五要素

          AJAX之父Jesse James Garrett在2007年出版了一本名為《用戶體驗要素》的書,提出了從5個要素自下而上的建設用戶體驗;從最早這本書針對web端的設計到現在移動互聯的app設計,因為其超強的普適性和實戰指導性被廣為流傳為UX設計中經典的項目創建與研究的方法論。



          1.1業務訴求產生app功能

          2008年,當你宅在宿舍玩游戲,發現已經很晚了,你打開餓了么APP,點了一個蛋炒飯,半個小時后就有人把飯給你送到宿舍。你禁不住說道“Aha,原來在這個APP中可以足不出戶就能吃到身邊的美食!”


          2015年,當你在學校散步,發現有很多輛小黃車,然后下載一個APP就可以將車子騎走,你會禁不住說道“Aha,原來共享單車可以這么便宜就隨便騎呀!”

          好的產品一定是企業服務能力的體現,要保證每一個產品功能都能落地實施,否則產品只是鏡花水月。沒有能力去支撐的產品都是耍流氓。因此要基于企業的發展布點規劃,每一個我們做出的核心決定,都應該建立在我們確切了解的基礎上。


          但一個好的軟件之初應該去怎么思考未來設計的方向呢?通過5w1h指導我們更加全面的考慮問題并高效解決問題。


          What:產品具體形式是什么?做成什么樣?

          Who:產品為誰設計?目標用戶是誰?誰購買,誰使用?數量有多少?

          Why:用戶為什么要選擇我們的產品?除了我們的產品外,他還有哪些選擇?產品被替代的可能性大嗎?

          When:用戶什么時候使用我們的產品,多久用一次,會持續多久?

          Where:用戶在哪里使用我們的產品?

          How:用戶是怎么使用它的?


          1.2用戶需求

          弗洛伊德認為,如果將人的整個意識比喻成一座冰山的話,那么浮出睡眠的部分屬于意識的范圍,淹沒在水下的那片深不可測的部分屬于意識的范圍,而鏈接意識和無意識的那層面屬于前意識的狀態,這就是著名的“冰山理論”。



          無意識設計是深澤直人提出的理論,是指通過有意識的設計實現無意識的行為。無意識并不是真的沒有意識,而是人們知道自己需要某些東西,但還沒有意識到到底需要什么。



          以商場購物流程為例把握整體環節

          用戶體驗顧名思義就是“用戶使用產品時的心理感受”。用戶體驗可能來自產品給用戶留下的第一印象,也可能來自用戶長期以來感受到的正面或者負面影響。理想的用戶體驗是用戶感到高興、滿足、驕傲甚至是愛上這款產品。



          通過問卷調查等方式對用戶進行調研,收集用戶對產品的反饋,分析用戶認為本產品中最有價值的功能點是什么?做了什么關鍵動作才認識到產品有這個功能點的?收集匯總產品的一些關鍵功能點之后進行分析,思考產品想要解決用戶最大的痛點是什么?產品是如何解決這一痛點的?競品是如何解決這一痛點的?我們與他們的解決方式有什么不同?如何讓用戶認識到產品的價值等。

           通過上面用戶超市購物邏輯的分析/發現/了解/反思,可以精確的了解到當前電商軟件設計中的分類/購物車/購物卷/配送等功能的設計應用的必要性。



          戰略層中明確了用戶需求和產品目標后,范圍層就要確定做哪些功能、提供什么內容來實現產品目標。



          上圖可看同樣的購物app首頁功能卻有著極大的不同,拼多多與京東還是以傳統的電商頁面為主,而得物(毒)卻以一種展示形式呈現出來。為什么得物要以展示性功能進行首頁的展示,而京東和拼多多要以商品為主去展示整體功能呢?



          在我看來因為面對用戶整體的不同,整體功能和展現內容也有不同的展現,如計劃需求型的商品有固定的需求或者確定的購物計劃才去進行需求型購買。而對于潮牌的用戶群體是因為在購物現場見到某種產品或某些營業推廣、廣告宣傳,提示或激起顧客尚未滿足的消 費需求,從而引起消費欲望決定購買,其實這是購物現場刺激的結果,是的一種刺激沖動型消費。

           


          好的產品設計是順勢而為,而不是重新定義用戶體驗,更全面地了解用戶畫像,可以幫助我們作出更有方向,更符合用戶需求。



          在設計主要的頁面的時候需要問自己幾個問題,功能導向是否符合產品目標?核心功能板塊是否缺失?頁面布局是否一致等問題。



          通過觀察以上的功能但是卻又有很大的不同,在拼多多首頁的設計以產品為主,而得物app卻以用戶分享頁面為主;拼多多設計風格為一種較為“接地氣”的頁面,得物app卻以一種“高端時尚”的頁面。

           


          為什么要以這兩種風格去設計這兩款軟件呢,同樣是國內大的電商平臺,為什么一個風格高端時尚一個“低端混亂”?

          模擬用戶的行為,當一個產品可以模擬用戶的行為,將用戶代入真實的情境中,用戶就會對產品產生深刻的認同感。在以用戶畫像進行分析,當一個60歲的叔叔,晚上5點準備為一家人去做晚飯之前,去給家人買菜。他是更喜歡去高端的專賣店去買還是去一個臟亂的菜市場去買菜呢?結果顯而易見在會更加傾向于市場,因為市場給人最直觀的印象就是價格便宜,能以最便宜的價格去買到自己想要的物品。

          再進行一個用戶畫像進行分析,一個00后的潮男,他要為自己買一款好看的球鞋,他的購買路徑是什么呢?首先他需要去了解什么樣的什么品牌款式的鞋才是最時尚的,其次他會選著一個最專業的品牌專賣店或者大的電商平臺去進行購買,因為這樣能給他最大的品牌保障。

          通過以上這兩點才能更加詮釋一個產品的設計方向和最佳的用戶體驗。



          4.1更舒服的閱讀效率


          根據尼爾森F模型,我們可以得出幾個心理暗示:

          用戶快速掃視時,具體的文字并不重要

          多用小標題、短句引起閱讀者注意

          將重要的內容放在最上邊



          4.2更舒服的操作位置

          其實,拇指操作熱圖最早是由設計師Steven Hoober于2011年的書《Designing Mobile Interface》中使用,其中的綠色部分被他稱為“單手握持時拇指觸摸最舒適的區域”。這些區域的測量是通過1333份觀測分析總結出來的,這些分析數據還表明,49%的用戶習慣于單手握持手機,用拇指操控屏幕,而用另外一只手做其他的事情。同樣是基于當年的這些報告,還獲取了以下信息:

          36%的用戶會雙手環抱手機,用其中一只手的拇指操控屏幕

          15%的用戶會用雙手握持手機并用兩手的拇指操控屏幕,其中90%的用戶操作時習慣屏幕豎著,而10%的用戶偏向于橫屏操作。


          結合觸屏拇指熱區和推導模型,將高頻操作放在最容易點擊位置,降低用戶使用成本,提升用戶體驗。


          4.3更短的操作路徑


          合格的設計師能夠繪制風格統一的圖標,而優秀的設計師能夠創造風格獨特的圖標。我們是否能夠在最求大小一致、圓角一致、線寬一致、視覺一致和配色一致的同時,為它的視覺表現力加入更多的創意呢?


          心理學認為,情感是人對客觀事物是否滿足自己的需求而產生的態度體驗,當這種需求得到滿足時,人們會產生愉悅、喜愛、幸福的情感。延伸到APP設計中,在產品加入情感化設計可以成為用戶之間的感情的傳遞橋梁,增加用戶對產品的好感度。情感化設計不是轟轟烈烈,有的時候僅僅是一個icon,一個圖片一句話。情感化設計讓產品變得有溫度,讓用戶獲得愉悅的使用體驗,這些簡單的細節設計充滿了積極的情緒。它滿足產品的功能性和易用性的同事追求更高層次的目標。


           

          情感化設計在空白頁設計中發揮著巨大的作用,他通過設計手段來減輕用戶在看到一個毫無內容的頁面時產生的挫敗感。

            

          Tabs是APP設計中最常見的控件之一,它幫助界面進行快速的信息分類導航。在視覺表現形式上,Tabs和標簽欄同樣也分為選中狀態和未選中狀態,一個好的Tabs既要有設計感又符合產品特性。在一個APP中有許多的界面,每一個界面又有許多的元素,那些同類的元素應保持統一的設計樣式。通常個人中心的人形剪影,它代表著用戶,因此可以在展示用戶頭像和用戶形象的界面中延展使用。或者獨特的產品外觀、logo、ip形象,也可以作為視覺符號的一種,延續到其他的界面中。這樣這個界面就被統一的設計元素聯系起來了,給用戶始終如一的一致感,增加了極強的品牌效應。并將這種情感投射到產品,從而提升用戶對產品的認同感和忠誠度。

           

           

          我們還可以從品牌基因中獲取靈感,品牌作為用戶熟知的形象是個絕佳的來源。從品牌形象中提取具有獨特氣質的視覺符號作為Tab選中狀態,既讓界面視覺獨一無二,又進一步強化了用戶對品牌形象的認知。

           

           

          作為中國最大線上購物平臺之一的天貓,其品牌最顯著的特征就是那只大腦袋小身體的黑貓,而它的“貓頭”也成為天貓每一次品牌推廣的必要元素。其中最受矚目的就是“貓頭”

          聯合營銷海報的設計,已成為天貓與大品牌一起聯合營銷的傳統項目,通過設計創意淋淋盡職地表達出廠商的品牌精神和各自倡導的生活方式。

          從品牌圖形中提取具有鮮明特征的形狀作為設計語言,也是一種設計風格的最好表現。

           

          總結


          多年設計一直在視覺層面進行設計,近一年的設計發現并不是“美”的設計就是最好的設計。而是最符合用戶場景,用戶體驗的設計才是最佳的視覺設計。

          文章來源:站酷     文章作者:大峰_Design

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

          安娜?庫娜:如何用信息圖表做出好作品?

          ui設計分享達人

          娜?庫娜是西班牙馬德里的一位自由職業插畫師和設計師以及歐洲設計學院的信息圖表課程教師。

          安娜?庫娜

          信息圖表:框架、分層、排版、插畫

          安娜?庫娜是西班牙馬德里的一位自由職業插畫師和設計師以及歐洲設計學院的信息圖表課程教師。她參與過多個插畫項目,為音樂家、書籍封面、雜志內容、紡織產品以及漫畫制作插畫,同時還合作過Monocle?雜志、《快公司》、PDN、Netflix、微軟、福克斯、Snapchat 等品牌。


          #信息圖表由文字、數據以及圖像組成。


            
          眾所周知,信息圖表由文字、數據以及圖像組成。如何做出好的作品?很多設計師有著不同的見解,其中來自西班牙的信息圖表設計師安娜?庫娜認為,信息圖表的關鍵是分析內容、創建框架,做好信息分級,并再加入排版設計和插畫,通過一個完整的系統把信息清楚地表達出來。 

            

          undefined


          也就是說,設計師應該具備準確地、有條理性地處理文字、數據和圖像的能力。這也是庫娜從作為歐洲設計學院教師的角度,對信息圖表設計的教育提出的關于新聞工作、平面設計、插畫和編輯設計等方面的培訓的一些意見。信息圖表的插畫以及排版設計,都是她在創作中所關注的。 

            

            

          Q1

          Q: 很多人認為信息圖表很難學。作為信息圖表課程的老師,你認為學好信息圖表設計關鍵點是什么?關于一個完整的信息圖表作品,從開始構思到完成是一個怎么樣的流程?   

            
          A:我認為信息圖表最復雜的地方是對內容的理解,這需要我們深入地分解內容,分成小的部分,貼標簽,分等級,然后再合在一起。你需要創造一個信息分層的體系。其次就是一個結實的框架串聯起所有的內容,這是關鍵。 

            


          FILTROS MADRID


            

            

          Q2

          Q:從你眾多的設計合作項目來看,你認為自己的信息圖表作品中最與眾不同的地方在哪里?你最想挑戰的是哪個部分? 
            

            
          A:我想最與眾不同的地方應該是色調、信息圖表的網格布局以及主插畫的黑邊線條。我目前想挑戰的是用更新鮮的風格、更自由的排版以及創造不同視角時的對比來設計信息圖表。我還想更多地利用信息圖表的等距視角,因為我喜歡畫等距線,以此探索排版風格。對我來說,編輯設計和排版是長久的挑戰,因為這是我較少涉獵的領域。 

            

          BUSCADOR VIAJES


            

            

            

            

          Q3

          Q: 插畫是信息圖表中常用的設計元素,它在作品中的角色是什么?最需要注意的是哪些方面?   

            
          A:我認為插畫一方面撐起了文本和信息,另一方面增加了閱讀性和幫助理解。就像奧圖?紐拉特所說的“ words divide, pictures unite ”(意:話語相隔,圖像相合)。圖像易被理解的關鍵就在于,插畫創作時應做到讓內容變得簡單,更易理解。圖像或者插畫都必須起到解釋的作用。 

            

          undefined

                   AD&D/Ana Cuna,CD/Maria Rufilanchas,DS/Teta&Teta,2019

          與 Teta&Teta 合作的項目,在乳腺癌日幫助人們提高自查意識?!坝?70% 的女性從不自查乳房。每月一次,在月經后請檢查乳房是否有異常。如果有,請及時就醫。請不要害怕!因為 98 % 及時發現的乳腺癌病例最后的結果都是沒有問題的?!?nbsp;


            

            

            

            

            

          Q4

          Q:與Netflix合作的插畫中,你加入了很多影視劇中的經典符號。你在創作前會把相關的影視劇都看一遍嗎?你如何把握和呈現插畫中這些小細節? 
            

            
          A:有個夏天我對Netflix非常癡迷,這組插畫里所關聯的全部劇集我都看了,非常喜歡。如此一來,我只需要做分析,把劇集里比較經典的元素找出來就可以了。 

            

          undefined

          ▲Netflix Series,2018
          AD         &         D / Ana Cuna CD / Adolfo Domenech DS / The Huffpost


          這是一個互動的演示項目,來呈現 Netflix 在 2018 年夏季西班牙播出劇集中最具影響力的主角。設計師以集合和等距的方式展示了《去他 * 的世界》、《胖妞星探》、《怪奇物語》、《毒梟》和《接線女孩》的人物和劇情環境。 


            
          當我做信息圖表的時候,我通常也是這樣分析全部信息的,不管是一部電影、一本漫畫還是一篇文章,過程都差不多。你必須做足初步理解,分析所有元素。在我們周圍的每一個事物都會有一個信息層級。 


            

          Q5

          Q:你為PDN?Education設計了多個城市信息圖表,包含了大量的插畫和文字、數據資訊。當面對復雜的資訊時,如何平衡插畫、資料和資訊的分布?要處理復雜的圖表時,設計的原則是什么? 
            

            
          A:如我所說,信息圖表設計的關鍵是對內容做好分析,再創建框架,以助信息分級。然后還是對信息的整理并在此基礎上加入必要的排版和插畫,好讓整個作品看起來是一個完整的系統:主插畫,輔助插畫的其他工具,以及排版。 

            

          undefined

          ▲PDN EDUCATION INFOGRAPHICS,2017-2019
          AD&         D/Ana Cuna,CD/Jacqui Palumbo & Stacey Goldberg,DS/PDN Edu


          在一個地方學習、生活和工作要花多少錢?這是一個信息圖表設計項目,旨在展示洛杉磯、博爾德、匹茲堡、菲尼克斯等地的攝影大學,讓人們了解當地生活成本,及這些城市的攝影工作場所的情況,以供相互比較。設計師創作了一系列結構相同、布局相同的信息圖表,呈現了不同城市在 2017 至 2019 年不同期雜志上的差異。 



            

            

          Q6

          Q:有沒有比較欣賞的信息圖表設計師或者插畫師?你怎么看信息圖表設計的發展前景?而對應的教育資源有做到相應的配備嗎?        

            
          A:我欣賞的一些信息圖表的設計師有弗朗切斯科?弗蘭基、阿圖爾?加拉切、Relajaelcoco工作室、Jing Zhang、羅姆瓦爾多?福拉等等。 

            
            

            
          因為信息圖表的培訓已進行多年,我相信教育在這一方面做好了相應的配備。我上面提到的人還有些曾經是我的老師!不管怎么說,我認為好的信息圖表培訓應該結合新聞工作以及平面設計培訓,并涵蓋插畫、排版還有編輯設計等。 

            


          BUSCADOR VIAJES


          把握信息表達的張力、排版能力、插畫創作以及整體設計感,對信息圖表設計師來說各有各的挑戰性,也讓信息圖表設計逐漸發展成為現代平面設計中的一大重要門類。 

          文章來源:站酷 作者:BranD雜志

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

          日歷

          鏈接

          個人資料

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

          存檔

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