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

          首頁

          “手把手教你設計”—12個最佳手機APP界面設計教程

          seo達人

          如何使用Photoshop來設計手機UI界面

          1. How To Set Up Photoshop For UI Design

          如果你是Photoshop的新手,又在做UI設計,這個教程教你如何使用常用的Photoshop設置來達到更好的效果。本文是以iPhone為實例告訴你怎么在UI設計中使用Photoshop,完全是初學者的教程。

           

          2. How to Design an iPhone App in Photoshop

          這篇文章將為我們介紹使用Adobe Photoshop為iPhone設計一個簡單的3頁目錄列表應用程序。并且將一步步地指導你完成這些步驟,還涵蓋了使用Photoshop設計iPhone應用程序的所有基本原則。

           

          3. Design an App Landing Page in Photoshop

          在這個教程中,我們可以看到一個應用程序著陸頁的詳細設計過程。設計師使用Tuts Android應用程序進行演示,強調其功能和優勢,利用多個CTA來完善整個著陸頁的設計。

           

          4. How To Design a Mobile App Signup Screen in Adobe Photoshop

          如果你想要設計一個像Facebook或者Instagram這樣成功的登錄界面設計,那么這個完全是你必看的基礎教程,視頻中教你如何選擇顏色,設計按鈕以及詳細的步驟來展示登錄界面的設計過程。視頻雖然是四年前的,但是里面的設計依舊不過時。

           

          如何使用Sketch來設計手機UI界面

          1. A Step-by-Step GUIde for Starting a New App Design Project in Sketch

          開始一個新的設計項目是很難的,無論你是自由設計師,還是在知名的產品公司工作,時常會感到迷茫。本文將一步步的教你如何使用Sketch開始一項新的APP設計項目。

           

          2. Food App UI ? Sketchapp Tutorial / Sketch 4 Tutorial

          視頻主要是介紹如何使用Sketch制作一個美食類APP 菜單欄UI設計,簡單易懂。

           

          3. Sketch 3 for iOS App Design Step by Step

          Sketch 3是一款優秀的矢量設計和圖形程序,很適合用于設計iOS應用程序。在這個視頻中,設計師使用Sketch 3來設計一個iPhone APP用戶界面。

          From Idea To Reality: Designing An App With Sketch And Xcode 》這篇文章是進階版的APP 設計教程,從理論到具體的例子講解,非常受益。

           

          4. Sketch App Tutorial – Build a music app landing page in Sketch

          Sketch 作為當下主流的設計工具,似乎有超越Photoshop的趨勢。本視頻介紹的是如何使用Sketch來制作一個音樂APP登錄頁設計,可以說是手把手的教程,每一步都非常的詳細細致,非常適合初學者。

          看了前面的音樂類APP登錄界面的教程, 你是否也想設計出一個屬于自己的音樂APP呢?接下來我將介紹如何通過結合Sketch和原型設計工具設計一款音樂類的APP(Prototype an music app with prototyping tool)

           

          TIMING

          這款原型音樂類的APP在Mockplus設計大賽中斬獲頭籌,設計師通過采用Sketch以及Mockplus的結合,做出了高保真原型。這個APP主要體現一種復古的視覺效果,磁帶轉動的效果是這次視覺上的設計重點。

           

          必讀的手機界面UI設計好文

          1. The 10 principles of mobile interface design

          計算機和手機是人們日常工作和生活必備的通訊工具。但在許多方面,手機往往更加強大,手機更加的私人化,與我們的聯系更緊密。鑒于移動手機和計算設備之間的許多差異,移動設計與桌面設計的設計大不相同。這篇文章詳細的向我們介紹了移動界面設計的基本原則,幫助設計師們開發移動應用程序的獨特力量。

           

          2. UI Design Do’s and Don’ts

          iOS良好的優化了用戶面設計,并提供給用戶優質且具有吸引力的用戶體驗。在開始你的iOS設計之前,一定要清楚Apple官網的關于iOS常見的設計原則,來在增強手機應用的可用性和吸引力。更多關于優秀的iOS界面設計,請閱讀《iOS人機界面指南》。

           

          3. How to use colors in UI Design

          顏色可以說在UI設計中至關重要。用的好,那就成功了一半,用不好,可能導致整個應用失敗。在你的配色方案中,最好只使用三種主色跳,使用的顏色越多。越難實現平衡。這篇文章不但提到基礎的用色知識加上實例解釋,還有常用的工具介紹。

           

          4. 10 Best APP UI Design for Your Inspiration

          每位UI設計師都夢想著做出最出色的界面(UI)設計, 能夠脫穎而出的手機界面設計則少之又少。設計師們在設計UI界面時,往往會參考來自不同設計師的設計,這篇文章列出了2017年最出色的的10個手機應用界面設計范例,給設計師們謀福利。

           

          總結

          移動設計不斷地在發展,如果你想跟上這個時代,你需要不斷閱讀和觀看高質量的教程或文章。在本文中,我收集12個最佳教程的示例來教初學者如何學習手機UI界面設計,希望你們能從中受益。

           

          原文地址:Mockplus

          作者:jongde

           轉載請注明:學UI網》“手把手教你設計”—12個最佳手機APP界面設計教程


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

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

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

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

          UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司



          10個最新優秀手機應用界面設計實例

          seo達人


          1). YONO.MP3 mobile app – 音樂軟件

          *設計師:Anton Shmatko, Green Shark Studio, Pavel Khenkin

          *軟件介紹:YONO.MP3是一款即可欣賞音樂, 也可收聽廣播節目, 了解最新時訊和趣事的手機端音樂軟件。它會是你閑暇時搜索和分享歌曲,歌手和專輯的理想工具。

          *亮點:該款軟件采用了一個極具特色的配色方案 — 所有界面整體使用黑紅兩種顏色的對比, 經典而不失大氣。 而局部漸變色的使用, 也讓其功能和按鈕更加突出,極具層次感。而且, 軟件圖片, 按鈕和圖標的層級疊加, 也使整個界面更加的時尚柔和??傊浖缑嬖O計整體簡潔漂亮而不失易用性。

           

          2). Watering Tracker App – 生活類軟件

          *設計師:Tubik

          *軟件介紹:Watering Tracker app, 顧名思義,就是一款可以追蹤盆栽或植物的水分情況,及時提醒用戶澆水的生活類手機應用。

          *亮點:首先,這種能夠監測植物水分情況,通知用戶澆水的創意,新穎且有趣。其次,界面背景和局部添加的綠色植物圖片使整個界面更加的直觀舒適,帶給用戶好心情。 當然,作為植物監測的工具,同時也設置了顯示各株植物水分,濕度,光照之類細節信息的功能區,即點即可了解到植物的具體生長情況,簡單易操作。而且,配色方面,黑色背景搭配白色和綠色圖片及按鈕,符合整個植物主題的同時,也更易于用戶接受和使用。

           

          3). Listen – 音樂軟件

          *設計師:CD UXT

          *軟件介紹:Listen是一款致力于為喜愛不同音樂風格的用戶提供獨特且愉悅體驗的音樂軟件。整個界面設計簡潔清晰,用戶可以簡單的通過不同頻道(例如最新歌曲,電臺,主體和專輯等)和不同場景(例如駕車,運動,工作和約會等)快速的搜尋到最喜愛的歌曲。而且,軟件還特別為用戶提供了根據不同心情播放不同音樂列表的功能,更具個性??傊?,喜歡閑暇時沉浸在自己的音樂世界的你,它會是你最佳的選擇。

          *亮點:軟件整體采用經典的藍色背景搭配白色字體和同色系圖片,更加柔和舒適。一系列插畫風格 的場景和頻道對應圖片,也使整個界面設計更加美觀有趣。結合明亮陰影的圖標和按鈕讓軟件對應功能更加凸顯的同時, 更能易于用戶識別使用。 針對不同部件添加的靈活交互,也能夠使用戶具有更加流暢且愉悅的體驗。總之,它是一款以用戶愉悅體驗為基礎而設計的軟件原型,值得嘗試。(點擊這里查看原型詳情

           

          4). NightOwl Coffee – 咖啡預定軟件

          *設計師:Queble Solutions

          *軟件介紹:NightOwl Coffee是一款能夠幫助用戶根據自己的需要快速訂購各式咖啡的手機應用軟件。

          *亮點:軟件整體采用了獨具特設的插畫風:主頁添加的由明亮顏色和各種幾何元素呈現的卡通咖啡機,可愛且切合主題。純色的背景搭配上灰色插畫以及黃色圖標和按鈕,使整個軟件界面更加干凈整潔,易于用戶使用。

           

          5). Roomframes app – 管理型軟件

          *設計師:Adrain Rudzik

          *軟件介紹:Roomframe app是一款適用于iOS手機端的應用軟件,能夠幫助用戶記錄并珍藏他們所旅行過的地方的相關記憶,尤其是他們旅行中所居住過的房間的珍貴記憶。所以,從這方面來講,它是一款生活管理型手機應用。

          *亮點:軟件多處使用了框架設計,方便用戶根據不同的旅店,工作區和相關新增地點,添加對應的日期,圖片和描述。其簡單的白色背景,使用戶信息更加明顯,也易于用戶隨時回顧或與家人朋友分享這些難忘的回憶。

           

          6). iOS App Slide Car – 生活類軟件

          *設計師:Melany Roa

          *軟件介紹:iOS App Slider Car是一款專門針對iOS手機研發的應用軟件,能夠幫助用戶分類搜索各式汽車信息,并實現在線交易的一種手機端應用。同時,它也是一款能夠幫助用戶結交不同汽車愛好者的社交工具。

          *亮點:簡單純色的背景,使用戶專注于汽車圖片,價格,描述和所有者等信息。搜索界面添加各種搜索參數,用戶簡單點擊即可實現汽車信息搜索??傊?,整個界面簡單,整潔而實用。

           

          7). Karoline – 購物軟件

          *設計師:Varduhi Adami

          *軟件介紹:Karoline是一款手機端服裝購物軟件,提供了各類服裝的詳細信息和購買渠道。

          *亮點:軟件整體的粉色系配色,柔和甜美,對女性購買者極具吸引力。所有界面以服裝圖片為主,更易于用戶根據喜好挑選。而且,添加的簡單且易識別的圖標和按鈕,方便用戶搜索和查詢相關服裝細節。軟件界面豐富,例如主頁,我的賬號,我的訂單,我的購物車,要請朋友,設置,購買等,能夠滿足用戶購買時各方面的需求。所以,如果你有通過手機在線購買服裝的打算,它會是不是錯的嘗試。

           

          8).Space – 管理類軟件

          *設計師:Doeun Shin

          *軟件介紹:Space是一款能夠幫助用戶更加有效的管理日常生活的手機端應用。主要提供了兩項特色服務:早上,自動結合用戶的日常習慣,提供有用的日程管理信息和建議,例如交通和天氣情況等; 晚上,通過自動分析用戶語音日記,提供符合用戶心情的主體和提示音等等。

          *亮點:該軟件以插畫風為基礎,添加了各式動畫按鈕及圖片,直觀生動。藍色主題,漂亮舒適,無論早上還是晚上使用,用戶都不會反感。而且,軟件本身添加多樣的功能性界面,例如語音日記,心情日歷,日常服務,節日簡介等等,簡單全面??傊且豢顦O具吸引力的管理軟件。

           

          9).QuickBee – 廣告類軟件

          *設計師:Monish Mohanan

          *軟件介紹:QuickBee是一款廣告分類管理軟件,提供了生活中各個方面的信息,例如汽車,房地產,求職和教育等風方面面信息。使用者只需創建賬號,即可搜尋所需生活信息,了解流行趨勢,瀏覽各類特色廣告。

          *亮點:軟件設計簡潔,顏色搭配極佳。彩色按鈕呈現多樣的生活分類,整潔美觀。各式框架呈現流行趨勢和特色廣告,簡潔有序。矢量圖標簡單易識別。添加多種界面,滿足用戶各方面的需求。

           

          10).Wallet – 理財類軟件

          *設計師: uixNinja

          *軟件介紹:Wallet一款能夠幫助使用者理財的移動端軟件。

          *亮點:軟件使用黑色,紅色和紫色三種顏色的對比和漸變,極具特色,漂亮時尚。簡易圖標和多色幾何圖形,是軟件界面更加簡潔使用,令人印象深刻。

           

          結語

          這些就是我們所搜集的10款最新的優秀手機端軟件UI設計作品。 希望他們不僅能給你新的設計帶來靈感,同時也能幫助你把握和預計2018年手機應用UI設計的發展趨勢。

           

          原文地址:Mockplus

          作者:jongde

           轉載請注明:學UI網》10個最新優秀手機應用界面設計實例


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

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

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

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

          UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司



          語音用戶界面設計 - 對話式體驗設計原則

          博博

          文章包括三部分:1.智能語音對話系統;2.了解 VUI 相關知識;3.語音用戶界面基本設計原則。

          最近在閱讀關于智能語音方面的書籍,將最近零零碎碎的筆記重新整理了一番,希望能讓讀者更加快捷、高效的認識智能語音方面的基礎知識點。



          智能語音對話系統


          語音交互界面是近年來最重要的趨勢之一,它不僅可以依托于智能手機而存在,而且可以和智能家居、車載導航、智能電視、智能音響等一系列產品結合到一起。越來越多的人更加頻繁地使用 Siri、Google Assistant、Cortana、小愛同學等。越來越多的應用也都已經涉及到智能語音技術。





          1、語音和語言有何區別?


          我們首先需要了解「語音」和「語言」的區別。


          語音是語言的信號載體,語音是人的發音器官發出的,承載一定的語言意義,而語言才承載人類的智慧。通俗的講,語音是天生就存在的,嬰兒剛出生的哭喊聲也算是語音。它是人的發音器官發出具有一定社會意義的聲音。其物理基礎主要有音高、音強、音長、音色四要素構成。而語言則是需要學習不斷進化的。在智能語音中,我們需要考慮的是如何確保在復雜的現實環境下,把干擾信息過濾,獲取到準確的信息。




          2、語音界面之間的關聯



          喚醒:Amazon Echo 和 Google Home 之類的語音驅動設備不斷地在等待喚醒詞(“Alexa ...”或“OK,Google ...”)從而進入喚醒狀態。


          反饋:一旦喚醒,設備會將隨后接收到的音頻發送到云端的AI平臺。 該平臺使用自動語音識別(ASR)和自然語言理解(NLU)的組合來識別用戶的意圖并將其發送到支持應用程序。 


          回復:應用程序處理請求并通過文本進行響應(如果支持則提供可視化信息)。該平臺將文本轉換為語音并通過設備播放。




          3、對話系統概述


          對話系統:能夠與人進行連貫對話的計算機系統,可以采用文本、語音、圖形、觸覺、手勢及其他方式與人進行交互,常以語音交互為主。



          而如今的智能設備能夠“理解你所說的話并且采取行動”,是兩個重要技術結合的結果:一個是自動語音識別(ASR),另一個是自然語言理解(NLU)。


          自動語音識別(ASR) — 通過聲學模型和語言模型,將人的語音識別為文本的技術

          自然語言理解(NLU)— 對用戶輸入的文本進行語義理解,包括用戶意圖識別和語義槽填充


          對話狀態跟蹤(DST) — 根據所有對話歷史信息推斷當前對話狀態St和用戶目標

          對話策略學習(DPL) — 基于當前狀態生成下一步操作

          自然語言生成(NLG) — 獲取結果文本,主要依據模板或深度生成的模型生成用戶可以理解的自然語言文本

          從文本到語音(TTS) — 結果播放給用戶聽,將自然語言文本轉化成語言輸出




          4、語音交互設計需要遵循什么原則?


          遵循合作原則:「聽者」和「說話者」為了能夠順利交談,必須互相合作。Paul Grice 提出了這個觀點,并將其分為以下4個準則。


          質的準則:說真實信息,做不到的話不要說。

          舉例:對用戶說:“有什么可以幫您的嗎?”,而實際上整個 VUI 系統僅僅能提供查詢話費余額。


          量的準則:保持對話交流簡潔,減少認知負荷。

          解釋:刪除多余的措辭。比如“請您注意聽,因為我們的選項可能已經變了”。


          相關準則:所說的話需與當前對話有關,不干擾當前任務進行。

          解釋:比如用戶想知道天氣,你給他推薦旅游的地方。


          方式準則:說話需清晰、明了,不要拐彎抹角。

          解釋:不要使用讓用戶難以理解的「專業術語」。







          了解 VUI 相關知識


          語音交互界面(VUI)指的是為用戶提供可進行語音交互的計算機平臺,它能夠實現自動化的服務并且提供完整的相關流程。而設計 VUI 的時候,設計師需要側重于用戶的語音交互過程,并設計出相應的語音應用系統。由于 VUI 是面向用戶的交互界面,因此滿足用戶的實際需求是至關重要的。




          1、語音用戶界面 VUI 簡史


          20世紀50年代:貝爾實驗室建立了一個單人語音數字識別系統。


          20世紀60、70年代:語音數字系統的這項研究仍在不斷拓展可識別的詞匯,并且致力于實現“連續語音”的識別。


          20世紀80年代:技術進步讓語音識別更具實用性,使日常語音的識別成為可能。


          20世紀90年代:誕生了第一個可行的非特定人的語音識別系統。簡稱 IVR


          21世紀初期,IVR 系統成為了主流,任何人都可以通過一個普通的固定電話和語音進行股票詢價、機票預定、銀行轉賬、處方藥品預定、本地電影排片查詢以及收聽交通信息等。




          2、那什么是 IVR 系統?


          交互模式的語音應答,簡稱為 IVR。我們后續簡稱為:交互式語音應答(IVR)系統


          它可以通過電話線路理解人們的話并且執行認為,一般都廣泛的應用在運營的客服方面,即使是現在三大運營上的機器客服還是采用了這種語音應答的方式。但是通過電話撥號的方式開始語音的問答還存在很多的缺點,例如只能應用在單輪任務的問答,交互方式比較單一,不能進行中途打斷等缺點。


          IVR,即語音增值業務,是移動運營商由2002年開始啟動的業務。移動的 IVR 分為兩大品牌:音信互動和娛音在線,聯通的 IVR 品牌為聯通。





          3、IVR 系統設計與移動設備


          21世紀初,IVR 系統已逐漸普及。起初“按鍵+語音”的混合形式(請按“1”或者說“1”),是很常見的模式,比如10086的查詢功能。人們創造了 IVR 系統,希望它可以自動處理一些事物,這樣客戶就不會總是需要找一個真人來解決問題了。相比與真人客服交談,很多用戶實際上更喜歡使用 IVR 系統,因為他們可以花很長時間反復咨詢信息而不會覺得他們是在“打擾”一個人類客服。


          移動 VUI 設計需要注意:


          1、確定它是否需要一個視覺化的呈現,比如一個虛擬角色。


          2、確定你的 VUI 在什么時候允許用戶說話?可以被打斷嗎?是否需要按鍵功能?




          4、VUI 的優勢是什么?



          速度快:語音輸入的方式比手動輸入快很多,同樣的時間可以輸出更多的信息。


          釋放雙手:釋放雙手與機器進行交互,比如駕駛狀態下,通過語音輸入完成用戶需求,安全和便利。


          直覺性:說話更自然,更容易??梢灾苯油ㄟ^語音輸入的方式來表達你的意愿。


          同理心:語音包含了語氣、音量、語調和語速,且傳遞了大量的感知信息,不僅僅是文字那么簡單。




          5、哪些場景不適合使用 VUI ?


          公眾場所:開放的環境辦公,比如:咖啡館、圖書館等。環境影響因素較大,不利于用戶語音的錄入和接收。


          不適應對計算機說話:并不是每個人都喜歡對計算機大聲說話,即使是在私人空間。


          更喜歡打字:許多人習慣每天在手機上花幾小時,大部分的時間都是在打字。


          隱私安全:比如身份證、銀行密碼等。GUI 比 VUI 更加適合高效安全輸入。




          6、哪些場景適合使用 VUI?


          使用場景需要騰出雙手,比如車載導航、智能音響。


          作為家庭的控制中心,打造智能家具居控制的切入點。


          語音記錄病歷,不管對醫生來說還是患者來說,都是提高看病效率的很好助手。


          幫助用戶簡單記錄、查詢、照顧用戶的作息時間等。




          7、VUI 設計師的工作內容


          VUI 設計師思考的是在系統和終端用戶間,從開始到結束的整個對話過程。他們思考正在解決的問題以及用戶需要什么來達成他們的目的。VUI 設計師在項目中扮演著非常重要的角色。通常會參與項目全程的工作,并與團隊合作完成在技術、體驗、設計上的優化。



          如果 VUI 需要與后端系統進行交互,他們要考慮需要處理的請求。如果流程中有人的因素,比如客服需要交接,那么設計師需要考慮如何進行交接,以及如何培訓客服。







          語音用戶界面基本設計原則



          1、對話式用戶界面


          對話式設計定義:思考如何與 VUI 系統進行一輪以上的交互。


          因此,需要設計一輪以上的對話,并思考用戶接下來可能會做什么。不要強迫用戶展開新一輪對話,而是去嘗試了解用戶的意圖并允許用戶繼續交談,同時有必要為用戶近期所說的話保留歷史記錄。





          2、多模態界面


          與 IVR 系統不同的是,在移動設備上我們可以增加一個可視化組件。


          比如在向用戶傳達信息、確認信息,以及告訴用戶什么時候輪到他們說話等。(比如:百度地圖的小度,他會告訴用戶什么時候可以說話,目前所處的狀態,說完之后給予的反饋)


          如果有一個可視化組件,則會讓移動設備增強優勢。允許用戶同時使用語音和屏幕進行交互。(手機上虛擬助手,有些雖然以語音交互為主,但是在用戶的智能手機上也會有一個配套的APP)。





          3、設定用戶期望


          優秀的對話式設計不僅僅是精心制作的友好提示。Google 交互設計師 Margaret Urban 建議:如果你不能理解答案,就不提問。


          “當某個人成功完成了一次語音交互,伴隨著腦內咖(endorphin)的升高,用戶會獲得一種成就感和滿足感。此時正是一個絕佳的時機來告訴用戶”你做的很棒,要不要再試試這個?”


          是否讓我們想到了網頁登陸驗證的時候,需要完成一塊拼圖,但是你再慢他也告訴你超越全球96%以上的人。


          “如果你已經設計了一個設置鬧鐘的功能,但是你沒有提供用戶取消設置的方式,這就像給人一條浴巾但是沒給他香皂一樣。如果你設置了可以完成某項任務的語氣,請務必考慮與之相關的任務?!?/strong>





          4、確定策略時需注意的幾點


          輸入確認:必須確保用戶感覺到自己是被理解的,同時有助于讓用戶知道,什么時候 VUI 不理解他們所說的話。


          1、確認錯誤的后果是什么?比如:預定錯誤的航班?制定錯誤的任務?播放錯誤的歌曲?


          2、系統將如何反饋?比如:會有音頻提示嗎?是否有視覺反饋嗎?比如Amazon Echo上的光環。


          3、是否擁有屏幕?比如:車載導航、手機屏幕、智能手表。


          4、選擇合適的確認形式?比如:明確確認、含蓄確認、混合式的確認。




          5、確認策略的兩種方案


          顯性確認:重要信息,需強制用戶確認信息。


          隱性確認:讓用戶知道他的話接收到了,但不需要他們確認。




          6、確認信息的方式




          三級置信度:


          系統將在一定的閾值內,以明確的形式確認信息,拒絕較低置信度的信息,并以隱性確認來確認置信度超過80%閥值的信息。


          1、80%以上,使用隱性確認。如果是誤識別代價高的話,考慮采取顯性確認。

          2、45%-80%,使用顯性確認,以明確的形式確認信息。

          3、45%以下的,拒絕確認信息。


          舉例:用戶:幫我再買一份口香糖。

          VUI:(置信度大于80%,使用隱性確認)好的,已經為您再購買一份口香糖。

          (置信度45%~79%,使用顯性確認)您是想再多買一份口香糖,是嗎?

          (置信度小于45%)對不起,我沒有聽清您講的話,您想買什么?



          隱性確認:


          1、只使用隱性確認,不要求用戶進行操作。

          2、將「答案」和連同「原始的問題的一部分」一同回復,讓用戶知道系統識別到的是哪個問題。

          3、當置信度高的時候,也可以不用連同問題,這樣更自然流暢。



          非語言式確認:


          1、僅需行動反饋,而不需要口頭響應。

          2、通過視覺確認,比如小米智能家居,可以通過語音交互打開燈光、電視、窗簾等。

               a、如果沒有延遲,沒必要再對其回復。

               b、如果有3-5秒延遲,需進行回復,讓用戶知道并不是設備沒有聽到她的聲音。

          3、使用一個“聲音標識”,即簡短的、有識別度的聲音。這樣有助于幫助用戶快速知道他們已經到了哪一步。



          通用確認:


          1、在某些對話式系統中,最好不要詢問用戶具體說了些什么 - 哪怕是隱性確認。

          2、通用確認可以讓用戶分享更豐富的體驗,因為這類反饋能適應用戶輸入的各種信息,并讓對話繼續進行。通常人與人之間的對話,也不會句句必回復,也會有 “嗯” “哦 ”“啊” “然后呢”等。 



          視覺確認:


          1、確認一個項目清單,通過屏幕顯示進行溝通會更加有效。人的記憶有限,通常用戶一次性不能記住超過大約7個聽覺項目。

          2、用來確認用戶的選擇。用戶可以通過說話或按下按鈕來回復。而 GUI 的反饋指令更加明確。




          7、判斷你的 VUI 適合哪種類型


          目前大多數的 VUI 系統都是“命令 - 控制”模式,這意味著當用戶想要說話時,必須給出明確的指示。


          1、用戶可以隨時向系統詢問 / 發出命令嗎?


          2、是否參與一個有明確開始和結束的封閉式對話?




          8、命令-控制模式



          喚醒系統方式:按鍵通話(車載導航、Siri等)、直接進行關鍵詞呼叫(“OK Google”“小度”等喚醒詞)。


          喚醒系統反饋:系統檢測到用戶說話完成,通常會使用某種非語言的音效進行提示,然后做出相應處理(比如:“?!钡囊宦暬蛘咭曈X反饋:聲波線、點狀動效、設備逐漸發光等)。


          系統聆聽時間:用戶說出喚醒詞或按下按鈕后,系統保持聆聽狀態的時長,根據經驗來看,10秒 是個不錯的起始時間段。



          喚醒響應時間與反饋方式


          喚醒響應時間與喚醒反饋方式有關,不同喚醒反饋方式下,最佳響應時間不同:


          1、當喚醒反饋為"燈光"反饋時,喚醒響應速度越快越好,在200ms時,用戶響應舒適度最高(對響應時間評價為剛剛好的用戶比例),73%的用戶對速度滿意。


          2、當喚醒反饋為"燈光+音效"時,喚醒響應速度的舒適時間為300ms左右,76%的用戶對速度滿意。


          3、當喚醒反饋為"燈光+人聲"時,喚醒響應速度的舒適時間為500ms左右,74%的用戶對速度滿意。


          數據來源:百度人工智能交互設計院智能音響時間測試實驗



          喚醒等待時間體驗感


          用戶請求及反饋階段響應時間對等待體驗的影響:


          1、1250ms以內是用戶認為響應速度較優的區間,其中650ms為最佳體驗值。在450ms時,少量用戶覺得響應速度太快了,用戶會感覺到緊迫感和壓力,難以接受。


          2、在1450ms時,有53%的用戶開始感覺響應有延時,但仍能夠接受。


          3、從2150ms開始,有20%的用戶認為音箱響應太慢,不能夠接受。我們認為20%的用戶不滿意,已經不足以被稱為一個優秀的產品。


          數據來源:百度人工智能交互設計院智能音響時間測試實驗




          9、對話模式


          1、不要強迫他們不斷地去表明他們將要開始說話,自然地對話技巧進行話輪轉換。


          2、通過更精細的設計,使 VUI 系統可以處理一些常見的微妙表達方式。(用戶處理完畢說“謝謝”,你可以設置系統忽略這種情況,或回復“不用客氣”,而不是提示或者報錯。)


          3、不要問你都無法理解的反問句。


          4、打破話輪轉換的情況,用戶在系統說完之前就進行提問。


          5、在命令 - 控制模式和對話模式之間進行切換。喚醒之后進行自然的對話。




          10、對話式標識


          使 VUI 更加人性化、更具吸引力,對話式標識是讓用戶了解交談進展以及進展情況的重要方式,當系統在對話中使用了一些基本的對話禮儀后,用戶的參與度會更高,并且會以同樣的方式進行回復。



          反面案例:

          虛擬助理:你昨晚你睡了幾小時?

          用戶:大約7個小時。

          虛擬助理:你昨天吃了幾份水果和蔬菜?

          用戶:大概有4份。

          虛擬助理:你昨晚吃藥了嗎?

          用戶:吃藥。

          虛擬助理:再見。


          正確案例:

          虛擬助理:我會問你幾個有關你身體健康的問題。第一個問題,昨晚你睡了幾小時?

          用戶:大約7個小時。

          虛擬助理:不錯。你昨天吃了幾份水果和蔬菜?

          用戶:大概有4份。

          虛擬助理:了解了。最后一個問題,你昨晚吃藥了嗎?

          用戶:吃藥。

          虛擬助理:好的,暫時就這些了,我明天還會再問你的,回見。




          11、異常處理


          “當你與人類交談時,永遠不會出現不可恢復的錯誤狀態?!?

          — ABI JONES, Google 設計主管


          “你偶爾因為犯錯和不知道某些事情導致評分降低造成的影響,比你每次做對一件事情重要百倍。” 

          — 英特爾語音助手部經理 Pilar Manchon


          如果處理的得很好,錯誤情況就不會影響用戶,你可以讓用戶回到正常流程,并順利完成任務。但如果處理不好,用戶不僅這次無法完成任務,他們以后都可能再也不用你的產品了。


          一個好的設計師應該知道,你不能只設計正常的情況, 你還要對出錯的情況做出設計。這對于 VUI 設計來說尤為重要,因為出錯情況是家常便飯。



          未檢測到語音 / 檢測到語音,但沒有識別


          1、什么情況下可以明確說出來?

               a、你的系統只使用語音

               b、用戶沒有其他的回復方式

               c、必須要用戶回復后,系統才能繼續進行任務 / 對話


          2、什么情況下可以什么都不做?

               a、用戶可以通過其他方式進行下一步操作(比如通過按鍵選擇)

               b、就算什么也不做,也不會中斷對話

               c、系統沒有理解時,用視覺信息提示告訴用戶,比如:提示列表等

               d、利用虛擬表情形象反饋,疑問、微笑等動作表達



          其他異常處理


          1、當出現:語音被正確識別,但系統無法處理

               a、程序對關鍵屬性理解不明,寫了錯誤的回復

               b、沒有針對一些情況的回復

          解決:對用戶可能會說到的所有情況做更完善的預測,通過數據收集來避免此問題


          2、當出現:部分語音識別錯誤

               a、什么也不去處理,因為這不是你想要的結果

               b、匹配錯誤的行為

          解決:可以用 N-Best 列表來智能匹配最有可能的識別結果


          3、增強錯誤提示

               a、當需要用戶說話的時候,使用這種增強錯誤提示策略

               b、必要的情況下,進階錯誤行為提示可以更為詳細,并提供更多的幫助

               c、如果你正在設計一個可以提供真人輔助的系統,可以為錯誤數量設置一個閾值,當達到該閾值時,將用戶轉移給人工助手  




          12、新手和專家用戶


          如果你的用戶會定期使用你的系統,那么在設計中就需包含不同的策略。


          “務必確保你的目標不是簡單的訓練你的用戶,應當適應用戶的行為,而不是用已有的命令讓用戶感到厭煩?!?

          — Google 交互設計師 Margaret Urban


          我們在 VUI 設計上該如何更好的交互設計?


          1、減少冗長指令以及其他引導提示。通過計算 APP 使用次數和頻率來確認是否切換模式。


          2、縮短解釋性提示。但是請務必使用“對話式標識”。


          3、啟動效應。



          什么是啟動效應?


          指某人受到某種特定的刺激后(例如一個詞語或者圖像)會影響他們對之后刺激的反應。首先讓用戶預先知道你會問他們幾個確定數量的問題,為后面會發生的事情提供了暗示,用戶就會知道如何去準備。比如以下情況:


          1、當給人們呈現一個還沒完成的草圖,隨著這個草圖越來越完整,人們就越來越辨認出這張圖畫的是什么。之后,再給他們呈現其他還沒完成的草圖時,他們會更早辨認出這張圖畫的是什么;


          2、如果當給人們呈現一組漢字,假如里面含有 “河” 這個字,隨后讓他們寫出部首是 “氵” 的字時,這些人回答 “河” 的幾率會更大。



          談談自己對新手和專家用戶的理解


          01、專家型用戶:代表老用戶且愿意探索你的產品或服務,有著很大的包容度。并會積極提出各種改進的建議和享受產品帶來的驚喜感。


          02、新手:什么叫新手,就是剛剛下載你的產品,準備使用的用戶,對產品功能都還處于陌生摸索的階段。他們不會因為你的技術而使用你的產品,使用你的產品目的是完成某項任務。他們有興趣使用更高級更復雜的產品,但卻不愿意接觸全新的東西,要想讓他們認可,那么產品就必須足夠簡單。




          13、持續跟蹤上下文


          持續跟蹤信息并不容易,但如果不跟蹤這些信息,你的 APP 就只能做單輪的對話行為。


          指代:用兩個不同的詞語指同一個東西。比如: “他”  “哪些”





          14、幫助和其他通用部分


          我們在設計 IVR 系統時,我們會確保每個狀態都包含一組通用組件:重復、主菜單、幫助、操作和再見。





          15、延遲


          產生原因:糟糕的連續性能、系統處理進程、數據庫訪問


          處理方式:告知用戶關于延遲的情況(比如:“請稍等,正在查找相關記錄”)、非語音和視覺的提示(比如:延遲提示音以及加載狀態)、可視化效果(比如:加載中的動態圖標)


          處理細節:延遲的時長可能為0~10秒,在沒有延遲的時候最好也插入幾秒的延遲。因為如果在系統說“請稍等”之后,緊接著就繼續對話的話,會給用戶帶來異樣的感受。很多設備針對喚醒詞采用了本地化識別的方式,這樣喚醒的會更快。




          16、消除歧義


          問題來源:用戶只會提供執行命令所需的部分信息,而沒有提供所有的細節。


          舉例:用戶可能會詢問某地的天氣,而很多地方都有叫這個名字的地點,諸如“湖南路”那邊的天氣怎么樣。


          解決方案:


          1、依靠任何已知的信息來確定答案,而不是再次詢問用戶。


          2、根據上下文線索進行判斷。


          3、反問用戶進行確認,確保系統對用戶同一個問題的各種各樣的回復形式都有良好的適應性。


          4、指令不明確。比如“給胡歌打電話,撥打工作電話還是家庭電話?”,系統以隱性的形式對名字進行了確認,系統對這個名字有很高的置信度,并且僅有一個胡歌。


          5、用戶回答的信息超初了你的 VUI 系統可以處理的范圍時,你可能需要縮小范圍消除歧義。




          17、設計文檔


          我們需要制作:示例對話(sample dialogs)和會話流(dialog flow)文檔外其他一些情況。例如:在設計過程中,你還需要創建提示列表、完善對話每個狀態指定完整的語法規則等等。





          18、無障礙設計


          “一開始,我就很討厭屏幕閱讀器的工作方式。為什么它會被設計成這樣?當以視覺的方式來展示信息沒有任何意義時,屏幕閱讀器只是簡單地將文字轉換成音頻。所有那些應用花在創造完美用戶體驗的時候和精力此時都變得沒有任何意義,甚至有的給盲人用戶帶來了更糟的體驗。”    — 克里斯·莫里(Chris Maury)





          19、典型 VUI 項目交付項內容


          示例對話:系統和用戶之間可能產生交互行為的預設對話,對話看起來就像電影劇本一樣,包括兩個主要角色之間來回往復對話。


          流程圖:展示下一個狀態分支的所有方式,不一定要羅列所有的交互或示例對話,也可以是功能的分組、文本的分組等。


          提示列表:如果沒有屏幕可以使用配音演員或語音合成來播放提示列表。


          產品原型:如果這是一個多模態產品,有屏幕、支持觸摸交互。




          參考文獻:

          《語音用戶界面設計:對話式體驗設計原則》-【美】Cathy Pearl(凱瑟 彼爾)

          語音交互入門:從概念,原理到如何設計VUI產品 - 杜松

          AI時代的語音設計經驗漫談 - 少夫白杰

          語音用戶界面設計 - 對話式體驗設計原則 - walle_x






          文章來源:站酷   作者:Sabaku_no_Gaara

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

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

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

          【譯文】移動應用界面設計7宗罪

          博博

          本文是移動原型工具Proto.io的設計團隊8月份在自家博客上發表的一篇“軟文”,通過與移動設計界大牛們的對話,幫助大家了解在進行移動設計時應該特別注意的禁忌,大家可以回顧一下自己團隊的應用正在觸犯哪些禁忌,想必會有點意思。

          【譯者注】本文是移動原型工具Proto.io的設計團隊8月份在自家博客上發表的一篇“軟文”,通過與移動設計界大牛們的對話,幫助大家了解在進行 移動設計時應該特別注意的禁忌,順便推了一下Proto這個工具。大家可以回顧一下自己團隊的應用正在觸犯哪些禁忌,想必會有點意思。讀完本文,相信你能 找到優化自家移動應用設計的方向。


          規則就是用來打破的?這完全取決于規則本身。在移動應用界面設計(后續簡稱:移動設計)的世界里,大家對美學、手勢和動效的看法略有不同。有時一個簡單的功能性應用比華麗的應用帶來的效果更好,而有時候卻恰恰相反。


          不過,有些基本規則是人們不愿意去打破的。如果你的移動設計使得用戶無法順利觸達關鍵功能,這顯然是行不通的。假使你的文字字號過小導致沒人能順利完成閱讀,那么你得回爐重做。淺色背景搭配白色文字?重來吧。

          我們試圖了解優秀的設計師們心目當中移動設計的7宗罪是什么。經過垂詢三組設計專家,我們得到了三個略有區別的結果,看看你是否能從其中找到一致的地方呢。


          0c0156e773ac32f875520f0b7ce5.jpg




          來自AKTA的意見


          Alyssa Burke與Macy Nguyen是AKTA(一個數字體驗咨詢公司)的設計師,倆人都曾為財富500強的公司以及迅速增長的創業公司效力,參與過原生移動設計項目,為某些機構的頂級項目貢獻設計輸出。以下是他們認為無法接受的移動設計7宗罪:


          1、忽略上下文情境


          目標用戶的個人檔案(年齡、生活習慣、技術潛能等)與他們的物理環境(室內室外,在線離線,早晨晚上等)會影響許多設計決策。移動設計師應該在迭代流程中 充分考慮上下文因素,以降低可用性不足的風險。即使擁有平滑的過渡轉場、光滑的按鈕和美麗的字體,一些應用也會因為整體界面設計不符合特定用戶場景(深色 界面用于戶外場景:糟糕的移動設計)而失去成名機會。


          2、閉門造車


          設計和開發數字產品是一項需要團隊協作的工作。即使有項目成員(開發、新人、極客、狂熱者、朋友、陌生人、你的哥們兒和設計師潮人)對具體項目內容完全不 了解,將設計工作及早并及時推廣到整個項目周期中的不同角色之間也是非常關鍵的。我們需要讓他們了解到必要的上下文信息,并持續保持相關信息互通。與其在 發布后修復問題,不如在項目進程早期預留調整空間。


          3、怠慢開發人員


          程序員和工程師(以及偶爾酗酒的碼農)不僅是你的同伴,而且是技術先導。他們除了知道哪些能夠在現實中奏效之外,還能夠如你設想的那般確保你的想法得到完 美落地。有些移動設計在技術上行不通,有些或許可行,但這些都需要很多努力或時間在項目中驗證。如果不問你或許永遠無法確定能否做到。在項目交付時,開發 人員會把你的設計成果實現出來,此刻,他們可能很欣賞你,也可能很討厭你。


          4、低估動效設計


          隨著物聯網逐步成熟,數字界面在人們與周圍真實世界的互動中扮演了更重要的角色,界面設計的這一部分需要被設計師更加慎重的對待。人類擁有與生而來的本 能,從所處環境的變化中得到不同的感知與反應。使用合理的界面動效是一種呈現優先級和重要內容的有效方式。在某些情形下的恰當運用,甚至能夠引發用戶的愉 悅。有興趣的讀者可以了解下迪斯尼動畫的12項基本法則。


          5、字號太小


          比起紙質內容,人們在手機屏幕上進行閱讀的精確度和深入度略有不足。正如移動設計拇指觸控規則所定義,數字界面的字號最少應該兩倍于印刷字號。不同情形適 用不同的字體和設置,尤其當用戶試圖在移動設備上完成多類任務時。為了避免字號太小,還需要優先考慮按鈕形狀、圖片及交互等界面元素對整體體驗有何影響。


          6、忽略觸控目標


          許多移動設計師仍然對用戶手指大小不同的現狀缺乏重視。一旦涉及行動或者任務導向的觸控目標,盡可能的使它簡單而且容易點擊。為老人設計時要考慮觸控時的 抖動因素,同樣為兒童設計時需要考慮點擊的不準確性。建議為圖形資源周圍增加留白區域,以便本質上提升觸控面積,幫助提升完成任務的速度。


          7、死摳平臺規范


          在Android和iOS平臺上統一一套設計方案有一定局限性,也容易對全局體驗目標帶來副作用。兩個平臺上有各自用戶熟悉的設計模式,設計師不應該只熟悉規范,而應該探索在兩個平臺上流行的應用。


          230656e773cb6ac7255885014da5.jpg




          來自Moblico Solutions的意見


          我們同Moblico Solutions(一家提供移動關系管理方案的企業,其目標是協助品牌“打造更多有意義的移動瞬間”)的一些員工進行了交流,他們不僅為諸多行業客戶提 供了“如何讓他們的移動應用體驗更棒”的建議,而且掌握移動設計方面的竅門。以下是他們認為移動設計的7大禁忌:


          1、在用戶設備上占用過多容量只為了體現存在感


          當用戶收到“磁盤空間不夠”的提示時,會馬上遍歷手機上已經安裝的應用并開始選擇刪除的對象。如果一個移動應用體積很大,占用了過多的容量卻并未提供等同的價值會怎么樣?后會有期,用戶肯定拿你開刀。記得保持應用在體積上足夠輕量,這樣至少用戶不會輕易把你刪掉。


          2、在應用啟動時及要求允許權限控制(推送、地理位置、攝像頭等)


          回想下,有多少次我們興沖沖的下載一個應用并準備開始使用時,一個對話框立馬跳出來掃了興?我不關心這個對話框描述什么內容,只想馬上關掉它并繼續使用應用功能。它是啥?好吧,菜鳥應用!


          3、下載后在使用前就要求登錄、注冊甚至收費


          實際上,這條或許應該排為第一禁忌,很難讓人忍受。你能對用戶所做最糟糕的事情就是:在他們下載你的應用后告訴他們必須付費才能使用。爛,爛,爛,重要的事情說三遍,趕緊刪之。


          4、設計的移動應用界面看起來像網頁


          如果這樣,還需要移動應用干嘛呢?要說有一件事情可以毀掉一個移動開發者,那就是把網頁的體驗縮小到移動端并且稱之為移動應用。移動應用應該有其具體優勢,只提供縮水的網頁體驗遠不能滿足用戶期望。


          5、粗暴投放廣告,或者只提供極難點擊的廣告關閉按鈕


          當你在滾動瀏覽移動站點時,只是手指不小心長按了某張圖片就觸發了瀏覽器廣告,這難道不是讓人煩躁的事情?偏偏還提供極小的關閉按鈕,誰能點得到?想要點擊簡直跟賭博一樣。嘗試點擊關閉的時候還總是因為手指觸控面積較大誤觸了廣告,真是要了命!


          6、消息推送過載


          沒錯,現在你的應用出現在數百萬人的手機屏幕上,它有巨大的影響力。不過,在推送之前請三思,捫心自問:推送是否與用戶相關?用戶是否真的需要它?當然,你可以在你的移動店鋪每次上新時都推送一下,但真的至于么?影響力越大,責任也越大,慎重使用消息推送吧。


          7、移動賬號缺乏單點登錄支持


          當移動開發者認同并尊重用戶不愿意重復勞動的想法時,最好的體驗才可能產生。沒人愿意為你的應用重新登錄一次。我們得接受單點登錄的現行趨勢,Facebook在這點上非常成功,繼續加油吧。


          208456e773e232f875520f8802a6.jpg




          來自Ideaware的意見


          Andres Max是數字創新機構Ideaware(致力于幫助創業團隊和財富500強的公司打造有競爭力的移動應用)的創始人。在創建Ideaware之前,Max 是Mashable設計團隊的    負責人。經歷過為眾多行業巨頭設計移動產品之后,Max對移動設計7宗罪有自己深刻的見解:


          1、用戶點擊后無反饋


          看在上帝的份上,當用戶在你的應用中進行點擊后請給予及時的反饋吧,否則用戶會以為你的應用掛了,并且馬上退出。


          2、無休止的引導


          如果使用自己的手機,我只想快速完成相關任務。別問我各種問題或者讓我填寫亂七八糟的內容。


          3、觸控熱區尺寸不對


          請停止把按鈕和輸入框做的太小,這不是網頁。我的手指需要輕松觸及行動按鈕,而不是要進行精確到像素級的點擊。


          4、使用古怪的導航模式


          想讓用戶可以快速熟悉你的應用?那就不要以自己獨特的方式來組織導航。Apple的人機交互規范和Google的設計指南就是最好的參照標準。導航設計方面別引入爭議,從而給潛在用戶一個卸載應用的理由。


          5、選取糟糕的配色色系


          給眼睛一些休息的空間,你不必采用黃黑色文本那樣的出挑配色。


          6、留白


          移動應用需要很多留白空間,把各種視覺元素進行區分,按鈕得加大處理,所有一切都依靠留白來提供視覺緩沖。移動端首屏的概念沒有網頁那么夸張,所以切忌把所有東西都塞到首屏當中。


          7、無休止的推送


          為了上帝,請不要每天推送20條消息給用戶了。用戶在收到幾條推送后,就會深深的感覺到想要卸載應用的那股沖動。


          3a6956e773f26ac7255885dc59a7.jpg



          你心目中的移動設計7宗罪是什么呢?


          盡管不同設計師心目中的7宗罪不盡相同,我們依然可以看到不少相似點和共識。最重要的兩條是:1、除非確有必要,避免推送消息;2、通過使用符合習慣與直覺的導航,以及提供其當尺寸的視覺元素,讓你的移動設計具備可用性。


          我們還能想到的一條是:忽略數字原型。在原型設計階段能夠發現很多移動設計問題,以及讓它們更具可用性更加出色的寶貴反饋。這也是Proto.io為什么堅持提供強大又易用的原型解決方案的原因。




          譯者:1688事業部/無線交互/舒舟
          文章來源:站酷   作者:阿里巴巴CBU設計

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

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

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


          把握“時間”顯示的訣竅

          鶴鶴

          背景


          “時間”作為人機交互界面中經常出現的元素,本質上都是為了去傳遞時間維度的信息。但是我們平時在使用一些互聯網產品時會發現,關于“時間”的顯示狀態或形式在不同場景、不同頁面里往往是不太一樣的,這是出于怎樣的考慮呢?今天我們就來聊一聊,如何在產品設計中把握“時間”顯示的訣竅,讓其在頁面中發揮最大的作用。



          “時間”元素的分類


          按照“時間”元素在頁面中的出現場景和所起到的作用,可以大致歸為以下幾類:


          A.事件的關鍵構成要素

          時間作為描述整個事件的重要組成部分,缺失后會對原本所要傳達的內容產生嚴重的影響,進而影響用戶的使用預期和結果,比方說用戶可能不能以一個較低的價格完成商品購買,或錯過了產品發布會的時間。 


          B.行為的時間標記

          指用戶本人作為行為主體或行為的接收對象,在某一動作發生后為其所打上的時間標記,比方說“我”購買商品下單的時間或收到一封郵件的時間。


          C.內容的附屬信息

          用戶在使用產品進行內容消費時,時間作為該條內容的附屬信息,起到補充說明的作用,比方說一條短視頻或新聞的發布時間。


          在上面的案例中,我們會發現“時間”在對應場景里所發揮的作用不同,用戶在使用產品時往往對時間存在不一樣的關注程度。因此我們在做頁面設計時,要根據具體場景和用戶訴求判斷“時間”元素的重要性和優先級,通常情況下:時間作為事件的關鍵構成要素>行為的時間標記>內容的附屬信息,之后再思考用什么樣的設計形式去展示來達到我們的目標。




          “時間”的呈現方式和運用技巧

          在討論“時間”元素的設計之前,我們先共識一些有關時間的理解和概念。時間可以劃分為“時間點”和“時間段”兩個維度,類似我們高中物理時學過的“時刻”和"時間間隔“的概念。


          拿開會舉例子:“下午4:30會議開始”、“下午6:00會議結束”描述的是事件開始、結束的時間點,而“整個會議持續1.5小時”、“會議時間為下午4:30-6:00”描述的是事件過程的時間段;但是,我們在會議開始時也可以這樣講“會議將在1.5小時后結束”。


          通過上面的例子我們可以發下,同樣是描述一件事情,運用不同的時間點、時間段的方式去表達,意思一樣但卻傳遞出不一樣的情感,并且兩者存在如下的“換算”關系:

          1)時間段加上定語會變成時間點(但同樣是時間點,“下午6:00”是絕對時間,而“1.5小時后”是相對時間,剛好對應到我們設計時兩種時間戳類型);

          2)兩個時間點之間則表示時間段。

          所以,我們在平時表達或設計時,要先想清楚用“時間”是想側重表達某一事件、動作發生的即刻時間節點?還是想描述其所持續的時間過程?之后我們再針對不同語境去選取合適的文案和呈現方式。



          時間的呈現方式離不開:時間戳類型、時間顯示格式、時間顆粒度。其中,時間顆粒度指的是描述時間的最小單位,往往顆粒度越細,給用戶傳達的確定感越強(如轉賬時間是12日15:15:20),對用戶的激勵作用越明顯(如距搶購結束僅剩00時01分23.6秒)。


          1.絕對時間戳

          絕對時間可理解為事物發生時的確切時間,由具體日期(年、月、日)和時間(時、分、秒)組成。使用絕對時間戳的優勢是信息傳達精準,顯得正式,給人確定感和安全感,同時排布規整,便于形成認知習慣;但缺點是內容顯示過長不利于閱讀,并且占用空間較大。




          在時間顯示格式的選擇上,為了避免混淆,推薦使用文字格式或“-”分隔符來分隔日期,而“/”分隔符在不同國家有不同的展示順序習慣,容易造成誤解,盡量少用。


          時間顆粒度的選擇依情況而定,一般場景總結如下:




          2.相對時間戳

          相對時間在產品設計領域通常是指內容生產、到達、或狀態發生改變時,距當前時間點的時間差值,多用于push通知、信息流產品,側重強調內容的時效性;而“倒計時”也算相對時間的一種,側重營造時間的緊迫感。使用相對時間戳的優勢是用戶辨識、理解成本低,不用通過計算來判斷時間過去或還剩下多久;缺點是不夠精確、正式,并很難衡量兩個時間點的臨近性。



          在使用相對時間是,要注意格式友好。時間單位可隨著時間的推移自動改變;數字不要過多,盡量取整;并且可設置其與絕對時間轉換的臨界點。



          總結


          在設計界面中的“時間”元素時,要遵循場景貼合、便于閱讀理解的總體原則;之后根據場景和目標,再選取合適的“時間”呈現方式(包括時間戳類型、時間顯示格式、時間顆粒度)。



          當時間作為“A.事件的關鍵構成要素”時

          一般情況下使用絕對時間,并且要看是為了強調某一關鍵時間節點,還是側重表達整個持續過程。此外,選用關聯場景的文案或者運用倒計時(相對時間)的形式,可一定程度上促進用戶更加集中注意力,提升對信息的關注度,并達到特殊的激勵作用和轉化效果。


          當時間作為“B.行為的時間標記”時

          該場景通常是為了追求確定感,通過提供精準的時間和日期便于用戶定位到過去或將來的某個時間點(段)去查找、回顧相應內容,因此大多數采用絕對時間,時間顆粒度依具體情況而定。


          當時間作為“C.內容的附屬信息”時

          如果所設計的產品供給內容的更新速度快,用戶活躍度高,并且此時內容的時間信息準確性不那么重要反而更側重于內容的時效性,那么通常會使用相對時間。部分信息流產品(比如新聞資訊類、社區類)會在列表頁使用相對時間,在詳情頁使用絕對時間,時間顆粒度也是依情況而定;并且會隨著時間推移,在某一時間節點前把相對時間轉換為絕對時間。



           

          原文地址:站酷
          作者:vivo互聯網UED

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

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

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

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


          3D to H5工作流應用手冊:理論篇

          濤濤

          前言

          設計師需求中 3D 視覺平移到互動 H5 中的項目越來越多,three.js 和 PBR 工作流的結合卻一直沒有被系統化地整理。

          和各位前端神仙一起做項目,也一起磕磕碰碰出了愛與痛的領悟。小小總結,希望 3D 去往 H5 的道路天塹變通途。

          本手冊主要分為兩大部分:

          Part 1 理論篇:主要讓設計師了解計算機到底是如何理解和實時渲染我們設計的 3D 項目,以及 three.js 材質和預期材質的對應關系。

          Part 2 實踐篇:基于 three.js 的實現性,提供場景、材質貼圖的制作思路、以及 gltf 工作流,并動態討論項目常常遇到的還原問題。

          本文主要面向剛接觸 3D 圖形學的設計師,僅截取了最常用的理論知識和大家一起學習;部分涉及技術美術或計算機圖形學的描述可能不甚嚴謹,希望大家多多交流討論哈。

          其實無論 H5 開發用到的是哪種 webGL,設計相關的材質制作基本還是基于 PBR 思路進行的,所以這邊建議各位親可以先去閱讀一下 Substance 官方寶冊《The PBR Guide》。

          Part 1 理論篇

          設計師在還原 3D 類型的互動 H5 項目的時候一定想過這個宇宙終極問題:為什么 H5/Web 實現的 3D 效果和 C4D 里渲染出來的差異那么大?

          其實這是我們對實時渲染引擎(UE、Unity、three.js 等)和離線渲染工具(Redshift、Octane、Vray 等)的差異存在誤解:一是離線渲染工具是基于真實光照環境來計算每顆像素的著色,實時渲染如果要實現這種效果需要耗費更多硬件基礎和算力去模擬光照(沒個好顯卡都開不動光追)。

          雖然 UE5 的實時渲染技術和硬件兼容性已經讓大家大吃一驚,但在實際項目,尤其是需要兼容低端設備的 H5 來說,渲染能力還是相對有限的。二是對于游戲或 H5 互動網站實際應用來說,流暢的互動體驗優先級往往高于畫面精細度,所以犧牲視覺保性能也是常見情況。

          硬核干貨!3D to H5工作流應用手冊:理論篇

          圖 1-Octane 離線渲染效果 vs three.js 實時渲染效果:材質細節、全局光照及投影、以及抗鋸齒表現差距明顯

          當實時渲染效果與設計預期差距過大時,設計師能多了解一些基礎的計算機圖形學,也許就能更好地和開發同學商討性價比更高的視覺實現和資源優化方案(以及更多 Battle 的籌碼)。

          1. 著色器與著色算法差異(硬核預警)

          首先我們要知道計算機之所以能在 2D 屏幕上畫出 3D 的圖像,是因為有著色器(Shader)在繪制,它將我們三維空間里的模型與光照信息進行轉換,并光柵化為二維圖像。在計算機圖形學中,著色器是用于對圖像的材質(光照、亮度、顏色)進行處理的程式。

          常用的著色器分為四種:像素/片元著色器(Pixel/Fragment Shader)、頂點著色器(Vertex Shader)、幾何著色器(Geometry Shader)、細分曲面著色器(Tessellation Shader)。

          像素/片元著色器與頂點著色器(Vertex Shader)在 webGL 處理過程中都有使用,頂點著色器先將模型中每個頂點的位置、紋理坐標、顏色等信息進行轉換裝配,再由片元著色器對 3D 信息光柵化并轉換成 2D 屏幕信息。(關于著色器差異,感興趣的同學可以直接跳到附錄查看。)

          著色器是怎么把頂點中所帶有光照、紋理等信息轉換并重建在二維圖像的像素中呢?GPU 中是透過不同的著色算法來實現的。

          一種是獲取每個三角形的插值(Interpolate)來實現,這種方法稱作 Per Vertex Lighting,但是當三角型很大的時候,插值往往不夠精準。此時還可以引用另一種方法 Per Pixel Lighting,計算每個像素的光照信息,獲得更好的渲染效果,但是往往也帶來更大的計算量。

          一般常見計算機圖形著色算法有三類:Flat Shading、Gouraud Shading、Phong Shading。這些算法雖然看起來和我們設計師沒啥關系,但事實上在后面了解 three.js 材質時,就會發現他們在呈現時的差異。

          硬核干貨!3D to H5工作流應用手冊:理論篇

          圖 2-Flat、Gouraud、Blinn-Phong 著色法比較 [ F1, ©?Stefano Scheggi ]

          平直著色法 Flat Shading

          這種著色法認為模型中所有面都是平的,同一個多邊形上的任意點的法線方向都相同。著色時,會優先選擇多邊形的第一個頂點或三角形的幾何中心計算顏色。這種著色法實踐上的效果很像低面模型,也比較適合使用在高速渲染的場景。值得注意的是,這種著色法難以做出平滑高光效果。

          高洛德平滑著色法 Gouraud Shading

          這是一種平滑的著色方法,在著色時會先計算三角形每個頂點的光照特性,利用雙線插值去補齊三角形區域內其他像素的顏色。這個著色法比起平直著色法增加了插值的細節,而且也比 Phong 著色法渲染單個像素的光照特性的性能要高。

          但是在渲染高光時,可能會因為無法獲取精確的光照值而出現一些不自然的過渡(或 T 型連接容易被錯誤繪制),此時可以考慮對模型進行細分或使用漫反射材質。

          Phong 平滑著色法 Phong Shading

          與 Gouraud Shading 不同的是,它會對頂點的法線進行插值,并透過每個像素的法向量計算光照特性。這種做法能繪制出精致、精準的曲面,但是計算量較大。Blinn-Phong 是 Phong 的進階版,著色性能更好,且高光彌散更自然。

          2. 基本光照模型 Illumination Model

          簡單了解計算機如何繪制 3D 圖形后,再來看看它要如何具體理解我們所設計的 3D 場景。

          3D 轉換成 2D,也就是 3D 柵格化的過程中,每一個像素的顏色是需要基于它所在的環境計算出來,而基于被渲染物體表面某個點的光強度計算模型就被稱為光照明模型(Illumination Model)或光照模型(Light Model),透過計算光照模型所得到表面位置對應像素顏色的過程被稱為表面繪制(Surface Render)。

          *請注意這里說的光照模型并不是指設計師理解的 3D 立體模型,而是指模型對象表面光照效果的數學計算模型。

          影響光照模型的因素有兩大方面,一是本身給渲染物體材質設置的各種光學特性(顏色反射系數、表面紋理、透明度等),二是場景中光源光及環境光(場景中各個被照明對象的反射光)。

          傳統光照模型都是對漫反射和鏡面反射的理想化模擬,如果要還原基于真實物理世界的效果,光照模型需要遵循能量守恒定律:一個物體能反射的光必然少于它接受的光。在實踐層面則表現為,一個漫反射更強且更粗糙的物體會反射更暗且范圍更大的高光,反之亦反。

          硬核干貨!3D to H5工作流應用手冊:理論篇

          圖 3-基于 PBR 的光照模型需要遵循能量守恒定律 [ F2, ©?Joe Wilson ]

          光照模型與著色組合在不同的渲染需求下也會有不同的應用:

          • 真實感渲染(Photorealistic Rendering):目的是基于真實物理世界對 3D 場景進行仿真還原。
          • 非真實感渲染(Unphotorealistic Rendering):也被成為風格化渲染(Stylistic Rendering),會更抽象化地對模型進行重繪。

          硬核干貨!3D to H5工作流應用手冊:理論篇

          圖 4-真實感渲染及非真實感渲染對比 [ F3, ©?Autodesk ]

          真實感渲染 Photorealistic Rendering

          考慮到真實感渲染對硬件的依賴,目前 webGL 中使用的一般以簡單的局部光照模型為主(只計算光源對物體的光照效果,不計算物體間的相互影響,我們看到的“假反射”通常透過貼圖來進行模擬),根據反射形態,經典的光照模型有下列幾種:

          • Lambert 漫反射模型:

          這種模型的粗糙表面(如塑料、石材等)會將反射光從各個方向反射出去,而這種光反射也稱為漫反射。理想的漫反射體我們通常稱作郎伯反射體(Lambertian Reflectors),也就是我們熟悉的橡膠材質。

          硬核干貨!3D to H5工作流應用手冊:理論篇

          圖 5-漫反射模型與其他光照模型對比 [ F4, ©?ViroCore ]

          • Phong 鏡面反射模型:

          這是一種以實驗及觀察為合成基礎的非物理模型。它的表面反射同時結合了粗糙表面漫反射和光滑表面鏡面反射,但 Phong 模型在高光處的表現有過渡瑕疵。

          硬核干貨!3D to H5工作流應用手冊:理論篇

          圖 6-Phong 鏡面反射模型視覺構成 [ F5 ]

          • Blinn–Phong 模型:

          是在 OpenGL 和 Direct3D 里默認的著色模型,一種調優后的非物理的 Phong 模型,頂點間的像素插值使用 Gouraud 著色算法,比 Phong 著色算法性能更好,而且高光效果也更平滑。

          硬核干貨!3D to H5工作流應用手冊:理論篇

          圖 7-Phong 及 Blinn-Phong 鏡面反射模型對比 [ F6 ]

          • Cook-Torrance/GGX 光照模型:

          如果你用過 C4D 的默認渲染器,那么一定在材質的反射通道設置中見過它倆。

          這是相對高級的光照模型,不同于 Phong 和 Blinn-Phong 模型僅僅對漫反射及鏡面反射進行理想化模擬,這兩個光照模型基于不同物理材質加入了微表面(Microfacet)的概念,并考慮到表面粗糙度對反射的影響,對鏡面反射進行了調優,使得高光的長尾彌散更加自然,也是目前 PBR 渲染管線(Unity、UE)中較常用的光照模型。

          硬核干貨!3D to H5工作流應用手冊:理論篇

          圖 8-Phong、Blinn-Phong 與 GGX 鏡面反射模型對比 [ F7, ©?ridgestd ]

          • 次表面散射模型 Subsurface scattering/SSS:

          終于有一個設計師們常見的概念了。次表面散射是指光穿透不透明物體時(皮膚、液體、毛玻璃等)的散射現象?,F實生活中,大部分物體都是半透明的,光會先穿透物體表面,繼而在物體內被吸收、多次反射、然后在不同的點穿出物體。以皮膚為例,只有大概 6%的反射是直接反射,而 94%的反射都是次表面散射。

          BSSRDF(雙向次表面反射分布函數)是用于描述入射光在介質內部的光照模型,目前也被應用在最新的虛擬角色皮膚實時渲染中;但由于 SSS 材質的計算需要依賴深度/厚度數據,所以 webGL 對這種高級光照效果的還原程度還是相對有限的。

          硬核干貨!3D to H5工作流應用手冊:理論篇

          圖 9-Unity 中模擬次表面散射光照模型效果 [ F8, ©?Alan Zucconi ]

          非真實感渲染 Unphotorealistic Rendering

          也就是我們常說的 3 渲 2,非寫實渲染風格也是從人們對 3D 場景套以 2D 繪畫或自然媒體材質需求而演化過來的。因此非寫實渲染技術實際上是不同光照模型+不同著色處理共同作用的風格化輸出,目前也被大量應用在動畫及游戲中,像《英雄聯盟:雙城之戰》《蜘蛛俠:平行宇宙》都是頂級三渲二大作。

          硬核干貨!3D to H5工作流應用手冊:理論篇

          圖 10-在不同通道中混合應用真實感渲染及非真實感渲染效果 [ F9, ©?Polygon Runway]

          • Cel Shading/Toon Shading:

          卡通著色,一種最常見的以 3D 技術模擬扁平風格的著色形式,通常以極簡的顏色、漸變及明確的外框線等漫畫元素作為風格特征。

          硬核干貨!3D to H5工作流應用手冊:理論篇

          圖 11-Blender 中不同類型的 Toon Shader 效果 [ F10, ©?Blendernpr]

          日本創意編程師 Misaki Nakano 制作了一個非常有趣的 Toon Shading H5 互動頁面,大家可以體驗一下不同著色形態下非常模型的視覺表現。點擊體驗: https://mnmxmx.github.io/toon-shading/dst/index.html

          硬核干貨!3D to H5工作流應用手冊:理論篇

          圖 12-Misaki Nakano 的 Toon Shader 互動網站 [ F11, ©?Misaki Nakano]

          • Customized Shading:

          目前越來越多渲染器可支持設計師及工程師根據項目需求對著色進行定制化處理,以產出更具風格化和藝術化的著色效果。例如工業界插畫常用的冷暖著色(Gooch Shading),以及更具繪畫質感的素描著色(Hatching)及油畫水墨畫等自然媒體著色,都已經深入到了我們日常的創作之中。

          硬核干貨!3D to H5工作流應用手冊:理論篇

          圖 13-在 Unity 中,基于真實感渲染的貼圖效果與 NPR 水墨風格化著色效果對比 [ F11, ©?鄧佳迪]

          3. Three.js 材質著色對比

          說完真實感與非真實感渲染差異后,我們再來看看 Three.js 中的材質。

          和許多渲染引擎一樣,除了原生材質外,webGL 的材質和著色都是可以根據需求進行定制的,但這往往會也帶來較高的開發成本及兼容性風險??紤]到 H5 項目的實際應用場景,下表羅列了 Three.js 原生材質的對比,包含了材質特性優勢、貼圖差異及適用場景,大家可以基于項目需求快速選擇并混合使用:

          硬核干貨!3D to H5工作流應用手冊:理論篇

          圖 15 – three.js 材質對比表

          4. 色彩描述與管理 Color Space

          雖然著色、光照模型以及材質渲染對 3D 表現有著最為直觀的影響,但 3D 工作流仍有一個隱秘而關鍵的環節——色彩管理。

          真實世界中按照物理定律,如果光的強度增加一倍,那么亮度也會增加一倍,這是線性的關系。理想狀態下,像素在顯示屏上的亮度也應為線性關系,才能符合人眼對真實世界的觀察效果(如圖 b:橫坐標為像素的物理亮度,縱坐標為像素顯示時的實際亮度)。

          但是顯示器的成像由于電壓的影響,導致輸出亮度與電壓的關系是一個亮度等于電壓的 1.7-2.3 次冪的非線性關系,這就導致了當電壓線性變化時,亮度的變化在暗處轉換時變慢,如果顯示器不經過矯正,暗部成色也會整體偏暗(如圖 c)。目前大多數顯示器的 Gamma 值約為 2.2,所以也可以理解 Gamma2.2 是所有顯示器自帶的一個遺傳病。

          硬核干貨!3D to H5工作流應用手冊:理論篇

          圖 15-紅色上曲線=Gamma0.45=sRGB Space;綠色下曲線=Gamma2.2=顯示器真實成像缺陷;藍色斜線=Gamma1.0=Linear Space 真實物理世界線性關系

          為了矯正顯示器的非線性問題(從圖 c 校正回圖 b),我們需要對它進行一個 2.2 次冪的逆運算(如圖 a),在數學上,這是一個約 0.45 的冪運算(Gamma0.45)。經過 0.45 冪運算,再由顯示器經過 2.2 次冪輸出,最后的顏色就和實際物理空間的一致了,這套校正的操作就是伽馬校正(Gamma Correction)。

          而我們常見的 sRGB 就是 Gamma0.45 所在的色彩空間,是 1996 由微軟與惠普共同開發的標準色彩空間。當照片素材一開始儲存成 sRGB 空間,相當于自帶一個 Gamma0.45 的遺傳病抗體,當它被顯示器顯示時,就自動中和了顯示器 Gamma2.2 的缺陷,從而顯示出與物理世界相符的亮度。

          另一個校正原因是因為人眼在接受光線時的敏感度也不是線性的,人對于暗部的感知更敏感,對高亮區域感知較弱,而且人眼感知光強度與光的物理強度也剛好是對數關系。為了在暗部呈現更多人眼可感知的細節,Gamma0.45 的色彩空間中(如圖 a),像素的實際亮度也會高于它的物理亮度。

          硬核干貨!3D to H5工作流應用手冊:理論篇

          圖 16-人眼感知光強度與發射光真實物理強度對比

          上面那一大段確實有點繞,但也就說回來為什么建議渲染時使用線性空間(Linear Space)了。因為在計算機圖形中,著色器的運算基本上都是基于物理世界的光照模型來保證渲染真實性的,如果模型的紋理輸入值是非線性的(sRGB),那么運算的前提就不統一,輸出的結果自然就不那么真實了。

          而在大多數工作流及渲染軟件中,大部分貼圖資源都是默認輸出 sRGB 的(設計師作圖環境一般也在 sRGB,所見即所得),而法線貼圖、光線貼圖等紋理(純數值類紋理,只用于計算)又是 Linear 的,這個部分就需要我們根據渲染引擎本身的特性,來判斷是否需要對不同的貼圖進行不同的“去 Gamma 化”處理了(WebGL、Unity、Octane 等)。

          將所有貼圖進行去 Gamma 化,統一為 Linear 空間后,再在渲染輸出時由引擎統一進行 Gamma 校正,這個時候在顯示屏里顯示的就是接近真實世界的效果了。

          更多色彩空間的實際效果比較,大家可以看下 Unity 的文檔:《Linear/Gamma 渲染比較》:https://docs.unity3d.com/Manual/LinearRendering-LinearOrGammaWorkflow.html

          回到 H5 所用的 Three.js,它的著色器計算也是默認在 Linear 空間,如果最終渲染時不轉化為 sRGB,在設備顯示時可能會造成色彩失真。在 three.js 中色彩管理的工作流會根據導入模型 Asset 的差異而有所不同,如果貼圖與模型是分別導入場景,則建議可嘗試以下流程:

          1. 輸入貼圖數據 sRGB to Linear: 含色彩的貼圖(基礎材質、環境、發光)設編碼為 sRGB(texture.encoding = sRGBEncoding),或將渲染設置 renderer.gammaInput 設為 True,可將原為 sRGB 的貼圖轉換為 Linear,而原純數值類貼圖(法線、凹凸等)仍舊保持 Linear;這一操作可保證貼圖輸入數據的正確性與統一性。

          2. 刷新材質:當材質編碼類型被修改后,需要設置 Material.needsUpdate 為 True,以重新編譯材質。

          3. 輸出渲染 Linear to sRGB: 校正渲染輸出值的 Gamma:

          renderer.gammaOutput = true; renderer.gammaFactor = 2.2;以供顯示屏正確顯色。

          《Part1-理論篇》就先告一段落啦,如果你偶發失眠,建議可以反復咀嚼延伸閱讀的內容。

          《Part2-實踐篇》會繼續完善 three.js 場景、材質貼圖的制作思路、以及 gltf 工作流,并動態討論項目常常遇到的還原問題。

          2022,咱們需求再見。

          附錄

          1. 著色器差異

          像素著色器 Pixel Shader

          也稱為片元/片段著色器(Fragment Shader), 為二維著色器。它記錄了每一個像素的顏色、深度、透明度信息。最簡單的像素著色器可用于記錄顏色,像素著色器通常使用相同的色階來表示光照屬性,以實現凹凸、陰影、高光、透明度等貼圖。同時,他們也可以用來修改每個像素的深度(Z-buffering)。

          但是在 3D 圖像中,像素著色器可能無法實現一些復雜的效果,因為它只能控制獨立的像素而并不含有場景中模型的頂點信息。不過,像素著色器擁有屏幕的坐標信息,可以依據屏幕或鄰近像素的的材質進行采樣并增強,例如,Cel Shader 的邊緣強化或一些后期的模糊效果。

          頂點著色器 Vextex Shader

          是最常見的 3D 著色器,他記錄了模型每個頂點的位置、紋理坐標、顏色等信息。它將每個頂點的 3D 位置信息轉換成 2D 屏幕坐標。頂點著色器可以處理位置、顏色、紋理的坐標,但是無法增加新的頂點。

          幾何著色器 Geometry Shader

          是最近新興的著色器,在 Direct3D 10 和 Open GL3.2 中被引用。這種著色器可以在圖元外生成新的頂點,從而轉換成新的圖元(例如點、線、三角等),而優勢也是在于可以直接在著色中增加模型細節,減低 CPU 負擔。集合著色器的常用場景包括點精靈(Point Sprite)生成(粒子動畫),細分曲面,體積陰影等。

          細分曲面著色器 Tessellation Shader

          在 OpenGL4.0 和 Direct3D 11 中出現,它可以在圖元內鑲嵌更多三角體。為傳統模型新增了兩個著色步驟(一是細分控制著色,又稱為 Hull Shader,二是細分評估著色,又稱為 Domain Shader),兩者結合可以讓簡單的模型快速獲得細分曲面。(例如,含細分曲面效果的模型加上置換貼圖就可以獲得極其逼真細膩的模型)

          2. 一些術語的簡單理解

          GL: Graphics Library, 圖形函數庫。

          webGL:Web Graphics Library,Html 5 可接入的 3D 繪圖協議/函數庫,可以為 H5 Canvas 提供 3D 渲染的各類 API。

          Z-Buffering:深度緩沖,3D 圖像在渲物體的時候,每一個生成的像素的深度會存儲在緩沖區中。如果另一個物體也在同一個像素中產生渲染結果,那么 GPU 會比較兩個物體的深度,優先渲染距離更近的物體,這個過程叫做 Z-Culling。當兩個物體靠很近的時候(16-bit),可能會出現 Z-Fighting,也就是交疊閃爍的現象,使用 24 或 32bit 的 Buffer 可以有效緩解。

          Rendering Pipeline:渲染管線/渲染流水線/像素流水線,為 GPU 的處理工作流,是 GPU 負責給圖形配上顏色的專門通道。管線越多,畫面越流暢精美。

          硬核干貨!3D to H5工作流應用手冊:理論篇

          圖 17-渲染管道細節工作流 [ F12 ]

          Rasterization:光柵化/點陣化/柵格化,就是將管線處理完的圖元轉換成一系列屏幕可視的像素,過程包括:圖元拼裝(Primitive assembly)-三角形遍歷(Triangle Traversal)- Pixel Processing-Merging。

          文章來源:優設 作者:ISUX


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

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

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


          深度解析|流量時代私域H5營銷設計的流量密碼

          鶴鶴









          一、由銷售演變成運營


          在我看來,當今互聯網行業的經營實際上與傳統行業的銷售并無區別,我們可以從以下兩個行業的業務結構圖看出,互聯網行業的經營實際上是從傳統行業的銷售模式轉變而來。



          1.1 傳統行業的銷售

          按照傳統行業的業務結構可分為“采購、生產、加工、銷售、財務”四個環節。一提起銷售大家肯定都不陌生,指的是企業生產的產品通過銷售人員的銷售手段,將企業的產品賣出來兌換成貨幣,流入企業的財務。



          1.2 互聯網行業的運營

          在互聯網行業中業務結構還可分為“采購、PM/開發、運營、財務”。就流程而言,互聯網行業的經營實際上存在著傳統銷售的影子,在將企業的產品(成品)轉化為財務的這一環節之前,需要經歷銷售或運營這兩個環節。


          不像傳統企業銷售,運營不直接負責賣,更多地是負責推廣。不直接負責銷售,更多的是負責推廣。換言之,互聯網企業的產品并不直接兌換成貨幣,而是通過“引流、活動、轉化、流失”等一系列運營操作,提升用戶體驗,將產品好服務賣給用戶。


          ·引導用戶使用產品:我們可以將傳統銷售中的初次拜訪客戶當作運營中的引流;

          ·保持用戶黏性:把傳統銷售中的維護客戶關系當作運營中做的活動和轉化;

          ·用戶流失管理:將傳統銷售中挽回客戶這個動作當作運營中用戶流失這個動作。

          因此,互聯網行業更加重視運營而不是銷售。






          二、運營設計的核心目標


          在簡單了解了互聯網的運營之后,我們再談一談最新出現的一個新詞“運營設計”。



          2.1 運營設計并不是運營

          運營設計在我看來是一個相對模糊的詞匯,我能清楚地講明白什么是品牌設計、界面設計、工業設計、平面設計、產品設計,但總覺得說不明白什么是運營設計。


          比如說品牌設計是品牌,界面設計設計的是界面,而運營設計不是運營設計,好像運營設計無法用一個專業的方向來描述。


          但在國內的互聯網市場中,產品的運營又是一件必不可少的事情,從企業盈利的角度來看運營設計的地位不亞于UI設計和產品設計。在我看來運營設計是介于“運營”與“設計”之間的一個崗位。


          ·菜鳥運營設計師:多是幫助運營經理完成運營活動的投放物料,按時上線。

          ·老鳥運營設計師:通過較為多樣的手段(合理的規劃)和技能(設計感覺形式)更好地實現“用戶獲取&用戶付費”等目的,并且在這個過程中可以“更好實現已有用戶的維系”。



          2.2 增長設計(海盜模型)

          實際上,運營設計也被稱為增長設計,一提到增長,我的第一反應就是《增長黑客》中的海盜模型,也就是AAARR模型。


          AARRR(海盜模型)是《增長黑客》中最為重要的理論——用戶生命周期的模型,因為這個模型和運營設計有許多相似之處,也有人將其作為業務流程的模型。運營的流程需要經歷:先拉新,再促活,接著提高留存,然后獲取收入,最后實現自我傳播這5個環節,可以和模型中的概念一一對應上。


          *對于海盜模型的知識點,我在這篇文章《一文讀懂|數據好體驗就好嗎?—數據認知篇》里面講過,這里我就不做過多地贅述了。


          對用戶生命周期AAARR模型的理解是一方面,最重要是要學會用模型中的關鍵數據指標去衡量活動,畢竟我們做運營設計的最重要的是以最低的設計成本來獲得最大的運營收益。模型只是一種工具,對于不清楚怎么使用模型的同學,我建議看看我寫的《史上最全|數據體驗好就好嗎?—體驗度量篇》。



          2.3 以運營目標推導運營形式

          運營經理的運營手段可謂是百花齊放,變化莫測,這里我們不展開討論。一般運營活動屬于推廣這個動作,在推廣的這個環節里面不會特指某一個目標,而是包含多個目標,所以對于運營設計師而言目標不能是一個,而應該多個。常規的以產品運營為核心提出來運營目標大致是“拉新、促活、回流、營收”等這四種。


          如果把運營的目標需求轉換成我們設計師的目標需求的話,逃不出我們常見的“用戶增長、品牌傳達、營銷策略、商品成交量”這四個范疇。


          把運營側的目標轉換為產品是為了幫設計更準確理解運營經理的需求,以目標確定活動類型、以類型快速定位適合的風格,提高運營活動質量,促進用戶轉化,如圖


          ·基于用戶的活動運營:如果是以用戶為目標的活動,設計應該偏向于符合用戶屬性的風格,比如我們的用戶都是年輕的用戶,那在頁面的設計上就應該多有“年輕化、博人眼球的、好玩有趣”等元素的呈現。


          ·基于營收的活動運營:如果是以營收為目標的活動,設計應該偏向活動場景對于入口的設計優化,比如Banner、落地頁等物料設計。通過優化入口,提高轉化率,完成產品體驗的優化的目標。


          ·基于品牌的活動運營:如果是以品牌宣傳為目標的活動,設計應該偏向企業品牌形象的樹立以及傳播,把產品的特色傳遞給用戶,與其他競品拉開差距,提升自己產品的核心競爭力。





          三、私域的精細化運營

          與運營有關的“私域”這倆詞,最近火得不行,哪里都可以見到。為什么互聯網企業這么重視私域的運營呢?主要是因為在互聯網時代,大家都認同有了私域流量就相當于有了盈利這個觀點。


          3.1 什么是公域運營

          首先我要簡單地描述一下什么叫流量,流量的本質就是指用戶,但是“用戶”這個詞過于抽象了,常常都用閱讀量,粉絲量,點贊量,播放量等這些數據維度去衡量流量的體積。


          打個不恰當的比喻,流量就像是一條河,如果無人管理的話,那就叫公域交通。您在河邊挖一條水溝,將河水引到自己事先制作好的蓄水池里面,這個蓄水池里面的河水就叫做私域流量。


          3.2 什么是私域流量

          如上例所說,我們將能夠自主運營的流量或用戶(蓄水池),可以反復觸達、“騷擾”、交流,獲取反饋的流量統稱為私域流量。典型的產品形態有微商、拼團群、朋友圈、微信公眾號。私域流量相對于公域流量來說,是一種更精準,更容易被轉化的流量。


          簡單的理解就是可以為所欲為的流量,比如我在我自己的微信公眾號里面可以隨意地刪減用戶的評論,典型產品形態有微信公眾號、微商、拼團群、朋友圈等。


          如今許多互聯網產品都是私域流量與公域相結合的產品,比如說大家經常使用的站酷這個平臺,如果我發布的作品沒有上首頁的推薦,只會在我的個人主頁展示,獲得的粉絲就屬于私域流量;反之我的作品獲得了首頁推薦,在站酷首頁展示,獲得粉絲增長量就屬于公域流量。


          許多企業老板都明白這樣一個道理“用戶在哪里,私域流量就在哪里,生意就在哪里,企業的盈利就在哪里?!?/strong>因此,企業老板們都希望把公域流量吸引到自己產品的中,成為私域流量,這樣企業的流量即相對公域流量而言更加可控、高效、精準,后期盈利也有保障。



          3.3 精細化的運營模式

          正是因為許多企業開始注意到私域流量的重要性,互聯網從之前的流量粗放運營模式,逐漸變成用戶精細化運營模式,這是流量思維到用戶思維的轉變。精細化運營簡單理解就是基于龐大的數據分析,讓企業的產品為不同的用戶推送不同的運營內容(或者是用戶感興趣的內容)。


          提出“精細化運營”這一個概念行業里面最早最有名氣的應當是號稱一分鐘出8000張Banner的鹿班平臺,鹿班平臺最大的意義不在于取代設計師這一個崗位,而是阿里巴巴在精細化運營的第一次嘗試,為不同的用戶推送自己所需要的商品內容。當然了,除了鹿班平臺京東集團也有羚瓏營銷內容創意平臺,有興趣的同學可以查看一下。


          在精細化運營中還有一個很專業的名詞叫“千人千面營銷策略”,這個營銷策略的概念是指每一個用戶看到的每一個內容都是不一樣的,仔細想想這是人力所不能及,只有AI的大數據才能做到的,例如用戶A的收藏夾是襯衫品類比較多,那淘寶Feed流推送的商品襯衫比重會多一些,用戶B的購物車首飾品類比較多,那產品中推送的內容珠寶首飾占多數;用戶C喜歡電子產品,那么產品推送的將會是電子類產品比較多。





          四、了解運營設計師的工作內容

          在公司里,產品體驗設計師(又被稱為界面設計師、UI設計師)在公司中扮演著美化產品的角色,隨著互聯網行業的業務擴張、人才涌入后會把UI設計師這一角色進行更加精細化的分類,在互聯網企業中會把設計師按照工作內容進行兩種類型的分類,分別是產品體驗設計師和運營視覺設計師。



          4.1 產品體驗設計師

          工作職責:產品體驗設計師的工作職責,主要以提升產品功能體驗為主。在分析產品邏輯和交互邏輯后,從視覺層面把控產品界面設計,并通過視覺設計高效傳達有效的信息,并制造出愉悅的用戶體驗。

          設計工具:Figma、Sketch、Axure、問卷工具等。



          4.2 運營視覺設計師

          工作職責:運營設計工作職責是在短期內達成提升相關運營活動的指標。他們以運營活動設計為主,運用視覺語言吸引用戶參加對應的活動,加深用戶對產品的印象,從而促使用戶參與活動,完成活動中完成引流、成交、復購、傳播等行為。

          設計工具:PS、AI、AE、C4D等。



          4.3 運營設計師需要具備的能力

          運營設計師的主要工作內容就是協助企業中的運營經理做好產品的用戶運營、內容運營、產品運營和活動運營。運營設計師應該參與到運營活動的策劃中去,幫助運營經理想一些更有趣更好的設計策略,并且在這個過程中更好地提高自己的運營策略、數據分析、文案能力和視覺表現能力。


          4.4 運營設計的工作范疇

          運營設計師這個一個崗位更多的是內容驅動型(音樂、視頻、教育應用等)、交易驅動型(電商、o2O服務等)產品中。它的工作范疇是一個很繁雜的事情,不僅需求數量大而且頻率高,最繁雜的一點是需求種類比較多,比如有廣告位Banner、專題頁面設計 、活動專題、Icno圖標等內容,并且需要批量處理的各種資源入口圖,線下活動的海報、印刷物料等等。










          如今運營活動可謂鋪天蓋地,手機端也能經常見到各大企業產品的優惠活動設計,比如活動圖,落地頁,優惠券,戰略樓層等設計。國內的運營設計推廣形式多以落地頁(H5)的形式幫助企業做推廣企業產品或者樹立企業形象的活動。


          由于,這類狂轟濫炸式的運營活動,讓用戶倍感無味,致使運營活動流量不高,設計師在實際的工作中往往會遇到以下三類問題,導致我們的運營活動流量不高,達不到預期的運營目的,如圖





          一、用形式解決內容過長問題

          近些年在市面上落地頁的推廣形式多以長頁面為主,比如電商的推薦頁、商品的宣傳頁。由于企業想要表達的內容過多,使落地頁的長度越來越長,這種形式雖然可以更全面地介紹商品優勢,但是在快節奏的互聯網市場,用戶自然會覺得很臃腫。


          針對落地頁內容過長,視覺呈現不佳的問題,我們最快能想到的辦法就是刪減字段,但是如果運營經理不同意刪減字段那怎么辦?因此,刪減這是一個辦法,但不是最好的辦法。


          既然不能刪減,我們不妨換個思路來解決這個問題。剛剛談到內容過長導致用戶感覺臃腫,感覺臃腫的核心所在是“內容”對用戶沒意義,按著這思路延展下去解決問題的關鍵在于“突出重點”,這里我提供四個方法幫助大家解決困擾。



          1.1 優化頭圖的尺寸

          許多設計設計師由于沒有考慮清楚手機到最終的預覽效果,導致很多重要的元素出現在低活躍的區域 ,用戶第一眼看不到能吸引自己的內容,從而失去往下滑動了解更多內容的動作,造成運營推廣的效果大打折扣。


          因此在設計這種長圖時要事先考慮好首屏要呈現什么內容,一般的運營頭部高度一般定在600px-750px左右,如果是內容較多的話,我建議把頭圖的高度控制在460左右,這樣可以促使用戶在首屏看到更多的信息,引導用戶有興趣向下滑動,用戶的點擊率也隨之上升。


          1.2 手機海報的表現形式

          除了縮減頭圖的高度之外,實際上利用海報宣傳的方式進行設計也是可以的。在朋友圈或其他社交平臺上經??吹竭@種帶有二維碼的宣傳海報,用戶通過掃碼直接進入運營活動中心。


          這類海報形式有著短小精悍,言簡意賅、便于傳播的優點,是一種提高運營活動流量很好的表現形式。



          1.3 九宮格拼圖的表現形式

          雖然現在是抖音的天下,但是這類九宮格拼圖的表現形式,在微博(微信、微淘)如日中天的時代也是風靡一時的,這里提出九宮格拼圖的形式也是給大家提供一個思路,是否采用還需要考慮企業主要運營的平臺。



          1.4 閃屏的表現形式

          閃屏這種表現形式雖然點擊率并不高,但是一種很好蹭熱度的方法。對閃屏的設計,設計師只需要思考好用什么呈現表現形式為閃屏物料注入新的活力,例如用下面這種只突出主體物和標題的表現形式,把內容更加精簡、準確地傳遞給用戶,這種表現形式就很好。





          二、了解興趣低的原因

          在第二部分里,我想分為4個模塊——了解興趣低的原因、用形式提高用戶興趣、讓標題文案更加突出、用獵奇心理引起用戶興趣,來談一談我對“用戶興趣”的理解。


          2.1 解決用戶興趣的方法

          早期的互聯網產品以工具為主,例如百度就是用來搜索的、QQ就是用來聊天的、淘寶就是用來買東西的,這些產品呈現的感覺都以簡潔清晰為主,但隨之互聯網越來越普及,娛樂產品出現與工具類產品越來越多的差異性趨勢發展,尤其對于運營設計,簡潔清晰變得沒那么重要,個性、趣味才是占據主導。想要運營設計做得讓用戶有興趣,不妨試一試我下面所說的四個技巧。



          2.2 為什么要“動”會引起用戶興趣

          以圖片+內容的這種展現形式在市場出現很久了,對用戶的吸引度不免有減弱的趨勢,在這一階段我們需要尋找一種更加有趣的形式來吸引用戶。


          興趣可以用更為科學的方法“注目度”來解釋,當我們眼睛在看到某一個事物的時候,大腦會根據事物的形態給一個由“強”到“弱”的排序,去支配眼睛去觀察事物,如下圖所示,我們可以直觀地看到“動畫”這個類目是排在前面的。大部分用戶在看到運營活動內容的精神狀態(注目度)是分散的,所以要搶占用戶的時間,設計用戶第一眼的吸引力。




          三、用形式提高用戶興趣


          3.1 加入更多的動效

          根據上面的結論,在提高用戶興趣這個問題上,我們完全可以增加展示效果的動效來做到,很多產品也是這樣做的。


          比如今年拼多多的Banner上,做了一些標題旋轉、優惠券飛出的動畫效果:

            


          像京東購物節中做一些開場的動畫效果:

            



          在活動流程上面的動效,比如在一些抽獎環節模擬真實物體的運動軌跡:

            




          在圖標或者標簽上面加一些位移、漸隱漸顯的動畫效果:

            


          在一些彈窗上面加上一圈光效,也是一個不錯的選擇:

            


          如今在運營活動上加入更多的動效是設計師必備技能之一,最常規的就是把畫面中的某一個元素變大,像是下面的按鈕,采用放大縮小的動效。

            


          或者是按鈕旁邊加上一個手指的元素,也可以起到吸引用戶的目的。

            


          元素圍繞主題物周邊沿著運動軌跡活動。

            


          關于動效的案例,這里我就不一一舉例說明了,大家可以登錄螞蟻設計服務平臺 - 犸良這個平臺獲取靈感。



          2.2 以靜制動

          對于不會動效軟件的同學也沒有關系,也可以著重對畫面的張力進行設計,以靜至動,以下我就分享幾個以靜至動的方法。


          ·元素之間的動勢:合理的運營元素之間的組合關系可以營造出有動的感覺,如果單單放一個開飛機的場景可能并沒有感覺在飛,但如果加上飛翔的紅包、模糊的背景,那就感覺真的在開飛機。


          ·有力的指引力:如果單單地放一張優惠券,不會產生吸引人的觀感,但設計四只手從四個方向爭搶的畫面,就會感覺畫面有力量有爭搶的感覺。


          ·以破形產生動感:畫面中從左側設計一張卡片,遠處門的入口塑造的,大膽地破形處理,很容易營造出一種動態感覺。


          ·夸張的構圖設計:當然了不同的視角和構圖也可以讓畫面感覺生動,如下面這樣的構圖就會給用戶營造出一種畫面外還有畫面的感覺。


          ·營造運動畫面感:下面這套海報采用硬朗的直線和運營動作的完美結合,通過營造強烈的運動感給用戶傳達動的感覺。



          2.3 視頻推廣的形式

          由于短視頻領域的興起,朋友圈中轉發視頻的用戶也日益增加,如果設計師可以給運營經理在以視頻形式進行運營活動的推廣的需求上出謀劃策的話,也是一個很專業的設計師了。





          四、讓標題文案更加突出


          造成用戶不感興趣的原因還有可能是信息傳遞效率不高,用戶無法通過標題知道這是什么活動,怎么可能引起用戶的興趣而點擊?

          標題的文案可謂是用戶判斷信息的首要思想要素,他能迅速讓用戶了解活動主題,傳達活動興趣點,激發用戶參與。


          4.1 選擇識別度高的字體

          設計師是一個創造美的職業,但是也要有取舍,在我看來漂亮固然重要但高效的信息傳遞更為重要,尤其是在運營活動的標題設計上應該盡量選擇一些識別度高的字體,先讓用戶清楚地知道該活動是干什么的,再用特殊的技法去吸引用戶點擊。


          在標題字體上我比較推薦使用無襯線字體,因為黑體去掉過多的襯線裝飾,是橫平豎直,筆畫粗細均衡,使字更為精練并且醒目。例如下面這張效果圖,都是在黑體的字體基礎上做的設計,光看標題就可以清楚活動大致是個什么類型的了。



          4.2 給字體加點效果

          如果覺得以上的方法并不能給用戶起到視覺沖擊力的效果,不妨給標題的字體加一點效果圖,比如立體效果、加裝飾物、更改字體結構等等,如圖

          我推薦一個我自己作圖的習慣,就是先做標題文案的樣式設計,再做配圖元素的設計,我覺得這個方法既可以突出標題文案字體設計又很高效。博大精深,有機會后期會寫一篇字體設計的文章,敬請期待吧。





          五、用獵奇心理引起用戶興趣


          以下內容不算是設計技法的內容了,算是運營思維方面的小竅門,我認為身為運營設計師,還是有必要知道的。



          5.1 倒計時營造緊張感

          如果在手機海報的表現形式上,加入以下這種“倒計時”主題,有助于激發起用戶期待感和代入感,起到事半功倍的效果。


          5.2 明星的效應

          如果活動中有明星素材可以使用,千萬不要放過這個機會,因為明星自帶流量和話題,也是吸引用戶興趣,提高流量的好辦法。


          5.3 節日的熱點

          一年中有很多節日或者節氣的時間節點,這些時間節點自帶吸睛功能,可以把他們當成借勢營銷的主題,有的放矢地制作活動宣傳圖,增加曝光度,保證營銷的新鮮度。


          接下來,讓我們談一談第三個問題——用戶審美疲勞。









          隨著市場上充斥大量運營活動,對用戶來說不免會造成審美疲勞,而用戶出現審美疲勞的情況也是造成運營數據下降一個重要的因素。



          一、了解什么叫審美疲勞


          1.1 審美疲勞的概念

          所謂審美疲勞,源于一個經典的心理學概念——刺激適應(Sensory Adaptation),就是用戶長時間接觸一種類型或者表現形式的事物而產生的厭倦、麻木的心理,最終都會被“適應”(即令人無感覺)。


          這里我列一個例子,比如每天打你一棍子,你當然很不爽。但是連續打你一年后,你并不會感覺到不爽了,因為它變成了你生活的一部分,你已經沒有感覺了——這就是刺激適應。


          1.2 為什么會出現審美疲勞

          審美疲勞的出現,有其客觀必然性,多數情況造成用戶審美疲勞的原因可以分為兩種:


          內容上眼花繚亂:是指一方面市場的運營活動太多,另一方面是活動內容讓用戶提不起興趣,久而久之自然就會產生審美疲勞的心理。


          時間上的心生厭倦:這是人正常的心理狀態,當人從外部獲得了幸福感(升值、金錢、美食)多會隨著時間的推移最終回到基礎水平。

          這里我列一個例子,比如剛收到名校錄取通知書的大學生,感覺到幸福感爆棚,但也最多持續幾個月——等他入學后,日復一日地上課下課和高中生活一樣,慢慢地覺得索然無味。



          二、審美疲勞的解決方法

          對于內容讓用戶提不起興趣這一點,我在前一章我已經闡述了自己的觀點,這里不做過多贅述了。但是我們可以就“時間上的心生厭倦”這一問題出發,來討論設計方面的解決方法。


          在我看來設計側的解決方法其實就一個詞——新穎,我總結設計師可以從以下5個方面著手進行設計方案的確立——夸張視角、細致刻畫、多種風格、故事性、游戲化。



          2.1 設計一些新奇的視角

          這種方法屬于吸引眼球而追求的形式上的“奇特”,比如我們看看第一幅設計稿(植美村的頁面),夸張的魚眼大透視配合風格感十足的原畫級頁面,至少第一眼就把我震撼了。


          或者以微觀視角看世界的視角去做設計稿,比如說OPPO的運營圖設計,正常視角中人永遠都是比手表大的,但如果反過來去觀察,就好比自己像是一個小微生物去觀察這個視覺,會給用戶一種很新奇的感覺。



          2.2 把刻畫發揮到極致

          形、色、質、構是搭建一個畫面的基礎,其中質感是拉開差距的關鍵,它是細微的,往往有質感的視覺感受會給用戶一種高級的感覺,吸引用戶點擊或者是向下滑動瀏覽更多的內容。身為設計應該更專注于自己觀察方法和技法的提升,一個圖層達不到想要的效果,那兩個圖層呢?那把其中一個圖層的圖層樣式調整成“正片疊底”呢?


          質感雖然是一個相對抽象的詞,但是做出質感并沒有想象中的那么難,最重要的就是有耐心多做一些層次,如下圖,不管是以文字或者圖像為主形象的效果,都是因為考慮了字體變形、字體結構、投影、高光、色塊對比等細節,才會讓整體的效果給人一種很有質感的感覺。


          *設計技法的提升是一個很漫長的過程,比較注重于直覺和感性的認知能力的培養,要多觀察、多嘗試,要相信自己總會有成功的那一天的。



          如果你會3D類型的軟件那就太好了,因為3D類型的工具最終呈現的畫面本身就帶有空間關系并且由于可以渲染不同種類質感的材質,畫面天生帶有一種質感,比如下面這兩張圖如果單單地鋪上一個大色塊點綴一些圖形元素和3D類型的作品對比來看,質感還是差一截子。左側是質感相對較弱的落地頁,右側是質感較好的落地頁,如果你是用戶的話,你會點擊哪個?又會向下劃動查看哪個呢?


          并且現在的移動端設備的性能都有提升,并且5g的技術也在市場中出現,以前的3D場景加載卡頓的問題也逐漸在消失,我們不妨事先在運營活動中多加入一些3D的效果,來博取用戶眼球。


          就目前來看視覺觀感偏向越來越立體化,而不是簡單的平視扁平效果,以下這種成系列的設計稿,是深受用戶所喜歡的,并且成系列的設計稿,也很容易讓用戶產生記憶點,是一個我非常推薦的做法。



          2.3 多種風格的探索

          為什么要做多種風格的運營設計呢?從設計美學的角度上來講,用戶的審美性質在發生變化,由過去“專注式”的審美在強大的信息流影響下變成娛樂式的“快餐式”審美,所以做多種風格這是適應市場趨勢的必然結果。


          每個企業的目標并不是為了用戶設計出更好的視覺作品,企業的目的是在于用“創意”快速吸引用戶眼球。有點兒像是鉛筆和鋼筆的關系,不是為了最好的鉛筆而是鋼筆,而是為了設計出可以代替鉛筆的鋼筆。


          例如下圖中的描邊MBE風格、孟菲斯、噪點插畫、復古等風格都可以運營到設計中。


          今年大火的酸性設計(最早出現在西方60年代迷幻搖滾(Aicd Rock)文化中)是一種打破傳統美感的設計,暗調的背景和鐳射材質的素材搭配鏤空的字體設計,在視覺感受上制造出一種迷幻絢爛的氛圍,特別適合用在一些需要體現“潮流、新銳、個性”的視覺設計中。文章結尾我也給大家準備了素材,需要的去獲取吧。



          2.4 有故事性活動延展

          大多數用戶都喜歡聽故事,在故事中包裝自己的產品,告訴用戶可獲得什么好處的這種方法也是提高運營活動的數據的一種好辦法。


          這種形式早在2017年的offo就有用過,當時ofof的產品有借助于《神偷奶爸3》中小黃人的形象,設計了一系列新的自行車造型,以一系列報紙的形式設計,以小黃人車潛入車間為主要故事,了解 OFO小黃人版是如何造出來的,某種程度上說很好地宣傳了 OFO。


          例如《德芙Dove x故宮》的H5項目中,用長卷的表現形式繪制了從清朝至現代的過年場景,意指“以前宮里人也吃德芙,現在將德芙的福氣傳到千家萬戶”,讓用戶眼前一亮的同時,也宣傳了企業產品。


          《當代清明上河圖》,快手品牌宣傳H5項目中,設計師將現代與古代結合,通過長圖繪制生活百態,用不同的故事來講述勵志故事和暖心故事,是故事性宣傳企業品牌的經典案例。



          2.5 活動ip的游戲化

          用戶對簡單的商品宣傳(運營活動)是沒有什么興趣的,但是如果把運營活動包裝成一個游戲,卻能俘獲用戶的芳心。很多企業正是抓出用戶的這個心理,在自己企業的ip形象上做足了功夫,阿里巴巴集團就是這樣一個典型的企業,只要是過節,ip形象總能參與其中發揮其最大的商業價值,是典型把ip形象加入運營活動游戲化的企業。


          每年支付寶都會有積攢5福的游戲,在2021年他們還升級了自己的ip形象,讓用戶體驗更加升級。ip形象的游戲化,未來也會成為一個趨勢,每年應該都會有吉祥物來送錢。




          三、構圖好就成功了一半

          畫面清晰、構圖合理應該是做運營設計的第一準則,尤其是大家都審美疲勞的今天,有一個好的構圖,可以起到事半功倍的效果。


          接下來我就介紹運營活動中常用的四種構圖方法,便于大家在工作中有規律有節奏地排版畫面上的圖形、文字、元素之間的關系。



          3.1 上下構圖法

          “上下的構圖法”是將布局分成上、下兩個部分,或使整個畫面元素呈上下分布的趨勢,主要信息(標題)常常融入圖片中,放在主空間成為主體,閱讀性文字放在次空間,這種構圖的特點是內容的沖擊力比較強。



          3.2 左右構圖法

          “左右構圖法”是占據圖片和文字的一部分,形成左右兩個獨立的空間,產生良好的閱讀體驗。很實用的一種構圖方式。這種構圖的特點所占圖幅較小,但要求文案的數量需要精簡,盡量不超過6個字。



          3.3 三分構圖法

          “三分構圖法”是將畫面中的內容三等分,并突出c位的信息,旁邊有裝飾元素圍繞增添畫面的氣氛,具有穩定性又可以避免使用中心構圖形成的呆板感。



          3.4 中心構圖法

          “中心構圖法”是把主體放置于畫面視覺中心,形成視覺焦點,再利用其他信息烘托與呼應主體。其特點是能夠突出重點信息,讓用戶一目了然。



          3.5 對角構圖法

          “中心構圖法”是指對畫面進行等值分割,并將所要表達的信息對角排列。這種構圖方式,會讓頁面顯得更靈活,有動勢,讓畫面有更多可能性。



          3.6 傾斜構圖法

          “傾斜構圖法”是版面整體或部分元素以傾斜的角度呈現在畫面上,能很好地營造出輕松、動感、刺激等氣氛感,一般游戲類活動也會比較常用。









          好的運營活動會為企業帶來可觀的短期收益這是眾多互聯網企業所認同的,也是每一個企業所需要的,以下是我對運營設計的一些經驗心法,希望對你有所幫助




          一、如何最大限度地規避返工風險

          對于設計者來說,最苦惱的是改稿,特別是那種做許多疊加質感光效的效果圖,改起來成本很高,改稿這件事對運營設計師來說可以說是最頭疼的事。


          針對這種返工改稿的情況,我個人認為問題多數出在“溝通”這個環節。在溝通環節中最要解決的核心問題就是要進行有效的溝通,如果需求方(運營經理)和設計師之間的溝通是無效的,改稿那是必然結果,下面是我對于“高效溝通”上的3點經驗。



          1.1 明確項目的目標

          身為設計師的你遇到一次兩次交付后要改稿的情況倒是沒有關系,有些協同的同事是初次合作,難免有些觀點不對齊的情況,這屬于正常的,但是經常遇到這種情況就要引起重視了。


          需要反思一下是不是自己對項目的目標沒有搞清楚,在做項目之前我建議直接讓需求方說出痛點,多問問目標用戶群體是誰?投放平臺和渠道是哪些?上線時間和排期?尺寸大小等問題,把目標明確下來。


          1.2 從抽象化到具象化

          人和人受到教育不同,理解能力是不同的,有的需求方上來就說了很多概念詞匯,比如我希望這次運營活動是高端、大氣、上檔次的,這很難讓設計師正確地理解。


          對于這種情況,我建議找一些可用的真實案例給到需求方,將抽象的概念具象化,事先搞清楚需求方心中的畫面是什么樣子的,特別是要明確設計風格、配色方案、背景元素、圖文板式結構等信息。



          1.3 提前弄清楚運營活動的要求

          關于版權的問題是有可能導致項目無法上線的,我之前的一個項目就因為C4D這款軟件侵權收到了一份律師函,需要將帶有3D效果的在線元素全部替換。


          因此在項目啟動前可與需求方確認有關字體版權、圖片版權、軟件使用權等問題,避免在效果圖出來后再去調整,耗費公司人力成本。



          1.4 除了溝通還應該設立審核環節

          這個并不屬于交流的范疇,但是我覺得他也是影響設計師反復改圖的重要原因之一,還是有必要說一下的。


          運營活動上線都是有明確時間節點的排期安排的,所以設計稿審核的環節要特別重視,尤其是大型的運營活動不要等到最后的環節再去審核,因為如果審核不通過有可能會重新做,所以在設計過程之中應多設立幾個審核環節,保持和需求方的想法是時時同步的,千萬不要等交付時間快到了再進行審核,到時候誰加班誰痛苦。詳細審核環節設置,大家可以參照下面的圖片:






          二、運營設計其實也可以增效

          “增效”這個詞近幾年火得不行,尤其是和老板說增效的事情,他會非常感興趣的。以下是我親身經歷的一個項目,也正是從這個時候開始,我開始思考團隊增效的事情。



          2.1 明白運營經理想要什么

          以前遇到一個運營活動落地頁的項目,需求方說;“我們不需要繪制復雜的插畫放在Banner里,簡單畫點喜慶的元素,把活動標題展現清楚就好了,設計同學也不需要花那么多時間來設計,你們能多久給到我呢??!?


          我相信有不少小伙伴曾經遇到過這個情況,通過以上案例,不難看出設計師想要的跟運營經理想要的并不一樣。大部分運營經理更在意的是文案的露出、能多快地交付;而大部分運營設計師更在意的是圖片美不美、炫不炫,整體的圖形表達最終給用戶的感覺是否和設計師所想的一致。



          2.2 增效的兩種方式

          在理解了運營經理他們所在意的事情之后,我發現針對有嚴格交付時間的運營項目而言,運營設計的增效是很有必要的。一般來說“增效”有兩種方式,一種是提高輸出效率,另外一種是降低人工成本。


          提高輸出效率:我知道在行業內,58集團自主研發的運營頁面設計平臺——斑馬智能物料設計審核平臺和靈動編輯器算是兩款增效的工具,這兩款工具為運營工作提供高效且高質量的輸出環境。


          降低人工成本:我相信大多數同學的公司是沒有這類平臺資源,不用擔心,沒有我們可以自己搭建簡略版的組件代替,比如公司里有些運營活動要跟上新聞熱點,如果我們事先做好3-5個尺寸一致的模版套件,當新聞熱點來的時候只需要插入圖片更新標題就可以先推送出去,這種做法會極大地降低設計師的制作成本。


          再比如組內成員可以利用平時的工作時間做一些通用的組件如紅包、優惠券等,在要求快速完成運營活動的時候,可以挑選風格合適的樣式替換。





          三、做好運營需要了解用戶心理

          縱觀市場,會發現大部分設計師都是作圖高手,那些能夠在前期參與策劃運營活動,幫助運營經理想一些更有趣好玩兒的idea的人才是鳳毛麟角的。



          3.1 需要有正向、反向思考角度

          記得看過一次求職類節目,一位求職者推銷頸椎治療儀的案例讓我印象深刻。因為他的推銷過程很精彩,他用了兩種方法去推銷產品。


          第一種思路:介紹產品的優點,表示你買了我們的頸椎儀脖子的酸痛問題會得到緩解。

          第二種思路:如果你不買我們的頸椎儀,你很有可能因為頸椎不舒服而失去良好的睡眠質量。


          當然那個應聘者也得到了心儀的企業offer,那時候我就覺得這位應聘者很聰明,聰明的點在于對猶豫不決、不想買的用戶都設計了自己的對策。


          對猶豫不決的用戶來說,通過正向介紹產品優勢,從而獲取用戶青睞;對于不想買的用戶則利用反向思維講述這個產品會和你睡眠質量有關系。


          設計師是一個很重視用戶同理心的一個職業,當我們越是了解用戶的想法,就會知道用戶最需要什么,做的設計也就能更好地貼合用戶需求,最終完成提高運營活動的數據的運營目標。



          3.2 觸發點擊行為和用戶心理有關系

          2009年,斯坦福大學行為科學教授福格(Fogg)提出了一種人體行為模型,簡稱為 FBM。根據這一模型,他提出促使一個人的行為的發生離不開三個因素:行為動機(Motivation),行為能力(Ability)和觸發條件(Triggers),用公式表達就是B=MAT。用戶行為的產生需要動機、能力、觸發等有機結合,通過對動機、能力、觸發等干預可以影響使用者的行為。


          引發用戶點擊行為,本就是運營設計師必須要做的事情,但是觸發用戶點擊這個行為就要洞察到用戶心理所想。這里我推薦《飛書官方-認知偏差知識手冊》,大家可以從這本書里面了解一些用戶基礎的心理學知識。


          這里我還想補充一點,設計師為什么要學習心理學。如果有人問你設計是什么,很多人都會回答設計就是解決問題,這是一個很標準的答案。在我看來,設計解決兩個問題,第一個就是實現,把以前沒有的東西做出來,第二個就是推廣,把已有的東西賣出去讓更多人知道。很明顯運營屬于第二種。


          但是需要大家注意的是主語,上一句話的主語是“設計”而不是“設計師”。設計師更像是一個翻譯官的角色,其本質在于精準地表達,設計師利用擅長的圖形、色塊等元素給用戶傳遞信息,比如說格式塔原理就在于能幫助設計師,清晰地規劃出用戶先看到什么,提早預測出用戶看到這張圖會產生什么感受,做到可以通過設計技巧,讓用戶感受到設計師想傳遞的信息和感受,這就是我們要學習心理學的原因——為了更科學地了解用戶使用習慣(如格式塔原則可以科學地構建效果圖的閱讀順序),做貼合用戶需要的設計,讓用戶滿意,從而完成盈收的運營目標。總結一句話,運營設計師不僅要詢問用戶想要什么,更要詢問運營經理想表達什么。



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

          文章來源:站酷 作者:斜杠7濕兄
          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

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

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




          最新安卓規范入門解析

          濤濤

          零基礎 UI 入門六:最新安卓規范入門解析

          零基礎 UI 入門六:最新安卓規范入門解析


          安卓英文名是 Android,它是系統級源碼的總稱,而谷歌官方為這套系統提供的設計規范,叫做 Material Design (下稱 MD),我們了解官方的設計規范,即了解 Material Design 的過程。

          目前,Material Design 已經更新到第 3 代,與 Andoirid 12 代共同發布,它的設計進行了大量的更新和調整,雖然我寫作的時候這代 MD 設計還沒有正式上線,但下文也將以該版本做說明。

          零基礎 UI 入門六:最新安卓規范入門解析

          建議學習前先下載安卓官方的組件文件(MD2 版本,以后會更新的)和對應字體,可以通過下方官方鏈接獲取。也可以在這個網址中用網頁翻譯查看官方的規范介紹。

          零基礎 UI 入門六:最新安卓規范入門解析

          1. 安卓布局規范

          安卓和 iOS 類似,也包含狀態欄、頭部標題、底部導航欄以及 …… 底部指示器,我們簡單對它們做個介紹。

          首先,頂部狀態欄在 MD2 中,是有背景色的,而在 MD3 則改成了和 iOS 一樣的透明背景。它的高是 52dp(安卓的單位,和 PT 就名字的差別),使用方式和 iOS 狀態欄基本一致。

          零基礎 UI 入門六:最新安卓規范入門解析

          頂部標題欄上,MD 提供了 4 種模式,依次為 center-aligned, small, medium, large,在實際界面中可以根據自己的需要選擇。

          零基礎 UI 入門六:最新安卓規范入門解析

          在 MD3 中,基本取消了安卓過去在頂部放導航的 “優良傳統”,所以原先 MD2 中的 Bottom navigation 改名成 Navigation bar,不過我們依然可以用中文稱呼它為底部導航欄。

          它和 iOS 底部導航類似,提供了 3-5 個選項的不同版本,可以根據自己的需要選擇。并且使用底部指示器的過程中,需要將導航底部延長,覆蓋底部指示器的高 28dp。

          零基礎 UI 入門六:最新安卓規范入門解析

          零基礎 UI 入門六:最新安卓規范入門解析

          在 MD3 中,官方默認使用的畫布是 412*892,左右頁邊距默認為 24。所以如果我們要創建一個以 MD3 規范為標準的頁面,就可以通過置入所需的官方元素完成基礎布局,進行后續設計。

          零基礎 UI 入門六:最新安卓規范入門解析

          至于其它的官方組件,可以在源文件和官方的規范文檔中查看,就不在這里展開了。

          2. 安卓規范細節

          MD3 和 MD2 看起來完全像 2 套規范,原因就在于細節層面變化太大。MD3 一改以往直男的設計風格和配色,搖身一變成年輕人喜聞樂見的網紅風……

          零基礎 UI 入門六:最新安卓規范入門解析

          而相比起來,顏色填充的邏輯比色彩風格的變化更大。在安卓 12 中,提供了用戶自定義系統色彩風格,和色彩根據場景自動化生成和填充的強大特性……

          零基礎 UI 入門六:最新安卓規范入門解析

          這套規范異常的復雜,這是一個針對 MD3 色彩配置的萬字干貨才能講清楚的特性,我只在這邊做一些最基本的講解。

          首先就是 MD3 中,也強調了色彩的角色:

          • 主色 Primary Key Color
          • 二級主色 Secondary Key Color
          • 三級主色 Tertiary Key Color
          • 中性色 Neutral Color
          • 錯誤色 Error Color

          只要這些角色的色值被確定,系統就會自動幫助我們生成不同的明度等級,并應用在不同的場景,比如下方左側是我們設置的角色色值,右側是系統會自動生成的關聯色彩。

          零基礎 UI 入門六:最新安卓規范入門解析

          下面是色彩應用的示例:

          零基礎 UI 入門六:最新安卓規范入門解析

          零基礎 UI 入門六:最新安卓規范入門解析

          零基礎 UI 入門六:最新安卓規范入門解析

          這些角色的具體色值,可是是我們作為 APP 開發方定義的,也可以完全交給客戶端自動生成(獨立設置或背景生成)。

          所以當我們使用 MD3 規范做設計的時候,就要借助官方的插件來完成角色色值的生成。感興趣的同學可以在 Figma 官方社區搜索 Material Theme Builder 插件,并根據下方介紹了解它的使用方法。

          零基礎 UI 入門六:最新安卓規范入門解析

          除色彩外,MD3 使用了更多、更大的圓角,讓界面元素變得更圓潤。圓角使用 4 的倍數,根據元素尺寸分別應用了 4、8、12、16、28 等圓角。

          零基礎 UI 入門六:最新安卓規范入門解析

          在使用了圓角的同時,還棄用了 MD2 中核心材質 —— 投影(我忍它很久了)。讓元素之間通過色彩的對比來實現分隔,而不是應用一大堆厚重的投影來突出元素。

          零基礎 UI 入門六:最新安卓規范入門解析

          除此之外,MD3 中篇幅最多的還包括設備適配有關的規范,就不在這邊介紹,留到后面的分享中講解。

          如果是面向國內市場的 UI 設計師,針對 MD3 只需要停留在了解的層面就行,在真實的工作環境里基本沒有應用場景。

          3. 國產安卓設計現狀

          為什么我們作為 UI 設計師可以對 MD3 停留在了解的層面,而不是真實的實踐?

          因為面向國內市場的安卓界面設計,基本不遵守谷歌官方的設計規范!這里面包含了非常多復雜的歷史問題,有谷歌自己規范做的不清不楚(對比 iOS)的關系,也有每個廠商各自為戰推出自己的設計系統的原因。

          零基礎 UI 入門六:最新安卓規范入門解析

          更底層的因素,是谷歌系統在國外才能獲取完整的體驗,沒有進入國內(被墻),缺乏了廠商去支持和適配它的基本動力。同時在商業層面上,如果我們每設計一個 APP,iOS 和 Andorid 使用各自的規范,會對產品規劃、設計、開發和測試都造成非常大的壓力,是一般公司完全承受不起的。

          再者,國內的安卓項目,多數是在完成 iOS 端的設計后,安卓工程師直接參照該設計稿適配到安卓端中。只有少數安卓特定的需求需要為其設計獨立的頁面。

          零基礎 UI 入門六:最新安卓規范入門解析

          所以常規情況下,我們只需要提供標準的 iOS 界面即可。只有在產品經理提供的特殊需求和頁面,要根據它輸出安卓尺寸的對應界面,但設計風格、元素依舊可以保持 iOS 版本的樣式。

          要提升對安卓官方系統的理解,就一定要在你們的安卓手機上刷原生的系統,同時安裝 Google 三件套,否則你們體驗的就只有魔改版 iOS。

          零基礎 UI 入門六:最新安卓規范入門解析

          今天的分享到這里結束!仔細研究了下 MD3 的新增規范花了不少的精力,個人意見,MD3 實在是非常難做出能讓我們滿意的設計……

          文章來源:優設   作者:酸梅干超人

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

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

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




          《如何定義APP視覺品牌》——設計流程與操作方法淺析

          鶴鶴


          概念簡述 

           

           

          視覺品牌這一概念,既陌生又熟悉。大部分ui設計師都或多或少做過視覺改版或者風格升級,先來看兩個概念:視覺風格&視覺品牌。

           

          ▲視覺風格&視覺品牌重點偏向

           

          風格是藝術概念,是在整體上呈現的有代表性的一種面貌。風格能反映時代、思想、審美等特性。也是設計師對審美獨特鮮明的理解。那么視覺品牌呢?它除了要體現產品本身特性,融入產品希望傳達的感受,也要思考什么對用戶有意義。研究視覺品牌,就是探索如何通過設計維護用戶對于產品的好感度 ,通過有共鳴的設計傳遞正能量,讓產品獲得最大的認同。簡單來說:視覺風格重點是設計師對審美的傳達;視覺品牌則是通過挖掘產品有價值的特點,創造有共鳴的視覺去打動用戶,助力產品。

          ▲視覺品牌作用

           

          了解完視覺品牌的概念,我們簡單聊下它的作用。視覺品牌最大作用是建立用戶和產品的關系。vivo互聯網單個產品的視覺品牌也受vivo母品牌影響,不同業務被滲透的程度不同。比如vivo品牌對vivo官網,vivo商城影響比較大,但是對瀏覽器,i視頻,短視頻的影響就比較小。


          流程

           

           

          那么,如何定義好產品的視覺品牌?借企業文化里的一句話:做正確的事,并把事情做正確。在設計工作中,這句話也有一定的指導意義,我們先要確定是否要做視覺品牌,再用合理的流程規劃好每一步。

           

          結合過往的業務經驗來看,對于已有視覺風格的產品來說,需要滿足以下兩個情況之一才是最適合做視覺品牌工作的時候:1、產品轉型、重大業務調整(包括用戶人群、需求變化等);2、與相關行業設計語言水準差距巨大。另外需要考慮的還有時間安排,由于整個流程耗時需要大約12周(3個月),所以設計師前期就要做好時間規劃。

           

          確定要做視覺品牌工作后,需要準備哪些資料?項目環節和流程如何?讓我們來看下這12周需要做的事情和基本順序:

          ▲視覺品牌的流程

           

          我們接下來會重點介紹流程中關鍵的8個步驟(圖標標藍色的step1~8):1、品牌定位資料熟悉 2、明確視覺品牌關鍵詞 3、關鍵詞發散和可視化 4、提取元素建立視覺符號 5、完善主要頁面 6、驗證視覺風格喜好 7、完成所有頁面的視覺效果 8、整理成視覺品牌規范手冊。

           

          1 、品牌定位資料熟悉

          大部分項目的產品,運營和用研角色會提前做一些品牌定位的工作(品牌屋),品牌屋有助于我們對產品各方面進行解讀。這類資料一般我們都可以獲得,設計師可以從中了解到目前我們產品全面信息,包括:產品形象、調性、核心價值觀等。我們需要的關鍵信息:產品關鍵詞就可以從中找到。如果品牌屋資料不夠明確或者設計師對確定的詞匯抱有疑問,我們還可以通過工作坊形式,邀請項目核心成員進行腦暴會議,討論出合適的詞語。

          ▲案例:vivo瀏覽器品牌屋

           

          圖中為瀏覽器品牌屋資料案例,經過項目成員討論,瀏覽器產品最終關鍵詞:智慧、有趣、默契、可靠、年輕。

           

          2、 明確視覺品牌關鍵詞

          然后,從產品關鍵詞里,我們需要選出符合產品定位又能達到受眾心理預期的視覺品牌關鍵詞,聚焦產品的視覺調性。視覺關鍵詞一般有2~5個,需要視覺專業團隊、項目相關人員、核心用戶一起來挑選,用戶的選擇可以放在問卷里進行,通過快速測試了解用戶對產品的視覺感受和期待。如果確定的視覺品牌關鍵詞比較多,可以適當確立1~2個核心視覺詞匯,便于聚焦后期的風格指導。

          ▲明確視覺品牌關鍵詞

           

          選擇標準有兩條:1、延展性高,有一定視覺可視化潛力:詞匯要抽象化,不能過于具體,一般都是描述情緒,氣氛,氛圍或者感受之類的。2、貼合公司品牌文化:追求樂趣、充滿活力、專業音質、極致影像、愉悅體驗、敢于追求極致、持續創造驚喜。

           

          3、 關鍵詞發散和可視化

          發散

          視覺品牌關鍵詞選定后,在繪制可視化的情緒版之前,還差一步,就是針對選出來的詞進行發散。做這一步的目的是希望設計師的思維能夠盡可能打開,收獲更大范圍的靈感和思考。我們通過三層映射方式,分別對2~5個視覺品牌關鍵詞進行發散收獲大量衍生詞。(圖中以詞語“友好”為案例,分別進行物化、心境、視覺映射出大量衍生詞語。)

          ▲三層映射案例:詞語友好

           

          在大量衍生詞里,我們還要經過一輪討論篩選,去掉不合適的詞語。主要看衍生詞和我們的視覺關鍵詞的關聯度是否足夠高,以及是否適合用視覺語言表達等。

           

          如果項目沒有做品牌相關的工作,沒有產品關鍵詞,那我們前3步驟怎么辦?遇到這種情況,我們要怎么深入下去?當然,你可以嘗試推進項目去做一下品牌屋,這對各個角色在產品認知上有很大的幫助。其實還有一個工具方法能夠幫助我們較好的完成各類關鍵詞提取。(Design O to O 主要是察覺用戶情感化的一個工具,工具里得出該類別情感相關詞匯和我們想要得出的視覺品牌關鍵詞概念非常接近,所以推薦作為遇到這類情況的解決方法。)

          ▲Design OtoO方法 

           

          這套工具方法的核心步驟分別是:收集,組織,反應,評估。每一步都有一些工具模型可以套用,能夠較準的幫助大家達到目標,找出合適的關鍵詞。

           

          可視化

          前面我們得出篩選后的衍生詞,是為了之后可以做出更全面、精準的可視化情緒版。很多設計師在情緒版制作上比較隨意,這里也給大家一些我們團隊常用來搭建情緒版的方式。一般我們將收集的圖片依照3個維度(人物、場景、物體)進行歸納整理,這樣共性的東西更容易被發現。當然,拼貼整理的方式很多種,也包括常見的任意拼貼、參考式拼貼和精致化拼貼。大家可以多試一些平時不怎么用的維度進行拼接,也許會帶來不一樣的靈感。

          ▲情緒板拼貼常用方法

           

          4、 提取元素建立視覺符號

          每個情緒版帶來的設計靈感都不相同,所以最終會有多個視覺符號方案。第四個step就是來解說如何從單個的情緒版里提取視覺符號的特征。

          ▲組成視覺語言最基本的五個維度

           

          “形色字構質”是組成視覺語言最基本的五個維度,當你描繪一個東西的樣子時,你通常會從這五個維度去闡述。所以,我們也從5個維度來提取視覺符號的特征。需要注意:五個維度不一定需要全部進行提煉,有時候遇到前期已經確定的就可以直接拿來用,也有的不涉及的,比如字體可能在部分圖標里沒有出現也就不需要提煉。讓我們來對色彩、圖形、字體、質感、構成這5個維度來細細展開:

           

          (1) 色彩

          ▲快捷工具Dopelycolor對圖片進行色彩分析

           

          色彩提取常規是可以從情緒版里找出的,最簡單的辦法就是找出占比高的色彩并判斷選擇。這里分享一個快捷工具Dopelycolor ,能快速讓你提取圖片中顏色,以及占比,讓你清晰的了解圖片用色情況。

          ▲提煉色彩需要重要關注4點

           

          需要注意的有以下幾點:1、已有的品牌色是否要延續使用 2、選中顏色需要后期調整三元素,達到最好的視覺效果  3、如果有輔色,主輔色多結合色環考慮合理性 4、你選的顏色是不是和市面競品太過雷同,是否要做點差異化?

           

          (2) 圖形

          對于我們大多數產品目前現狀,符號基礎圖形是不宜變動的。大環境也是如此,例如很大一部分視頻類應用圖標都圍繞播放三角展開。因為變化會引起用戶新的理解,可能會帶來識別和理解的成本,所以項目設計師在方案的設計階段,會多做幾個保守的常用圖形相關方案。

           

          另外,在沒有基礎圖形的產品品牌中,通常需要通過腦暴會去討論出適合產品的符號基礎形態。例如vivo積分商城在視覺品牌探索階段,組織腦暴會議,邀請項目中各個關鍵角色一起來發散討論適合積分產品的貨幣符號圖形(這也是積分定義的視覺品牌符號)

          ▲vivo積分商城貨幣符號發散腦暴會現場

           

          基礎圖形獲取方法介紹完了后,圖形的藝術表達,也就是圖形設計是需要我們通過情緒版或者常用創意手法來捕捉的。通過情緒版,我們可以提取出零碎的一些特征,這些通過觀察就可以提取了。比如下面這張情緒版圖上能得出的共性圖形特征有:描邊圖形、線面結合等。另一張能看出的有:大圓角、簡單幾何、Q型。

          ▲情緒板圖片提取共性特征

           

          特征好提取,但是如何去用于輸出我們的視覺品牌符號,這塊就依賴各位設計師的設計表達了。到這一步,建議參與的設計師們進行視覺比稿。比稿的設計師們可以看一看常用的6種創意設計手法,這些創意手法都是較常見的,在設計中協助我們創意的迸發。

          ▲6種常見圖形創意手法

           

          (3) 文字

          嚴格意義上,符號里的文字也是圖形的一種。不過,針對用文字來做的符號,可以參考字體創意設計的10個方法。這里不一一闡釋含義了,大家可以在網上找到更多每一類圖形的案例和應用解說。

          ▲10種常見字體創意設計方法

           

          (4) 質感

          如果要進行質感的提煉和確定,除了從情緒版里能夠找到一些共性的東西以外,也可以多在流行趨勢、設計網站材質圖形相關專題里,去嘗試獲取思路。在設計方案階段,可以多去嘗試不同的設計質感。

          ▲質感素材專題

           

          (5) 構成

          構成通常會用在版式,招貼之類的平面設計中。很多產品標志在構成上都很講究,圖標的內容和留白比例搭配合理,具備設計舒適感。我們在做符號設計時候,同樣要非常關注構成,好的構成會讓我們的符號更具魅力。常用的圖形構成有9種,我們在做圖形時候可以多去嘗試,也可以疊加嘗試,找到適合的構成樣式。

          ▲9大圖形構成

           

          案例

          回到視覺符號提煉的5大維度方法,我們來看下vivo瀏覽器是如何提煉視覺品牌符號的。由于不同設計師整理的情緒版,方案都不一樣,接下來來看瀏覽器視覺品牌探索眾多方案其中的一個例子。

          ▲視覺符號提煉的5大維度

           

          首先來看下瀏覽器目前一些背景設定,去除既定的情況,我們需要在這幾個方面找尋特征(輔色、圖形藝術、質感、構成),來完成我們的視覺符號。

           

          ▲vivo瀏覽器背景設定

           

          在這個方案中,設計師從情緒版提取了想要的特征(圖片中藍色文字):

          顏色:從情緒版提出占比較高的顏色,歸納成色組,在色環中逐一討論去留,去除對比強烈的黃色(因為瀏覽器作為工具類產品并不想傳達出刺激,沖突,過于活力的感受,故去除。)在鄰近色(青色、皮粉色)里考慮避開性別因素,青色更加適合。然后調整一下rgb,飽和度提高一些。

          圖形藝術:延續地球元素,情緒版提煉的:大圓角、簡單幾何、Q型,描邊圖形,線面結合。

          質感:瀏覽器在先前資料收集的時候就有傾向,考慮近兩年手機背面AG磨砂玻璃廣泛使用,界面上蘋果和微軟也整體設計轉向毛玻璃風格,關于這類品質感和空間感明顯的處理方式,瀏覽器設計師也想進行嘗試。

          構成:結合情緒版和圖形構成9個方法,提取并運用的主要特征是動勢,也是想賦予符號活力感受。

           

          最后,經過草稿比稿,評審通過的方案和確定的符號5個特征如下:

          ▲vivo瀏覽器符號的5個特征

           

          5、 完善主要頁面

          視覺品牌符號完成以后,接下來需要繼續繪制與符號強關聯的頁面。這些模塊有:loading、缺省、核心頁面、插畫插圖場景。不是把視覺品牌符號簡單的原封不動放在各個頁面里,而是通過一些設計手法將它更好的融入在頁面中。

           

          通常,核心頁面模塊的視覺呈現,都是基于已定的視覺品牌符號特征去發散。目前我們團隊有兩種不同的思路:一個是從先前符號里提取主要某個特征并結合場景做出版式布局的延展。類似我們做vi時候常用取logo的一部分進行圖形組合再創意。另一個是將已定符號的不同特征進行多個組合,創作出符合這些特征的衍生的新視覺。

           

          瀏覽器用的第二種方法,提取出的符號特征和定好繪制要求,其中為了保持整體風格的一致性,需要繪制的模塊特征應不少于一半目前特征(滿足1/2),如果有新增的特征需要保持和諧,不應該有其它明顯的風格傾向。這個也是用來檢查你做的系列衍生效果是否整體的標準。經常有同學做了一個很好看的缺省圖,但是風格特征與已定視覺符號風格相差甚遠,最后導致不能使用。

           

          下面是vivo瀏覽器視覺品牌符號延展的圖形或頁面樣式:

          ▲缺省圖樣式(6/8特征)

          ▲裝飾icon圖樣式(4/8特征)

          ▲特殊彈出層樣式(4/8特征)

          ▲視頻操作引導樣式(4/8特征)

          ▲應用在整體頁面效果

           

          看完瀏覽器的符號延展方法,再來感受下另一個方法:通過符號,延展多個版式視覺的案例——短視頻視覺品牌探索。項目設計師主要對視覺品牌符號圖形特征做了延展,局部提煉并創新版式。

           

          下圖是短視頻視覺品牌符號,基于此為基礎型,設計師根據總結的6種手法,用對稱、平移 等方式進行拓展,結合頁面實際情況完成。

          ▲短視頻品牌符號以及圖形應用解說

          ▲短視頻品牌符號頁面背景應用

          ▲ 物料拓展概念

           

          6、驗證視覺風格喜好

          完成主要頁面后,我們會進行風格測試,用來驗證不同的設計方案在用戶眼里的喜好程度,從而修正設計師的認知偏差。我們建議至少完成3個視覺品牌符號方案和對應3套頁面來供用戶測試。

           

          關于風格測試,是將已有的方案通過問卷和簡單的線下訪談,得出用戶的喜好結論。因為是敏捷測試,只需要一周就可以出結論。在這一步,有5條測試重點和對應解讀需要設計師關注,具體內容參考下圖:

          ▲5條測試重點與解讀

          目前vivo瀏覽器和i視頻都在視覺品牌升級時候,運用了這個較為敏捷的測試方法。

          ▲i視頻視覺品牌3套方案風格測試復盤

          ▲vivo瀏覽器視覺品牌升級核心頁面風格測試

           

          7、完成所有頁面的視覺效果

          經過用戶的驗證和后期修改,我們確定好了唯一的一套最合適的視覺品牌。在設計組內部評審+項目組核心成員評審效果通過后,接下來工作就是按部就班的去完成后續頁面的規劃和落地。這一環節的工作體量較大,需要花時間去梳理替換所有頁面。整體t替換預計耗時需要2周左右,建議多些成員參與完成。

           

          8、 整理成視覺品牌規范手冊

          最后一步也是最重要的一步,需要把視覺品牌的設計指導和規范進行沉淀。視覺品牌規范手冊是需要項目組設計師一起維護的。好的設計語言是第一步,維護和讓其發揮最大價值(原則、一致性、效率)是視覺品牌規范手冊的意義。

          ▲視覺品牌規范手冊4大模塊

           

          目前我們已經梳理出vivo瀏覽器、短視頻的視覺品牌規范手冊。內容包括4個部分:品牌概述、品牌符號、視覺語言、物料規范。對產品的視覺品牌理解和如何應用會完整的體現在手冊里,建議每一個參與項目設計師都應該在設計前先整體看一遍。

           

          結語

           

          視覺品牌的定義流程以及方法,是我們團隊資深ui設計師第三季度重點研究和探索的產物。希望能給正在做視覺品牌相關工作的設計師帶來一些幫助和啟發,如果有建議或者疑問,歡迎通過VMIC UED公眾號和我們交流,讓我們一起優化好這個視覺品牌定義體系,為用戶創造更好的視覺體驗。

           

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

          文章來源:站酷。 作者: vivo互聯網UED
          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

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

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

           

          應用程序設計中的色彩原則

          鶴鶴

          顏色會潛意識地為觀看者提供有關應用程序的大量信息,即使他們從未閱讀過任何文字。


          什么是色彩心理學?

          不同的顏色實際上可以對人類的情緒甚至行為產生深遠的影響。這是全球各城市許多綠色和藍色倡議者背后的想法:綠色和藍色使觀看者感到更加平靜和放松。

          綠色對減輕壓力(和其他因素)的影響如此深遠,以至于實際上可以幫助人們延長壽命。

          這對應用程序設計意味著什么?

          嗯,顏色的影響不僅僅是觀眾喜歡與否,還會影響他們的感受。例如,深淺不一的藍色會激發忠誠和可靠的感覺。綠色激發舒適和幸福。黃色與快樂和刺激有關。紅色讓人興奮并引發欲望。

          但是那些不一定是感覺的東西呢?人們是否也傾向于將某些價值觀與顏色聯系起來?

          這項調查要求人們選擇與某個詞相關的顏色。他們發現:

          • 信任 = 藍色(34% 的受訪者)

          • 速度 = 紅色 (76%)

          • 便宜或便宜 = 橙色 (26%) 和黃色 (22%)

          • 高品質 = 黑色 (43%)

          • 高科技 = 黑色 (26%)、藍色 (23%) 和灰色 (23%)

          • 可靠 = 藍色 (43%) 和黑色 (24%)

          • 樂趣 = 橙色 (28%) 和黃色 (26%)

          • 恐懼、恐怖 = 紅色 (41%) 和黑色 (38%)

          應用程序設計人員在開發應用程序時最好牢記這些關聯。然而,這些都不是應用程序開發人員絕對必須遵循的硬數據。相反,它們是開發人員可以遵循的指南,并結合下面討論的其他設計原則。


          圍繞顏色的文化差異


          在選擇顏色時,牢記應用程序的受眾始終是至關重要的。

          例如,在西方文化中,白色往往代表純潔或純真。然而,在亞洲的某些地區,白色是用來表示哀悼、厄運和死亡的。顯然,如果應用不當,這可能會產生嚴重的意外后果。

          為此,設計人員應該了解他們的受眾并相應地選擇顏色,這在日益全球化的社會中并非易事。


          選擇主調色板


          應用程序設計人員和公司等都應該在確定其品牌的主要調色板之前進行仔細研究。最重要的是考慮觀眾和他們想要傳達的內容。

          藍色是一種流行的顏色,因為它與信任和可靠性有關,但它也變得有點過度使用了。

          橙色可以與廉價聯系在一起,但也可以與樂趣聯系在一起。

          紅色可以令人興奮和振奮,但也代表恐懼。

          更好的使用顏色來設計應用將有助于塑造觀眾的感知。設計人員需要了解顏色關聯以及用戶如何下意識地查看設計以創建成功的調色板。


          色彩和諧


          一旦應用程序設計人員確定了主要顏色,就該選擇其他顏色了。使用一種顏色很簡單,通常不會很引人注目。

          但是,選擇的顏色需要很好地搭配。

          沖突的顏色會讓觀看者感到不安或有壓力。相反,應用程序設計者應該尋求創造一種賞心悅目的組合。一種會讓用戶感興趣并讓他們對應用程序感覺良好的應用程序,從而引導他們嘗試它。

          這里有一些設計師可以遵循的基本原則,以在他們的設計中創造和諧的色彩。


          單色

          首先是在整個設計中堅持使用相同的顏色,但使用不同的色調。這增加了產品的興趣但又不會很突兀。


          類似色

          另一個流行的選擇是使用類似的顏色。這種方案也很難搞砸,盡管設計人員確實需要了解每種顏色的飽和度。

          此方法可以使用色盤上彼此相鄰的顏色。例如,綠色和藍色,或橙色和紅色。


          互補色

          互補色方案使用調色板上彼此相反的顏色。例如,黃色和紫色或藍色和橙色。

          使用互補色時,設計師必須仔細選擇陰影和色調。如果做得不好,很容易創建一個視覺上不和諧的方案。

          但是,如果做得好,互補色可以使應用程序設計真正流行起來,并在眾多其他不那么吸引人的應用程序圖標中脫穎而出。這可以使用戶更有可能選擇該應用程序而不是其他類似功能的應用程序。


          分裂互補色


          這種方法有點復雜,但可以產生一些引人注目的結果。它采用三種顏色,一種顏色和兩種相鄰顏色的互補色。例如,從紫色開始,然后添加橙色和綠色。

          設計師必須小心使用這種方法,錯誤的組合會使設計從有趣變成突兀。


          正確的應用程序設計顏色

          總而言之,應用程序設計中的顏色世界非常復雜。沒有一種顏色會吸引所有觀眾,也不會適合所有品牌。然而,選擇正確的顏色絕對意味著一個成功的應用程序和一個普通的應用程序之間的區別。

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

          文章來源:站酷 作者:ZZiUP

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

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

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

          日歷

          鏈接

          個人資料

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

          存檔

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