<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>

          首頁

          單色配色你真的會用嗎?(實操篇)

          lanlanwork


          01 單色配色實操

          圖片

          選擇基色“H:255 S:100 B:100”的深藍色為背景。

          然后繪制兩個正圓,調整底對齊:

          圖片

          圖片

          圖片

          大圓顏色調整為和背景相同的顏色,透明度降低至0;調整小圓的顏色,色相(H)和亮度(B)保持不變,降低飽和度(S)為80%。

          圖片

          為了讓顏色混合更融洽,給主體執行“效果—模糊—高斯模糊”;再執行“效果—紋理—顆?!碧砑淤|感。

          圖片

          最后添加文案排版,方案一就設計好了。

          可以看到本案例精簡了色彩層級,色調干凈統一且穩定。利用兩款同色相顏色的漸變層次變化,產生了低對比度的和諧美感。

          圖片

          使用同樣的方法還可以設計出其他方案:

          圖片

          圖片

           

          02 單色配色實操

          第二個方案把英文作為主體。從“視圖”菜單中打開“符號”面板,選擇英文點擊“新建”按鈕,把英文設置為新符號。

          圖片

          接著畫出圓形外框,執行“效果—3D—凸出與斜角”命令,設定旋轉角度和凸出深度:

          圖片

          點擊“貼圖”進入貼圖視窗,勾選“三維模型不可見”,表面選擇“4/4”,符號找到新建的英文符號,勾選“縮放以適合”將文字縮放成適合的大?。?

          圖片

          背景選擇“H:255 S:100 H:100”的深藍色作為基色。把英文圖形執行“對象-擴展外觀”,雙擊進入圖形中分別給文字和背景填色,保持色相(H)不變,調整飽和度(S)和亮度(B)的數值。

          圖片

          使用相同的方法制作出其他英文圓環,并填充顏色:

          圖片

          最后加入文字排版,設計完成。

          圖片

          可以看到此方案雖然選擇了多個顏色,但通過單色搭配可以得到統一協調的視覺效果。

          圖片

          使用同樣的方法還可以設計出其他方案:

          圖片

          圖片

           

          原文地址:藝海拾貝Design(公眾號)

          作者:鄧海貝

          轉載請注明:學UI網》單色配色你真的會用嗎?(實操篇)

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

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

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

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



          金剛區也要考慮交互,不只是畫圖標而已

          lanlanwork


          金剛區是什么,想必大家都有所了解。

          沒有的話看這張圖就懂了:

          圖片

          圖片來源:淘寶首頁

           

          我在微信上搜了一下,發現大部分討論金剛區設計的文章,都是在講怎么畫圖標。

          但是我自己在使用各大 APP 的過程中,發現很多金剛區并不是那么好用,而且這跟圖標好不好看無關。

          金剛區設計不好,會對我的使用造成直接影響:

          1. 不夠清晰易懂根本不想去看
          2. 首次使用找不到需要的內容
          3. 下次使用記不住圖標的樣子
          4. 圖標設計得怪怪的不好理解

          我今天就來總結一下,對于金剛區設計的交互/體驗思考:

          • 數量
          • 順序
          • 顏色
          • 樣式

           

          數量

          金剛區里有多少項比較合適?

          這其實是米勒法則(Miller’s Role)的典型運用了。

          如果你還不太了解米勒法則,看看下面這張圖里的詞語:

          圖片

          現在,半分鐘回憶一下,你記住了多少個?

          ……

          大部分人能記住 5~9 個。

          米勒的研究發現,普通人的工作記憶(Working Memory)只有 7±2 個信息塊。

          如果給的信息超出了這個數字,大部分人也只能記住這么多。

          所以說,金剛區里的圖標數量,最好也維持在這個數,否則就是對用戶的記憶能力要求過高了。

          通常來,4 個圖標很輕松,說 6 個圖標是比較理想的,8~9 個就有點吃力了,10 個就超綱了。

          例如支付寶這個就過分了,好在這只是工具類產品,復雜一點也沒辦法:

          圖片

           

          順序

          人們在看閱讀文字時,視線軌跡是之字形:

          圖片

          人們在閱讀表格時,視線軌跡是除草機形:

          圖片

          上圖來源:這樣設計表格,看著真難受!

           

          雖然金剛區的眼動圖我沒有,但第一步肯定是從左上角開始往右掃。

          圖片

          所以,用戶最有可能使用的圖標,應該從左到右排在最上面一行,最不常用的可以排在右下角。

          例如美團外賣這個設計,看著就挺合理。不但把重要內容放在第一行,而且還做了很大的視覺區分:

          圖片

          不過一些不愁流量的 APP 會選擇把黃金位置用做商業宣傳,難免損失點易用性。

           

          顏色

          仿真圖標

          如果追求質感,多半會使用物品本身的顏色,例如每日優鮮這個:

          圖片

          這種圖標就沒什么顏色好討論了,注意一下整體和諧就好。

           

          數量較少

          如果圖標數量不多可以使用一個顏色,那么顏色上,同樣沒什么好討論的。

          例如 QQ 音樂:

          圖片

           

          數量適中

          如果圖標數量在 7 個左右或以內,那么可以每種顏色的圖標都來一個,這樣用戶也能記住大概什么顏色代表什么。

          例如京東這樣:

          圖片

           

          數量很多

          圖標數量遠超過 7 時,就不可能每種顏色來一個了,否則顏色都不夠用了。

          如果還是想要劃分顏色,可以將類型作為依據,這樣用戶在尋找圖標時會比較有方向。

          當然,其實也可以簡單點,干脆都一個顏色,例如聯通手機營業廳:

          圖片

           

          樣式

          底框

          一些產品為了統一感,會用圓圈或者圓角矩形,把所有圖標都框起來。

          這樣視覺上是好處理了,但交互上很不推薦,因為會大大降低圖標的識別度,眨眼一看都長一樣。

          這種底框在主流產品里已經很少見了,不過這么做的設計師還是不少,至少站酷上可以找到很多:

          圖片

          這種圖標數量少,有顏色區分還好,如果數量多又一個顏色,那就很難辨認了。

           

          風格

          縱觀常見的金剛區圖標,通常不外乎四種樣式:線條、形狀、2D、3D、仿真。

          圖片

          聯通手機營業廳

           

          圖片

          QQ音樂

           

          圖片

          京東

           

          圖片

          美團外賣

           

          圖片

          每日優鮮

           

          任何樣式都能讓用戶識別和記憶,但是不同的樣式給人的感官不同。

          真實性越高的視覺樣式,就越容易給人高級的感覺;相反真實性越低的視覺樣式,越容易給人簡單邊界的感覺。

           

          總結

          我發現做設計時,從不同的角度會帶來截然不同的思考。

          今天這篇分析,算是一個以交互體驗為主,融合了一些視覺角度,希望帶給大家一些靈感~

          如果你還有什么 idea,歡迎在評論區探討~

           

          原文地址:體驗進階(公眾號)

          作者:設計師ZoeYZ

          轉載請注明:學UI網》金剛區也要考慮交互,不只是畫圖標而已

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

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

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

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


          詳解|用戶體驗地圖,到底該如何使用?

          lanlanwork


          WHAT:用戶體驗地圖是什么

          用戶體驗地圖(Experience Maps)旨在通過描述用戶歷程和故事,使設計師、產品經理等項目成員更好地了解用戶和洞察訴求。所以對于用戶體驗地圖,我們可以將其定義為以下內容:

          • 是一種描述用戶故事可視化工具
          • 是一種幫助設計師、產品經理等更好地了解用戶的共創工具
          • 用戶視角出發,直觀展現產品流程各個觸點上用戶的痛點、需求和情緒;
          • 用戶體驗地圖繪制的形式并不唯一,可以根據項目需求,增減內容。

          圖片

          △ 途家 App 用戶租房 · 用戶體驗地圖案例

           

          通常在接觸到需求之后,設計師就可以開始梳理現有流程、使用用戶體驗地圖了。要注意的是:

          • 需要梳理的功能不分大小,都可以使用;
          • 做之前,務必要先調研和訪談用戶使用產品的情況。

          建議時長:

          • 重要項目:120~180 分鐘
          • 日常項目:60~120分鐘

          參與者:

          • 必選:設計師、產品
          • 可選:研發、市場、其他

          工具:

          • 電腦或白板+便利貼

           

          WHY:為什么需要用戶體驗地圖

          需要發現和拆解產品現有問題,梳理用戶流程時使用用戶體驗地圖,可以在聚焦階段,整合用戶訴求和業務訴求,共創機會點,找出解決方案,通常在以下場景中使用:
          • 新產品設計:需要對需求進行拆解和優先級排序;
          • 產品優化:發現產品現有問題,洞察設計發力點。

          由此可見,在設計過程中使用用戶體驗地圖作為設計工具,有以下益處

          • 更好的以用戶視角來看產品的體驗;
          • 通過共創,項目成員達成共識;
          • 確認觸點,作為我們的設計方向;
          • 通過用戶痛點找到機會點
          • 幫助梳理產品流程。

          圖片

          △ 用戶體驗地圖共創現場

           

          HOW:用戶體驗地圖操作流程 

          我們通常會將流程分成 4 個階段:定義原則和目的 —— 梳理階段流程 —— 洞察痛點 —— 尋找機會點。

          1. 定義原則和目的  

          首先要了解我們做用戶體驗地圖的原因和目的,包括用戶是誰、解決什么問題、用戶的目標、產品的整體目標、限定條件等等,對用戶群體、整個項目背景和共創任務目標有清晰、全面的認知。

          圖片

           

          2. 梳理階段流程  

          首先是劃分階段,將用戶的行為拆分成幾個大的階段,在整理時要注意:

          • 在整個產品的范圍之內盡量把故事、流程講完整;
          • 廣度優先,而非深度,不要過早的沉浸到細節中。

          接下來我們要將主要階段拆分成單個任務,并梳理具體的任務和觸點,羅列出過程中的任務和各個觸點,要做到事無巨細

          圖片

          然后根據任務和觸點,整理對應的用戶疑問、用戶感受/情緒。通過對用戶的觀察和訪談進行梳理,客觀的描述事實,切勿自說自話或是將自己的情緒代入其中,也不要急于猜想與分析。

          圖片

           

          3. 洞察痛點

          這一步需要我們匯總用戶的痛點,并將痛點分級,洞察用戶痛點背后的真實訴求。這個過程中可以先讓大家在一定時間內寫出自己的想法,每一條寫在一張卡片上,做到先相互不干擾,之后再統一整理和總結。

          圖片

           

          4. 尋找機會點

          通過上述總結,思考新的機會點、解決方案、優化整體流程,并對新流程下的功能做優先級排序。可以通過準備一些問題來刺激大家腦爆出更多的內容,比如:用戶還有其他選擇么?怎么做用戶才能更爽?其他用戶來到這里該怎么處理?等等。在這個階段需要:

          • 對內容進行對標、討論,把公認的點保留下來,無用的點剔除出局;
          • 根據實際情況和項目成本、進度等條件,對新流程下的功能做優先級排序。

          圖片

           

          TIPS:如何為過程提效 

          在實際的工作過程中,因為項目時間都非常緊張,繪制這樣一個完整的用戶體驗地圖比較耗費時間,所以推薦大家幾個提效的技巧,既可以減少時間浪費,也可以提高共創質量:

          1. 事前

          充分做好用戶調研,提前準備好用戶地圖模板,可以在開始之前的一到兩天發給參會人員,讓所有人對產品有一個整體梳理和思考,有助于提高大家的產出質量。

          2. 事中

          如果是優化的產品,可以將設計稿 demo 或者線上產品截圖打印出來,這樣可以增強大家的代入感,有利于想法的輸出。

          3. 事后

          整理電子版體驗地圖,需要跟隨產品的演進進行更新,上傳到項目共享空間隨時查看。

           

          原文鏈接:長弓小子(公眾號)

          作者:元堯

          轉載請注明:學UI網》詳解|用戶體驗地圖,到底該如何使用?

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

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

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

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


          研究半天,才發現原來這幾個效果這么簡單就完成了!

          lanlanwork


          小技巧1

          有一天一位同學問我這個圖形怎么切出來的:

          圖片
          怎么切出來的,我倒是不知道,但是我可以用其他方法做出來。
          只需要兩步,第一步先用ai軟件里的螺旋線工具畫一個螺旋,具體數值可以自己調整:
          圖片
          不同數值可以畫出不同的螺旋線:
          圖片
          挑一個你覺得合適的。
          但是這個描邊的粗細是一樣的,所以,我們開始第二部,讓描邊變成兩端細一點,其實很簡單,只需要選中錨點,然后按下快捷鍵shift+w(寬度工具),一拖動,描邊就變細了:
          圖片
          是不是很神奇。這樣剛才的圖形就出來了,想做個棒棒糖啥的:
          圖片
          這個小技巧必須學一下子!

           

          小技巧2

          大家在畫一些圖形,本來兩端是尖銳的,想讓其面的圓潤一些,比如月亮:
          圖片
          我們怎么讓它的兩端圓潤呢,其實在ai里面直接選中錨點就能直接變圓潤,但是在sketch里,有時候就不能了:
          圖片
          交大家一個萬能的方法,直接切掉尖角,然后拿一個圓形接上去就好了,看下圖:
          圖片
          這個方法在任何情況下都適用,在做圖標的時候,經常會用到。

           

          小技巧3

          很多同學說不知道愛心怎么畫,那種兩邊是直線的就不說了,很簡單,兩個大圓角舉行直接一拼就出來了:
          圖片
          那種兩邊是弧形的愛心呢?其實也很簡單,先畫一個圓,然后拉住一個錨點把圓形拉長:
          圖片
          然后再復制一個,鏡像后再一合并就出來了:
          圖片
          是不是也很簡單,單個圖形的形狀決定了合并后愛心的形狀細節:
          圖片
          大家可以多多嘗試。

           

          總結

          好了,以上就是今天和大家分享幾個小技巧,趕緊練起來了吧!

           

          原文地址:菜心設計鋪(公眾號)
          作者:菜心設計鋪

          轉載請注明:學UI網》研究半天,才發現原來這幾個效果這么簡單就完成了!

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

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

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

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


          一篇文章看懂交互中的細節-微交互

          lanlanwork

           

          1 微交互的定義

          微交互通常是指一些比較細節性的操作行為的反饋,通常是某單個事件或者交互行為。微交互可以是產品的部分功能或者就是產品本身,例如我們日常生活使用中的榨汁機,它提供一個功能,就是將我們放進的水果榨成鮮榨果汁,或者我們上完洗手間,把手伸到水龍頭下面的時候,水會自動的流出來,而不用按下任何的按鈕,這便是現實物理世界的一種微交互,因為他的設計是單個功能的動作,使水從水龍頭中流出。

          所以微交互通常是專注于某個事件或某個單個任務,例如我們最常使用的點贊后的反饋就是一次微交互事件。

           

          1.10 微交互誕生的背景

          計算機科學家拉里·特斯勒(Larry Tesler)在為施樂Xerox電腦的文字處理軟件Gypsy設計程序時,突發奇想,給軟件Gypsy加入了鼠標操作和GUI圖形界面,這樣便大大的方便了Gypsy作為文字處理軟件的實用性與便捷性,于是在不斷體驗與嘗試的過程中,于是拉里·特斯勒在改版的時候,給Gypsy加入了復制、粘貼功能鍵。這些概念隨后成為了文本編輯與計算機操作系統用戶界面的基石之一。

          拉里·特斯勒其實當初設計復制和粘貼的思路便是減少用戶操作的阻力,讓用戶在使用過程中不會被其他的事物所打斷,往后的數十年,拉里都為了這個目標在奮斗,所以“復制”和“粘貼”便是精心設計過的微交互,沒有任何提示和阻力,一氣呵成的便捷交互。

          交互設計以及人機交互在不斷的發展的歷史,實際上就是微交互的歷史。今天,我們在桌面和筆記本電腦中、在移動設備中習以為常的那些交互方式, 都曾引發過微交互設計的革命。無論是保存文檔,還是把文件拖放文件夾,還是連接到Wi-Fi網絡,都曾經是精心設計的微交互。就連滾動和打開多個窗口這么“基本的”交互方式,也都要經過設計。技術在快速發展,不斷對微交互提出創新的要求。用戶習慣了拿來就用,他們只會關注更好的交互方式,或者是那些由于技術發展催生的、或強制必須使用的微交互方式。

          所以,好的微交互就像“Ctrl+C””Ctrl+v”那樣方便,會改善我們的使用體驗。

           

          1.20 移動端微交互應用場景的發展歷程

          還是“復制”“粘貼”的例子,我們在功能機的時代,我們想要把一段文字從一個軟件復制到另外一個軟件上,我們通常要在兩個軟件不停止的去切換,然后通過記憶內容然后在來輸入,這樣的效率和精準度都不是很高,而且要是需要復制的內容過于龐大,想要完成便是一件讓人頭疼和心累的事情。

          但是在進入移動智能機的時代,該功能的微交互便發生的天翻地覆的變化,第一步我們只需用長按需要復制的文字,調出復制按鈕,第二步,選中我們需要復制的文本內容,第三步便是切換到需要粘貼文字的APP,第四步,長按調出粘貼按鈕,選擇粘貼文字,這與之前僅靠人肉記憶去輸入文字無論在效率上還是在準確度上都有了不小的飛躍。

          但是隨著技術的革新和從業者對于用戶體驗的理解更加深刻,我們的操作追求更高效,更精準,于是,該場景的交互又迎來的一次技術的變革,為了跟上時代的發展與用戶的訴求,在2016年10月19日的錘子手機發布會上,它推出了兩個功能:“Big Bang”和“One Step”?!癇ig Bang”的功能是長按一段文字,可以根據算法自動將文字的內容分割獨立的詞語按鈕,只需點擊這些分割的按鈕就可以選擇想要的內容。而“一步”可以直接將所選內容拖動到其他目標應用程序中,而無需在應用程序之間切換。這兩個功能的結合,將之前需要四個步驟的功能簡化為只有兩個步驟:第一步是按下選擇內容;第二步,拖動到目標應用程序。

          在2021年6月8日凌晨,一年一度的蘋果WWDC大會在線上正式舉行,ios帶來了類似于“big bang”的功能:live text,也宣告著這個小小復制粘貼功能又完成了一次新的進化,所以,無論是“live text”還是“Big Bang”,這兩個功能本質其實就是微交互的進化,只不過用了兩個不同的名字去代表而已。

           

          1.30 為什么要重視微交互

          微交互在的存在是為了讓用戶在體驗過程中感覺舒適和流暢。因為微交互它可能在產品中出現頻次會比較多,以至于很多用戶會忽視甚至感覺不到它的存在。

          相信很多男生的夢想都是擁有一輛法拉利的車吧,法拉利的無論是在車外觀造型上的設計還是發動機的挑選,都是讓人心曠神怡,但是,無論這輛車多么優秀,一個車胎漏氣的法拉利都會破壞整個良好體驗中的氛圍。

          所以在產品中的微交互絕大多數是微小且不會引起用戶的關注,但是它的存在確實讓產品有更加流暢且自然的用戶體驗。

          通常微交互完整的可以達到以下三點目的:1.提高用戶的留存      2.放大品牌價值      3.提升可用性。

           

          1.31 提高用戶的留存

          設計師對于每一次微交互的設計,都是為了讓用戶自然且路徑清晰高效的完成任務,用戶在潛意識要確認對本次體驗的滿意度時,用戶自身會經歷一種對“時間忽視”的現象,即會忘記本次體驗所需要花費的時間,而會專注于當前的事情。

          • 峰終定律

          無論是正向的還是負向的,開始時與結束時的感覺,這就是峰終定律(Peak-End Rule)。這條定律基于潛意識總結體驗的特點:對一項事物的體驗之后,所能記住的就只是在峰與終時的體驗,而在過程中好與不好體驗的比重、好與不好體驗的時間長短,對記憶差不多沒有影響。

          所以好的微交互應該注重于用戶的“峰終定律”體驗,如果處理得當,微交互會持續的刺激用戶大腦中的多巴胺的釋放,從而創造出小小的愉悅時刻。

          這些會有助于改善用戶的體驗并提升用戶繼續使用我們的產品的可能性,有助于提升產品的留存率。

           

          1.32 傳遞品牌記憶

          微交互比較有價值的地方就是它有機會讓我們在用戶心智中建立品牌的影響,讓用戶對我們的品牌更有記憶力。

          人們通常對品牌認知記憶最基礎便是圖形,但是品牌的傳遞的記憶點除了圖像還可以一段標志性的動作或者是一段旋律。

          通常微交互傳遞品牌記憶有兩點:1.標志動作   2.標志聲音。

           

          • (1)標志動作

          我記得有次看綜藝節目,里面請到了一個選秀的出來的團叫“R1SE”,在表演完一段唱跳后,在自我介紹后,他們表演了一段團隊的“團隊動作”,這個在外人看來這無疑是“社死”尷尬瞬間,但是在品牌傳播的角度,這種標志性的動作確實有有助于傳播,例如邁克爾杰克遜的招牌動作太空步是很經典的一個但有兩種,一種是倒滑,另一種是側滑,還有傾斜45°,無論是誰在去模仿,都很容易容易讓人想起邁克爾杰克遜,另外一個就是諾基亞的開機畫面的“手牽手的動作”,更是陪伴一代人的青春,所以無論是哪個說唱廠牌和選秀出來的團,都是設定自己的團的固定的動作,都是有助于讓自己的特點使粉絲產生記憶的聯想。

          而在微交互的設計結構中,也是包含動作這一設定的。

           

          • (2)標志聲音

          我們在聽到“噔,等噔等噔”等時候,我們便會想起英特爾的廣告,所以每個手機品牌的都會給自己短信、系統通知和電話來電設計獨特的聲音,讓用戶在只在聽的階段,還沒掏出設備,便可以判斷是什么品牌手機。

          在微交互的設計中,聲音也組成了微交互的一部分,所以合理的應用微交互有助于用戶對品牌多維度的記憶。

           

          1.33 提升可用性

          微交互的設計,包含了為用戶提供持續的反饋方式,當用戶在迅雷和百度云盤在下載成功時,除了提供的反饋,也會提供聲音的提示反饋,考慮的是一般下載大型文件的時候,我們不可能實時的等待在設備前面,我們只用通過聲音便可以知道是否下載完成了。大多數iPhone用戶遇到的一個常見的微觀交互是在鎖屏幕上輸入密碼。如果輸入了錯誤的密碼,則屏幕在清除密碼時會震動。在整個過程中,屏幕上不會出現任何文本來指示用戶出了什么問題,用戶也可以根據使用經驗來判斷當前進行到哪一步了,所以,因為這些細微的反饋細節,整個用戶體驗變得更加直觀和方便,讓用戶的可用性大大提升了。

           

          1.40 微交互與動效的關系

          我們需要了解的是微交互與動效還是有區別的。動效囊括的范圍比較廣泛,它可以與多個功能和頁面進行補充和解釋,而微交互則是只針對一個功能進行優化,所以針對一個功能的細小的動效可以算作是一次微交互,它是輔助用戶更好的對本次功能的操作。

           

          1.50 微交互與交互的區別

          交互設計是串聯起產品各個頁面與功能反饋的工作,如果缺少了某個交互環節可能會導致產品的BUG或其他負面情況,交互設計簡單的來說就是滿足了產品的可用性。然而微交互的存在是為了給產品提升易用性與好用性,能起到錦上添花的作用。

          例如我們常用的點贊功能,用戶在點擊過后,一個線性的點贊圖標變為填充的紅色圖標,這是完成了一次交互行為的閉環,微交互則是讓本次點贊由線性變為填充的過程怎么更有趣,更有意思,更加讓用戶在本次點贊中得到滿足感。

           

          1.60 微交互的應用場景

          微交互的在產品中的應用場景也是比較廣泛,那些小的細節都可以提升用戶體驗,通常在不同的場景下也能體現出不同的細節。

          微交互不是刻意的,而是被動發現問題的優化過程,當靜態設計不能滿足的時候,可以考慮動態的微交互設計,

          所以,我們需要考慮如何滿足用戶的操作體驗,微交互是否幫產品的數據上有提升,設計角度上微交互是否有創意。

           

          1.61 系統可見性

          用戶只有知道當前系統狀態是怎樣的,用戶才能做出更改,也就是說消除評估和執行之間的鴻溝并弄清楚下一步需要做什么才能更好的完成任務。系統應該在合理的時間內通過適當的反饋讓用戶清楚了解正在發生的情況和目前的狀態,例如,開車時儀表盤的速度指示駕駛者減速還是加速,信息獲取的缺失一般代表著控制的缺失。

           

          • (1)明確位置

          無論是在現實還是在產品的使用狀態,對于迷失方向感都是一件讓人沒有安全感的事情,也對接下來的操作造成比較大的影響,所以我們可以通過微交互吸引用戶的注意力,讓用戶能合理的明確自己現在所在的位置。

           

          • (2)反饋進度

          每當用戶與系統交互時,他們都需要知道交互是否成功,如果因為各種原因,系統無法及時反饋,我們應該給與用戶進度的反饋,或者是用戶在進行某些任務的時候,我們應該分步驟給用戶,并在執行的過程中給與用戶當前的進度,來預估完成該任務還需要多久。

           

          1.62 系統反饋

          每當用戶和系統發生交互時,用戶需要知道操作是否成功。而這個反饋的過程適合的微交互可以增添用戶在使用過程中的趣味性,另外一種便是可以增強用戶在使用過程中的“確定性”,避免用戶在點擊后因為反饋不太明顯而誤以為沒有點擊的錯覺。

          • (1)點擊后的反饋

          按鈕是我們在使用APP中使用頻次最多的交互功能,根據場景的不同,我們需要反饋的樣式也是不一樣的,比如,我們的點贊后的反饋微交互應該是積極正向的,當這個按鈕的功能屬于功能形式的時候,我們的反饋應該是給與用戶明確的反饋,例如我們開關按鈕,讓用戶能明確當前按鈕的狀態。

           

          • (2)引導視線

          按鈕的能給與用戶除了功能方面的微交互的反饋外,還有一種是點擊用途的反饋,例如,我們常常使用的美團外賣,我們在選好我們想要的商品后,點擊后我們會看到商鋪成拋物線的進了購物車,這樣微交互的就是非常明確的告訴用戶你先選擇的東西可以去哪里找到。

           

          1.63.系統狀態

          系統的狀態從本質上講和溝通的透明度有關,系統狀態的可見性是指系統狀態傳達給用戶的程度,理想的情況是,系統應該始終在合理的時間內通過適當的反饋使用戶了解當前發生的情況。

          • (1)當前的系統狀態

          我們在生活中,要是當前手上事情比較忙碌,無法幫助別人去處理一些事情或者無法回音別人的消息的時候,我們應該告知對方,這是比較禮貌的一件事情。

          所以當我們的系統正在加載中、或者在執行某項工作的時候,應該通過微交互的方式告知用戶,讓用戶知道我們的產品并沒有宕機,而是在工作中。加載時長在6-10秒的情況下,我們一般是通過這樣的微交互會采用循環加載的動畫去呈現,而需要等待10-15秒這樣的,或者更長的時間,循環加載的動畫也會給人一種宕機的錯覺,我們應該適當的給與用戶一個進度條,告知用戶當前處理的進度,可以使得用戶在焦慮不安中解放出來。

           

          • (2)內容加載狀態

          在蘋果手機發布的時期,因為網速比較慢,在點開APP的時候,APP的內容都沒還加載好,所以喬布斯的解決方案是用啟動頁去遮擋下這一不完美的問題。

          我們在APP在頁面的跳轉中,肯定也會遇到這樣的問題,就是用戶在點擊后,內容不能及時的加載出來,所以我們通用的解決方案是使用一種加載容器“界面骨架”來呈現,這種臨時用來展示的容易不僅可以緩解用戶在等待過程中的焦慮,也可以通過“界面骨架”去提前了解頁面的大體的結構,構建用戶的預期,讓用戶的視覺得到一個緩沖的時間。

           

          1.64.觸發狀態

          當用戶主動觸發的事件,我們的產品應該及時的給與用戶反饋,就像我們遇到熟人打招呼,要是打完招呼對方不回復,那也可以算是一件“社死”的時間了,所以觸發反饋事件中的微交互也是值得我們去考量的一件事情,它可以提升用戶對產品的友好度。

          • (1)提醒預通知

          一般正常的消息通知都是為了提醒用戶有事情需要處理,所以,我們采用有趣味的微交互能有效的吸引用戶的視線和信息的傳遞,已達到通知的目的。

           

          • (2)預判用戶的輸入

          在多數的APP 中,填寫表單信息的必不可少的步驟,比喻,比較常見的填寫注冊登陸的信息和一些比喻的資料的填寫,由于這些信息表單一般含的信息并不是很少,所以,我們需要在每一步的檢測用戶填寫的內容是否有問題,及時的提醒用戶更正,不然等用戶全部填寫完了在提醒用戶的情緒可能會“蚌埠住了”,所以通知我們在填寫密碼的時候,要是密碼過于簡單,我們需要提醒用戶需要添加哪些內容,郵箱的格式是不是正確的,等等。

           

          2 微交互的構成

          那怎樣才能做好“微交互”呢?丹·賽弗在他的著作《微交互:細節設計成就卓越產品》中,提出了好的微交互應該有的結構: 觸發器、規則、反饋、循環與模式 。我們一個個來講。

           

          2.10 觸發器

          觸發器,是啟動微交互的“扳機”,是微交互啟動的原點。要把識別“扳機”的成本,降得越低越好。就像沈騰在《羞羞的鐵拳》的那句經典臺詞一樣“你過來呀”,簡單且易于識別。

          觸發器一般是分為兩種,就像平時打游戲一樣,有主動技能和被動技能,觸發器也被分為手動觸發,即用戶主動去觸發的,被動觸發,即系統被動觸發的。

           

          2.11 手動觸發器

          手動觸發器一般是用戶自主的去點擊,所以我們盡量要去保證觸發器的識別性,以及用戶在點擊前的一些心里預期的管控。手動觸發器一般有三項設計原則:1.降低識別成本    2.對用戶的預期管控     3.考慮用戶的使用場景

           

          • (1)降低識別成本

          觸發器是微交互啟動的第一步,在使用場景下必須要讓用戶能識別出來,用戶才能去點擊,所以觸發器要足夠清晰明顯。

          比如,我們在瀏覽和使用視頻屏網站或者視頻APP的時候,網頁或APP上的視頻中間都有個碩大的“播放”按鈕,比如,攝像機上的錄像鍵,總是最明顯的紅色;這些都是觸發器在提示用戶,應該點它,且外觀樣式都是采用通俗易懂的外觀樣式。

           

          • (2)對用戶的預期管控

          我們一般去一家陌生的商店的時候,有的商店會玻璃門,比較高級的是自動的,一般的店鋪都會是手動的,這時候,一般的手動的玻璃在門上都會貼上這個門是用推的形式開還是用拉的形式去關,這樣,我們便知道這樣去推或者拉門,是肯定可以把門打開的。

          另外一種情況是要遵循用戶日常生活場景的認知,比如,我曾經使用過一款教育的產品,它有點類似與房子的home鍵是返回鍵,但是在絕大多數的APP里都是去首頁,所以,這項設計便是違反了用戶日常的認知,沒有對用戶的預期管控。

          所以我們的觸發器需要讓用戶知道我點了之后會去到哪里,在形式的設計上需要明確,比如我們的微信或郵件APP的一角會顯示未讀郵件的數量,提示用戶在點擊后肯定有未讀的郵件或消息。

           

          • (3)考慮用戶的使用場景

          在我們平時工作和娛樂中使用的鍵盤,我們鍵盤的按鍵的大小都是根據用戶在日常使用場景的頻次和設計大小的,例如,用戶的最多的空格鍵,是最大的,其次是回車鍵,使用的最少的開關和其他的控制鍵是最小的,這都是考慮到我們生活中的使用場景去設計的。

          我們在設計觸發器的時候也是一樣的,需要考慮到用戶在日常生活操作的具體情況來對觸發器的大小位置來進行設計擺放,盡量讓用戶操作起來比較合適。

          所以我們APP的按鈕會根據使用頻次來確定圖標的大小的層級,方便用戶憑借第一反應力去點擊使用。

           

          2.12 系統觸發器

          系統觸發器的微交互一般需要用戶滿足了某些條件才會觸發的,例如我們平時在工作時間設置的起床鬧鐘,我們微信的朋友圈的更新提示,都是屬于系統觸發器,在滿足了某些系統設定的規則之后才會觸發的。

          系統觸發器通常會讓用手動設置何時觸發,觸發的頻率狀況,比如,我最近想學習,不想被朋友圈的信息影響,我可以選擇關閉朋友圈紅點提示,比如,我的鬧鐘設置的是周一到周五的工作時間去響鈴,我周三晚上加班太晚了,第二天中午十二點去上班,這個時候我就可以單獨的選擇周四這天鬧鐘不響。

           

          2.20  規則

          規則,用來規定微交互的過程,是整個微交互的核心。好的規則,應該順乎人性、體貼方便。簡單的來說,規則就是要按套路出牌,不然就會讓用戶感覺到出其不意。

           

          2.21  微交互的規則是什么

          微交互的規則對于不是做程序員或者技術的用戶來說,是提示用戶,哪些能做哪些不能做,該怎么去做,且規則設定應該讓用戶一眼就可以看懂,就是日常生活中開燈的開關和門的推拉一樣簡單。

          比如,蘋果手機之前“滑動解鎖屏幕”這便是微交互的規則,也是最基礎的規則。

          所以,我們可以發現,規定的設定需要滿足兩點條件,1.名詞(通過什么去調整)即滑動條,2.動詞(用戶該怎么去做)滑動既可解鎖手機。

           

          2.22  規則應該符合用戶認知

          一般每個平臺的核心用戶都是不一樣的,使用的習慣也是不一樣,我們盡量了解用戶平時的習慣,去設定規則,我們都知道,像一般的電商都是有購物車的,都是為了方便用戶將選好的物品一起結算,而拼多多卻反其道而行之,它并沒有購物車,這便是針對用戶生活習性的不同而設定的。

          拼多多的主要戰略是以農村包圍城市,最開始的主要是還是流行在五環外的農村用戶,這些用戶和淘寶或其它平臺也不是重合的,可能是從來沒有用過電商APP的用戶,而在一些偏遠的地區,他們的超市是沒有購物車,如果加上購物車會增加用戶的教育成本,其次,我們都知道拼單都是講究及時性的,所以,在考慮到平臺用戶的用戶背景和用戶的使用場景,就沒有增加購物車。

          所以,我們在設定微交互規則的時候,依照現行平臺已收集到的使用者的資料來設計,利用已知情境及行為來對現在的互動進行分析與調整。

           

          2.23 給用戶提供選擇

          在和異性聊天的時候,如果想和對象一直有話題的話,我們聊天盡量不要以陳述句結束,而是要給對象可以接的上的開放式的問題,讓對方能非常輕松的去接話。

          所以,我們通過對用戶的了解和操作的場景,我們給用戶一個選項,并提示給使用者,來串連整個流程。所以,通常用系統默認項>按場景出現項

           

          (1) 系統默認選項

          系統默認項和考慮場景的選項是相互關聯的,正常的情況,在有限的選項中為用戶提供默認項。而默認項應該是大部分用戶最常用的那個選項。

          例如我們在退出或者刪除的時候需要二次確認,正常的會將確認放在我們比較好操作的位置且會高亮放大展示,一般的電商平臺上的產品也是種類繁多,所以一般的電商平臺都會有分類區,將不同的商品歸類為不同默認的選項,來供用戶選擇。

           

          (2) 按場景出現的選項

          按場景出現的選項我們將它分為兩種,一種是只在需要的時候出現,另外一種是只提供需要的選項。

          • a. 在需要的時候出現

          在日常的產品的設計中,有些功能不一定需要一直存在,所以我們需要考慮在用戶需要的時候在提供給用戶,或者是我們對的用戶在適當的時候在出現。

          比如,我們在聽歌的時候,一般時候都會在手機放在一旁做別的時候或者閉上研究休息,只能只有覺得這個歌曲比較好聽以后想在KTV去唱的時候或者對歌曲有比較濃厚的興趣的時候,我們才會去查看歌曲,而網易云音樂也許是發現了這個洞察點,在我們看一會歌詞,在歌詞下面的地方,會出現K歌的話筒,如果用戶想練習下自己唱這個歌是什么樣的,便可以點進去直接唱,而不是默默的在屏幕上看著歌詞跟唱。

           

          • b. 只提供必要的選項

          我們大部分在中午的時候,都糾結中午吃什么這個問題,主要是糾結的點是外賣的選擇的太多了,要是公司提供食堂的話,在食堂限定的菜譜內去選擇,我想,大部分人中午也不會那么煩惱了。

          所以在某些場景中,我們需要根據場景去給用戶提供選擇,提升用戶在使用中效率,比如,我們國內的搜索百度,主界面上只有搜索框和百度一下,簡潔明了,讓用戶一看就知道產品的主要功能,比如,當我們因為軟件連接上車上的藍牙后,便進去的車載的模式,因為開車的時候需要集中注意力去開車,所以車載模式下,很多不必要的功能便會被隱藏起來,只會提供必須的功能選項按鈕。

           

          2.30 反饋

          反饋,是向用戶說明規則。用戶并不知道你設計了什么規則,你要通過反饋友好地讓他知道。

          你輸入字數太少,它顯示:需要6個以上字符;你輸入簡單單詞,它顯示:密碼太好猜了;符合要求,它會按照密碼的強度,逐級顯示:弱,不錯,強,很強!

          其次是及時的反饋可以增加用戶的活躍度,蝦皮購物在前幾年時也用這個手法,讓用戶每天可以免費轉兩次,之后要轉轉盤時,需要付出「蝦幣」,我即使理性上知道這可能是蝦皮回收蝦幣的手法,而且游戲贏家絕對是蝦皮,還是付了幾枚蝦幣,為了多賭幾次「我就是那個幸運兒」。只能說當這些經典的實體體驗移到線上,其策略與目的還是能順利運作,從中學到的是,現今的數位產品透過借鏡過去「已被驗證成功的實體體驗」,在數位產品上拷貝并實現其預期效果。

          吃角子老虎機善用回饋機制來「強化行為」,提供的不可預測性是游戲的一環。

          但一般來說,我們會希望在微互動中提供一致的、對我們期望的行為的正向激勵,因此回饋的應該是「可預測」的。

          同時,回饋本身就要可以解釋規則,如:按下按鈕(觸動觸發器)會發生什麼事(回饋),回饋需要告訴使用者可以對微互動「做什麼」。

           

          2.31 反饋給與用戶安全感

          我們給與用戶的反饋要盡量與用戶本次的操作的相關,比如,用戶下載文件,我們需要給與用戶的反饋信息是,已開始下載,下載的進度和下載完成,如果反饋在細節點,我們在下載的過程中可以提升用戶,”下載過程中會占用大量的帶寬,也許用影響您瀏覽網頁或者其他是上網操作”,反饋越是細節,用戶在體驗微交互的過程中的負面情緒就越少,提升用戶在使用過程中的確定性和安全感。

           

          2.32 反饋具有主次性

          微交互的反饋直觀也是比較重要的因素之一,可以讓用戶更好的理解規則,降低用戶的認知成本,我們反饋給用戶的信息應該都是準確且重要的,例如我們的消息提醒,一般都是在有幾條就提醒幾條消息,消息的傳遞需要做到少即是多,信息越是重要,反饋的層級就要越高。

           

          2.40 循環與模式

          循環與模式,我們可以將它理解為是規則的分支。比如,鬧鐘是你每天接觸的第一個“微交互”了吧。眼睛還沒睜開,鬧鐘就響了。你重重拍下去,這時就啟動了“再睡一會兒”這個分支的規則,也就是“模式”。如何設計這個分支,最合理呢?你可以讓它5分鐘后再響,如果再拍下去,就別叫醒他了。“你永遠叫不醒一個裝睡的人”。這樣合理嗎?

          也許不合理。更合理的做法是,拍第一次,5分鐘后再響,拍第二次,3分鐘后再響,拍第三次,縮短為1分鐘。然后就一直響。因為你拍的次數越多,越有可能因為貪睡誤事。

          循環與模式,就是一次性的或者循環的分支規則。

           

          2.41 什么是模式

          模式指的是:執行一種不常用的展示形式(在某些情況下可能會影響到微交互主要要達成的目的)比如,我們的APP中都會有設置功能,我們在修改默認的設置的時候,其實也是對APP的規則的一次修改,讓APP朝著我們想要的方向去展示。

          我們都用過股票軟件去看股票行情,在行情頁面剛進去的時候,我們是根據A股、港股、美股這樣的模式去瀏覽我們感興趣的企業股票,然后我們將我們看好的企業添加到自選里面的時候,我們下一次在打開軟件的時候,就可以在自選里看到我們感興趣的股票,這便執行一次模式,模式便是在循環與循環不一樣的展示形式,可能是用戶自己設定的或者是軟件提供的選擇。

           

          2.42 無限模式與一次性模式

          正常的模式是指將一些規定好的操作單獨拿出來到另外的空間根據用戶的喜好去定義,但是我們在模式中也會分兩種情況,一直是無限模式與一次性模式。

          (1)無限模式

          無限模式是指用戶要在某段時間內去使用一種狀態的時候才會選擇開始,例如,我們使用鍵盤打英文字母的時候,我們想要大寫和小寫都是可以去切換選擇的,只有我們的用戶在需要長時間的去使用大寫字母,才會按下鍵盤上的“Caps lock”去鎖定大寫狀態,這種模式的好處是,用戶不會忘記自己正在一個特殊模式中。

          (2)一次性模式

          一次性模式是用戶自主開啟,且執行一次便是結束,不再執行,比如我們用siri去喊一句“siri,幫我定一個早上8.的鬧鐘”,這時,sir會告訴我們定的是幾號上午還是下午的鬧鐘,這個鬧鐘在執行一次便會失效。

           

          2.43 什么是循環

          循環決定了微交互的持續時間重復的頻率,這個也和我們的規則的設定相關。

           

          2.44 循環的分類

          (1) 計數循環

          即我們在給用戶反饋前需要來回檢查規定好的次數,發現了問題再給用戶反饋。例如,我們的微信在網絡不穩定的情況時,我們會看到微信會連續好幾次的出現刷新,然后才會給用戶網絡不好或者斷網的提示。

          (2) 條件循環

          即在滿足條件執行后,可以進行自行的內部條件,比如,當我們的房租在沒有到了交租的日子沒有交的時候,就會收到繳費的提醒,過幾天在不交就會在提醒一次,要是按時繳費了便不會在提醒。

          (3)集合循環

          即循環的核對數值,然后停止,和前面的計數循環有相似之處,例如我們短信系統,會對收到的信息進行系統的統計,然后發現有未讀的信息,便會在角標上記錄數值1.

          (4)無窮循環

          即循環開始后,除非人為的干預讓它停止或者系統出問題的時候才會停止,否則會一直的循環下去,就像永動機一樣。無窮循環分為兩種一種是開放循環,另外一種是封閉循環。

          (5)開放循環和封閉循環

          • 1)開放循環

          即在滿足條件后,執行一次便結束,miui有個功能是可以設定手機每天早上什么開始,當每次到達這個時間后,我們原本處于關機狀態的手機便會開機,這個指令執行一次便不會在執行了。

          • 2)封閉循環

          是根據一定的環境或者其他的反饋可以進行自行的內部調整,比如,當我們手機開機后,我們的手機屏幕的亮點會根據環境光而去調節。

          • 3)長循環

          長循環可以理解為是一種陪伴用戶在使用我們產品時候記錄的一種微交互,使用的時間越長,這種記錄就越多,比喻我們軟件的搜索記錄和瀏覽記錄便是一種長循環。

          • 4)漸進揭示或漸進減少

          長循環的另外一種情況便是當用戶長期使用后對軟件越來越熟悉后,我們可以對有經驗的用戶開放更加進階的玩法比如一些快捷鍵,可以幫助用戶提升效率。

          長循環的另外一種情況便是漸進較少,即當我們的用戶熟悉了我們的軟件后,有些界面上的說明解釋的提示可以適當的去掉,簡化界面,對用戶而言,干擾少了,也會提升使用的效率和交互的速度。

           

          3 微交互的層次

          微交互在產品中的應用場景也是比較豐富的,一般我們的用戶首先感受到是微交互給予用戶視覺層的體驗,其次深入后是功能交互層的體驗,最后是體驗了一個容錯性比較好的心理上的愉悅,也就是情感層。

          視覺層主要給予用戶感官層面的體驗,交互層是給予使用上的效率體驗,情感層主要是讓用戶體驗后心理上有滿足或者愉快的感受。

          但是這些層面又不是絕對獨立的,每個微交互設計都能在上述三個層面中找到單獨或者組合,比如雙擊屏幕的反饋,就滿足了視覺層面、功能層面與情感層面的三層優化。

           

          3.10 微交互視覺層的應用

          在視覺層,考慮的轉場交互動作是否足夠流暢,視覺是否美觀,反饋交互是否有創意,是否加深品牌印象。

           

          3.11相同的元素串聯轉場

          推拉搖移是攝像中的術語。推指把鏡頭變焦到長焦端,使景物更近,拉則相反,把鏡頭變焦到廣角端,使景物顯得更遠,搖指鏡頭跟隨運動的物體做同方向的轉動,移指鏡頭跟隨動體做平行移動。這些手法都是經歷過前人的無數字的實踐所總結出來的道理。

          我們在做交互轉場也是一樣,合適的轉場是讓產品添姿增色的重要手段之一,在iOS默認的轉場效果就是頁面從左往右去進場,但是想要在讓你交互轉場看起來比較舒服,就需要在細節上下功夫,其中比較常見的手法就是界面中有相同的元素的時候,讓他們將他們串聯起來,這樣的交互轉場會讓你產品看起來更舒適。

           

          3.12 卡片推開周圍的元素

          在安卓的Material Design提出Z軸的概念,在扁平化的界面上讓產品有三維的層次感(三維就是X軸(左右)、Y軸(上下)、Z軸(前后)組成的立體世界,而二維就是只有X和Y軸的平面世界。)我們知道手機的界面是一個平面和二維的空間,Material  Design通過一些二維的表現手段,比如投影和動態效果,來構建Z軸(前后)的概念。

          在這個基礎上,我們可以在微交互上下功夫,例如當界面中的卡片比較多的話,我們想讓產品的體驗更具有層次感,我們可以通過卡片與周圍元素的變化產生關聯,營造微交互中的產品層次感。

           

          3.13 降低認知難度

          我們每個人在遇到自己不同的領域信息的時候,有些信息是用戶不易理解的,而我們所服務的產品可能是來自各個行業的,針對比較專業的知識的時候,我們應該專門針對這種場景處單獨的處理,降低用戶的認知難度。

          比如,我們在早上上班經常會用到美團單車,因為是共享單車,所以有的車部分零件會出問題也是比較正常的,在騎行的用戶發現了車輛損壞的部位,卻無法辨認報修的部位,所以美團單車的處理是將整車拆解,將不同的部位標注出來,哪里有問題可以點擊直接報修。

          同樣的場景也會常常發生在醫療的產品中,比如,我們發現身體哪里不舒服的時候,比較快速的可以通過了解APP來快速問診,但是通常我們不是醫學專業的,所以往往無法準確的說出自己身上哪來不舒服,或者往往只能模糊的說出,所以,我們可以通過將身體部分拆解劃分,方便用戶及時說出自己哪里不舒服。

           

          3.14 專屬的元素動畫樣式

          我們人天生都有好奇心,對新鮮的事物都有嘗試的心理,我們在微交互的設計中,也需要具有創新精神,讓用戶在視覺體驗層有與其他產品有不一樣的觀感,這樣有利于樹立我們產品的品牌感知。

          比如,我們在點擊TAP時候的特殊的動畫呈現,點贊時候獨特的反饋,都會在視覺層面給用戶留下比較深刻的印象。

          3.14 強化操作過程中的趣味性

          下拉刷新是我們在產品中日常會使用的交互,現在的產品一般都不會使用默認的“菊花”的下拉刷新,一般會使用自己的IP或者更加有趣的MG動畫,都是為了讓用戶在使用我們的產品時候在視覺層有新的體驗,與其他的產品去拉開差距。

           

          3.15 循環動畫強化產品氛圍

          我們在酒吧857的時候,酒吧都會有氣氛組,來讓新來的客人比較快的融入到酒吧愉快的氛圍中,或者一般商業區就過節的時候,都會將街道和廣場裝扮與節日相符的燈光,都是為了讓客戶快速的融入到氣氛中。

          我們在產品中也是,有到功能想吸引用戶的目光,或者想讓用戶快速的融入到某節日到氛圍中,都是可以通過循環都動畫去引導用戶。

           

          3.20 微交互交互層的應用

          通過控制轉場樣式,反饋樣式與反饋時間可提高交互效率,幫助用戶認知,提升產品數據。

           

          3.21 交互行為主動聯動性

          我們都知道,我們手機的屏幕空間是有限的,有時候的功能布局方面可能不是那么的合理,這個時候,我們的微交互就可以起作用了,比喻,我們手機上滑當時候,就可以將某些用戶比較常用的功能常駐在屏幕上方,當用戶想去操作的時候,不用在滑回去在去操作,在體驗上減少了用戶的操作步驟,提升了用戶在產品用戶過程中的舒適感。

           

          3.22 合適的元素出現在適當的時機

          我們經歷過這樣的時候,當陌生人來找我們做某些事情的時候,我們的第一反應力都是比較抗拒的,但是熟人的話我們可能會因為各種原因不可以拒絕。

          產品設計中也是一樣,如果我們想讓用戶去應用商店去給我們的產品一個好評,肯定是不能一上來就給用戶引導去評價,這樣會極有可能會導致差評的,但是,我們可以利用用戶“啊哈時刻”去提升用戶的好評動機,例如,當用戶覺得某內容不錯的時候點贊了,收藏了,我們這個時候讓用戶去好評,這樣好評的幾率會大點,起碼不會引起用戶的逆反心理。

          所以,當我們想要用戶去為我們做某些事情的時候,一定需要找準時機,結合微交互,提升用戶去完成某件事情的意愿。例如,當用戶在瀏覽商品的時候,我們可以給用戶發放優惠券,我們想讓用戶去分享我們的內容的時候,可以在用戶在快看完的時候,出現分享按鈕,都是可以通過微交互去讓用戶幫我們去做某些事情,以達我們想要的結果。

          我們的知道豆瓣是一個社區內的產品,它是希望用戶在豆瓣來發表自己的想法的,所以,當用戶看到評論區的時候,它用將評論區給展開放大,吸引用戶的注意力,從而加大用戶互動的意愿。

           

          3.23 提升用戶使用效率

          一個產品能否讓用戶高效的操作和使用,是產品好不好的指標之一,產品通過用戶在使用過程中的高效體驗,能讓用戶通過一些不經意的小能有“哇”感覺,能讓用戶感受到產品團隊的良苦用心和匠人精神。

           (1)方便用戶的操作

          我們都在電商產品買東西的時候退過貨或者發過快遞,每次通過APP填寫的那一堆地址都很讓人頭疼,我們在別的APP上復制了地址,打開菜鳥裹裹APP,系統能自動識別剪貼版上內容,自動跳轉頁面進入寄件頁,將信息拆解為收件人姓名、電話、地址等默認填入,可補全信息或直接提交寄件需求,無需手動錄入或一欄一欄的填寫內容。這是將用戶在進入APP前的行為做保留解析,當打開APP時,為用戶預先多想一步,直接提供可能所需的功能,讓用戶減去層層點擊進入功能頁面的步驟,高效完成目的性。

          我們去一個陌生的地方旅游也是一樣,每次找酒店住處都是一件讓人比較心累的時候,飛豬APP在在地圖找房的的基礎上,通手指在地圖上畫圈來定位,方便了用戶自定義找房的用戶訴求,給用戶體驗上的新鮮感。

           

           (2)減少兩次操作

          我們在日常工作和生活中,我們都不喜歡返工和重復的工作,所以,我們在設計軟件的交互過程中,也是盡量讓用戶不要做重復的工作,避免引起用戶焦慮的情緒,為用戶提升使用效率。

          比如,我們在微信給別人聊天的時候,可以因為各種的場景和其他因素,我們可能會給朋友發消息的時候會發錯消息,在輸入錯后,我們可以針對單條的信息進行撤回和修改,便可以再次再次發送,不需要再次全部重新輸入,因為大部分用戶打錯字可能只是個別的字會錯,只需要單獨修改那幾個字就可以了。

          另外還有一種情況是我們大部分的軟件都是采用信息流的布局,用戶在滑動很遠之后在想在回來的時候,也是一件讓用戶比較痛苦的事情,所以大部分的軟件會支持一鍵返回頂部,像微信的就是雙擊頂部就可以返回,大部分的軟件都是會用戶滑動到第二屏的時候,會出現返回頂部的按鈕。

           

          (3)為不方便而設計

          因為現在的手機大部分都是觸摸屏,當用戶輸入內容出錯的時候,需要修改的時候,手指無法精準的操作光標移動,所以我們可以在設計操作上幫助用戶去解決這個痛點,盡量為用戶在操作中提供方便。

          比如,夸克瀏覽器設計一個滑塊來解決這個痛點,方便了用在文字輸入中需要精準修改的問題,大部分的的文字輸入工具也是同樣的解決方案。

           

          3.24 預判用戶的操作

          我們在看港劇的時候,一般都會看到這樣的劇情,警察在行動的時候,因為場景比較特殊,一般是不能說話交流的,因為怕打草驚蛇。所以,一般在行動的時候,行動的隊員們只需要相互打打手勢,交流一下眼神,大家都都心領神會了。

          所以,我們在產品設計的過程中,也需要了解用戶的心理活動,所以好的微交互不僅僅需要滿足用戶當年的操作,更加需要能預測用戶的下一步的操作,這樣才可以更加高效的輔助用戶完成操作任務。

           

          (1) 預防用戶的錯誤操作

          我們的交互無論做的多么滴水不漏,也無法可以避免用戶在操作的過程中發生各種失誤的情況,所以,我們應該根據用戶最常會做出失誤的場景提前去糾正用戶的操作,為用戶去節省時間。

          例如,我們在通常的使用中會有很多帶有自己習慣的操作,我們最常用支付寶給別人轉賬的時候,常常會將自己轉賬金額輸入到聊天框,所以每次當支付寶檢測到用戶只是單獨輸入了數字的時候,會用小的提示框去提示用戶是不是要轉賬,將用戶的錯誤提前告知。

           

          (2) 根據使用歷史預判

          其實用戶的操作使用歷史有很多用途,一種是方便我們對用戶的操作的習慣的了解,方便我們去改善用戶的操作體驗,另外一種用戶就是我們通過儲存用戶平時操作和觀看歷史,方便給用戶推薦相關興趣愛好的信息。

          因為現在互聯網的迅速發展,基本上每個不同類目都會有各自的APP,每個APP都會有自己的賬戶,為了方便用戶記憶和統一管理,所以大部分的APP都會接入第三方的登錄方式,但是第三方登錄的賬戶也是一般是兩種到三種,所以會導致用戶會忘記自己上次登錄的是哪個賬戶,所以我們軟件需要幫用戶記住上次的采用的是哪個登錄方式,通過微交互的形式來在用戶登錄的時候提示和告知用戶。

           

          3.25 為用戶使用場景設計

          產品在日常的使用的過程中,用戶會遇到各種各樣的使用場景,我們體驗設計師需要針對用戶經常在使用產品的過程中的不便去優化,這些小的微交互在用戶使用過程中能增加生活的“小確幸”,讓我們的產品能給予用戶一絲絲溫暖。

           

          (1)站在用戶的角度思考

          在我們平時設計交互流程的時候,一般是保證了交互流程能夠跑通,一般不會出現什么大的問題,但是,我們還可以從另外的角度去思考,是不是能做的更好,更深的一層。

          掃碼付款已經深入我們日常的生活,通常我們在超市買完東西讓收銀員去收款的時候,我們需要將手機轉過去讓收銀員去掃,這樣的使用場景在有時候拿的東西比較多的時候是極其不便的。支付寶在用戶打開付款碼的時候,只用輕輕將手機向下傾斜,二維碼和收款的字體也會隨之翻過去,方便對方去查看,因為收款和付款在支付寶的使用過程中也是比較常用的,這一設計便是考慮了用戶在收付款中的不便的微交互設計。

           

          (2)考慮場景提供選擇

          我們用戶通常在做出某些操作,肯定會有下一步的操作的,我們應該考慮到用戶某些場景的高頻操作,給用戶提供選擇,縮短用戶在使用過程的操作路徑。

          我們平時在截圖的時候,一般除了發送給朋友去觀看,其次便是在使用過程中遇到問題需要咨詢,所以我們在用戶截圖后,可以為用戶展示分享或者咨詢的入口,為用戶高頻操作提供使用方便。

          我們在日常截圖在再到微信準備發送圖片的時候,微信會將最新的截圖以小窗的形式求提醒用戶是否要發送,這都是基于用戶的高頻操作后提供選擇的最好的例子。

           

          3.25 進場告知用戶隱藏的功能和操作

          我們做設計的時候可能經常會遇到一些無理的要求,例如,這個功能需要強化,但是又不能去干擾用戶,每次遇到這種需求,我們設計師往往都是比較痛苦的時候,例如當用戶沒有開通會員的時候,我們想給用戶去展示會員的一些特權和首次開通的優惠,但是,用戶要是沒有開通,我們是沒辦法很好的去展示的,這個時候,我們可以通過微交互,在進場的時候,將隱藏的信息展開,然后過收起來,這樣用戶即看到信息,又不會影響接下來的操作。還有就是當我們上新某些功能的時候,想讓用戶去快速的去了解這個功能,這個時候我們可以通過演示動畫的微交互來讓用戶去快速的了解我們新功能怎么去操作。

           

          3.26 元素跟隨頁面的形態改變

          我們的產品在操作的時候難免會出現各種狀態,為了讓每個狀態出現的時候都比較符合用戶的操作的習慣,這個時候我們需要考慮用戶的場景來改變頁面的布局,例如快手它的戰略是一個內容分享的社區,它注重的是用戶與主播之間的溝通,所以,正常的軟件,當視頻在播放的時候想看評論,這個時候的步驟都只能側中一個,但是,快手它考慮到用戶的體驗,當用戶在上滑的時候,為了不打斷用戶繼續觀看視頻,視頻內容會慢慢變小,然后固定,這個時候用戶可以在看視頻的時候也可以查看評論,方便用戶與主播之間的溝通,強化了內容社區的氛圍。

           

          3.27 照顧邊緣場景

          一個產品它的交互是否比較好,我們看的是它是不是能滿足用戶大部分的使用的場景,所以,有的時候,當靜態的交互無法去滿足用戶的一些比較特殊的場景的時候, 我們這個時候就可以考慮微交互的設計,讓產品的交互體驗能覆蓋的場景比較全面。

          例如,當我們在微信通訊錄想根據用戶的首字母去查找人的時候,一般左邊的字母都會做的比較小,無法精準的查看到我們現在看到哪個字母,所以,當我們的手去點的時候,到了某個字母的時候會放大。再比如,我們因為開會將手機調成靜音或者音量關了的時候,我們去播放微信的語音或者看視頻,這個時候,APP會提升我們音量未開之類的,這都是考慮到極端的場景,讓用戶的體驗更加順暢。

           

          3.30 微交互情感層的應用

          通過趣味幽默化的轉場與反饋動畫可以降低產品的負面體驗或者讓用戶產生愉悅感。

           

          3.31 幽默拉近用戶

          當我們看到有趣的東西的時候總是想和身邊的人去分享我們的喜悅,這是比較底層的邏輯,我們的APP產品也是這樣的,當我們想讓用戶持續去體驗我們的產品或者想要用戶去主動的分享我們的產品,那么,我們可以將產品做的有趣一點。

          比如,轉轉在登陸的時候為了吸引用戶的注意力,它會在用戶登錄的時候做一個比較有趣的小動畫,也消除用戶在多一步操作時候的負面的情緒。

           

          3.32 同理心場景

          用戶在使用產品的時候,總有會各種各樣的問題和情緒,我們需要通過視覺緩解用戶的情緒,通過設計喚起用戶同理心,解決用戶與平臺之間的矛盾。

          我們美團和餓了么點外賣的時候,訂單超時配送是最讓人心煩的事情,特別是遇到極端的情況,訂單超時也是常發生的,所以,設計時需要在視覺、內容來換起用戶的共情心理,從而緩解用戶低谷的情緒,通過設計給用戶帶來溫暖,降低用戶的差評與投訴。

           

          3.34 為特定場景增加儀式感

          我們之所以喜歡去線下看演唱會和LIVE,一是可以和自己喜歡“愛豆”親密接觸,其次就是一種氛圍感覺,而一般在線上看直播缺少這種氛圍的儀式感,隨著全球的疫情加劇,我們很多線下的活動和LIVE都不能開展,大部分都只能退而求其次在到線上去開展。所以,在大環境的趨勢下,我們線上活動是越來越多了,我們需要將以前線上的思維轉換,為線上觀看體驗增加儀式感和場景的氛圍。

          愛奇藝的電視劇在播放到一些比較“甜”場景的時候,都會在交互上下一些功夫,例如,當劇情放到有親親的情節的時候,會出現“心動震動”的彩蛋交互,提升用戶在沉浸體驗過程中的儀式感,讓用戶能更加能貼心的感受到心動時刻。

           

          3.35 轉場加載占位符

          我們在日常的APP使用中,總會遇到像信號不好的情況,這個時候,我們心里是比較著急的,特別是比較緊急的情況,負面的情緒是比較大的,我們需要將這點考慮進去,為了避免用戶在等待時候的焦慮感和負面的情況,我們一般會使用加載的占位符和加載的進度條,讓用戶知道我們的軟件是在工作中,而且是在賣力的工作中,這樣,可以緩解用戶的負面情緒。

           

          3.36 產品的儀式感

          對于我們來說,儀式感是很重要的,比如結婚紀念日要去慶祝一下,生日的時候一定要和朋友去high一下,這都是來自我們生活的中的儀式感。

          儀式感在產品中也很重要,他可以提升我們用戶的幸福感,例如微信在給朋友發送生日快樂的時候,屏幕中會掉下蛋糕,在過年的時候發送新年快樂,屏幕中也會掉落紅包,微信將我們日常生活中所需要的儀式感搬到了產品中,通過微交互來提升我們日常的幸福感。

           

          3.37 3D touch判斷用戶的情緒

          我們人都是感情動物,讓微交互滿足人們的日常的情緒需求也是很不錯的角度,例如facebook的點贊功能可以通過人點擊的力度大小去判斷人當天的情緒,例如,點擊的力度越大,說明你的心情比較好,或者對那個觀點比較贊同,如果你點擊的比較輕,說明的你心情不怎么好。

           

          4 微交互實際案例的思考

          交互是保證這個功能的流程能走的通,用起來沒有問題,而微交互則是讓用戶用起來更順手,是解決了交互做不到的事情。

           

          4.10 評價內容增加流量曝光入口,信息層級優化

          例如我們的需求是要在看房的列表處新增精選房源的功能,提升我們房源列表的點擊率,讓用戶不用點進去就可以預判大致的其他用戶對這個房源的評價,但是,產品方可能會考慮的一個問題是如果只展示一條房源精選的評價,可能會讓用戶以為我們是故意只放一條在上面,有故意哄騙用戶進去的嫌疑。所以從產品的角度,會考慮多放幾條,讓用戶感覺產品是好評如潮,且展示的不是刻意挑選的。

          所以我們在最初給的設計方案可能是在列表上可以展示多條評精選評論,但是這種情況會導致在靜態層面會出現一些視覺上的問題,有的列表有精選的評論,有的不夠三條的展示,會導致列表也看起來不是很整齊,用戶在閱讀上的體驗就會非常的不好。

          這個時候,在不改變產品經理的需求的框架下,我們需要通過微交互的角度去思考,在經歷過與產品和開發的反復碰撞下,我們發現,在不改變列表的結構下,我們需要通過微交互來解決列表不統一的情況。

          首先,先要確定我們列表信息展示的位置,然后精選的評論信息在一個合適的位置上下去滾動,這樣不僅僅決解決了列表高度的不統一的視覺問題,也可以通過動態元素提高產品的視覺層面的活躍度,吸引用戶的視覺注意力。

           

          4.20 細化產品的分類,提升轉換率

          在之前的版本中,頂部的TAP欄是可以切換房源、詳情的選項,而在這次的新版本中加入了房源相關的功能,并把分小區和推薦功能一起放到首屏。這樣在首屏,便把房源拆分為安居房,人才房,普通房,年付四個tab?;巾撁娴诙粒患壍絫ab房源,詳情,小區和推薦并慢慢的出來了,二級tab安居房,人才房,普通房,年付置于一級tab下方。

          所以,這樣頁面就出現了比較影響體驗的雙tab,且雙tab一直處于頂部,占用頁面的高度資源,影響用戶去瀏覽頁面。

           

          設計切入點

          雙tab的形式在靜態視覺層面已經是無法在優化了,因為考慮以微交互的形式去解決當前的版本的所存在的視覺問題。

          商品的tab作為當前頁面的名稱是可以不需要一直顯示的,因此考慮將“安居房”,“人才房”,“普通房”,“年付”滑動到屏幕頂部時合并收納進“房源”的tab內,這樣處理即滿足了用戶需要發現改功能的需求,又滿足了不占用頁面過多空間的需求。

           

          用戶無法感知tab間的收起

          由于需要用戶滑動至屏幕頂部時將雙tab合并,所以需要讓用戶100%的了解當前消失的tab何去何從,方便下次使用該功能時能方便且快速的找到。然后問題是,當用戶滑動頁面比較快的時候,tab的收起很難引起用戶的注意力,這樣對用戶的體驗是很差的。

           

          方案:增加首屏雙TAB之間的差異化,增加合并動畫

          方案1:運用「斗轉星移」法,在用戶滑動頁面至二屏時,將“安居房”,“人才房”,“普通房”,“年付”作為關鍵聯動元素,整體收攏至頂部Tab欄,并最后出現下拉小三角,告訴用戶,原先的四個類目已經統一被收攏到一個類目中。這個收攏的動作雖然在動效表現層上,動靜大了些,但是對新版本功能傳遞,避免用戶誤操作有良好的效果。

           

          最終方案

          最后我們在“安居房”,“人才房”,“普通房”,“年付”文字上部加入了圖標, 增加用戶對新功能Tab的感知,讓一級Tab與二級Tab差異更加顯性化。

           

          實現價值

          幫助產品強化新功能認知,幫助用戶理清兩個層級間的關系,避免用戶誤操作、誤下單。

           

          5 總結

          成功產品的設計細節是必須在每個層面的體現,細節不僅僅讓用戶更加堅定的選擇了我們,也可以讓我們在競爭中脫穎而出,而微交互恰恰就是那個四兩撥千斤的設計亮點。

           

          原文地址:站酷

          作者: Endings

          轉載請注明:學UI網 ? 一篇文章看懂交互中的細節-微交互

          今天一個總監和我說,app頁面是3維空間的,我震驚了!

          lanlanwork


          拿滿屏都是封面的頁面為例,比如視頻類、動漫類的產品頁面,我們可以從以下三個緯度來思考:

          1.y軸(高度)的空間節省

          2.x軸(寬度)的空間節省

          3.z軸(深度)的空間節省

           

          1.y軸(高度)的空間節省

          y軸,顧名思義,就是高度,我這里舉三個例子來說明下:

          第一個例子,我們來說說封面,我們看國內的漫畫平臺,比如快看,大部分是豎封展示:

          圖片

          但是國外的很多漫畫平臺都是橫封展示居多:

          圖片

          二者單從高度占比來講,橫封會矮一些:

          圖片

          第二個例子,也是關于封面的,國內外都會有一些方形封面,但是國內的方形封面一般一排只有兩個,而國外的會相對多一點:

          圖片

          單看高度,右邊的會節約一些縱向空間。

          第三個例子,我們還可以在一些信息上進行整合

          比如,快看最近瀏覽這個模塊,標題是放在上面,信息是放在封面下面的:

          圖片

          但是有一些產品比如波洞,標題是左側的,而信息文字是放在封面上的:

          圖片

          信息也能看的清,相比之下,后者高度上節約了太多空間:

          圖片

          這也是合理節約高度空間的一種方法。方法還有很多,大家可以多多思考嘗試。

           

          2.x軸(寬度)的空間節省

          x軸,就是寬度了,正常我們只是思考如何在屏幕內進行節約空間,那是否可以利用屏幕外的空間呢?

          當然是可以的,國外有很多常規模塊都有利用這一原理來進行展示作品,比如:

          國內可能主要用在猜你在追,瀏覽歷史這種模塊多一點。是否可以在更多模塊內使用這一展示方式,可以根據自身產品定位來嘗試。

           

          3.z軸(深度)的空間節省

          z軸,那就是屏幕的前后景深了,也就是深度,不僅僅只是思考二維平面的寬高了,而是思考如何利用屏幕縱像的空間。

          舉個最簡單的例子,想嗶哩嗶哩漫畫這種:

          就很好的利用了z軸的空間,物體不僅僅只是在二位平面內展示,而是延伸到屏幕里面,有了深度,相同平屏幕大小,展示更多空間的內容。

          再比如,最早在韓國app看到的這種交互方式:

          圖片

          也是很好的利用頁面縱向的空間,達成一定的亮點和空間利用率。

          再再比如,下拉頁面后,在頁面的后面出現一些內容:

          原理也都是類似的,當二維空間無法滿足我們的內容擺放需求的時候,我們就可以想辦法拓展維度,讓我們的空間變得更廣,利用率更高,還容易產生一定的創意!

           

          總結

          以上就是我個人在節約利用移動端空間的小小總結,當然,有時候信息展示也不能緊緊只考慮面積占比問題,還需要從用戶體驗的爽感、信息層級、點擊轉化等多個維度來思考,我這里只是單純從占比這個點來思考,希望能給大家提供一點思路,僅供參開!

           

          原文地址:菜心設計鋪(公眾號)
          作者:菜心設計鋪

          轉載請注明:學UI網》今天一個總監和我說,app頁面是3維空間的,我震驚了!

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

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

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

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



          界面設計中的對比類型

          ui設計分享達人

          世界中從不缺少的就是對比,人和人的對比,價格和價格的對比,生活和生活的對比,而今天我說的,是設計中的對比,是按鈕、顏色、排版布局的對比,設計中通過有效的對比技法,可以更加快速的傳遞產品信息,從而提升用戶體驗。


          1、什么是對比

          對比,是把具有明顯差異、矛盾和對立的雙方安排在一起,進行對照比較的表現手法。對比是把對立的意思或事物、或把事物的兩個方面放在一起作比較,讓讀者在比較中分清好壞、辨別是非。


          那么,為什么說對比度很重要呢?因為人眼最快速捕捉到的就是對比度。而圖像的最高可能對比度,我們稱它為對比度或動態范圍。更重要的是,對于色盲等弱視視覺障礙的人來說,對比度顯得更加重要,因為事物的對比度是成為他們看到的物體的核心特征,使他們能夠區分它們,沒有了對比度,對他們而言,也就失去了視覺。


          在學術藝術中,對比是處理對立元素和效果的一種排列方式,例如:明暗顏色、大小形狀、粗糙或光滑的紋理。在這種情況下,對比不僅可以用來吸引注意力,還可以設置情緒和氛圍,在藝術品中創造多樣性、視覺趣味和戲劇性。


          在設計中,對比度還是影響效果的關鍵因素之一。 不管是PC端網頁還是手機中的APP,它們的視覺層次、結構,設計師在通過對比度設計后,也能夠以一種獨特的方式呈現,并告知用戶哪些交互點是重要的,哪些是次要的。同時,對比度還可以有效地吸引用戶的注意力并將其吸引到特定元素上,因此它在產品的直觀引導和可用性方面也發揮著重要作用。

          Lucibel的網站設計展示了純粹的單色顏色對比,為頁面構建了堅實的視覺層次結構。


          LAUDEMIO的品牌網站使用黑色背景和產品主體進行層次分離,最后加上白色文案說明



          2、UI設計中的對比類型

          對比在UI中具有很多不同的特征屬性,其中就包括:

          • 顏色:顏色是人眼最快發現和最明顯對比之一,它適用于各種內容下使用,例如:通過互補色、對比色或類似色進行多種組合。這鞋方式最廣泛地用于潔面按鈕、導航、卡片、產品背景等地方,就是希望用戶能在打開的第一時間看到,并快速進行操作使用。

          • 大?。哼@種對比類型是希望重要元素或內容首先引起用戶注意所使用的,多數情況下設計師會將元素設計成明顯大于其他元素。

          • 形狀:這種對比類型屬于形狀改變,通過使一個元素的形狀與其他元素不同來吸引用戶的眼球。

          • 位置:在這種類型中,設計師以這種方式更改行中一個元素的位置,使其看起來不同,我們看到最多的這種對比案例就是閱讀文本片段時,新段落會以縮進開頭。

          • 紋理:這里的差異是由于使用彼此明顯區分的紋理而建立的。

          • 方向:在這里,設計師通過更改元素的物理位置,使其使用其他或意想不到的方向進行,通過這種不尋常的方式來吸引用戶的注意力。


          以上這幾種對比類型,我現在通過可視化的方式為大家呈現一遍,這樣可以加深大家對對比的理解。


          不同特征屬性的對對比方式


          其實,多數人只要想到對比,我想第一想到的會是黑白的東西吧。在沒有陰影和多種顏色的情況下,單色的對比度是表現潛力最好的形式。更重要的是,與藝術品或攝影作品相比,對比度不僅會影響美感,而且對布局的可用性和可見性也有重大影響。因此,對比度的使用應該算是用戶最友好、最易于使用的方法了。

          F2Pool APP的界面中,顏色對比有助于數據和內容形成分割,便于用戶閱讀使用


          區塊鏈APP界面通過使用多色的插畫設計,使整體產品更加具有活力和動感,同時吸引力更強


          根據相關數據結果表明,“黑白”的配色方式,是對用戶幫助和引導最大的。所以,使用黑白配色進行對比,可以有效提升用戶的體驗。當然,多色對比也是可以的,這里我提供一個色輪配色法,大家可以自行采納。

          色輪可以幫助設計師找到最佳水平的顏色組合



          3、排版對比

          除了剛才說到的哪些,接下來我在說一種對比類型,它主要是基于字體的區別進行做排版對比的。


          這里提供幾種關于字體、排版的對比方式:

          • 尺寸:通過對字體字號的設定進行對比實現,可以有效的展示主次分明。比如以及標題使用30px的字號,而內容文本則使用24px的字號。

          • 重量:主要的方式是將字體加粗呈現,在視覺上看起來更加具有厚重感,這樣加粗的文本在視覺上會更加具有地位和突出性。

          • 結構:形式在這里可以理解成是字體的字像,通過改變字體字象進行區別,比如標準的蘋方體和花體就是很好的視覺對比。

          • 形式:將字體加以傾斜,也可以呈現出不一樣的結果。

          • 顏色:這里的顏色不光是指字體顏色本身,同時也可以為字體添加背景色,用來襯托字體。

          • 方向:通過改變單個字體的方向、或一句話的排列方向,都可以形成有效的對比效果。

          藝術學院概念展示的不同類型排版對比



          4、對比的輔助功能

          說了剛才那么多,可能你已經抓住了設計的要害,那就是對比度越高,設計就越好。其實,并不是這樣的,任何事物都需要掌握一個度,超過那個度,有時候就會適得其反。雖然我們知道對比度會使內容更加明顯,但是你還應該知道,過高的對比度也會使用戶感到疲勞。按照文本視覺呈現的正確比例,我們應該將對比度控制在7:1之間才是比較合適的選擇。

          在當前這個概念APP界面中,通過明顯的顏色來提升按鈕的視覺焦點,同時,加粗的文本也是重點提醒,這些手法都是便于閱讀和操作的方式



          5、需要考慮的要點

          除了剛才說到的這些對比方式和規則外,作為設計師,還應該考慮的一些問題。


          內容加在了圖片上,要是用高對比度

          由于圖片本身的體積較大,覆蓋面積也大,所以用戶在瀏覽時,視覺很容易會被圖片吸引過去,但是,由于圖片內容的情況,很多相關文案就會顯得柔弱不堪,在這種情況下,一般的對比就無法解決視覺問題了,而是需要你加大提高文案和背景的對比,比如使用了類似黑色圖片的背景,就要使用純白色文本,如果使用了亮色的圖片背景,文本就需要考慮使用暗色。



          注意對比度給用戶帶來的傷害

          這種情況多數出現在閱讀類產品上,比如我們日常使用的小說類app,產品里就有一種功能叫做背景自定義,它的主要目的就是擔心用戶在長時間閱讀的情況下產生視覺疲勞,所以需要設計柔和的背景進行自定義切換。有的產品還會增加字體大小、顏色修改、夜間模式等多個功能,都是為了降低對比度,使用戶在體驗上不再那么刺眼。



          留白的重要性

          留白是極其重要的設計手法之一,它同樣是產生對比的好技法,通過給產品界面留有適當的空白余地,可使產品具有通透感,用戶在使用產品時也不會產生壓抑,另外由于留白是大面積的空白空間,這也就產生了和密集內容的強烈對比。



          6、為什么對比度很重要

          最后總結一下所有的內容,我們可以定義一下對比度的幾個關鍵優勢和好處:

          • 更強的視覺層次

          • 更好的專注

          • 創意氛圍

          • 增強可讀性

          • 與人類自然感知和反應的對應

          生活充滿了對比,無論你會采取什么方面。對于所有的生命,我們必須學會如何接受這一點,并嘗試享受如此多樣化和不可預測的生活。與現實相呼應,設計也充滿對比,并盡可能多地借鑒。

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

          文章來源:站酷  作者:西瓜的設計

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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

          行業研究:分析框架與思考維度

          資深UI設計者

          做好行業研究,有助于企業或個體從業人員更好地洞察市場,進一步發現機會,或者找準產品定位,推動企業戰略決策和后續實施。本篇文章里,作者就行業研究的分析框架與思考維度做了總結和梳理,一起來看一下。


          一、行業研究的目的

          以始為終,構建行業研究的方法論和分析框架,需要從目的出發,下面列舉幾類典型的行業研究報告目的。

          券商的報告(二級市場),分析某個行業是否有投資價值,從行業賽道的選擇過渡到這個行業賽道中的值得被投資的公司,說明這個行業中哪些公司更有投資價值。報告結果是要用于股票投資服務的。二級市場由于公司財務報告的披露性質,公司的財報分析在行業報告中也是重要的構成部分。

          互聯網戰略投資部門/VC的報告(一級市場),互聯網戰略投資部門通常以公司的戰略發展目標為出發點,布局上/下游產業鏈,或通過收購競品公司,鞏固和發展公司在行業的競爭力,提升市場占有率,開拓新的市場;VC通過布局細分的賽道,選擇合適的投資標的,參與風險投資。

          值得注意的是在互聯網初創企業的財報分析通常不作為重要參考因素,多數互聯網公司在初創期將投入大量資金,長期處于虧損狀態,此時,市場份額和估值與傳統二級市場的分析方式有較大差異。

          咨詢公司的報告,目的是為行業內的公司服務的,說明該行業的行業規律、行業風險、行業機會、行業發展趨勢等。在行業研究的內容方面,咨詢公司常見的模式還包括訪談調研行業內公司高管。

          二、行業研究的常規分析框架

          基于行業研究的目的,常規的行業研究框架,包括一下幾個核心部分:宏觀分析、行業分析、公司分析、消費者分析、競爭者分析,其中宏觀分析和行業分析的視角都是從賽道鏈路的角度,進行整體分析,而公司、消費者和競爭者則是從市場參與者的角度進行分析。

          1. 宏觀分析

          1)宏觀分析思考的維度

          1. 宏觀分析的因素大多非直接影響行業和公司,而是通過影響宏觀基本面,進而對行業產生間接影響。
          2. 在宏觀分析中,多數分析不是僅僅是單因子影響,而是混合因子影響的結合。
          3. 除了行業分析的分析范圍,宏觀分析應該考慮更廣闊的范圍要素,例如如果限定為某一國家的具體的某一行業研究,需要將宏觀分析的內容范圍擴展至全球范圍內的影響要素分析,將中外的宏觀影響影響都考慮到。
          4. 最后,宏觀分析需要考慮時間維度,不能局限于靜態分析,既要考慮存量數據,也要考慮趨勢變化,同時考慮增量數據。

          2)宏觀分析考慮的內容:

          宏觀分析中考慮的因素點對行業環境的影響,因素點可采用PEST模型分類,但不必拘泥于PEST模型,因素點間可能是組成多因素,從而對行業環境產生間接或直接影響。基于PEST模型,因素點可以分為:

          ① 經濟類

          包括經濟發展水平、社會經濟結構和宏觀經濟政策,其中經濟發展水平可以通過較為典型的量化指標進行衡量,例如GDP\CPI\進出口規模等;宏觀經濟政策主要包括貨幣政策和財政政策;社會經濟結構主要體現在經濟體制和產業結構構成。

          ② 政治類

          包括政治體制、政局穩定性、和相關的政治政策。

          其中政治體制包括資本主義、社會主義和中國特色社會主義等,政治體制對行業的影響為間接影響;政策包括投資政策、環保政策、進出口政策、貨幣政策和財政政策等,也有針對具體行業的政策,例如近期發布的教育“雙減”政策就對在線教育行業產生了不小沖擊,網絡安全隱私數據保護政策對互聯網公司獲取用戶使用偏好數據,產生了非常大的影響。

          其次,除了政治政策,政局的穩定性對行業發展穩定產生重要影響。

          ③ 文化環境類

          包括人口因素、社會流動性和消費心理,此類因素可與消費者分析關聯,對消費者細分市場和市場定位產生了重要的影響,主要從聚類的角度,對消費群進行分析。

          人口因素主要考慮人口總數、年齡構成、性別比例、教育水平、人口地理分布等,社會流動性主要考慮社會階級流動性和貧富差距;消費心理主要包括生活方式、文化傳統和價值觀等,對消費者偏好心理產生影響,從而影響消費者的行為決策。

          ④ 科技類

          主要包括專利技術數量和質量、相關產業技術等,科技對一個產業的生產效率與產品更新,甚至一個產業的萌芽和滅亡都將產生巨大的影響,例如智能芯片對手機行業產生了巨大的沖擊,原有的非智能手機迅速被智能手機取代,生產非智能手機的廠商迅速破產。

          綜上,宏觀類因素多數為混合因子對產業產生直接或者間接的影響。

          2. 產業分析

          1)產業分析思考的維度

          ① 整體市場分析

          整體市場分析除了關注靜態的存量市場,也需要關注動態的增量市場。市場的現有市場規模和增速決定了市場的規模,體現為市場的“寬”度和市場的“長”度,行業壁壘和驅動因素影響參與市場的玩家數量,體現為市場的“陡”度。

          ② 市場參與者

          市場參與者從各個角度,在產業分析上有不同的分析時間,例如從產業鏈角度,分析上下游供應商和購買者、從行業參與者的角度,分析競爭者和行業集中程度。

          ③ 影響因素

          產業影響因素和宏觀影響因素的區別在于,產業影響因素從供給需求、驅動和壁壘的角度分析更為直接的影響因素對產業產生的影響。

          2)宏觀分析考慮的內容

          ① 產業規模

          產業規模可以從空間維度進行解析,產業的寬度代表現有市場規模,產業的長度以時間為維度,代表增長率和增長率增速,而產業規模=現有市場規模*增速。

          由此可見產業規模的衡量有兩個重要的衡量標準和指標,即市場規模與復合年均增長率(CAGR),市場有多寬指行業規模有多大、增長的天花板有多高,是衡量一個行業現有市場容量和將來市場發展空間的最重要的標準,現有市場容量決定了該市場有多少蛋糕可以分,而市場增速決定了行業發展潛力,行業增速可與行業的成熟度曲線緊密聯系。

          ② 產業生命周期

          產業的生命周期以時間為維度,一般分為導入期、成長期、成熟期和衰退期。產業生命周期在導入期、成長期、成熟期和衰退期的不同階段,可以從經營風險、財務風險、產品差異、單位利潤、產品特征等不同維度進行分析,詳見下圖。

          ③ 產業鏈

          產業鏈分為上游供應商、下游購買者、潛在進入者和現在競爭者,將企業放在產業鏈進行分析,需要對供應商和購買者有較高的議價權,能有效面對競爭者。

          其中,影響供應商議價能力的影響因素包括市場占有率、轉換成本和供應商戰略,影響購買者議價能力的影響因素包括價格敏感度,相對議價能力等,影響潛在進入者的障礙有結構性障礙和行為障礙,影響替代品威脅的主要因素包括產品同質化程度和勞動生產效率等。

          ④ 產業驅動因素與行業壁壘

          產業的驅動因素主要分為兩個部分,第一是生產要素驅動,第二是相關支持性產業驅動,其中,生產要素包括高級生產要素和初級生產要素,而相關支持性產業,則表現為產業鏈上下游的聚集驅動。

          行業壁壘:行業壁壘分為限制性要素和市場壁壘,可以通俗理解為一只“看得見”的手和“看不見”的手,即政策限制和市場限制。

          政策限制如進出口限制、許可證、配額等,實現限制如規模效益使得成本降低,對新進入的小規模玩家形成行業壁壘,又比如缺乏品牌技術,而只能成為代加工企業,獲取最低的生產制造利潤等。

          如果行業的門檻很高,競爭者難以進入市場,行業的壟斷程度也相應比較高,通常用行業集中度來分析衡量,即CR5(行業中前5名的企業占據的市場份額)。

          但是,壟斷程度越高,企業越有機會獲得超額利潤,但行業的壟斷程度并非僅僅由行業壁壘所決定,消費者的需求差異也會對壟斷程度產生重要影響,例如手機行業的壟斷程度較高,而餐飲行業卻很難出現寡頭壟斷,因為餐飲的消費者偏好差異非常大。

          ⑤ 供求分析

          供給側主要包括產能分析,同時也受行業集中程度的影響,即上文所述的行業壟斷程度,產能分析包括產能利用率水平、庫存周期、產品使用壽命、訂單周期,這里比較典型的行業是電子產品生產制造業。

          需求側主要從消費者市場出發進行分析,同時考慮替代品,需求預測包括消費者整體購買力和細分需求市場,這里的消費者整體購買力受到宏觀因素的影響,例如人均可支配收入、貧富差距等;替代品的細分影響因素包括國家進出口和國內市場替代品。

          ⑥ 產業結構

          產品結構:產品結構可以從加工階段和主導構成不同的視角進行分析,加工階段主要以產業鏈維度為分析視角,從初級產品、中間產品和最終產品進行分析,主導構成主要從驅動因素進行分析,分為勞動密集型產品、資金密集型產品和技術密集型產品等。

          市場結構:市場結構從分類上可以分為市場主體結構、市場客體結構、市場空間結構和市場 時間結構,從行業集中程度,可以分為完全競爭市場、完全壟斷市場、壟斷競爭市場和寡頭壟斷市場等,影響行業集中程度的因素在前文已經提及。

          3. 市場參與者——公司與競爭者

          1)公司思考的維度

          ① 戰略

          戰略需要將企業放置在宏觀和產業的角度,通過對賽道、競爭者和消費者的分析,制定戰略,從整體分配資源,規劃產品和服務。

          ② 經營分析

          經營分析從數據量化的指標,動態指導經營過程中的業務發展。運用定量分析、業務分析和行為分析相結合的方法,對企業進行綜合分析的一種現代經營分析體系。包括:經營基礎分析、財務分析、市場分析、勞務分析、生產分析、物資分析等。從業務單元的視角優化運營。

          2)公司分析考慮的內容

          ① 戰略分析

          戰略分析包括企業能力與資源分析、價值鏈分析、產品組合分析、外部分析、內部分析、財務指標分析和商業模式分析等。

          • 外部分析:外部分析從企業所面臨的產業環境出發,分析企業在產業環境中所面臨的機會和威脅
          • 內部分析:內部分析從企業內部經營的角度出發,分析企業所擁有的資源與能力的優勢和劣勢,即下文所展開的企業能力與資源。企業的外部分析和內部分析構成了SWOT模型。
          • 企業能力與資源:從企業能力的視角可以分為研發能力、生產管理能力、營銷能力、組織管理能力、財務能力等,這些能力構成了企業的核心能力,成為企業在市場中競爭的制勝因素,構成了企業的護城河,其次,從企業資源的視角,可以分為有形資源和無形資源。
          • 價值鏈:可以分為基礎設施和基本活動兩大類,其中基礎設施包括財務、戰略、法務、人力資源、技術開發和采購管理,基本活動包括內部后勤、生產經營、外部后勤、市場營銷和運營。
          • 商業模式:從企業提供產品和盈利模式出發,主要關注一類企業在市場中與用戶、供應商、其他合作伙伴(即營銷的任務環境的各主體)的關系,尤其是彼此間的物流、信息流和資金流。
          • 產品組合:從提供的服務和產品出發,例如零售行業中的品類策略,包括產品線的和SKU的設置,即品類的長度和深度,也可以從經典的波士頓矩陣出發,分析銷售增長率和市場占有率的矩陣,針對明星業務、問題業務、瘦狗業務和金牛業務制定不同的策略。
          • 財務指標:從財務指標,以始為終,進行測算和分析,包括毛利率、現金流、ROE等。

          ② 戰略選擇

          戰略選擇可以從總體戰略和智能單元戰略出發,如果業務涉及海外業務,需要分析選擇國際化經營戰略。

          • 總體戰略:總體策略是公司的總策略,可分為發展戰略、穩定戰略和收縮戰略,其中發展戰略可以分為一體化、密集型和多元化戰略。
          • 職能戰略:從業務單元視角,制定單元戰略,一般包括營銷、生產研發、運營、人力和采購戰略。例如營銷戰略中需要制定細分市場STP,進行營銷戰略的選擇,包括產品、渠道、促銷和分銷(4P)等,其余業務單元策略,在此不做過多的贅述。
          • 國際經營戰略:根據全球化協作程度和本土獨立性和適應能力的差別,本土企業的國際化經營戰略可以分為四種類型,即國際化戰略、多國本土化戰略、全球戰略與跨國戰略。

          3)競爭者思考的維度

          • 優勢:競爭者分析的思路可以簡單分為,發現優勢是什么,以及采取何種策略發大優勢,形成企業的護城河。
          • 劣勢:其次,競爭者分析需要思考與競爭者相比,企業的劣勢是什么,如何縮小這種劣勢。

          4)競爭者分析考慮的內容

          • 競爭分析:競爭分析主要從前文所述的企業資源和能力角度進行分析,包括產品優勢,技術壁壘、分銷渠道優勢、用戶增量和存量、財務狀況、組織架構、核心管理層(人才資源)等視角分析,同一賽道的不同玩家在市場中的競爭力。
          • 戰略選擇:基于競爭分析,針對賽道中的競爭者,可以采取不同的競爭者戰略,主要包括三類,即藍海戰略、中小企業戰略和基本競爭戰略,其中,基本競爭戰略可以分為成本領先戰略,差異化戰略和集中化戰略。

          4. 消費者

          1)消費者思考的維度

          細分市場與精準營銷:在互聯網數字化的革新下,原有的消費者聚類分析越來越精細化,不僅有群體的聚類標簽,個體消費者的標簽也能層層穿透,為精準營銷運營提供了條件。

          2)消費者分析考慮的內容

          基本屬性:基本屬性包括年齡、收入、性別、受教育程度和地域分布等。

          購買動機和購買行為:根據MBA智庫的定義,營銷學家把消費者的購買動機和購買行為概括為6W和6O,從而形成消費者購買行為研究的基本框架。

          ① 市場需要什么(What)——有關產品(Objects)是什么。通過分析消費者希望購買什么,為什么需要這種商品而不是需要那種商品,研究企業應如何提供適銷對路的產品去滿足消費者的需求。

          ② 為何購買(Why)——購買目的(Objectives)是什么。通過分析購買動機的形成(生理的、自然的、經濟的、社會的、心理因素的共同作用),了解消費者的購買目的,采取相應的市場策略。

          ③ 購買者是誰(Who)——購買組織(Organizations)是什么。分析購買者是個人、家庭還是集團,購買的產品供誰使用,誰是購買的決策者、執行者、影響者。根據分析,組合相應的產品、渠道、定價和促銷。

          ④ 如何購買(How)——購買組織的作業行為(Operations)是什么。分析購買者對購買方式的不同要求,有針對性地提供不同的營銷服務。在消費者市場,分析不同的類型消費者的特點,如經濟型購買者對性能和廉價的追求,沖動性者對情趣和外觀的喜好,手頭拮據的購買者要求分期付款,工作繁忙的購買者重視購買方便和送貨上門等。

          ⑤ 何時購買(When)——購買時機(Occasions)是什么。分析購買者對特定產品的購買時間的要求,把握時機,適時推出產品,如分析自然季節和傳統節假日對市場購買的影響程度等。

          ⑥ 何處購買(Where)——購買場合(Outlets)是什么。分析購買者對不同產品的購買地點的要求,如快速消費品,顧客一般要求就近購買,而選購品則要求在商業區購買,一邊挑選對比,特殊品往往會要求直接到企業或專賣店購買等。

          三、總結

          綜上所述,行業研究的框架可從宏觀、賽道、市場參與者進行分析。


          文章來源:人人都是產品經理  作者:Elaine.H

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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


          如何提升用戶登錄成功率

          資深UI設計者

          什么是登錄?

          登錄是進入一個應用程序 、網站或服務的入口。幫助用戶建立他們的賬戶。

          • 一個登錄流程通常包括一個主要的登錄頁和一個相當復雜的重置流程,其中包括 “忘記密碼”、重置密碼和其他登錄方法。
          • 登錄的首要目標是確保用戶成功登錄到他們的賬戶。

          什么是登錄目標?

          讓我們花點時間來定義一下“登錄目標”這個術語,這是在做設計決策時的關鍵。

          登錄目標是指用戶進入登錄流程的意愿。以有聲思維來表達,它可以是 “我想登錄”、“我想檢查我的電子郵件”、“帶我去那里”,等等。

          當用戶進入到登錄頁時,他們可能沒有登錄意愿。可能會產生“嗯,我不在乎,以后再做”或“這太麻煩了”或“呀,我現在該怎么辦?”的想法。忘記密碼、半路遇到困難或切換到另一個頁面/設備,都可能是缺乏登陸意愿的跡象。

          掌握這 7 條準則,提升用戶登錄成功率!

          我們得到了登陸目標

          保留或增強登錄流程中的登陸意愿是很好的目標,下面的準則都是為這個目標量身定做的。

          設計熟悉的體驗

          設計熟悉的體驗,雖說不是設計師最喜歡的設計準則,但是與整個生態系統中最好的體驗保持一致是非常重要的。例如使用簡單、公認的布局,使用眾所周知的術語和文案,都有助于用戶自信而輕松地進行熟悉的操作。

          保持通用的設計也有助于將頁面輕松擴展到不同的形式和設備。

          掌握這 7 條準則,提升用戶登錄成功率!

          Pinterest 有一個傳統的、居中的覆蓋式登錄頁。它有一個亮紅色的主要登錄按鈕,并提供 Google 和 Facebook 作為額外的社交登錄選項。

          滑到最后,有我對網絡上流行的成功登錄經驗的總結。這就把我們帶到了下一個問題 —— 創新的界限在哪里?

          登錄是一個品牌展示的絕佳機會點。在視覺上,它可能使用品牌色、品牌照片、品牌插圖,甚至是營銷信息。和大多數設計問題一樣,登錄頁品牌展示的關鍵在于平衡。登錄操作應該一直占據中心位置。頁面上的其他元素必須謹慎規劃好,不應該奪走登陸操作的注意力。

          一條優秀的經驗之談:用戶在登錄頁面上花費的時間越少越好。幫助他們繼續前進,盡快發現產品中的優點和價值。

          聚焦設計

          快速回顧一下:用戶在登錄頁面上花費的時間越少越好。根據這一點,登錄(或恢復)操作應當占據用戶的全部注意力。

          • 最好是把登錄框放在頁面的中心。如果你打算把它放在一側,最好是賦予它核心視覺效果。
          • 對于文案寫作來說,指明用戶在某一步驟中到底需要做什么才是很重要的!比起冗長的解釋,一句簡單的 “輸入密碼”就能起效。幽默、復雜的行話、技術術語和花哨的文筆在登錄體驗中是沒有用武之地的。

          在恢復體驗中,將一套復雜的操作分解成多個步驟是很有效的。安排用戶一次只做一件重要的事情!例如:輸入你的手機號碼和輸入發送到你手機上的驗證碼是兩個獨立的步驟。

          掌握這 7 條準則,提升用戶登錄成功率!

          Facebook 在頁面中保持用戶信息在右側,并將恢復流程分解為多個步驟。

          掌握這 7 條準則,提升用戶登錄成功率!

          亞馬遜把它的恢復流程分解成多個步驟。它將次要的恢復選項設置為 “我需要更多幫助 ”的可擴展部分,這有助于保持注意力集中在主要操作。

          保持注意力集中在主要操作的技巧:

          • 登錄框可以布局在一個主頁、疊加頁,或一個獨立頁面。
          • 使用卡片式布局
          • 將操作分為主要和次要操作
          • 使用一個大而醒目的登錄按鈕
          • 盡量減少次要操作的數量 —— 避免出現任何與核心登錄操作無關的內容。

          給予明確的反饋并在用戶失敗時提供幫助

          在登錄過程的每個階段,用戶都可能失敗。電子郵件地址輸入錯誤、密碼輸入錯誤或忘記密碼、網絡問題,所有這些都可能導致登錄意愿的急劇下降。因此,登錄界面以最恰當的方式回應用戶是非常重要的。清晰、及時、精心編輯的錯誤提示信息能起到很大幫助。

          掌握這 7 條準則,提升用戶登錄成功率!

          錯誤信息包含有用的提示/暗示,指明你在失敗時可以做什么

          掌握這 7 條準則,提升用戶登錄成功率!

          當你密碼登陸失敗,但你有一個 Gmail ID 時,Facebook 會增加一個 “用 Google 賬號登錄 ”的功能

          指導用戶恢復的技巧:

          • 鼓勵用戶嘗試合適的替代方案
          • 在用戶失敗后,安排替代的登錄方案,同時將用戶導航至一個獨立的頁面
          • 在文本中展示出最有用的登錄方案,并在出現錯誤時對用戶做出積極響應!

          盡量保留登錄痕跡

          重點是讓用戶知道平臺識別出了他們,并提供一個歡迎回歸的體驗。這有助于提升用戶的登錄意愿。

          保留登錄痕跡的方法:

          • 像 “記住我”這樣的功能
          • 預先填寫上一步收集到的字段,例如:在跳轉到恢復流程時,預先填寫登錄步驟中收集到的電子郵件 ID
          • 如果使用的是兩步式登錄,為用戶提供個性化的登錄方式是個不錯的主意 —— 用戶對電話OTP(一次性驗證碼)登錄更滿意?還是電子郵件+密碼?記住用戶上次選擇的登陸方式可以提升用戶的登錄意愿,并讓他們感覺到登錄體驗的自然和舒適。
          • 在企業 SSO(單點登錄) 中,用戶可能會用多個賬戶登錄。在檢測到多個賬戶的情況下,最好是將這些賬戶選項呈現給用戶,讓他們選擇他們想使用的賬戶。

          靈活提供多種登錄方式

          對于你的平臺應該提供哪些登錄方法,沒有一個放之四海而皆準的方案。最好是提供一到兩種額外的方法(除了用戶名+密碼),這樣用戶就有了選擇,以防他們忘記密碼。這些方法可以是基于電話號碼的登錄、人臉識別,或最常見的社交登錄,如 Google、Twitter、LinkedIn 或 Facebook。如果你正在考慮社交登錄,思考為平臺添加最流行和最安全的方案。

          需要注意的是 —— 增加很多的登陸方法會使頁面變得混亂,可能會導致登錄意愿降低!將額外的選項限制在 2 或 3 種。

          針對最常用的登陸方式進行優化,并明確區分主要和次要方式。這些選項通常被證明是需要重置密碼(以防用戶忘記密碼)的很好的替代方法,但同時也被認為是一個乏味的步驟。情況允許時,應智能地浮現其他登陸選項并進行個性化處理。例如:如果用戶是通過電子郵件登錄,提供一個帶有一次性鏈接的登錄選項可能會有效。

          掌握這 7 條準則,提升用戶登錄成功率!

          在此提供 Medium 登錄頁的案例。雖然清晰且設計良好,但它確實有太多的登錄方法。不得不回訪 Medium 的設計者,如果這個設計對他們來說是好的!

          無密碼登錄正火速流行起來。特別對于只有移動端的應用程序來說,基于電話號碼的認證已常態化。指紋和 FaceID 在許多地方出現,使認證流程變得快速、安全。為平臺找到最適合(且可開發)的方法,并將其作為主要登錄選項。

          登錄是信任敏感的時刻

          登錄涉及到用戶輸入敏感的個人數據,如電子郵件、密碼和電話號碼 —— 這是決定了他們與平臺關系的敏感時刻。

          登錄框代表了品牌,任何視覺上的改變都必須緩慢進行——因為整體的視覺變化可能會失去用戶信任。

          登錄也是(有用的)保障 —— 足以讓壞人無法進入系統!

          雖然減少普通用戶的操作是很重要的,但如果我們懷疑用戶可能是黑客,那么出現額外的認證也變得很重要。這可能是一個很好的機會去提醒用戶能夠采取哪些措施來加強他們賬戶的安全性 —— 例如:強密碼、雙重認證等。

          通過調研確定用戶類型

          之前有提到過,投入足夠的時間去調研用戶,有助于提高登錄意愿!這一點是很重要的。

          登錄是一種體驗,你的用戶角色可以是各種各樣的 —— 每個人都可能擁有一個你平臺的服務賬戶!如果可能的話,縮小你的角色范圍。

          情況允許時,像我這樣(為社交媒體平臺設計),可以嘗試以下方案:

          1. 登錄漏斗 —— 與項目管理人員合作,找出用戶在登錄流程中互動和放棄的關鍵點。
          2. 登錄入口 —— 用戶是通過電子郵件進入登錄頁面?還是通過搜索引擎的結果?還是當他們在使用產品時?或是在應用程序中?你可以利用這些入口點作為線索,為用戶展現出最相關的選項。
          3. 已知的設備 —— 手機、瀏覽器和已知的設備可以有助于為用戶提供受歡迎的、個性化的登陸體驗。
          4. 用戶群組 —— 根據用戶特性進行劃分,如網絡/移動、年齡組和地域,也能有幫助。
          5. 在用戶沒有登錄時,使用這些線索可以增加用戶的登錄意愿。采取微小的步驟進行用戶識別,并且使用戶易于接受。這有助于你提高登錄成功率!反之這也會為你的平臺帶來更多的活躍用戶,每個人都能成為贏家。

          案例介紹

          以下是我對網絡上我最喜歡的登錄頁進行的總結,包含一些我經常訪問的平臺。歡迎推薦更多登錄頁!

          掌握這 7 條準則,提升用戶登錄成功率!

          Google(谷歌)打破了標識優先的格式 —— 改成了分步式登錄模式,在不同的步驟中輸入電子郵件和密碼。這種模式對于 Google 有安全優勢,也可以使他們在接下來的步驟中為用戶提供個性化的選擇。頁面也是最小的、全白的、聚焦的。

          掌握這 7 條準則,提升用戶登錄成功率!

          Uber 的登錄頁是簡單且聚焦的,允許用戶輸入他們的電話號碼并進入下一步。

          掌握這 7 條準則,提升用戶登錄成功率!

          Facebook 有幾個登錄方案,他們用這些方案進行實驗和 A/B 測試 —— 這是一個右對齊的登錄框案例,它很好地突出了重點。左側的空間被用來打造積極的品牌形象 —— 總體來說是成功的登錄體驗。

          掌握這 7 條準則,提升用戶登錄成功率!

          Pinterest 做了 一個簡單居中的疊加表單,有碩大的輸入框 —— 不斷吸引用戶!還有一個亮紅色的登錄主按鈕,以及一些額外的社交登錄選項。

          掌握這 7 條準則,提升用戶登錄成功率!

          盡管 Airbnb(愛彼迎)在很多方面都做得很好,但它的登錄頁讓人感到操作繁多,這也許是因為基于手機號碼登錄,也許是因為大量的次要登錄選項,導致相當多的認知負荷!

          掌握這 7 條準則,提升用戶登錄成功率!

          LinkedIn(領英)很好地保持登錄框的簡介、聚焦和居中,有一個醒目的主登錄按鈕。

          掌握這 7 條準則,提升用戶登錄成功率!

          我對 Dropbox 的登錄頁面持猶豫態度——插圖很好看,但它的顏色與界面按鈕的顏色相似。這是附加元素分散注意力的案例。就我個人而言,我喜歡在界面中大膽使用插圖,但評估插圖的使用環境也很重要。

          掌握這 7 條準則,提升用戶登錄成功率!

          Amazon(亞馬遜)的登陸頁視覺設計上有些老舊,但對于管理用戶注意力是一個很好的案例,巨大的黃色“繼續”按鈕以及頁面上沒有任何干擾,使登錄任務看起來簡單快速。

          掌握這 7 條準則,提升用戶登錄成功率!

          在登錄頁面上放置廣告可能不是一個好主意,但同時 Yahoo(雅虎)有一個與眾不同的標識在登錄框中,其中設計了一些巧妙的功能,幫助用戶減少輸入。(參考下圖)

          掌握這 7 條準則,提升用戶登錄成功率!

          掌握這 7 條準則,提升用戶登錄成功率!

          我想把 Figma 納入優秀的登錄案例中,該頁居中于浮層,Google 登錄被突出展示(也許是 Figma 的首選和推廣的登錄形式?),它非常簡潔,幾乎是線框式的。用戶體驗非常好。

          感謝我的產品合作伙伴 Apurva 和我一起學習。采取微小的步驟進行用戶識別,并且使用戶易于接受。這會使你的用戶登錄成功率越來越高!同時這也會為平臺帶來更多的活躍用戶。:)希望你能從這篇文章中得到啟發,并應用于你自己的產品和設計工作中。

          文章來源:優設  作者:TCC翻譯情報局

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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


          ERP和APS的聯系與區別

          資深UI設計者

          ERP系統可以幫助跟蹤、存儲信息,有助于推動后續的產品決策,而APS系統是對ERP系統的補充和優化,具體而言,APS系統和ERP系統有什么關系?本篇文章里,作者就二者的關系、區別及應用等方面做了總結,一起來看一下。

          APS作為對ERP計劃系統的補充和優化,集成主要集中在與ERP計劃系統的交互層次上。二者其實有很多相似和聯系的地方。

          • ERP系統是企業資源計劃的簡稱,是指建立在信息技術基礎上,集信息技術與先進管理思想于一身,以系統化的管理思想,為企業員工及決策層提供決策手段的管理平臺。
          • APS系統是高級計劃與排程的簡稱,是解決企業內部生產排程和生產調度問題,常被稱為排序問題或資源分配問題。

          首先,APS的需求計劃模塊從ERP的訂單輸入中獲得客戶的實際需求,然后需求計劃模塊再結合外部數據中預測需求通過APS算法計算得出預測生產計劃;同時再通過APS中的供應鏈計劃模塊中的約束條件,得到指導MRP的約束生產計劃,傳回ERP的主生產計劃模塊。

          一、APS與ERP的關系

          APS的制造計劃模塊與ERP的MRP通過制造訂單,結合BOM、庫存信息及采購信息等數據綜合考慮,反復交互論證,得出將要生產排產的生產任務單。

          該生產任務單包含的信息為所要加工產品的數量級需求日期。APS的排產計劃模塊則會根據算法而得到工作中心的生產排單以及在制品的排隊序列。同時接受對車間活動的監測數據,實現對車間變化信息的動態反映。

          二、APS與ERP的區別

          ERP是依賴于MRP,主要基于無限物料、無限能力的理論,是通過缺料分析、能力分析、由人進行調整決定采取行動。APS的計劃是基于約束理論通過事先定義的約束規則,由計算機自動采取計算。另外,APS與ERP在計劃上也有許多關鍵的不同。

          總之,ERP在除生產計劃外的財務管理、成本管理、采購管理、銷售管理、庫存管理、人力資源管理等方面表現出了良好的管理效率和管理規范。而APS系統作為計劃系統能夠很好地規劃基于供應鏈的長、中、短期計劃系統,但是APS系統不能獨立運行,它需要大量的基礎數據的支撐才能良好地運行。

          三、APS能取代ERP系統嗎?

          APS不能取代ERP系統,ERP系統采用的計劃模型確實又不能滿足目前的需要,ERP的計劃模塊的改變同時將影響到整個系統結構的變化。因此,用APS來優化ERP生產計劃系統,既可以強化ERP的計劃功能,同時又不必影響到其他成熟的商業流程。

          四、APS計劃層次概覽

          理論上,APS系統層次日趨立體化和豐富化,目前大多數APS包括6個主要的模塊:供應鏈戰略模塊、供應鏈計劃模塊、需求計劃、制造計劃模塊、排程計劃模塊、運輸優化模塊。

          • 供應鏈戰略模塊用來支持戰略假設分析,確定生產地點、配送中心和其它實體的最優組合及選址方案,并對不同的成本和物料約束條件進行建模分析。
          • 供應鏈計劃模塊通過對物料、產能、運輸以及服務水平等的諸多約束對供應鏈進行建模和最優化分析,并制定出各流程的詳細計劃。
          • 需求計劃模塊:用統計工具、因果要素和層次分析等手段實現市場與客戶需求預測及管理。其關聯預測功能,甚至可以通過產品水平水平的預測推出各零部件的需求量,從而優化采購決策。
          • 制造計劃模塊:根據已有數據,與 ERP 的 MRP 通過制造訂單反復交互論證,得出將要生產排產的生產任務單。
          • 排程計劃模塊:考慮了生產中的產能、工序、物料及時間等約束條件制定出最優的生產計劃。
          • 運輸優化模塊可確定運輸模型以進行假設分析,并在約束條件下自動建立運載數量、發貨時間、運輸路線的安排。

          五、APS之車間計劃與排程計劃

          車間作業計劃的目標是通過對制造過程中車間層、車間層以下各層次物流的合理計劃,排程與控制,縮短產品的制造周期,減少在制品,降低庫存,提高生產資源的利用率,最終達到提高生產率的目的。

          從功能方面看,車間作業計劃層比物料需求計劃層有更具體的目標,那就是減少工件在制造系統中的“空閑時間”。

          據調查,在中小批量自動化制造系統中,工件在系統中的“通過時間”主要由4部分:加工準備時間、加工時間、排隊時間和運輸時間。其中加工時間只占整個通過時間的的5%左右,大部分時間消耗在排隊時間上,從而引起系統效益大衛降低。

          車間作業計劃層主要由生產作業計劃層、排程計劃層和生產活動控制層有機組成,其結構圖如下所示。其中生產作業計劃層是在戰術層下達的月、旬或周生產計劃的基礎上,根據各種生產資源的實時狀態數據,制定具體的生產作業計劃,該計劃將確定計劃期間內各種制造設施的具體使用狀況,每日/班的工件種類及數量等。

          排程計劃是在生產作業計劃的基礎上確定生產任務進行加工的順序,以及加工過程中各種制造資源的實時排程。上述的生產計劃于排程都只是為了運行層內物料的流動做出計劃,雖然在規劃時期系統能運行在最優或次優狀態,但實際系統運行中總會出現各種隨機的擾動,從而使系統是實際狀態與期望狀態之間產生偏差。

          所以,生產活動控制的目標就是應用反饋控制原理校正這種系統的偏差,使物料流動和系統資源利用等盡可能與生產計劃于排程計劃所期望狀況吻合。

          讓我們重點關注排程計劃層,它在車間作業計劃的三個層次中起到一個承上啟下的作用,具體來說,排程計劃就是針對一項可分解的工作如產品制造,探討在盡可能滿足約束條件如交貨期、工藝路線、資源情況的前提下,通過下達生產指令,安排其組成部分操作使用哪些資源、其加工時間及加工的先后順序,以獲得產品制造時間或成本的優化。

          車間排程計劃的重要性在于它保證生產計劃的有效實施,高效低耗低使用生產資源均衡生產,減少原料的加工準備、等待與傳送時間,縮短產品生產周期、確保產品交貨期,從而提高設備利用率與生產效率,同時,減少了在制品中的資金占用,降低了生產成本,使企業能更好地適應多變的市場需求。


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

          文章來源:人人都是產品經理  作者:山人小道 

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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

           

          日歷

          鏈接

          個人資料

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

          存檔

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