<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設計者


          眾所周知,人機交互是一門集調研,構思,設計和測試為一體的學科。作為一門覆蓋多領域的多學科,包括并不限于心理學,行為學,編程,工程,設計,調研,和工商管理,現代人機交互的核心已經不再是從技術層面去解決問題, 而是側重于以多個視角去挖掘問題的本質并思考問題背后的價值。也因此,人機交互學術界一直以來都試圖尋找一種思考模式,或者理論模型,去將復雜的思考流程提煉出來。




          01

          ————————

          主流交互模型


          近三十年來,人機交互領域的方法論可謂百花齊放,盡管許多知名研究機構與院校都發布了不同的設計模型與流程圖,但是其內核終究大致相同(尋找問題——定義問題——設計——測試)。


          以下是近年來國際最主流的七種人機交互設計模型:


          1. 尼爾森諾曼集團設計流程 (Nielsen Norman Group)


          2. 斯坦福大學設計學院設計流程(Stanford Design Thinking Process)


          3. 《情景化設計:為生活而設計》 中的設計流程 (Contextual Design: Design for Life)


          4. IBM環形設計模型 (IBM Loop Model)


          5. 英國設計協會雙鉆石設計模型(Design Council Double Diamond)


          6. LUMA 學院設計流程(LUMA Institute Design process)


          7. Dubberly Design Office 橋型設計模型(Analysis-Synthesis Bridge Model)


          其中,前6種應該都是大家相對熟悉的,我們在文末也附上了官方鏈接供大家探索。今天這篇文章我們將簡要的帶大家了解列表中最后一個也是最有特色的一個人機交互模型:橋型模型(Analysis-Synthesis Bridge Model)。




          02

          ————————

          橋型交互模型


          橋型模型是美國 Dubberly Design Office發表的設計流程圖(Analysis-Synthesis Bridge Model),對于不清楚的讀者,此公司的創始人Hugh Dubberly 曾發布超五十篇人機交互領域的研究型文章,在多個知名設計協會掛名,并被錄入美國 ACM 的 SIGCHI Academy, 成為公認對人機交互領域做出最杰出貢獻的人之一。Dubberly 也曾在多個美國知名大學任職,因此,此模型也是多數國際人機交互學科的公認理論。


          盡管相較于其他的流程圖,這個流程圖較為抽象,但是其所用的多維度分類卻相對明了的闡釋了設計的本質。如圖所示,橋型模型的x軸分為現在和未來,y軸分為具象和抽象,以此來定義設計的狀態。同時也加入了動詞“形容”,“分析”,“研究”,“制作”去定義設計中的操作。在這個橋型設計流程中,設計師從左下角到右下角的過程代表從現象走向抽象再從抽象走向產品的過程,與此同時也代表著從今天走向明天,或者說從問題的現在態走向解決問題后的未來態。



          現在態

          起點從左下角開始,(what “is”)代表著問題本身,而左上角的(model of what “is”) 代表問題的抽象模型或者問題的本質。這兩個階段代表著設計中的調研階段(Researching)。此時的設計師應該通過“形容具象的現象”(左下角格子 Describe+Concrete)即收集信息來拓寬對問題的了解然后再進行“分析抽象的模型”(左上角格子Interpret+Abstract)去制作問題模型來更清晰的看到現象的本質和規律。


          在這個階段,“世界并不清楚他想要什么樣的設計”—— Paola Antonelli


          在開始階段之所以要抽象出問題模型,是因為作為設計師不能單純的聽從人們的訴求。當生活中出現一個問題時,生活中人們往往不太清楚自己煩惱的本質是什么,要么他們只看到了問題的表面,要么他們被太多因素混淆了。因此在這個階段,設計師的責任就是去分析問題存在的環境與原因,并且以人為中心的角度去分析表象下人們的真正需求。也是因此,避免以技術為中心的分析(machine-centered-research)而選擇以人為中心的研究(human-centered-research)才是交互設計師應有的職責。


          在做以人為中心的研究時,收集和分析信息時避免內隱偏見(unconcious bias)是非常重要的。這里指由于生長在固定社會和文化下的而無意識帶有的偏見,比如身體健全的人忘記考慮殘疾人的需求,或者經常用電子產品的人下意識認為一些復雜操作很常規。在設計里,歧視不止包括在搜集用戶信息時忽略了個別群體,同時也包括設計師本身所帶的特定視角。一個成功的設計縱然應該滿足大多數人的需求,但是一個向善的設計也不應該忽視特殊群體的情況。這里不得不提到,雖然現如今很多設計往往依靠大數據來進行設計,但是大數據本身就代表著忽略少部分群體的需求,導致少數群體的歧視愈發嚴重,甚至一度威脅到一些小眾的題材。因此在調研時考慮到人種,年齡,經濟情況,教育程度,是否殘疾,和對科技的熟悉度可以更嚴謹的分析不同視角下問題的影響。


          左下角常用的用戶研究方法有情景調查(contextual inquiry),利益相關者邏輯圖(stakeholder map),和參與型研究(Participatory Research)等等。左上角常用的分析方式有帶入虛擬人格(persona)和流程圖(journey mapping)等等。



          未來態

          右側的兩個階段則代表問題的未來態或者設計原型態(prototyping)。右上角的 (model of what "could be")代表問題的未來的可能性,也就是一般說的設計和構思部分,而右下角的(what “could be”)就是將這些未來的可能性做出來,從概念化為產品。


          然而如何從右上角的抽象模型到右下角具體設計呢?在這里便需要了解一個大致的設計信息層級。




          如圖所示,一個設計的是由多層結構組成的,從抽象到具象分為五個階段,策略(Strategy),內容(Scope),結構(Structure),框架(Skeleton),視覺(Surface)。一個嚴謹的設計應該是從下而上發展的(從深層的策略到淺層視覺),并且每次在考慮深層的策略時應該避免淺層的干擾。這是因為淺層只是策略的表現的方式,而深層策略才是決定產品核心價值的關鍵。決定策略(Strategy)時應該直接依據模型左上角“問題的本質”來決定要設立什么樣的產品目標。只有策略定了,才能確定這個產品的內容與受眾群體。假如目標是讓盲人點餐,那么內容有可能就是在這個頁面提供特殊的菜單形式和電話快捷鍵。而假如目標是讓人聽音樂,那么內容可能就是提供音樂推薦與保存。而在結構方面,確立內容后只需要一個完善的邏輯,比如用戶的具體使用流程是什么,就可以快速具現這個產品的結構。最后,框架和視覺階段則更多只是一種表現手法的選擇。無論最終選擇如何設計,只要保證框架和視覺元素在整個產品中保持一致并且符合產品定位即可。


          從策略到視覺的過程也就是模型中從右上角到右下角的過程。每個設計師的目標都應該是以具象的產品實現相對抽象的策略。而要想讓視覺和策略緊密聯系,就應該盡可能在每一步的過度時都考慮到前后步驟的銜接是否邏輯通順,避免層與層之間脫節的現象發生。盡管在現實中,層與層之間的分隔往往沒有這么清楚,但是這種分層的設計邏輯可以作為一個有用的構思框架,讓設計師在發散思維的時候不偏離目標。


          而最后即便到了右下角的產品產出,一個完整的設計流程也不算結束。一個成功的設計總是需要多個設計迭代的。盡管在每一個一個迭代中,右下角可能是最終產出,但是在一個完整設計流程里,右下角還應該連接左下角,將已經完成的設計再一次進行分析和測試并總結出優缺點,再進行下一輪的設計。


          在右上角的設計部分中經常使用的方法有故事模版(story boarding),紙質低保真模版(paper prototyping),和以人為中心設計(human centered design)等等。


          總而言之,橋型模型作為國際人機交互院校最常用的模型,從多個角度描述了從一個問題從研究到解決的過程。我們可以看得出,設計從來都不是一個隨性而為的過程。從左側的無偏見而系統的分析問題到右側的遵循結構進行設計,設計師都應該在一個嚴謹的框架下進行思考和設計,這樣才能做到有針對性的解決問題。在這里也希望大家能多多關注各類人機交互設計理念并從中獲取靈感亦或找到適合自己的設計流程。




          03

          ——————————

          其他設計模型

          下面是六種其他主流國際人機交互模型和官方鏈接供大家探索:


          1. 尼爾森諾曼集團設計流程 (Nielsen Norman Group)


          研究問題領域(discover),探索不同可能(explore),測試設計(test),和傾聽反饋(listen)



          官網鏈接: https://web.stanford.edu/~mshanks/MichaelShanks/files/509554.pdf


          2. 斯坦福大學設計學院設計流程(Stanford Design Thinking Process)


          抽離問題(empathize),定義問題(define),尋找靈感(ideate),制作原型(prototype),測試成品(test)。


          官網鏈接: https://web.stanford.edu/~mshanks/MichaelShanks/files/509554.pdf 



          3. 《情景化設計:為生活而設計》 中的設計流程 (Contextual Design: Design for Life)


          理解問題(understand),發明未來(invent),情景話設計(design),制作原型(validate),和開發產品(develop)。



          書本鏈接:https://www.goodreads.com/book/show/33805307-contextual-design




          4. IBM環形設計模型 (IBM Loop Model)


          觀察(observe),反思反饋(reflect),和制作(make)。

          官網鏈接: https://www.ibm.com/design/thinking/page/framework/loop




          5. 英國設計協會雙鉆石設計模型(Design Council Double Diamond Model)


          發現(discover),定義(define),制作(develop),傳遞(deliver)。

          官網鏈接: https://www.designcouncil.org.uk/news-opinion/what-framework-innovation-design-councils-evolved-double-diamond




          6. LUMA 學院設計流程(LUMA Institute Design process)


          看(looking),理解(understanding),制作(making)。


          官網鏈接: https://www.luma-institute.com/about-luma/luma-system/




          04

          ——————————

          結語


          以上就是本篇的全部內容了,希望大家讀完后能對國際主流人機交互領域多了一些了解或者從中獲取一些啟發。感興趣的讀者們也可以通過點擊介紹中的鏈接直接去官網獲取更詳細設計理念的介紹。


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

          文章來源:站酷   作者:騰訊ISUX

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

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

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



          UI色彩總結—如何滿足不同界面的配色需求

          資深UI設計者

            作為身處設計領域我們或多或少的學習過色彩知識,同類色、鄰近色、對比色、明度、純度......但好像學習過是一回事,使用起來由是一回事,我們然后常常聽到自己的作品被說:顏色太臟了,太焦了,太花,氛圍不對....總的來說就是不太好看,于是我們就去看很多很多的好圖,嘗試著學習別人的色感,讓自己的作品更好看些。

          通過參考圖片的色表,并嘗試用到自己的作品里面去

          (上圖只是舉下例子)

                     自己的作品色感也確實得到了很大的提升呢,但我們也可換其他的圖,畢竟色感好的圖那么多,接著好像就會陷入一個誤區,過于依賴參考,脫離了參考自己用色就會猶豫不決,就算是參考了用色也不知道為什么要這樣配色,作用是什么......一系列問題浮現在我們的腦海,那么問題產生,思考一下該如何解決問題吧,希望能夠跟大家一起提升色彩知識


          色彩基礎知識

          既然是了解和提升色彩,那我們不妨先復習一下色彩的基礎知識

          (非常熟悉色彩基礎的可以這里可以跳過)

          1、色彩的屬性

          ①色相

                  色相也就是以色彩的稱謂,它是一種顏色區別于另一種顏色的獨特屬性。例如: 玫瑰紅、桔黃、檸檬黃、鈷藍、群青、翠綠…..我們把紅橙黃藍綠紫,和她們所處的各自之間的紅橙、黃橙、黃綠、藍綠、藍紫、紅紫這六種中間色一共12種色,稱為色環。

          ②明度

                   我們稱顏色的深淺為明度,若在某一色相的顏色中加入黑或白的成分,便可使明度降低或升高。色彩的明度是眼睛對光源和物體表面的明暗程度的感知,主要是由光線強弱決定這一視覺經驗,顏色明度越高,其視覺感受越明亮,反之,則越暗淡。

          ③ 純度

                     色彩的純度是指某一種色相的顏色的鮮艷程度,也叫飽和度,既某一種顏色的自身形象的完整程度。

          自然界的顏色,由于受光線變化的環境因素的影響,單個物體的固有色純度不會是百分百,總有一些偏向,有色彩的各種色都具有飽和度,而區別其飽和度高低的方法是根據這種色中含灰色的程度來計算的。


          總結:顏色主要是由色相(顏色)、明度(明暗)以及純度(飽和度)組成

          ①關于色相的問題“花”可以通過減少色相,或者保持色相在三種以內,來使畫面整潔,具有統一感

          ②關于明度的問題“平”可以通過拉大明度的區間,來達到加強畫面的層次感的表現

          ③關于純度的問題“焦”和“臟”根據畫風對純度統一的要求,通過弱化或增強純度,使畫面純度保持一致


          色彩搭配

          了解完顏色的基礎知識,再來了解一下色與色之間如何進行搭配,并且會產生什么作用吧

          (非常熟悉色彩基礎的可以這里可以跳過)

          ①同類色

                    以某一顏色為基準,與此色相隔15°以內的顏色為同類色,主要是指單一色相通過明度、純度變化達到豐富的色彩效果,同類色給人的差距很小,常常給人單一、統一、穩定的感覺,可以通過明暗層次來提升畫面的層次感

          ②類似色

                    以某一顏色為基準,與此色相隔30°以內的顏色為類似色,類似色比同類色效果搭配更明顯、豐富,可保持畫面的統一感和協調性,呈現柔和質感,由于搭配效果較為平淡和單調,可以通過色彩明度和純度的對比,達到強化色彩的目的


          ③臨近色

                    以某一顏色為基準,與此色相隔60°—90°的顏色為臨近色,臨近色對比屬于色相中對比,可保持畫面的統一感,又能使畫面顯得豐富、活潑,可增加明度和純度對比,豐富畫面效果,這種色調上的主次感能夠增強配色的吸引力

          ④對比色

                    以某一顏色為基準,與此色相隔120°—150°的任一兩色互為對比色,對比色相搭配是色相中的強對比,其效果鮮明、飽滿,容易給人帶來興奮、激動的快感,作品中常以高純度的對比色配色來表達隨意、跳躍、強烈的主題,以吸引人們目光的作用

          ⑤互補色

                    以某一顏色為基準,與此色相隔180°的任一兩色互補,互補色的色相對比最為強烈,畫面相較于對比色更為豐富,更具有感官刺激性

          總結

                   不同顏色的搭配能夠產生不同的作用,我們可以根據自己的需求選擇合適的色彩搭配來運用到自己的界面上來,但是這種基礎的色彩搭配更適合運用到廣告、活動、banner上來,因為他們有明確的主題,確定的角色作為色調參考,而且能夠作為單獨界面存在,但是像通用界面,變化太多,需要考慮的也太多,單單的色彩搭配不能夠作為唯一的參考標準,想知道是被什么因素所影響的嗎,接著看下去吧~

          (對比色)


          色彩比例

                   上面說道,根據不同色彩搭配的特點,即可運用到界面上,來達到自己想要的效果,那為什么自己所用到的色相并不多,但界面還會經常被點評“花”呢?又該怎么解決這個問題呢?這里可能是色彩比例出了問題

                  “花”主要指:色相、明度以及純度多且分布過于分散,從而形成細碎的點、以及使用素材過多(素材自身帶有多種顏色)導致畫面被分割的很細碎,所以在設計中畫面通常由主色、輔助色和中性色組成,一來是可以很好的規避這個debuff,二來使畫面整潔,具有統一性,也方便沿用到其他界面

          ①主色

                   主色為核心色彩,它的要點在于——你想讓用戶感受那種情緒,然后通過情緒關聯到一個大致的色彩范圍,再進行微調,常常用到同類色、鄰近色....來使界面即具有層次感的豐富,又可以保持畫面的統一感和協調性


          ②輔助色

                   輔助色包含一到若干個和主色不同的色彩,具體的根據實際場景功能決定,最常用到互補色和對比色,因為視覺差異性大,而輔助色主要功能是作為引導用戶進行交互,比如通知、提醒、取消用紅色,確認、升級用綠色.....而基于引導用戶這個原則,所以越需要被突出的顏色,可以在色環中離主色越遠,越不需要被突出的則越近,例如:常作為提示作用的按鈕


          ③中性色

                   如果說主色輔助色決定了界面視覺是否出彩,那中性色的應用直接決定了頁面能不能正常使用,所以中性色常用于界面中的文字,界面底版等顏色,起到便于閱讀的作用


          總結

                  主色、輔助色、中性色的運用使界面具有層次感,避免了因為顏色細碎而導致“花”的問題,而大面積的主色通過色彩情感增強玩家對世界觀的整體感受,而輔助色作用則傳達特定的信息方便玩家的抉擇


          色彩心理學

                剛剛說到主色取決于—想讓用戶感受哪種情緒,那情緒是跟色彩如何進行關聯的呢?

          ①色彩感受

                其實也沒有那么玄乎,包括沒有學過美術的人也知道冷色、暖色,但色彩本身并無冷暖的溫度差別,是視覺色彩引起人們對冷暖感覺的心理聯想

          進而產生冷暖感覺,并且產生一系列的情緒

          例如:【暖色】人們見到紅、紅橙、橙、黃橙、棕等色后,會聯系到太陽、火焰等景象

                    【冷色】見到藍、紫等色后,則會聯想到天空、冰雪、海洋等景象


                                 

          ②色彩情緒

                   而情緒的產生,主要是因為我們通過顏色—聯想到景象—從而產生情緒,因為色彩本身是沒有情感的,我們之所以能感受到色彩的情感,是因為長期生活照一個色彩環境中,積累了許多視覺經驗,這些經驗與某種色彩刺激呼應時,就會激發某種情緒


          例如:黃綠、藍、藍綠等色,使人聯想到草、樹等植物,產生青春、生命、和平等感覺。紫、藍紫等色使人聯想到花卉、水晶等稀貴物品,故易產生高貴、夢幻的感覺。至于黃色,一般被認為是暖色,因為它使人聯想起陽光、麥田等

           ③色彩感受補充

          色彩的輕重感

          •  高明度: 高明度的色彩使人聯想到藍天、白云、彩霞、棉花、羊毛等,從而產生輕柔、漂浮、上升等感覺, 所以產生“輕”的感受

          •  低明度:低明度色彩容易讓人聯想到鋼鐵、大理石、礦石等,從而產生沉重、穩定、降落等情緒,所以產“重”的感受

                        


          色彩的軟硬感

          色彩的軟硬感主要來自色彩的明度,參考上面,但是純度也是其中的影響因素,例如:

          •  高純度: 高純度的色彩都偏硬感,如果明度又低則硬感更明顯,來源于色與色之前的對比,界限明顯

          •  中、低純度:色彩成柔和感,因為容易使人聯想起駱駝、狐貍、貓、狗等動物毛發,絨織物,而且色與色之間對比的界限不明顯

                       


          色彩的華麗/質樸

          色彩的鮮艷、質樸、色彩的三要素對此都有一定的影響,其中純度的影響最大,來源于人們對材質的認知,例如:

          • 高明度、高純度:色彩豐富、強對比,感覺鮮艷、強烈

          • 低明度、低純度:單純,弱對比,感覺色彩質樸、高雅、暗淡、復古

          過色彩的這個特點,我們可以用于營造即復古、典雅又華麗的氛圍

                   以上只是些舉例說明,希望大家能夠舉一反三,例如:高明度具有擴大感、膨脹感,低明度具有顯小、收縮感等等,在裝潢設計、服裝設計常有用到呢,畢竟黑色顯瘦(滑稽)~

                    又例如根據人群劃分,以兒童作為主要用戶人群,色彩都是高明度、高飽和度,因為小孩子視力發展隨年齡增長逐漸完善,他們在視力未完全發展的時候能辨別出的顏色有限,對純度明度鮮艷的辨別度高,所以就特別喜歡鮮艷的顏色。

          總結

                  我們看到的各種色彩,與以往的記憶及經驗產生聯想,從而形成一系列的色彩心理反應,我們可以通過這些心理反應的特點,來得到合適的配色并且運用到我們的作品中


          色彩運用與感情基調

          上面只是詳細的說明了色彩的各自特點,以及不同的顏色所產生的不同情感,那我們該怎么把所有的知識總結起來,運用到我們的游戲配色中來呢?下面講的是主色

                  首先每個游戲都有自己獨特的美術風格,而情感基調則是決定美術風格的方向,什么是情感基調:他是游戲傳達給玩家,能夠激起玩家情緒反應的核心感受,而玩家對于感情基調的感知來源于視覺呈現,而我們通過概括游戲的視覺基調,則很好的幫我們找到美術風格的方向

          例如:

          (中世紀戰爭)

          (科幻未來)

          (古典神話)

                 通常游戲的情感基調都是由概念設計師設定的,但介于概念設計師在國內較為稀缺,我們可以通過競品、資料圖片來表達游戲的情感基調和整體風格,但是被概括的情感基調內容過于遼闊,我們需要仔細拆分成多個細分領域,更方便我們做設計

          例如:科幻戰爭(按時間來劃分有:二戰、冷戰、現代、近未來,未來...)(按風格劃分有:賽博朋克、原子朋克、柴油朋克...)、

                  每個細分的領域都有他各自的美術風格和特點,當然這篇主要講配色,我也先不扯遠了,確定風格之后,我們就可以通過風格特點來確定配色,

          例如:我們比較熟悉的風格《賽博朋克》的配色分析

          整體色調:高對比度、高飽和度、低亮度的畫面,整體亮度較低。畫面以冷色調(藍色、青色、紫色)為主,同時局部用暖色調(霓虹燈色調)點綴

          畫面為什么以藍色、綠色、紫色為主呢?

          綠色:因為早期電腦顯示器上的字符是綠色的。上世紀60到80年代,電腦顯示器均為單色顯示器。一般來說,單色顯示器分為黑白和綠色兩種。由于顯示綠色的熒光粉,在造價上遠低于顯示白色的熒光粉,因此早期單色顯示器多使用綠色字符。綠色從顯示器中流入賽博朋克世界,形成了一種極具風格化的視覺特點

          藍色:標準的科幻色,科技代表的是對未知的探索, 宇宙、天空、大海等都和藍色有關,而這三者都是科學研究的最原始的對象,其次藍色是短波長顏色,從心理上會給人以 沉穩、理智、準確的意象,恰恰與科技給人的感覺相符,最主要的是藍色用于表達科幻的作品相當廣泛,幾乎已經達到了眾人皆知的地步

          紫色:紫外光色極具穿透力,即使在一片灰霾暗淡之中,也能夠令人一眼望見。強化了光污染下的失真美感,也是賽博朋克的標志性色彩之一。

          總結:

                 如果說色彩心理學是:通過顏色—使玩家聯想到景象—從而產生代入情緒,那么主色的確定則是:通過景象—感受情緒—關聯色彩,至于明度和純度,則取決于風格特點


          色彩運用與游戲反饋


                      如果說主色是為了通過色彩聯想產生情緒變化,增強玩家的代入感,那么輔助色的作用就是信息傳達,通過視覺感受色彩能夠在第一時間激發大腦的最本能反應,讓玩家直接感受到當前畫面所傳達的視覺信息,并且玩家在交互后瞬時獲得的知覺反饋。

                      為了游戲世界更加真實可信,游戲的設計都是基于現實生活進行創作的,所以游戲美術設計師需要將這些最基本的顏色認知加入到游戲設計中,通常運用這種色彩情感聯系讓玩家與游戲互動,向他們傳達特定信息。那么我們看看顏色傳遞信息的一些例子吧

          例如:

          綠色:屬于大自然色系,代表著生命的永恒,給人一種生機勃勃的感覺,充滿了希望和活力,設計師也常運用綠色描述玩家安全的健康狀態。例如:血條,滿格的信號,恢復生命....同時基于綠色在社會的廣泛運用,如交通系統的綠燈等,綠色作為積極的象征已經扎根在我們腦海,所以綠色還有和平、安全、同意等的積極聯想,而和平狀態、引導性的確定以及打鉤符號也是我們常見的設計運用


          紅色:在現實生活中,交通燈顯示為紅色意味著停止機器上閃爍紅燈標志著危險或故障,紅色的滴狀物象征血等。所以,紅色通常用于表達與綠色截然相反的意境。對某些人來說,紅色暗示危險情況,代表警告或一些消極內容。在游戲設計中,常用紅色描述角色性命危險的狀態,或者一些提示性的警告等

                 以上只是部分例子,你們玩游戲的時候不妨注意一下這些有趣的設定,例如道具、角色的品質顏色,勝利失敗的顏色對比區分,或者是劃分陣營時,通過不同顏色區分勢力等等

          總結:

                 輔助色的確定公式則是:通過顏色—使玩家聯想景象—引導玩家獲得指示—以致玩家做出反饋,所以顏色的運用在引導玩家、說明功能上起到了非常大的幫助哦

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

          文章來源:站酷   作者:筱玥 

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

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

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


          如何制作數據可視化地圖

          資深UI設計者


          第三方地圖的獲取和對接

          普通地圖一般都是去對接三方平臺,如百度地圖、高德地圖、騰訊地圖、谷歌地圖等。他們都會提供對應的地圖開放服務。以高德地圖為例,實操一下地圖的獲取和調色方法以及最后跟開發交付的流程。

          首先登錄高德開放平臺,點擊右上角控制臺


          進入控制臺會進入下圖頁面(大家可以多點點查看下平臺的相關功能內容,比如點擊數據可視化里面會有集成的地圖可視化效果)


          數據可視化里面后有一些集成的模板化的效果,大家可以點點看看



          回到主題點擊自定義地圖就可以對地圖進行自定義配置了,如下圖: 



          頁面上會有好多配置好的模板供你選擇,也可以選擇自己自定義配置,根據需要選擇一個點擊進去,就進入地圖配置頁面。


          上圖中左側為地圖的可配置項目,點擊選擇可根據自己的需求對地圖進行配置,包括顏色字體界線等等都可以配置。每個配置項下面都會有很多配置子項,非常詳細,當然里面會有些收費的配置項需要付費后使用,這塊大家可以多點點,根據自己需求來做調整。


          如果想要獲取3d建筑的樣式把右下角層級超過17后,會顯示建筑,可根據需求調整角度和位置。


          最后將調整好的樣式,直接放大全屏后截屏后就可以在設計稿里使用了。


          關于開發樣式的對接

          將配置好的文件點擊右上角的發布,直接繼續點擊發布


          發布成功后會出現如下的彈框,里面會有一些調用和使用地圖的方法。


          根據使用需求可選擇不同平臺的使用方式,直接復制鏈接丟給開發就好了。

          3D地圖建模及貼圖的制作獲取方法

          首先看下網上找的兩張參考圖的效果

          (圖片源自網絡,如侵權刪)

          (圖片源自光啟元,如侵權刪)


          3D地圖的獲取和建模的流程

          首先大家可以在網上下載地圖的邊界輪廓文件,這里推薦網站-阿里云Data V 的一款地圖選擇器(http://datav.aliyun.com/tools/atlas/index.html#&lat=30.332329214580163&lng=106.72278672066881&zoom=3.5)

          這里可以下載對應的各個省份 城市的邊界地圖輪廓模型的svg文件,點擊左下角進行下載


          以山東省為例將下載好的svg文件導入ai里轉換成ai格式,這里要注意的是另存的時候一定要選擇比較早的版本,建議存為Illustrator 8圖中箭頭所指的那個版本,要不然c4d會是識別不出來。


          將轉換好的ai文件導入c4d,執行擠壓。山東省的3d模型就建好了。


          模型建好之后需要將模型進行展UV處理(展uv:將一個3D立體的模型拆開,展開成一個平面2D圖片。作用:使模型的貼圖效果更真實。)這里用到展uv的插件(FDUVToolkit 1.0)后臺回復 uv插件可獲取插件。下圖是在c4d中展完uv的樣圖,截圖保存下做備用(為后面的貼圖位置做參考,后面的貼圖需要和展uv的這個圖一一對應上)。


          將處理好的模型導出obj備用(后面給開發和在ae中處理效果都會用到這個格式)



          漫射貼圖制作的思路

          首先在Google Eaeth Pro 上面找個省份對應的位置然后執行文件-保存就能保存當前展示得地圖紋理了(建議保存兩張貼圖,一張帶邊界和地名的方面后面制作貼圖的時候方便對上位置,第二張就是無邊界地名的作為最終的漫射貼圖)。


          將c4d展完uv的截圖、還有制作模型下載的地圖邊界路徑、和剛才的截圖一一拖入ai里面 ,新建一個4k(這里根據需求建就行)的畫布,將展uv的截圖縮放到畫布大小,如下圖,然后根據邊界輪廓都對應好 執行剪切蒙版,最終會得到下面的圖的效果。(切記貼圖的位置一定要和上面uv截圖的位置一致,要不然貼上會是亂的)

          高度貼圖的思路(用到軟件QGIS)

          首先去地理空間數據云上下載素材:選擇對應的行政區位置。


          將下載好的數據解壓后倒入QGIS軟件;倒入的圖片稍微有些明顯的拼接的縫隙 將圖片位移處理后導出備用。



          最后處理完的貼圖如下:(切記貼圖的位置一定要和上面uv截圖的位置一致)

          法線貼圖的獲取和處理思路

          將處理好的高度貼圖導入到ps中 執行-濾鏡-3D-生成法線圖


          直接點擊確定,法線圖就做好了,直接導出就可以了,最終效果如下:


          這樣整個3d地圖所需要的貼圖就都做好了 。

          最后貼圖制作好了之后就是貼到模型上處理效果,因篇幅原因本期暫時不分享了。


          城市模型的獲取方法

          推薦一個網站用于下載地圖數據叫-OpenStreetMap (OpenStreetMap 是一個由地圖制作愛好者組成的社區。這些愛好者提供并維護世界各地關于道路、小道、咖啡館、鐵路車站等各種各樣的數據。)    


          地址:https://www.openstreetmap.org/#map=15/39.9198/116.4536需要的自取。


          首次打開是這樣的


          點擊導出會進入下面界面,(ps:當前屏幕看到的區域就是要導出下載的位置)點擊下方的藍色導出按鈕就會提示下載,最終得到一個map.osm的文件。    


          下面需要將下載好的地圖數據轉換成模型,這里用到的軟件是Blender及他的GIS插件公眾號回復“Blender” 或“GIS插件”領取安裝包(包里有詳細安裝說明)


          先打開Blender:選擇 GIS - 導入 - Open Steeet Map xml(.osm)    

           
          根據界面內容 選擇剛下載的文件進行導入    


          導入后就會得到下面的城市模型了,如下圖:    


          執行:文件 - 導出 - 選擇后綴是.obj的這個如下圖 就可以將模型導出obj了。    
           

          做到這一步本次的分享也要接近尾聲了,后續的操作可繼續在Blender里做效果,或者通過Blender導出城市的obj格式的模型文件,用C4D打開做效果。


          以上方法只是獲取一些建模的方法,后面一些定制化需求需要針對某一個建筑單獨建模,一般都是基于實測數據畫出建筑的整體外輪廓,然后把實際拍攝的大樓四個面的照片進行處理制作為貼圖貼上,篇幅原因大概講一個思路。


          最終的效果-深色


          淺色效果


          關于開發對接

          一般這種效果都會有好多種實現方法,threeJS,webgl,U3D,Ue4,Ventuz等等,如何對接開發給開發提供那些東西,這都取決于開發使用的工具和實現的方式,這里建議做之前充分跟開發溝通想要的效果,可以讓他們做個調研方案,這樣會事半功倍,免得做一些無用功,出現設計和開發相互甩鍋來回扯皮的情況。

              

          不管是基于什么實現大致的實現思路都是差不多的,基本都是會需要設計師提供地圖模型、UV貼圖、烘焙貼圖、材質參數等等。   

           

          這些東西對接其實跟咱們自己建模貼圖然后在處理材質燈光(有些不支持燈光渲染,就需要把燈光的效果烘焙到貼圖上直接給貼圖)這些參數是一個原理,把基礎模型和對應的參數和貼圖,給到開發就可以了。  

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

          文章來源:站酷   作者:MR小六

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

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

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




          企業產品如何做好用戶教育系統設計?

          資深UI設計者

          toB 產品具有邏輯復雜、使用門檻高、試錯成本高、用戶角色多樣化的特點,通過用戶教育設計向用戶傳遞產品價值,提升產品易用性與可學性。本文從用戶生命周期出發,明確用戶教育在企業產品各個使用階段的目標,制定對應設計策略,同時結合過去一年「企點客服」產品的用戶教育設計實踐,沉淀了一些系統化設計經驗和思考與大家分享。

          不同規模企業對用戶教育的需求分層

          1. 中大企業為服務付費,那中長尾企業的用戶教育如何滿足?

          SaaS 企業產品的業務體系分為“產品+服務”,不同類型的企業購買產品的訴求是不同的,對用戶教育的需求也有所差異:

          中大企業往往已經擁有成熟的業務管理方案,需求明確,愿意為服務付費,遇到使用問題傾向于尋求服務支持。對于 SaaS 廠商來說,中大企業客單價高,售后會提供專業的服務跟進(包括定制需求、上門實施服務等),這些增值服務也是 SaaS 廠商常見的一種商業模式。

          中長尾企業希望獲得一個好用的產品,甚至獲得免費的服務。對于 SaaS 廠商來說,這類企業客單價低,售后會盡可能節省客服人力成本,主要在售后培訓期及為 VIP 客戶提供服務。所以需要更多地在產品內提供用戶教育來引導自助解決問題,傳遞行業運營經驗來幫助企業提升業務。

          本文將重點圍繞中長尾企業的產品內自助式用戶教育來展開。

          2. 針對企業主要角色,用戶教育需要關注的點?

          中長尾企業往往缺乏成熟的數字化管理及運營經驗,用戶教育可以引導企業盡快從傳統業務思路過渡到數字化業務思路。

          管理者、一線員工是企業最常見的兩類角色,用戶教育需考慮兩者在業務流程、績效目標、操作習慣上的差異,并且在產品使用中更好地透傳“后臺配置”和“前臺使用”之間的關系。另外對于企業經營者來說,員工頻繁流動導致新員工培訓成本高,用戶教育可以幫助新員工上手,降低培訓成本。

          企業產品用戶教育設計策略

          1. 背景

          「企點客服」是「騰訊企點」旗下的一款產品,致力于為企業的客服/運營團隊提供一站式“服務營銷一體化”解決方案。產品從界面上分為面向企業管理員的賬戶中心后臺網站,用于接待配置/員工監控/數據分析;以及主要面向一線客服的客戶端(工作臺),主要用于客戶接待。

          騰訊實戰案例!企業產品如何做好用戶教育系統設計?

          2. 產品內各階段用戶教育解決方案

          產品內自助式用戶教育包括用戶使用產品過程中,在產品界面內能接觸到的提示幫助。根據用戶使用周期,各階段的教育設計目標如下:

          騰訊實戰案例!企業產品如何做好用戶教育系統設計?

          • 新手期:讓新用戶盡快體驗到產品價值,對產品產生第一步信任
          • 使用期:隨任務場景適時提供幫助,幫助中心提供自助查詢
          • 迭代期:新功能有效觸達,老用戶體驗平滑過渡

          除此之外的服務階段(培訓期)則包含了產品界面外的教育幫助,如售后培訓、客服咨詢等。

          新手期:讓新用戶盡快體驗到產品價值,對產品產生第一步信任

          騰訊實戰案例!企業產品如何做好用戶教育系統設計?

          用戶在注冊/付費后的第一個階段是新手期(一般為 90 天),這個階段是用戶對產品產生第一步信任的關鍵時期,直接影響到新客活躍度。新手 Onboarding 引導可以幫助用戶以較低的學習成本快速上手,盡早體驗到產品價值。

          對于首次進入產品界面的用戶來說,最有效的上手引導方式有新手任務、全局導覽、全局彈窗。進入具體功能頁后用空白頁及內容示例來進一步引導使用。

          1. 新手任務:最小閉環跑通業務,發現產品核心價值

          新手任務是一種高效直接的 Onboarding 方式,幫助獲得可測試的最小閉環體驗,適用于功能層級復雜的界面(如產品后臺)、核心價值明確的產品。

          用戶初次進入頁面時,新手任務通常以獨立頁面或彈窗形式主動出現,用明確的任務步驟來推動達成關鍵行為。

          在企點賬戶中心后臺,我們把企業管理員的最小任務目標定義為:搭建最基礎的客服接待系統,對應關鍵操作步驟為:創建客服小組→配置接待組件→接待客戶。界面呈現上,把賬戶中心涉及多個頁面的配置操作提煉到三個單頁里,簡單三步讓管理員馬上測試到真實的客戶接待效果。

          騰訊實戰案例!企業產品如何做好用戶教育系統設計?

          完成最小任務后,可以繼續進入到任務清單進行更完整的功能探索,用戶可以根據自己的節奏進行學習。任務清單依據用戶使用場景分類,把復雜的大任務拆分為多個小的子任務,減輕用戶心理壓力。進度條給予用戶對學習進度的掌控感,同時激勵他們繼續探索。從最小任務到完整任務清單,實現從新手到中級的過渡。

          騰訊實戰案例!企業產品如何做好用戶教育系統設計?

          2. 全局導覽:手把手全面介紹重點功能

          與新手任務“直接給答案”的方式不同,全局導覽像導游一樣向用戶介紹核心界面及功能,適用于層級較淺的界面、功能較為簡單的產品。

          全局導覽通常由一系列有順序、有指向性的輕浮層組成,對于新手來說的確是一種全面的、保姆級的引導方式,但風險是一通引導過后用戶可能什么都沒記住。所以設計時必須聚焦用戶最關注的功能點,步驟不宜過多,且必須允許用戶在任意步驟跳出流程。

          3. 全局彈窗:核心特性重點聚焦

          首次進入產品界面時自動彈出一個或一組模態窗口。這種形式的侵犯性較強,也就意味著用戶可能會馬上跳過或關閉,所以要盡量讓用戶 3 秒內 get 到重點(如需傳達更多信息可在最后一屏附上跳轉入口)。企點客戶端新手引導通過三個滑屏重點呈現核心特性:

          騰訊實戰案例!企業產品如何做好用戶教育系統設計?

          用戶經歷了新手 Onboarding 引導后,在開始使用前對產品有了初步了解,是時候放手讓他們進入頁面探索一番了:

          4. 空白頁

          空白頁是一種特殊的頁面狀態,常用于剛進入頁面時無內容或功能未開啟時的狀態??瞻醉摓樾率钟脩艚榻B當前功能價值,引導使用,同時透傳品牌形象,與用戶建立情感連接,留下良好的第一印象。

          騰訊實戰案例!企業產品如何做好用戶教育系統設計?

          空白頁文案千萬不能用簡單的一句“暫無數據”就完事兒,而是必須明確告知用戶:功能是什么?功能的價值是什么?接下去要怎么做?作為企業產品,文案風格力求清晰、理性、積極。

          騰訊實戰案例!企業產品如何做好用戶教育系統設計?

          空白頁插圖用于輔助信息可視化表達,視覺風格上需符合企業產品品牌調性。例如企點品牌關鍵詞是“智能、輕快、高效”,那么插圖風格就不能太嚴肅厚重。

          圖標型:簡潔抽象,偏情感化與氛圍表達,適用于較易理解、邏輯較為簡單的功能。例如智能客服的知識庫相關頁面都采用了情感化的圖標型插畫,并用統一的機器人形象打造系列感:

          騰訊實戰案例!企業產品如何做好用戶教育系統設計?

          概念圖形型:通過抽象界面和圖形把復雜邏輯可視化,適用于邏輯比較復雜難懂的功能。例如機器人任務型相關功能:

          騰訊實戰案例!企業產品如何做好用戶教育系統設計?

          5. 內容示例/模板

          面對復雜功能時,空白頁引導可能無法為用戶提供最直接的使用建議,此時可以采取內容示例或模板引導。

          團隊協作工具 Slack 為新用戶提供了三個常見的 channel 示例(左圖);項目管理應用 Trello 預置了看板示例,同時把引導文案巧妙地融入了看板(右圖):

          騰訊實戰案例!企業產品如何做好用戶教育系統設計?

          除了內容示例,對于復雜功能可以提供配置模板。模板可以通過成熟競品分析、行業桌面研究或用戶訪談推導得出。后續根據用戶反饋逐漸完善調優。

          企點賬戶中心的“高級分配規則”根據不同客戶類型提供了典型規則模板,為運營經驗不足的企業提供了有價值的參考:

          騰訊實戰案例!企業產品如何做好用戶教育系統設計?

          使用期:隨任務場景適時提供幫助,幫助中心提供自助查詢

          騰訊實戰案例!企業產品如何做好用戶教育系統設計?

          這個階段的用戶訴求是使用順暢,遇到問題能及時得到幫助。合理、有效、適時出現的用戶教育能降低用戶的受挫感,提升產品易用性。

          1. 隨任務場景適時提供觸手可達的幫助

          當管理員在產品后臺進行功能配置時,用戶教育的基本目標是幫他高效順利完成任務,更高階的則是要傳達功能配置邏輯與功能間的聯動關系。從“知道怎么配置”到“理解為什么這樣配置”,結合業務理解把功能用深、用好。

          在企點賬戶中心,我們把提示信息按出現時機、提示強度、信息顆粒度劃分為三種類型:小燈泡、小灰塊、小問號。這三種類型后續將沉淀為通用型組件且推廣應用于其他業務線,降低溝通成本及每次重復開發的工作量。

          騰訊實戰案例!企業產品如何做好用戶教育系統設計?

          ① 第一時間透傳重要信息「小燈泡」

          “小燈泡”作為頁面全局引導,負責在用戶進入頁面時第一時間透傳關鍵信息。小燈泡常駐頁面右上角,進入頁面時默認展開吸引注意,收起后不再自動展開避免干擾。

          小燈泡內容結構分為基礎部分與拓展部分?;A部分主要是功能介紹或操作引導,拓展部分包括企點有料、關聯模塊、相關問題。內容中可點擊“了解更多”到幫助中心,加強與幫助中心的串聯。

          騰訊實戰案例!企業產品如何做好用戶教育系統設計?

          除了正在進行的小燈泡組件化建設,后續我們考慮搭建小燈泡運營后臺,運營/設計可以配置需要使用小燈泡的頁面,隨時調整文案及幫助中心鏈接等,無需開發介入,提升各方效率。

          回顧小燈泡教育組件的發展進程:從應用于個別核心功能頁→建立標準化組件并推廣到各業務線→搭建運營后臺,逐步提升教育組件的標準化和使用效率。

          ② 就近外露輕量提示「小灰塊」

          “小灰塊”與頁面內容緊密結合,當用戶在操作過程中遇到問題,不用花費過多搜索成本就能就近獲得幫助。小灰塊可提供設置建議或數據解讀,使用通欄形式,可承載多行文本:

          騰訊實戰案例!企業產品如何做好用戶教育系統設計?

          ③ 原地收納次要信息「小問號」

          “小問號”用于收納名詞解釋和非必需外露的提示信息,減輕對操作流程的干擾。小問號主要用于兩個場景:頁面全局說明、重點字段說明。注意同一頁面中不要出現過多小問號,只保證在最需要解釋的地方使用。

          騰訊實戰案例!企業產品如何做好用戶教育系統設計?

          2. 承接界面內提示,幫助用戶自助學習并解決問題

          產品界面內的幫助信息畢竟是有限的,最終所有的幫助信息都會匯聚到幫助中心,完善的幫助文檔是所有幫助信息的基石。

          幫助中心的價值在于:對外不僅能幫助已有客戶自助解決問題,還為潛在客戶提供了解產品的機會;對內也為產品側售后客服/經銷商提供了學習機會,面對用戶咨詢時也可快速查詢應對。

          騰訊實戰案例!企業產品如何做好用戶教育系統設計?

          在設計企點幫助中心首頁的信息架構時,我們為新用戶/老用戶、有明確問題/不明確問題的用戶都提供了針對性的幫助模塊。

          騰訊實戰案例!企業產品如何做好用戶教育系統設計?

          ① 問題按任務場景分類,便于理解和查找

          按用戶任務場景把問題分類打包,站在用戶使用角度而不是產品功能角度措辭,符合用戶心智更易理解。點擊某個主題模塊進入該模塊的完整問題列表,再細化分類查找。

          騰訊實戰案例!企業產品如何做好用戶教育系統設計?

          ② 收集用戶滿意度反饋,衡量幫助效果,為內容優化提供方向

          為了解文章內容是否真正對用戶起到了幫助作用,我們在每篇文章末尾附上滿意度統計,為內容的迭代優化提供依據和方向:

          騰訊實戰案例!企業產品如何做好用戶教育系統設計?

          ③ 隨產品迭代保持內容更新

          幫助中心內容并不是一蹴而就的,而是需要長期悉心的運營維護。文章內容要隨著每個產品迭代來更新,保證用戶看到的始終是最新最準確的信息。

          3. 提供客服咨詢入口,常規問題交給智能客服

          當用戶無法自助解決問題,或本身學習意愿就弱的那些用戶會選擇直接咨詢客服。企點在產品界面、官網、幫助中心、公眾號都提供了客服咨詢入口,接入機器人客服來解決低價值、程序化的問題,復雜、操作性強的問題則轉人工跟進。機器人接待的關鍵是產品知識庫的搭建,可以基于幫助文檔框架進行梳理設置。

          騰訊實戰案例!企業產品如何做好用戶教育系統設計?

          迭代期:新功能有效觸達,老用戶體驗平滑過渡

          騰訊實戰案例!企業產品如何做好用戶教育系統設計?

          精心打磨上線了一個新版本,用戶卻不知道、不會用,豈不可惜?迭代期的用戶訴求是新功能上線后能及時被告知,得到使用引導,老用戶習慣平滑遷移,體驗不發生斷層。定期的新版本觸達也會讓用戶產生“這款產品一直在更新迭代,有發展潛力”的印象,幫助提升用戶粘性。要做好迭代期用戶教育,需要界面內教育引導和運營推廣共同發力。

          不是所有新功能都需要教育引導,只有在用戶高頻、核心使用路徑上新增或升級的功能、或界面布局發生重大變動時才需要教育,而技術上的性能優化則不需要教育。

          1. 更新前有效觸達,更新后引導上手

          新功能的教育路徑分為:更新前的通知觸達、價值傳達和更新后的使用引導。對于客服和管理者,教育目標也有一定的側重,比如對于一線客服要重點傳達新功能可提升接待效率,對于管理者則需要更多透傳管理配置上的價值。

          騰訊實戰案例!企業產品如何做好用戶教育系統設計?

          2. 沉淀迭代期教育規范,搭建 CMS 運營工具,推動迭代期教育引導標準化

          ① 新功能引導規范沉淀

          更新后首次打開頁面,首先用全局彈窗進行新功能觸達引導:

          騰訊實戰案例!企業產品如何做好用戶教育系統設計?

          從全局引導進入到頁面內引導,整體路徑以企點賬戶中心為例:更新后用戶首次登錄,先通過全局“版本更新彈窗”或“菜單綠點提示”觸達用戶,點擊進入具體頁面后再根據新功能類型采取不同的引導形式:

          騰訊實戰案例!企業產品如何做好用戶教育系統設計?

          ② CMS運營工具搭建

          為進一步提升全局引導的標準化,便于內容靈活調整、降低開發反復修改成本,我們設計并推動了 CMS 運營工具建設。通過運營工具可配置三端的全局引導(更新彈窗),而頁面內引導(綠氣泡等)則沉淀為組件由各業務方自行調用。

          騰訊實戰案例!企業產品如何做好用戶教育系統設計?

          3. 保證老數據遷移,使用體驗平滑過渡

          迭代期除了功能更新后的引導,更重要的是要保證存量用戶體驗的平滑過渡,包括老數據遷移和使用習慣的延續。

          對于核心路徑上的重要功能,或更新后界面與使用體驗變化較大的功能,需采用謹慎的升級策略:在不改變老使用體驗的基礎上提供自主升級入口,給用戶緩沖的時間,在一段時間后再執行自動升級。

          例如企點的「客戶庫」新版引導:升級前在老界面上彈出更新提示,結合運營策略設置自動彈出提示的時間點(自動升級前 15、7、3、2、1 天)。升級完成后的新功能引導彈窗中還加入了“退回老版客戶庫”按鈕,點擊后要求用戶填寫退回老版的原因以迭代優化功能。

          騰訊實戰案例!企業產品如何做好用戶教育系統設計?

          除了上述這種重大功能升級,大部分老功能都是直接原地完成升級的,只需在對應位置旁提供輕量化的提示引導(如氣泡、文字 tips 形式):

          騰訊實戰案例!企業產品如何做好用戶教育系統設計?

          培訓期:用戶培訓分層傳達,教育內容多渠道應用

          騰訊實戰案例!企業產品如何做好用戶教育系統設計?

          企業客戶購買產品后,產品通常會在 30 天內安排售后培訓組負責新用戶培訓,結合教育材料用面對面、電話或電腦遠程等方式開展培訓。教育材料除了用于對外培訓,也可用于對內培訓,幫助產品服務側人員先了解產品統一認知,從而更好地培訓客戶。

          在教育材料編撰過程中,設計師應充分利用信息可視化手段,把復雜內容轉化為清晰易懂的教育內容,幫助用戶理解。

          騰訊實戰案例!企業產品如何做好用戶教育系統設計?

          1. 用戶分層:基于教育對象、內容深度分層傳達

          基于教育對象、內容深度分層培訓,使教育內容更有效地傳達。對應的教育材料也需根據用戶分層來進行差異化制作。

          我們把企業產品的教育對象分為管理員和一線客服:針對管理員提供賬戶中心功能使用介紹,如客戶管理/數據分析/接待配置等功能,幫助其更高效管理員工和提升業務;針對一線客服提供客戶端(工作臺)使用指導,幫助提升客戶接待效率。

          從內容深度上分為新手版和完整版:新手版中只介紹新手必須要了解的核心功能,更多詳情會提供鏈接到完整版中深入了解;完整版則是詳細的字典式指南。

          騰訊實戰案例!企業產品如何做好用戶教育系統設計?

          2. 內容組織:把復雜信息轉化為易于理解的信息

          提到教育材料,大家的普遍感知是復雜冗長難消化。比起簡化內容縮小篇幅,更重要的是要想辦法講清楚讓內容便于理解。通過模塊化、可視化、場景化的手段,把復雜信息轉化為易于理解的信息。

          騰訊實戰案例!企業產品如何做好用戶教育系統設計?

          ① 可視化:抽象概念可視化,更直觀易懂

          一圖勝千言,通過概念圖、流程圖、表格形式,把抽象難理解的邏輯/概念可視化呈現。

          騰訊實戰案例!企業產品如何做好用戶教育系統設計?

          ② 場景化:結合業務場景,讓配置邏輯更易理解

          避免生硬地講解功能,而是結合業務場景給出配置推薦,讓背后邏輯更易理解。

          騰訊實戰案例!企業產品如何做好用戶教育系統設計?

          ③ 價值導向化:從功能價值和用戶利益出發,優于直白的功能描述

          騰訊實戰案例!企業產品如何做好用戶教育系統設計?

          教育材料完成后,除了作為客戶培訓資料,還可應用于多種渠道,例如:界面內提示信息、幫助中心文檔、機器人客服知識庫、企點課堂直播課件、公眾號推文等。

          企業產品用戶教育設計要點

          1. 結合項目發展階段選擇教育重點切入口

          如果你所在的產品處于初期階段,主要以新用戶為主,那要重點考慮“新手期”與“培訓期”的教育引導,幫助新用戶上手并產生產品易用的良好體驗,提升活躍度;如果你的產品已經發展到了成熟期,那要更側重“使用期”及“迭代期”的教育引導,保證存量用戶的使用體驗。

          2. 到用戶身邊去,深入一線使用場景

          參與用戶訪談、坐到售后培訓組邊上旁聽用戶電話咨詢、作為直播課講師培訓用戶…深入一線用戶場景,真實的聲音能幫助你更走心地引導用戶。

          3. 尋求高效合作路徑,提升多方溝通效率

          以迭代期為例,由于從設計、開發到產品宣講到運營制作內容的流程很長,最后撰寫新功能推廣內容的運營同事對需求背景及設計思路缺乏深入理解,導致花費大量時間在追溯溝通上。為尋求更高效的合作路徑,建議需求凍結后讓運營同事盡早介入,及時同步需求背景和設計思路。設計師需要在設計稿中交待清楚需求背景及思考點、遺留點,通過新功能 checklist 共同維護。

          4. 思考用戶反饋渠道,為內容優化提供方向

          通過可以實現的一切手段收集用戶反饋。比如《營銷 QQ 升級》相關教育材料,我們從運營側了解到教育材料上線前后數據對比(使用指導類的咨詢問題占比下降了 6%);在條件有限的情況下利用平臺自身也可以進行定量(閱讀數通過騰訊文檔收集)和定性(騰訊問卷收集)的數據收集,對反饋為不滿意的用戶進行進一步詢問,從中得出教育材料的優化方向;公眾號運營推文則可以通過公眾號平臺自帶的閱讀數轉發數等進行統計。

          5. 不要在最后才考慮用戶教育

          在緊湊的產品迭代中,用戶教育總是最后才被提起,甚至被忽略。經常會發生在臨近上線時突然想起“這里要不要加一個用戶引導”,然后匆匆設計開發上線。在需求初期就應開始整體思考,不要在最后才想到用戶教育。

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

          文章來源:優設   作者:騰訊設計 

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

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

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




          如何從零開始創建新的設計原則?

          資深UI設計者

          本期提綱:

          • 為什么我們需要新的設計原則
          • 制定新的設計原則
          • 推行新的設計原則
          • 新設計原則的影響

          在本文中,我們將分享如何提煉出設計原則,并在團隊中引推廣實施的。

          去年,我們一群人聚在一起探討了一個棘手的問題:隨著 Spotify 的不斷發展,我們如何在產品迭代中保持高水平的設計質量?

          經過研究和討論,我們確定了一個方向:為了提高質量,我們需要清晰、有用的設計原則。一方面,我們認為只有定義了 Spotify 的設計原則是什么,才能夠幫助團隊評估他們是否以 “Spotify 方式” 進行設計。另一方面,我們還希望幫助設計師在討論設計目標和設計評審時使用相同的評價標準。通過不斷更新的設計原則可以實現保持高水平設計質量的目標。

          為什么我們需要新的設計原則

          為了解決設計無法標準化的問題,2013 年,Spotify 制定了最初的設計原則:內容優先、盡量活潑、建立熟悉感、爭取事半功倍、保持真實、恰如其分,這些原則讓設計師們在輸出和討論方案的時候有方向可循。有了設計原則之后,我們的設計方案在字體、色彩、圖片、板式、信息架構和交互方式等方面都具備了一致性,即使不是設計師也能夠對我們的設計產生共鳴。

          官方譯文!Spotify 如何從零開始創建新的設計原則?

          Spotify 在 2013 年制定的設計原則:內容優先、盡量活潑、建立熟悉感、爭取事半功倍、保持真實、恰如其分。

          但設計原則是需要與我們的業務目標一起向前的,到了 2020 年,Spotify 已經發生了很大變化,我們在播客上加倍發力,我們為消費者提供的不僅僅是音樂,而是包含廣播、故事等更多元的音頻形式;我們服務的對象,不僅僅是聽眾,還有藝術家和廣告商;我們的設計師團隊也不斷的壯大,發展到現在已經有近 200 人。

          看著 2013 年制定的設計原則,我們問自己:這些設計原則對于我們現在的設計是否還是正確的?Spotify 的設計師們是否真的意識到這些設計原則的存在?答案是否定的。

          我們經過對現有設計原則的討論,發現了以下三個方面的問題:

          1. 無法滿足不同內容的需求:原本的設計原則,更專注于消費者的音樂體驗,然而隨著 Spotify 的發展壯大,我們的產品不僅僅是音樂,而是包含更多內容的音頻,但這些原則似乎并不適用于我們設計的所有內容。

          2. 概念容易混淆:比如 “lagom” 和 “do less”,都有簡約的、恰到好處的意思,在表意上存在重疊使得它們很難分辨,在評估設計方案時,我們很難確定從哪一方面評估我們的工作。

          3. 數量過多的原則很難記?。焊鶕覀兊恼{研和設計師的反饋,設計師們往往記不住這些設計原則的內容,這也就導致了他們無法很好的在設計實踐中應用。

          簡而言之,舊的設計原則需要更新。

          制定新的設計原則

          去年,我們工作組的十幾名產品設計師和用戶體驗設計師,在一個協作研討會上聚在一起討論如何制定新的設計原則,我們希望團隊中的每個人都參與進來,而不是讓一個人來決定 Spotify 的設計原則應該是什么。

          我們通過以下三個問題,指導我們制定新的設計原則:

          • 我們為什么要制定這些設計原則?
          • 它們是給誰用的?
          • 它們將如何使用?

          經過一番激烈的辯論,我們得到了答案:

          • 設計原則是為了幫助設計創造,并為評估設計成果提供衡量標準。
          • 設計原則的核心對象是我們的設計師。
          • 在設計創作過程中設計可以幫助產品設計師做出設計決策;在評估設計時,提供統一的衡量標準,避免以短暫流行風格進行判斷。

          然而真正的挑戰是應該怎樣定義新的設計原則。我們在設計時應該追求什么樣的價值觀和設計屬性?產品應該傳遞給用戶什么感受?

          對于這些問題,每一位設計師都有自己的觀點。我們讓所有人將自己對 spotify 的設計原則進行定義,并將這些想法寫在便利貼上。我們將這些想法進行總結分類,為了避免重復性的概念,我們把相似的概念歸為同一類別,并且讓大家對這些觀點進行具體的描述,來幫助大家理解他們想要的設計原則。最后,我們將所有的想法都匯集在一個巨大的矩陣圖中,通過設計師們的投票來幫助我們縮小范圍,確定大家認為合理的設計原則。

          官方譯文!Spotify 如何從零開始創建新的設計原則?

          帶有便利貼的矩陣圖

          通過上面的方式,我們提出了新原則的草案。同時我們也通過與用戶溝通,進一步了解用戶對于 spotify 設計的理解,根據這些反饋,我們進一步在設計原則的概念細節上進行調整后,確定了新的 Spotify 設計原則:相關性、人性化、統一性。

          官方譯文!Spotify 如何從零開始創建新的設計原則?

          Spotify 新設計原則:相關性、人性化、統一性

          1. 相關性

          把每個用戶作為一個獨立的個體來看待。

          Spotify 是為每一位用戶量身定做的,我們希望 Spotify 具有個性化的感覺。為了給用戶提供專享的感受,在設計過程中,我們認真思考我們所展示的內容是什么、展示給誰以及在什么背景下呈現。簡單來說,我們會在正確的時間提供正確的信息給特定的人,我們不想要 “一刀切” 的體驗。

          那么我們在具體的實踐中,是怎樣體現 “相關性” 的設計原則呢?

          舉個例子,同樣是歌曲 “pure seduction” 的封面,歐美國家的用戶看到的畫面可能是激情熱吻,但對于相對內斂的東南亞國家用戶,封面的內容就會以更加含蓄柔和的方式呈現。同樣的,印度用戶大多數更喜歡聽印度語的歌曲,我們在一開始就讓他們選擇自己喜歡的音樂語言,使用戶得到與自己具有 “相關性” 的音樂內容。

          我們尊重不同的文化和社會環境,我們希望每一個視覺呈現都能夠適合當地用戶,能夠被當地用戶所理解。

          官方譯文!Spotify 如何從零開始創建新的設計原則?

          Spotify 播放列表封面和注冊頁面的示例

          2. 人性化

          人性化的設計是可以與用戶交流的。

          Spotify 是依賴于推薦算法的產品,但這種技術也是基于人的喜好的。Spotify 像人類一樣,也會有情感,有自己的思考方式。我們希望用戶在使用 Spotify 時,可以有一種 “和人交流的感覺”,如果我們把 Spotify 設計得太工具化,就會失去這種感覺了。我們的每周推薦歌單封面,沒有選用精致的照片,而是直接使用用戶的個人頭像,通過這種方式我們告訴用戶 “這是只為你一個人準備的歌單”,還有什么比自己的個人形象更加 “人性化” 呢?再舉個例子,在 Spotify 的兒童版本中,我們將創建個人資料的行為變成了創建有趣的卡通角色的過程,“人性化” 的虛擬形象使 Spotify 與兒童用戶更流暢的交流。

          官方譯文!Spotify 如何從零開始創建新的設計原則?

          Discover Weekly 封面和 Spotify Kids 應用程序的示例

          3. 統一性

          統一性可以使線下產品和線上產品實現品牌感。

          我們的線上和線下產品的設計風格都應該具有統一性,即使沒有過多的說明,人們看到一眼也可以知道這是 Spotify 的設計。統一的設計風格,可以讓用戶對于我們的產品有一定的熟悉感和信任感。正因如此,我們沒有完全拋棄 2013 年制定的的設計原則,去創造新的方向,而是根據之前的設計原則進行修改和優化。為了實現品牌的一致性,我們希望我們所制定的原則是可以在不同設計對象和設計場景中復用的。

          下圖中是一個營銷活動的案例,無論是線下的廣告牌、宣傳海報,還是線上的活動頁面,我們的設計風格都保持了統一性,無論你在線下還是線上看到,你都會知道這是 Spotify 的產品。

          官方譯文!Spotify 如何從零開始創建新的設計原則?

          Spotify 營銷活動的示例

          推行新的設計原則

          提出設計原則是一回事,讓每個人都參與進來完全是另一回事。如果我們想讓新設計原則持續運行下去,就需要一個執行計劃。

          在推行設計原則的初期,我們在一個設計團隊的工作坊中試運行了新的設計原則。通過觀察設計師在實際工作過程中,是否由于運用了新的設計原則更好的完成了設計實踐,幫助我們判斷這些原則是否是真的發揮作用。之后,我們將這些原則納入現有的設計活動中 —— 例如,在全員設計會議中,介紹這些原則,并將它們添加到我們的設計手冊和新員工的入職流程中。幾個月后,我們與 Spotify 的所有設計團隊都開展了一系列工作坊。這樣,每個設計師都可以學習如何將設計原則應用在工作實踐當中。

          在工作坊中,我們將設計項目中應用設計原則的案例記錄下來,比如,以用戶的名字來命名歌單,建立與用戶的 “相關性”。我們將這些設計師們在真實的項目中遇到的案例整理到一起,以便其他設計師看到具體案例時,更好的理解新的設計原則。

          官方譯文!Spotify 如何從零開始創建新的設計原則?

          展示如何使用設計原則的卡片

          在推行新的設計原則的過程中,我們發現有兩點值得注意:

          1. 恰當的案例,有助于我們對新設計原則的理解

          口頭上表達 Spotify 的設計原則是 “人性化” 或是 “相關性” 是很容易的,但是什么樣子的設計才是 “人性化” 和 “相關性” 的呢?在推行設計原則時,用例子來說明這些原則的含義非常有用,案例越多越有利于我們對這些抽象設計原則的理解。

          2. 周邊產品可有助于設計師理解和記憶新的原則

          設計原則也可以通過更多的周邊產品,如海報、貼紙或其他產品去推廣。理解新的設計原則和理念需要很多時間,周邊產品可以幫助團隊理解和記憶這些原則。為了推行新的設計原則,我們已經開始設計相關的海報、文具等周邊產品。

          官方譯文!Spotify 如何從零開始創建新的設計原則?

          設計原則的在線下產品應用的示例(由 deepyellow 和 dribbble 圖形組成的樣機模板)

          在沒有 “官方” 的周邊產品時,一位設計師把設計原則作為自己的筆記本電腦桌面背景,這也是一個很好的理解設計原則的方法。

          官方譯文!Spotify 如何從零開始創建新的設計原則?

          帶有壁紙的筆記本電腦,壁紙上寫著設計原則:相關的、人性化的、統一的。

          新設計原則的影響

          我們推出了這些設計原則后,有什么變化呢?

          1. 新的設計原則更容易被大家記住和應用

          現在,大多數設計師都意識到了 Spotify 有設計原則。根據我們的設計行動小組最近的一項調查表明,設計師們已經了解了 “相關性、人性化和統一性” 的設計原則,并且在設計過程中,設計師們也會考慮這些原則。這表明新的設計原則與我們之前的六項原則(內容優先、盡量活潑、建立熟悉感、爭取事半功倍、保持真實、恰如其分)相比,更適用且更容易被記住,也更容易在實踐中應用。

          2. 為設計評審建立了統一的標準

          設計師有時在設計評審時會參考這些原則,但在這方面還有有待改進。在評審期間,設計師仍然需要有意識的參考設計原則。隨著時間的推移,我們希望這成為設計師的本能反應。

          我們開始制定新的設計原則時,目的是幫助設計師提升設計質量。那么我們的新設計原則是否使設計質量有所提升呢?現在說還為時過早。但我們希望 “相關性、人性化和統一性” 可以傳達出 Spotify 的產品目標,這些原則能夠不斷提醒我們做得更好。

          總結

          設計原則不應該是一成不變的,設計原則需要根據我們的產品目標的不斷發展進行優化更新,不斷適應新的設計環境和設計對象,以持續保持高質量的設計輸出。

          好的設計原則應該是更容易被大家記住,并在工作實踐中應用的。好的設計原則可以幫助我們在工作中做出正確的設計決策,在設計評審中建立統一的標準。相比設計原則的制定,設計原則的推行也同樣重要,合理的推行方式可以使設計師真正的理解設計原則,并能夠像本能反應一樣在設計實踐中應用。

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

          文章來源:優設    作者:騰訊設計

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

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

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



          如何讓你的設計更具有說服力?

          ui設計分享達人

          對于一家做項目型的公司而言(今天主要講的是項目性質的設計工作,產品可以繞道哦),時間就是成本這句話體現的淋漓盡致?;旧辖o到UI設計的時間,是少之又少,那么如何在一個有限的時間里,設計出優秀的作品呢?這是接下來我想跟大家一起討論的~


          我們都知道用戶體驗五要素(戰略層、范圍層、結構層、框架層、表現層),這五大點是一個個遞進的過程,是一個從初步的想法到最后落地的過程。也就是說我們最后看到的表現層(UI界面)是如何做出來的,都需要靠前面一點點的去研究、細化、分析。所以這么一個強大而繁瑣的過程,我們如何要在一個有限的時間內去完成,下面跟大家聊一聊我在實際工作中的例子。


          一、溝通


          溝通是一切事物的前提和基礎,這個溝通一定是要跟客戶的直接溝通,不管是遠程還是面對面也好。中間人的傳達會加上個人思想理解的轉化,到你這里就不再是一手消息,也許就不會那么準確。拿到一個項目之后,我們要了解項目,所以需要對項目的背景、目標用戶、產品目標、核心競爭力進行分別分析。


          項目背景

          為什么設計師的背后總是有一群指點江山的人,因為我們的設計沒有被體現在產品上,只是表層,每次給別人解釋設計理念的時候總是說“我覺得這樣好看”、“我認為這塊應該用這個顏色”,卻沒有說出這個項目本身想要表達的是一個什么理念。

          本次項目是需要把手機版的內容改版成PC端,原有需求邏輯不變。那么問題來了,現在是一個移動互聯網的天下,為什么客戶卻需要將手機端的內容移到PC上呢?因為這個產品的使用環境之一就是在工作中,試想一下,工作中一直拿著手機刷來刷去,不知道的人還以為你在劃水??紤]到用戶使用環境的因素,就需要有PC端的設計。


          目標用戶

          產品的核心是用戶。所以一切要從用戶的角度出發,做用戶滿意的產品。在用戶調研這塊,常見的用戶分析有:用戶畫像、一對一訪談、問卷調查、焦點小組、眼動測試、測評以及埋點數據分析,但是項目型工作周期短,時間緊,沒有那么多的成本去做大量的分析,所以我們基本上采用三種方式去解決這個問題。1、與我們的客戶(甲方)去溝通,他們肯定更了解自己的用戶群體;2、通過現在市場上比較知名的網站(艾瑞網)中提供的大數據分析出的結果;3、如果身邊有這種用戶群體可以對他們進行簡單訪談。通過以上三種辦法也是可以得到一個較為準確的調研數據的。

          在跟客戶的溝通中了解到,我們的主要用戶是基中層領導,目的為提升領導力。下面會有我對這部分人群的用戶畫像分析。


          項目目標

          知己知彼,要了解我們此次設計的主要目的是什么?需要解決什么問題?

          因為這已經是一個已經上線一年的產品,我在跟客戶的溝通中很明確了目前有兩大問題:第一是:如何提高完成率;第二是:國外市場用戶使用不習慣。

          這兩個信息很重要,為后面的設計提供了一個明確的方向。



          核心競爭力

          這是體現我們產品優勢的地方,我們需要盡量的把產品強有力的能力展現出來,從而獲得目標用戶的信賴。把產品的能力、優勢,可以給用戶帶來的價值,要體現在比價明顯一些的地方。

          此次是一個本身有強大的體系支撐,有一個成熟的結構,在此基礎上開發研制的一套產品,所以產品的目標用戶量,獲得的成就就可以直接展示在首頁上,并且把正在學習人數或者為多少人帶來成就都體現出來。讓用戶感受到有這么多人都在努力,有這么多努力的人已經完成了自己的目標。


          二、分析


          我首先把手機版的功能都體驗了一遍,隨時記錄了在使用過程中不喜歡的地方并且可以優化的點,這都是點點滴滴的隨記,可以為后面設計中提供一些方向或靈感。根據上面了解到的信息。

          可以得到此次設計的主要方向,第一:針對目標用戶進行用戶畫像分析,以此來確定如何才能更好的提升完成率;第二:針對國外同類產品分析,對國外市場用戶使用不習慣的了解,并且還要結合國內市場優化交互體驗。


          用戶畫像分析

          在上面一個階段了解到我們的用戶群體是基中層領導者。根據市場數據分析,一般基中層領導者主要以男性居多,年齡大概在28-35歲之間,以需要提升領導力為目的,那么從這幾個特征中我們看出,這些人都有哪些特點呢?首先28-35歲的年齡段,基本上是已經結婚的比較多,并且有很大一部分人群也有了孩子,這個年齡段的孩子還比較小,基本也是在2-6歲之間較多。對于這種類型家庭而言,無論是在工作上還是生活上都較為忙碌。并且因為是領導者的原因,時間上也較為分散,一天下來沒有辦法集中去做一件事情,開會、匯報、溝通需求、分布任務等。由于不像在學校,事情太多也太雜,很多時候沒有辦法安心去做一件事情,導致規劃能力不強,需要借助平臺可以有個推力。



          國外同類產品分析

          其次是針對國外市場用戶使用不習慣這個問題,我對國外幾個大型的相關網站做了了解。edX、Coursera、Udacity這三個網站是國外市場使用較多,知名度較大的幾個網站。分別從內容上和視覺上進行分析,去了解國外市場的設計方式,用戶使用習慣等。



          從以上的分析中最終得出了以下三個結論:

          1、操作習慣:這個與國內的差不多,都是從上到下,從左到右呈Z字形排列布局的方式,視覺的落腳點都會在畫面的左上方,所以我們在設計的時候,要把重要或者想要表達的內容放在這個位置,使用戶進入頁面后就可以很快看到它。

          2、采用Complexion Reduction設計語言:將標題放大,制造視覺上的沖擊力,拉開頁面的層級關系,這種設計方式也是國外較喜歡、較常用的一種設計方式。

          3、視覺風格:國外網站的設計整體留白較多,讓頁面更有呼吸感,頁面上幾乎沒有無用的裝飾性元素,非常簡潔,顏色使用也比較簡單,不會用過多的顏色去擾亂用戶,簡單的設計對于教育類的行業來說,可以減少視覺疲勞,讓眼睛放在有用的事物上去。



          通過以上對用戶畫像和國外同類產品分析,總結出:我們要從多維度考慮,以優化交互為目的讓頁面更有層次感,從而給用戶帶來輕松的體驗感。是這次設計的核心思想。

          1、從用戶的時間分散且忙碌的特點,得到我們需要盡量優化交互邏輯,減少用戶學習成本,讓用戶可以快速找到自己想要的東西;并且要讓用戶在本身就較為忙碌的情況下盡量輕松的學習,不要再給用戶增加壓力。

          2、通過用戶規劃能力不夠強的特點,得到我們可以給用戶定制一個“學習計劃”,幫助用戶規劃自己的學習能力,并且在學習中增加互動性,比如隨堂筆記、收藏、標記這種小功能,隨時給用戶帶來互動,讓用戶更有參與感。

          3、從國外同類產品分析中總結出,整體國外市場的喜好是簡潔、少裝飾、以大面積留白來增加頁面的呼吸感,采用盡量簡單的卡片式的設計方式來拉開頁面的層級關系。




          三、設計


          現在就到了設計階段了,上面了解分析了那么多,給我們設計提供了那么多基礎材料,這個時候就派上了用場。上面的最后提到說:我們要從維度考慮,以優化交互為目的讓頁面更有層次感,從而給用戶帶來輕松的體驗感。接下來我就要講述,如何在設計去運用了。


          輕松-這個很重要。

          如何讓用戶在生活和工作那么繁忙的情況下,還要努力的去學習,努力的提升自己呢?所以我們這里就采用插畫的形式,插畫像是動畫片,讓我們回到了小時候,并且融入了AI人機對話,沉浸式的體驗更是可以讓用戶在一個輕松的氛圍內完成自己的學習。


          增加互動性

          原有手機端的功能缺少與用戶之間的互動,看視頻就是看視頻,做題就是做題。讓用戶在使用的時候不能按照自己的意愿去支配,這種感覺不好,一定要讓用戶有參與感,讓用戶占到主導性,而不是那么強硬的讓用戶跟著你走。所以在課程這塊的設計上第一采用了全屏的方式,讓用戶不用返回,在當前就完成本階段的所有的課程,增加效率。第二在原有的功能上增加“課堂筆記”、“收藏”和“學習計劃”等一些小功能,讓用戶隨時按照自己的意愿去學習,實時跟產品進行互動。



          層次感的表達

          教育類型的網站,頁面相對來說比較干凈、整潔一些,可以有效減少用戶視覺疲勞,避免不必要的干擾元素出現影響用戶的體驗。

          在本次的設計中,學習了國外同類網站的設計風格,采用卡片式的方式,將元素與標題包裹在一起,有效與其他元素進行區分,增加投影設計,讓頁面更加有層次感和空間感。標題上面采用了Complexion Reduction的設計語言,將標題放大,制造視覺上的沖擊力,拉開元素之間的層級關系,豐富頁面的設計。這也是國外網站較喜歡的一種設計方式。





          四、走查


          設計完成之后,切圖交到開發手里之后,不能算就完成了,最后走查這一步很重要,要保證實現出來的效果跟設計稿保持一致。不然前面說的再多,設計的再炫都是白搭,實際使用的用戶可不知道你前面都做了什么,他只感受他現在感受到的。

          我一般的方法是用Word的方式,將有問題的頁面截圖并標記出來問題點,并且按照菜單進行分類。這樣開發對照看起來就特別明確,只用文字不配圖的表達都是耍流氓,誰知道你說的是哪個頁面的哪個點。用Word進行歸類最重要后面追蹤也特別容易,可以很明確看到你哪塊問題還沒有修改,不用再反復提交。



          總結一下:

          一般我的設計流程就是:了解-分析-設計-走查,因為不是產品性質的,所以最后的迭代或者驗證這一步驟就會不那么重要,如果是做產品型的后面的驗證也會是非常重要,因為是項目型的所以這里就不多做說明。以上就是我個人在設計中的案例分析,大家有想法的可以多溝通,多交流。

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



          文章來源:站酷   作者:醬油不咸

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

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

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



          詳解|針對某個功能,如何做競品分析和設計優化?

          seo達人


          • 案例    設計需求是:優化一款 B 端產品的「套餐售賣卡片」的原有設計:

          圖片

          △ 某 B 端產品服務購買卡片設計(優化前)

           

          你會覺得這個設計無傷大雅,但也說不上專業。于是設計師參考阿里云和華為云的服務購買卡片:

          圖片

          △ 阿里云服務購買卡片設計

           

          圖片

          △ 華為云服務購買卡片設計

           

          經過了對信息層級視覺效果的比較與思考,設計師最終將設計稿優化為下圖效果:

          圖片

          △ 某 B 端產品服務購買卡片設計(優化后)

           

          這里的 “參考” 并不是簡單的照貓畫虎,而是站在巨人的肩膀上,學習和精進自己的能力與認知。
          今天給大家詳細的介紹下,針對某個功能或元素,如何借鑒和分析競品。有以下幾個方法:
          1. 分析幾乎完全相同的產品
          2. 分析不完全相同的產品
          3. 分析完全不相同的產品

           

          1. 分析幾乎完全相同的產品

          這個方法很好理解,這類產品與你正在設計的產品在功能需求、產品形態、用戶類型等方面都很較大的相似性,也是最容易直接提供解決方案的,比如上文提到的服務卡片設計優化案例。再比如,你在做一款「云盤的登錄注冊頁面」,你可以參考「騰訊云盤」和「華為云盤」等大廠產品的登錄注冊頁面,看看他們的頁面是怎么布局的,提供了哪幾種方式,增加了哪些入口和元素,如何使用顏色和字號等等。圖片

          △ 華為云盤登錄頁面

           

          圖片

          △ 騰訊云盤登錄頁面

           

          2. 分析不完全相同的產品

          如果找不到完全相同的競品,對于不完全相同的產品,也可以分析和借鑒,這就要分幾種情況,需要你對手中的設計任務進行拆解:

          (1)需求相同,但產品類型不同:比如同樣是「云盤的登錄注冊頁面」,如果找不到完全類似的競品,你可以查找包含 B、C 端用戶的其他產品的登錄注冊頁面,取長補短。

          圖片

          △ 雨雀文檔登錄頁面  

           

          (2)結構相同,但應用場景不同:接上面的例子,登錄和注冊頁面本質上用戶填寫表單,產品收集用戶信息。因此你也可以找填寫手機號、用戶名、密碼相關的表單的設計,并不一定是登錄注冊頁面的表單,比如你在寄送快遞時填寫手機號的表單也可以用作參考,也許會提供不一樣的設計思路。

          圖片

          △ 淘寶 App 可以調動系統定位,并提供幾個最有可能的選項,用選擇代替用戶輸入

           

          3. 分析完全不相同的產品

          如果是完全不相同的產品,那學習和分析的是這類產品的設計原則和手法。接上面的例子,這次你可能借鑒的設計就是下圖中「微信通過好友申請」的頁面。

          你會發現在這個頁面中微信將能設置的好友信息都呈現了出來,讓用戶先設置之后,再通過申請,這樣就避免了很多用戶順手添加了好友而忘記設置信息。相比之下在設計登錄注冊頁面,可能也可以根據產品功能和用戶需求,適當將設置項前置。圖片好的設計,在設計思路和原則上,通常也會具備通用性。對于大多數人來說,在很多工作上都要經歷這個過程:抄(指學習) -> 操(指操練) -> 超(指超越) 掌握這幾個過程中的精髓,很重要。

           

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

          作者:元堯

          轉載請注明:學UI網》詳解|針對某個功能,如何做競品分析和設計優化?

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

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

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

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



          這6種高級黑配色套路,太絕了!

          seo達人



          圖片

          黑色+白色

          圖片黑色是一個很強大的中性色彩,它有一種極其特殊的色彩語言,它很容易讓人著迷,而且受到各領域眾多設計師的關注。黑色給人傳遞的是一種莊重、神秘、穩重、高端、大氣等等的一系列視覺感受。因此我們在用黑色作為主色調的時候,需要注意產品性格特征,想傳遞什么樣的感受給用戶。圖片
          圖片
          在雜志化版式設計中,黑色和白色搭配出現頻率也是較高,畢竟黑色本身就有一種高級神秘感。當它與白色搭配,更體現極致簡約性格。
          圖片
          圖片
          圖片
          圖片

          圖片

          黑色+藍色

          圖片

          藍黑搭配也是最好看和運用較多的顏色,它們之間組合彰顯沉穩大氣。黑色本身更沉穩,配上藍色整體畫面感彰顯高級時尚。

          圖片

          圖片

          藍黑搭配一般在科技類產品較多出現,因為藍色本身略帶一些科技屬性,黑色本身會有一些沉悶,且藍色也不像黃色那樣高亮耀眼,因此在選擇藍色上適當提升一些明度。

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          黑色+橙色

          圖片

          橙色是一種有性格的顏色,當它遇上黑色,在畫面彰顯活力與生機,與藍色不同的是,橙色更醒目與熱情,更有一絲腔調,內斂和張揚得到有效平衡。

          圖片

          圖片

          活力橙色作為暖色調,它不像紅色那樣更霸氣刺激,更純粹的多了些許陽光的溫暖,在不同層次明暗橙的對比演繹出柔和的色彩變幻以及熠熠閃光的細微差別。

          圖片

          圖片

          圖片

          黑色+綠色

          圖片

          綠色在設計圈可謂說是一直都挺火,綠色與黑色搭配可以中和黑色的沉悶,還有一種清新透亮的感覺,如果是和亮綠搭配,更有一種酷酷的潮流感。

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          黑色+黃色

          圖片

          黑黃搭配,極視覺沖擊力,既能給人活潑奔放的味道,同時又有著一絲內斂與沉穩。很多設計中經??吹近S黑組合,黃色在黑色的存托下,顯得格外時尚。

          圖片

          圖片

          圖片

          圖片

          圖片

          黑色+紅色

          圖片

          紅色與黑色的配搭,在設計界也是運用較多的經典顏色組合。黑色的神秘而高級,略帶一絲沉重,配上熱情奔放的紅色,締造了一種無與倫比的時尚,成就了一種永恒的經典。

          圖片

          圖片

          圖片

          在使用紅黑搭配時,注意紅色使用占比,以及飽和度,避免過于高亮的紅色。一般在黑紅搭配過程中,其實都少不了白色在其中。

          圖片

          圖片

          原文地址:功夫UX(公眾號)
          作者:功夫UX
          轉載請注明:學UI網》這6種高級黑配色套路,太絕了

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

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

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

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


          UI&UE實用方法論 | 做交互體驗,你必須得知道的「多爾蒂閾值」

          seo達人



          美劇《奔騰年代》(Halt and Catch Fire)里有一段臺詞:

          “當你使用計算機執行一系列操作,每當你按下回車鍵,它都能在400毫秒內給予你反饋,反饋時間還不到半秒,那么就可以讓你一直保持專注,效率也會飆升,你會完全沉迷進去。但反饋時間哪怕只是偏差到半秒鐘,你的注意力都容易被分散,你甚至會想起身洗個碗、拿個遙控板、看場比賽…所以說400毫秒以下的反饋速度,是最佳節點?!?

          當然翻譯中帶了點我個人的語言色彩,但意思還是這么個意思,也就是說當交互反饋時間小于400毫秒,那么將大大提升用戶的專注程度與效率,用戶也不易急躁。而大于400毫秒,即使僅僅是偏差到半秒鐘(500毫秒),也容易被用戶感知到,從而影響用戶心流。

          而劇中引用到的這個臨界值“400毫秒”,就是我們今天要聊到的——多爾蒂閾值(Doherty Threshold)。

           

          一、為什么是400毫秒

          1982年,IBM公司的WJ·多爾蒂(WJ·Doherty)及其團隊就“系統響應時間對經濟價值影響”的課題展開了研究。研究過程主要以用戶操作系統后,系統的響應時間作為變量,觀察其對多個維度的結果產生的影響。

          最終從其中的一組研究實驗結果中觀測到了一個現象:一旦當系統響應時間超過400毫秒左右時,各項指標數據就會開始產生較大數值的波動。

          于是IBM公司就此提出了研究結果:系統響應時間應該低于400毫秒,這將顯著提升用戶的關注度,從而影響到用戶的操作、工作效率。并將“400毫秒響應時間”這個節點值以WJ·多爾蒂的名字命名為「多爾蒂閾值」。

          雖然如今我們早已認為系統擁有快速響應時間是一件理所應當的事情,但「多爾蒂閾值」的提出,在當時那個年代卻是開辟先河性的。因為70年代左右,計算機研究界還普遍以“系統的響應時間可以為2000毫秒(2秒)”作為業界標準。

          雖然我現在已經查詢不到這個“2秒”舊知識的科研文獻了,但是在 IBM 2018年的一場歐洲線上演講會的PPT中我們還可以看到:

          所以「多爾蒂閾值」可以說是重新定義了現代人機交互領域響應體驗的指標,影響著一個標準規范產品的視覺側、交互側、體驗側、開發側等多個方面。

           

          二、多爾蒂閾值的運用

          我們要清楚的是,「多爾蒂閾值」是IBM公司給到的一個系統響應時間的最大參考值,并不是說所有的機器響應時間都必須卡在400毫秒這個節點上,而是說響應時間應保持在400毫秒以內,盡量不要大于400毫秒。

          那么知道了“400毫秒以內”這個范圍值,我們作為設計師,要怎么將其運用到設計工作中,或者說「多爾蒂閾值」會影響到我們哪些設計標準呢?——來看看 Google 旗下 Material Design 的系統動作規范,應該能讓你找到一些方向。

           

          要點一:并不是越快越好  

          作為設計者、開發者,我們都希望系統能夠盡量快地響應用戶的操作。但也并不是一味地追求極速就一定是好的。

          Material Design 在系統響應動作規范中強調了“過渡時間”的概念,雖然大家都希望系統的響應速度越快越好,但同時用戶也需要一些時間去理解系統響應的結果。

          如果響應即結果,而不給用戶一個視覺過渡的反應時間,則會讓用戶無法跟隨UI變化,同樣也是會給用戶造成困擾的。

          Material Design 規范建議到:不要給用戶過慢的響應速度,干擾用戶操作進程,讓用戶急躁;但也不要給用戶過快的響應速度,用戶無法跟隨UI變化,對用戶理解會造成困擾。

          我們將響應速度結合「多爾蒂閾值」范圍內的視覺過渡效果,可以幫助用戶理解操作反饋的結果,有時間思考類似于“我剛才點擊了什么”、“結果和我的操作之間是什么關系”、“結果是否滿足我的預期”等問題,并做出下一步的反應。

           

          要點二:響應時間不是一成不變  

          為了讓響應視覺過渡更加符合現實規律,Material Design 根據響應結果區域的大小設置了3種響應過渡時間規范,其中又以用戶的操作場景進行了更進一步的規范細分。

          先來說說根據響應結果區域的大小設置的響應過渡規范:Material Design 將操作響應結果區域分為小、中、大3種場景,當操作影響的結果區域越小,那么響應過渡時間就應該越短。反之,操作影響的結果區域越大,響應過渡時間就會越長。這一點是符合人類意識對運動的理解的。

          其次 Material Design 還認為,用戶做“關閉”、“退出”類操作時,預示著他們那要進入下一個任務流,而此時上一個任務流的內容,用戶就不再關注了。操作與結果的關系、層級的關系、內容的位置關系,在“打開”、“進入”類的過渡中就已經闡明給用戶了,所以他們離開的時候,可以更快。這就是在響應結果區域大小的基礎上,又以戶的操作場景進行的更進一步的規范。

           

          • 小型區域:響應過渡統一為100毫秒;

           

          • 中型區域:打開的響應過渡為250毫秒,關閉的響應過渡為200毫秒;

           

          • 大型區域:打開響應過渡為300毫秒;關閉響應過渡為250毫秒。

          結合兩個要點總結一下:系統響應應該結合視覺過渡給用戶操作與結果的關系進行指引,所以也并不是越極速越好。響應過渡應該在「多爾蒂閾值」以內,并且可以結合響應區域大小、用戶操作場景,使響應更符合現實規律,更加人性化。

           

          三、面對不可避免的延時響應

          雖然把系統響應控制在「多爾蒂閾值」內是我們追求的目標,但是響應速度往往和請求的數據量、網絡環境等諸多因素有關。對于結果返回數據量小的場景,我們利用視覺或代碼層面的解決方案,可以讓響應時間是可控的。

          但當用戶遇到結果請求數據量大、網絡環境較差等場景,響應時間以“秒”起步那也是司空見慣的事情。此時面對無法保證響應時間在“400毫秒”以內的情況,我們應該怎么辦呢?

          其實這已經超過「多爾蒂閾值」的討論范圍,對于不可避免的延時響應場景,已經是屬于“如何解決用戶等待焦慮”的話題了。

          但恰好我之前在《聊聊加載等待的那些事 之 進度指示器》中聊到過這個話題。想系統了解的朋友,可以移步查看。(知識就這么串聯起來了!神不神奇~)

          對于想走捷徑的同學,我在這里把當時的調研結果貼出來,希望能夠幫助到你們。

          我結合了 “用戶等待4秒原則”和UX研究咨詢公司 Nielsen Norman Group(NN/g 尼爾森諾曼集團)的一篇文獻中提出的 用戶等待心理模型,得出了以下參考結論:

          用戶是一個復雜的群體,他們其實并不關心所謂的量化時間,他們只希望:加載盡量快,快到不要中斷我的操作流,如果實在快不起來,那就告訴我還要等多久。所以由上表得出的結論是:

          • 加載時長在0到1秒之間時用戶不易感知,不需要給予用戶 loading 提示,在任何加載情境下頻繁給出 loading 提示其實反而會干擾用戶心流;
          • 加載時長在1秒到4秒之間時:此時不需要明確給予用戶量化時間提示,用戶也不易產生焦慮情緒;
          • 加載時長大于4秒時:超過這個時間你就需要明確地告訴用戶當前的進度狀況了,加載百分比或剩余時間都可以讓用戶心里有個底;
          • 加載時長大于x秒時:設計者應該根據具體加載場景設置加載時間臨界點機制,在加載超過這個時間之后默認為加載失敗,讓用戶進行再次操作,而不是無意義地苦苦等待。

           

          四、總結

          「多爾蒂閾值」不僅僅是設計師完成交互動效、反饋體驗時的一個知識點,它是IBM對整個計算機反饋機制進行研究之后得到的結論,影響體驗、效率、經濟等多個方面。所以我認為這是互聯網人都應該熟知的一條交互理論。

          只是我在這里僅結合了 Material Design 的系統動作規范,分析了設計層面對「多爾蒂閾值」的應用,還是稍顯片面。但感興趣的朋友,還可以去搜索了解更多關于「多爾蒂閾值」的實驗、故事與實踐方案。

           

          原文地址:UCD耍家(公眾號)

          作者:Howiet


          轉載請注明:學UI網》UI&UE實用方法論 | 做交互體驗,你必須得知道的「多爾蒂閾值」

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

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

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

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


          案例錦囊|設計如何為用戶「節省時間」?

          seo達人



          1. 有效的信息抓取 

          案例 1  :釘釘的“代辦事項”設置功能,可以自動抓取到語句中的時間信息,自動幫助用戶設置好時間,減少用戶的操作時長:

          圖片

          案例 2  :在微信中可以對圖片中的文字進行識別提取,手指在識別出來的文字上滑動就能夠選中,可以直接全選、復制和轉發:

          圖片

          案例 3  :不同產品之間也可以共享數據。咸魚和淘寶訂單數據打通,在閑魚平臺上發布產品時,會看到系統給出的用戶曾在淘寶買過的商品,以及賣出這些商品的預估價格,便于用戶直接拍賣:

          圖片

            案例 4  :支付寶拍照添加銀行卡可以使用拍照功能,由系統識別銀行卡號和開戶行,減少用戶的操作時長:

          圖片

           

          2. 避免重復閱讀和操作 

          案例 1  :愛奇藝在劇集片頭處,都會彈出提示,選擇“跳過片頭”,即可設置該劇跳過片頭:

          圖片

          案例 2  :微信的朋友圈在退出后再次進入時,會在內容流中間出現一個“跳到還沒看的位置”,幫助用戶快速定位之前離開的位置,不必閱讀重復內容:

          圖片

          案例 3  :在微信群聊天記錄中,如果有太多條內容未讀,會在右上角標注出未讀數據,點擊之后即可從未讀的地方開始瀏覽:

          圖片

           

          3. 減少錯誤的可能性

          案例 1  :在惡劣天氣,美團先讓騎手接單,再讓商家接單,可以避免無人配送的情況:

          圖片

          案例 2  :高德地圖 App 會預估并提示行駛路程何時會擁堵,讓用戶提前有心理準備和預知:

          圖片

          案例 3  :微信在你沒有領取對方紅包時,會給出紅包即將超時的提醒。點擊“轉賬”鏈接,會直接定位到轉賬對話的位置,防止用戶再次花時間處理:

          圖片

          案例 4  :美團的新單車是在 App 上關鎖,不再需要在單車上手動關鎖,解決了用戶騎行完成,忘記鎖車還要跑回去的問題:

          圖片

           

          4. 用選擇代替輸入

          案例 1  :餓了么可以記錄你每次寫的備注,在下次填寫備注時可以快速選擇輸入,不需要用戶做多余的輸入:

          圖片

          案例 2  :在攜程 App 中填寫姓名拼音信息時,系統提供了一鍵轉拼音的功能,同時對于多音字還能夠自動為用戶提供選項判斷,提高用戶錄入的效率和準確率:

          圖片

          案例 3  :京東 App 對商品進行評價時,底部會提供一些評價標簽,既能引導用戶進行規范評價,又能提高用戶的填寫效率:

          圖片

          案例 4  :微信錢包的錢轉賬到零錢通里,有一個“全部轉入”的快捷選項,減少了用戶輸入時長:

          圖片

           

          5. 提供下一步路徑入口

          案例 1  :高德地圖搜索路線,會自動提供哈羅單車和地鐵的掃碼快捷路口;支付寶出行支付地鐵票成功后會看到附近的網約車信息提醒,可以立即使用高德地圖進行打車:

          圖片

          案例 2  :螞蟻森林新增了 “找能量“ 的功能,點擊會自動跳轉至有能量可偷的好友的森林界面,多次點擊隨機跳轉,直至所有好友的螞蟻森林可偷能量被偷完,偷能量也可以省時高效:

          圖片

          案例 3  :得到 App、大眾點評等產品,會在截屏時直接提供分享入口,幫助用戶做下一步分享:

          圖片

           

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

          作者:元堯

          轉載請注明:學UI網》案例錦囊|設計如何為用戶「節省時間」?

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

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

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

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

          日歷

          鏈接

          個人資料

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

          存檔

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