首頁(yè)

設(shè)計(jì)思維中的十大黃金法則——良好原則在為功能設(shè)計(jì)系??統(tǒng)奠定堅(jiān)實(shí)基礎(chǔ)的過(guò)程中的重要性

資深UI設(shè)計(jì)者

如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請(qǐng)點(diǎn)這里

首先,在這10條原則之上,我只想說(shuō)對(duì)我來(lái)說(shuō)最有幫助的習(xí)慣是不斷嘗試將簡(jiǎn)單性放在我的選擇中,并且永遠(yuǎn)不要停止學(xué)習(xí)并發(fā)現(xiàn)最適合我的新想法。

但是現(xiàn)在這里是我設(shè)計(jì)思維中的十條黃金法則:

1)要謙虛

不要認(rèn)為自己是個(gè)天才。這是第一個(gè)要避免的大錯(cuò)誤。把你的自我放在一邊,讓你身邊的每個(gè)人都參與其中。聆聽(tīng)其他人的意見(jiàn),與您的意見(jiàn)進(jìn)行比較,并獲得新的和不同的解決方案。

2)相互信任和尊重

花點(diǎn)時(shí)間了解您正在與之合作的團(tuán)隊(duì)及其行為。請(qǐng)注意,整個(gè)團(tuán)隊(duì)為表格帶來(lái)了獨(dú)特的技能。這是建立良好工作關(guān)系并建立信任和尊重的堅(jiān)實(shí)基礎(chǔ)的良好開(kāi)端。這是推動(dòng)團(tuán)隊(duì)取得令人敬畏成果的最重要規(guī)則之一。

3)用戶先到先得

用同理心思考它是非常重要的。設(shè)計(jì)過(guò)程中的良好用戶體驗(yàn)使用戶能夠充分利用產(chǎn)品,提高客戶滿意度。重要的是要理解并牢記UX設(shè)計(jì)始終關(guān)注客戶的情緒以及如何吸引他們的注意力。因此,抓住執(zhí)行積極和令人印象深刻的UX設(shè)計(jì)體驗(yàn)的基本方面是至關(guān)重要的。此外,在開(kāi)始使用UI之前,構(gòu)建一個(gè)包含許多正確策略(如研究,信息架構(gòu),分析數(shù)據(jù)和可視化設(shè)計(jì))的良好UX基礎(chǔ)架構(gòu)總是更好。最終目標(biāo)應(yīng)始終是幫助人們享受愉快的用戶體驗(yàn)。

4)打破挑戰(zhàn)

通過(guò)許多小任務(wù),可以輕松分析和定義每個(gè)問(wèn)題的關(guān)鍵設(shè)計(jì)元素。這將有助于提出一種最有效且最可靠的設(shè)計(jì)解決方案。在您確切知道設(shè)計(jì)的外觀之前,切勿開(kāi)始設(shè)計(jì)。考慮到這一過(guò)程,最終設(shè)計(jì)始終非常接近原始想法。

5)心理清晰度和焦點(diǎn)。你知道你要去哪里嗎?

有時(shí)候喝一杯咖啡然后出去散散步是非常好的。在辦公桌后面停留太多并不總是很有效率。將注意力從復(fù)雜的環(huán)境中轉(zhuǎn)移到其他事物上是一種很好的做法,并試圖消除思路中的混亂。這是一個(gè)很好的練習(xí)時(shí)間,以獲得一些新鮮空氣,讓你的頭腦清醒。一個(gè)混亂的頭腦會(huì)對(duì)你的選擇產(chǎn)生負(fù)面影響,并會(huì)帶來(lái)糟糕的結(jié)果。

6)不斷重新考慮設(shè)計(jì)

重新考慮產(chǎn)品,功能和整個(gè)架構(gòu),這是產(chǎn)品設(shè)計(jì)中另一個(gè)重要的規(guī)則,以便創(chuàng)建一個(gè)表演產(chǎn)品。刪除已經(jīng)變得不必要的東西而不是總是添加到它(功能隨著時(shí)間的推移將創(chuàng)建更糟糕的用戶體驗(yàn))。在不斷重新評(píng)估的整個(gè)過(guò)程中,將更容易找出哪些領(lǐng)域需要更多的工作和什么不需要。

7)永遠(yuǎn)不要害怕丟棄設(shè)計(jì)思路和重構(gòu)新的解決方案

靈活的思維將有助于實(shí)現(xiàn)重構(gòu)和重新設(shè)計(jì)過(guò)程。在創(chuàng)建新產(chǎn)品的整個(gè)過(guò)程中,很容易遇到以前不存在的任務(wù)。通過(guò)牢記整體功能,重新考慮和重構(gòu)整個(gè)結(jié)構(gòu)(或其中很大一部分)是非常重要的。例如,每次向項(xiàng)目添加新任務(wù)時(shí)都應(yīng)該這樣做。通過(guò)這樣做,可以更容易地用一個(gè)更好的解決方案一次解決新舊問(wèn)題。因此,更改可以將想法轉(zhuǎn)化為可以創(chuàng)建更好,更簡(jiǎn)單的用戶體驗(yàn)的解決方案。

8)好的設(shè)計(jì)是自我解釋的

每個(gè)設(shè)計(jì)師都應(yīng)該記住,不需要解釋好的設(shè)計(jì)。有時(shí),最佳和更直觀的用戶體驗(yàn)具有簡(jiǎn)單的設(shè)計(jì)解決方案。用戶應(yīng)該本能地知道如何與產(chǎn)品進(jìn)行交互。因此,在推動(dòng)像素之前,必須牢記這一概念。如果一個(gè)設(shè)計(jì),即使是美麗的不是自我解釋,需要重構(gòu),考慮重新開(kāi)始一切。

9)要有創(chuàng)新精神

通常,第一種解決方案并不總是最好的解決方案。允許工作流中的空間發(fā)現(xiàn)并迭代您的設(shè)計(jì)。開(kāi)箱即用,讓自己遠(yuǎn)離舒適區(qū)。即使在第一眼看到它們也無(wú)法發(fā)展,創(chuàng)造顛覆性的體驗(yàn)。多個(gè)設(shè)計(jì)草圖可以相互迭代或合并,以創(chuàng)建最終解決方案,更好地實(shí)現(xiàn)項(xiàng)目的最終目標(biāo)。

10)少即是多

保持盡可能簡(jiǎn)單是最難應(yīng)用的行為模式,但一旦它被釘住,將更容易回頭沒(méi)有任何遺憾。聽(tīng)起來(lái)很簡(jiǎn)單,主要是與你自己的一致性和耐心。


結(jié)論

每個(gè)設(shè)計(jì)師都應(yīng)該擁有自己的一套黃金法則,以形成良好的產(chǎn)品設(shè)計(jì)基礎(chǔ)。這肯定有助于更好地處理決策并找到正確的總體方向。

總而言之,我想與大家分享我前一段時(shí)間遇到的一個(gè)非常有用的網(wǎng)頁(yè),我經(jīng)常檢查它,我覺(jué)得它非常好,鼓舞人心。有時(shí)讀這個(gè)頁(yè)面讓我的思緒充滿動(dòng)力。

這里是:

https://principles.design

感謝您閱讀本文,我希望它對(duì)您們中的某些人有任何幫助和靈感。

祝你有美好的一天!


藍(lán)藍(lán)設(shè)計(jì)www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì)  cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì)  包裝設(shè)計(jì) 、 圖標(biāo)定制  用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。

 

可能是最詳細(xì)的大屏數(shù)據(jù)可視化設(shè)計(jì)指南!

資深UI設(shè)計(jì)者

如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請(qǐng)點(diǎn)這里


文章目錄

  1. 基礎(chǔ)概念
  2. 大屏數(shù)據(jù)可視化設(shè)計(jì)原則
  3. 大屏可視化設(shè)計(jì)流程
  4. 大屏設(shè)計(jì)的注意事項(xiàng)
  5. Q&A
  6. 總結(jié)

基礎(chǔ)概念

1. 什么是數(shù)據(jù)可視化

把相對(duì)復(fù)雜、抽象的數(shù)據(jù)通過(guò)可視的方式以人們更易理解的形式展示出來(lái)的一系列手段叫做數(shù)據(jù)可視化,數(shù)據(jù)可視化是為了更形象地表達(dá)數(shù)據(jù)內(nèi)在的信息和規(guī)律,促進(jìn)數(shù)據(jù)信息的傳播和應(yīng)用。

在當(dāng)前新技術(shù)支持下,數(shù)據(jù)可視化除了「可視」,還有可交流、可互動(dòng)的特點(diǎn)。數(shù)據(jù)可視化的本質(zhì)是數(shù)據(jù)空間到圖形空間的映射,是抽象數(shù)據(jù)的具象表達(dá)。

△ 數(shù)據(jù)可視化作品《 launchit 》,作者:Shane Mielke

作者寫了本書(shū),地圖上顯示了世界各地讀者的分布情況及對(duì)應(yīng)人數(shù)。

△ 數(shù)據(jù)可視化作品《 world-drawn-by-travelers 》,作者:TripHappy

國(guó)家之間相互連通的旅游路線,顏色越相近的國(guó)家,表明兩個(gè)國(guó)家的人們互動(dòng)越頻繁。

2. 什么是大屏數(shù)據(jù)可視化

大屏數(shù)據(jù)可視化是以大屏為主要展示載體的數(shù)據(jù)可視化設(shè)計(jì)。

「大面積、炫酷動(dòng)效、豐富色彩」,大屏易在觀感上給人留下震撼印象,便于營(yíng)造某些獨(dú)特氛圍、打造儀式感。電商雙11時(shí)大屏利用此特點(diǎn)打造了熱烈、狂歡的節(jié)日氛圍,原本看不見(jiàn)的數(shù)據(jù)可視化后,便能調(diào)動(dòng)人的情緒、引發(fā)人的共鳴,傳遞企業(yè)文化和價(jià)值。

利用面積大、可展示信息多的特點(diǎn),通過(guò)關(guān)鍵信息大屏共享的方式可方便團(tuán)隊(duì)討論和決策,故大屏也常用來(lái)做數(shù)據(jù)分析監(jiān)測(cè)使用。大屏數(shù)據(jù)可視化目前主要有信息展示、數(shù)據(jù)分析及監(jiān)控預(yù)警三大類。

數(shù)據(jù)分析類:

△ 圖片來(lái)源:必應(yīng),圖片作者:帆軟軟件有限公司

大屏數(shù)據(jù)可視化設(shè)計(jì)原則

大屏數(shù)據(jù)可視化設(shè)計(jì)原則:設(shè)計(jì)服務(wù)需求、先總覽后細(xì)節(jié)。

1. 設(shè)計(jì)服務(wù)需求

大屏設(shè)計(jì)要避免為了展示而展示,排版布局、圖表選用等應(yīng)服務(wù)于業(yè)務(wù),所以大屏設(shè)計(jì)是在充分了解業(yè)務(wù)需求的基礎(chǔ)上進(jìn)行的。那什么是業(yè)務(wù)需求呢?業(yè)務(wù)需求就是要解決的問(wèn)題或達(dá)成的目標(biāo)。設(shè)計(jì)師通過(guò)設(shè)計(jì)的手段幫助相關(guān)人員達(dá)成這個(gè)目標(biāo),是大屏數(shù)據(jù)可視化的價(jià)值所在。

2. 先總覽后細(xì)節(jié)

大屏因?yàn)榇?,承載數(shù)據(jù)多,為了避免觀者迷失,大屏信息呈現(xiàn)要有焦點(diǎn)、有主次??梢酝ㄟ^(guò)對(duì)比,先把核心數(shù)據(jù)拋給用戶,待用戶理解大屏主要內(nèi)容與展示邏輯后,再逐級(jí)瀏覽二三級(jí)內(nèi)容。部分細(xì)節(jié)數(shù)據(jù)可暫時(shí)隱藏,用戶需要時(shí)可通過(guò)鼠標(biāo)點(diǎn)擊等交互方式喚起。

大屏可視化設(shè)計(jì)流程

規(guī)范的流程是好結(jié)果的保證。找到一個(gè)可參考的流程,然后步步為營(yíng),就能避免很多不必要的返工,保證設(shè)計(jì)質(zhì)量和項(xiàng)目進(jìn)度。

1. 根據(jù)業(yè)務(wù)場(chǎng)景抽取關(guān)鍵指標(biāo)

關(guān)鍵指標(biāo)是一些概括性詞語(yǔ),是對(duì)一組或者一系列數(shù)據(jù)的統(tǒng)稱。一般情況下,一個(gè)指標(biāo)在大屏上獨(dú)占一塊區(qū)域,所以通過(guò)關(guān)鍵指標(biāo)定義,我們就知道大屏上大概會(huì)顯示哪些內(nèi)容以及大屏?xí)环譃閹讐K。以共享單車電子圍欄監(jiān)控系統(tǒng)為例,這里的關(guān)鍵指標(biāo)有:企業(yè)停車時(shí)長(zhǎng)、企業(yè)違停量、熱點(diǎn)違停區(qū)域、車輛入欄率等。

確定關(guān)鍵指標(biāo)后,根據(jù)業(yè)務(wù)需求擬定各個(gè)指標(biāo)展示的優(yōu)先級(jí)(主、次、輔)。

2. 確立指標(biāo)分析維度

「橫看成嶺側(cè)成峰」。同一個(gè)指標(biāo)的數(shù)據(jù),從不同維度分析就有不同結(jié)果。很多小伙伴做完可視化設(shè)計(jì),發(fā)現(xiàn)可視化圖形并沒(méi)有準(zhǔn)確表達(dá)自己的意圖,也沒(méi)能向觀者傳達(dá)出應(yīng)有的信息,可視化圖形讓人困惑或看不懂。出現(xiàn)這種情況很大程度就是因?yàn)榉治龅木S度沒(méi)有找準(zhǔn)或定義的比較混亂。

上圖向大家展示了數(shù)據(jù)分析常用的4個(gè)維度,我們?cè)谶x定指標(biāo)后,就需要跟項(xiàng)目組其他小伙伴討論:我們的各個(gè)指標(biāo)主要想給大家展示什么,更進(jìn)一步的講,是我們想通過(guò)可視化表達(dá)什么樣的規(guī)律和信息。而上圖,可以引導(dǎo)我們從「聯(lián)系、分布、比較、構(gòu)成」四個(gè)維度更有邏輯的思考這個(gè)問(wèn)題。

  • 聯(lián)系:數(shù)據(jù)之間的相關(guān)性。
  • 分布:指標(biāo)里的數(shù)據(jù)主要集中在什么范圍、表現(xiàn)出怎樣的規(guī)律。
  • 比較:數(shù)據(jù)之間存在何種差異、差異主要體現(xiàn)在哪些方面。
  • 構(gòu)成:指標(biāo)里的數(shù)據(jù)都由哪幾部分組成、每部分占比如何。

當(dāng)然,上圖例舉的示例圖表都比較傳統(tǒng),在大屏數(shù)據(jù)可視化中常還有另一類地理信息(常以2/3D地圖、地球呈現(xiàn))出現(xiàn)。上圖雖未包含這類圖形,但它提供給我們的確定數(shù)據(jù)分析維度的思路和方法是相通的,可借鑒。

3. 選定可視化圖表類型

當(dāng)確定好分析維度后,事實(shí)上我們所能選用的圖表類型也就基本確定了。接下來(lái)我們只需要從少數(shù)幾個(gè)圖表里篩選出最能體現(xiàn)我們?cè)O(shè)計(jì)意圖的那個(gè)就好了。

選定圖表注意事項(xiàng):易理解、可實(shí)現(xiàn)。

易理解

可視化設(shè)計(jì)要考慮大屏最終用戶,可視化結(jié)果應(yīng)該是一看就懂,不需要思考和過(guò)度理解,因而選定圖表時(shí)要理性,避免為了視覺(jué)上的效果而選擇一些對(duì)用戶不太友好的圖形。

可實(shí)現(xiàn)

我們需要了解現(xiàn)有數(shù)據(jù)的信息、規(guī)模、特征、聯(lián)系等,然后評(píng)估數(shù)據(jù)是否能夠支撐相應(yīng)的可視化表現(xiàn)。

我們?cè)O(shè)計(jì)的圖形圖表,要開(kāi)發(fā)能夠?qū)崿F(xiàn)。實(shí)際工作中,一些可視化效果開(kāi)發(fā)用代碼寫很容易實(shí)現(xiàn),效果也不錯(cuò),但這些效果設(shè)計(jì)師用 Ps / Ai / Ae 這些工具模擬時(shí)會(huì)發(fā)現(xiàn)比較困難;同樣的,某些效果設(shè)計(jì)師用設(shè)計(jì)工具可以輕易實(shí)現(xiàn),但開(kāi)發(fā)要用代碼落地卻非常困難,所以大屏設(shè)計(jì)中跟開(kāi)發(fā)常溝通非常重要,我們需要明確哪些地方設(shè)計(jì)師可以盡情發(fā)揮,哪些地方需要謹(jǐn)慎設(shè)計(jì)。一個(gè)項(xiàng)目總有周期與預(yù)算限制,不會(huì)無(wú)限期的修改迭代,所以設(shè)計(jì)師在這里需要抓住重點(diǎn),有取舍,不鉆牛角尖、不死磕不放。

4. 了解物理大屏,確定設(shè)計(jì)稿尺寸

多數(shù)情況下設(shè)計(jì)稿分辨率即被投大屏的信號(hào)源電腦屏幕的分辨率。有多個(gè)信號(hào)源時(shí),就會(huì)有多個(gè)設(shè)計(jì)稿,此時(shí)每個(gè)設(shè)計(jì)稿的尺寸即對(duì)應(yīng)信號(hào)源電腦屏幕的分辨率。

一般情況下設(shè)計(jì)稿的分辨率就是電腦的分辨率,當(dāng)有多個(gè)信號(hào)源時(shí),有時(shí)會(huì)通過(guò)顯卡自定義電腦屏幕分辨率,從而使電腦顯示分辨率不等于其物理分辨率,此時(shí),對(duì)應(yīng)設(shè)計(jì)稿的分辨率也就變成了設(shè)置后的分辨率。此外,當(dāng)被投電腦分辨率長(zhǎng)寬比與大屏物理長(zhǎng)寬比不一致時(shí)(單信號(hào)源),也會(huì)對(duì)被投電腦屏幕分辨率做自定義調(diào)整,這種情況設(shè)計(jì)稿分辨率也會(huì)發(fā)生變化。所以設(shè)計(jì)開(kāi)始前了解物理大屏長(zhǎng)寬比很重要。

5. 頁(yè)面布局、劃分

尺寸確立后,接下來(lái)要對(duì)設(shè)計(jì)稿進(jìn)行布局和頁(yè)面的劃分。這里的劃分,主要根據(jù)我們之前定好的業(yè)務(wù)指標(biāo)進(jìn)行,核心業(yè)務(wù)指標(biāo)安排在中間位置、占較大面積;其余的指標(biāo)按優(yōu)先級(jí)依次在核心指標(biāo)周圍展開(kāi)。一般把有關(guān)聯(lián)的指標(biāo)讓其相鄰或靠近,把圖表類型相近的指標(biāo)放一起,這樣能減少觀者認(rèn)知上的負(fù)擔(dān)并提高信息傳遞的效率。

6. 定義設(shè)計(jì)風(fēng)格

很多小伙伴也許沒(méi)接觸過(guò)大屏設(shè)計(jì)工作,但大多數(shù)人都應(yīng)該有 APP 或者 Web 風(fēng)格定義的經(jīng)驗(yàn)。我們?cè)诙x一款 APP 或者 Web 頁(yè)面設(shè)計(jì)風(fēng)格時(shí)常用的方法是什么呢?情緒板。

大屏雖酷炫,但實(shí)際上也是運(yùn)行在瀏覽器里的 Web 頁(yè)面,所以大屏設(shè)計(jì)風(fēng)格定義方法也同樣可以用情緒板來(lái)做,這種方法也是目前比較科學(xué)的風(fēng)格定義手段。

上圖提供了情緒板應(yīng)用的腦圖,具體操作細(xì)節(jié)不做介紹,不太了解的小伙伴可以自己找找資料。

編者按:一篇好文幫你掃盲,運(yùn)用情緒板搞定設(shè)計(jì)→《該怎么運(yùn)用情緒板,才能讓設(shè)計(jì)作品更有說(shuō)服力?》

情緒板的一套流程下來(lái),我們定義的風(fēng)格基本是科學(xué)準(zhǔn)確的,可以指導(dǎo)我們執(zhí)行設(shè)計(jì)。如果是給甲方做大屏,這個(gè)流程也可以讓我們提出的方案更有說(shuō)服力。

7. 可視化設(shè)計(jì)

根據(jù)定義好的設(shè)計(jì)風(fēng)格與選定的圖表類型進(jìn)行合理的可視化設(shè)計(jì)。目前來(lái)說(shuō)大屏可視化主要有指標(biāo)類信息點(diǎn)和地理類信息點(diǎn)兩大可視化數(shù)據(jù)。指標(biāo)類信息點(diǎn)可視化效果相對(duì)簡(jiǎn)單易實(shí)現(xiàn),而地理類信息點(diǎn)一般可視化效果酷炫,但是開(kāi)發(fā)相對(duì)困難,需要設(shè)計(jì)師跟開(kāi)發(fā)多溝通。地理類信息一般具有很強(qiáng)的空間感、豐富的粒子、流光等動(dòng)效、高精度的模型和材質(zhì)以及可交互實(shí)時(shí)演算等特點(diǎn),所以對(duì)于被投電腦、大屏拼接器等硬件設(shè)備的性能會(huì)有要求,硬件配置不夠的情況下可能出現(xiàn)卡頓甚至崩潰的情況,所以這點(diǎn)也是需要提前溝通評(píng)估的。

8. 樣圖溝通確認(rèn)

這里的溝通分三個(gè)層面:設(shè)計(jì)師對(duì)內(nèi)溝通、設(shè)計(jì)師對(duì)外溝通、設(shè)計(jì)師與大屏的「溝通」。

樣圖溝通環(huán)節(jié),最初的樣圖不需要十分精致,我們可以把它理解為一個(gè)「低保真」原型,然后通過(guò)不斷溝通修改,讓它逐步完善精致起來(lái),也就是小步快跑,避免那種一下子走到終點(diǎn),然后又大修大改的情況。

因?yàn)槲覀冊(cè)谇皫撞揭呀?jīng)分別確定了頁(yè)面布局、圖表類型、頁(yè)面風(fēng)格特點(diǎn),所以這一步我們需要用盡可能簡(jiǎn)單的方法 ,把之前幾步的成果在頁(yè)面上快速體現(xiàn)出來(lái),然后根據(jù)樣圖效果嘗試確定五方面內(nèi)容:

  • 之前確立的布局在放入設(shè)計(jì)內(nèi)容后是否依然合適;
  • 確立的圖表類型帶入數(shù)據(jù)后是否仍然客觀準(zhǔn)確;
  • 根據(jù)關(guān)鍵元素、色彩、結(jié)構(gòu)、質(zhì)感打造出的頁(yè)面風(fēng)格是否基本傳達(dá)出了預(yù)期的氛圍和感受;
  • 已有的樣式、數(shù)據(jù)內(nèi)容、動(dòng)效等在開(kāi)發(fā)實(shí)現(xiàn)方面是否存在問(wèn)題;
  • 大屏是否存在色差、文字內(nèi)容是否清晰可見(jiàn)、頁(yè)面是否存在變形拉伸等現(xiàn)象。

跟大屏「溝通」是比較重要也是個(gè)特殊的環(huán)節(jié),這也是我覺(jué)得大屏設(shè)計(jì)跟其它設(shè)計(jì)不一樣的地方,大屏有它自己獨(dú)特的分辨率、屏幕組成、色彩顯示以及運(yùn)行、展示環(huán)境,這里的很多問(wèn)題只有設(shè)計(jì)稿投到大屏上才能夠被發(fā)現(xiàn),所以這一步在樣圖溝通確認(rèn)環(huán)節(jié)非常重要,有時(shí)候需要開(kāi)發(fā)出 demo,反復(fù)測(cè)試多次。

9. 頁(yè)面定稿、開(kāi)發(fā)

事實(shí)上頁(yè)面開(kāi)發(fā)階段并不是到了這一步才進(jìn)行,這里說(shuō)的頁(yè)面開(kāi)發(fā)僅指前端樣式的實(shí)現(xiàn),實(shí)際上后臺(tái)數(shù)據(jù)準(zhǔn)備工作在定義好分析指標(biāo)后就已經(jīng)開(kāi)始進(jìn)行了,而我們當(dāng)前的工作是把數(shù)據(jù)接入到前端,然后用設(shè)計(jì)的樣式呈現(xiàn)出來(lái)。

切圖與標(biāo)注

由于大屏實(shí)際就是一個(gè) web 頁(yè)面,所以開(kāi)發(fā)階段的切圖與標(biāo)注是少不了的。

切圖:哪些元素需要切圖,怎么切?

一般開(kāi)發(fā)用代碼寫不出的樣式或動(dòng)效,都需要設(shè)計(jì)師切圖作支持:比如數(shù)據(jù)容器的邊框、小的動(dòng)效、頁(yè)面整體大背景、部分圖標(biāo)等。切圖按正常網(wǎng)頁(yè)設(shè)計(jì)標(biāo)準(zhǔn)切就可以了。

標(biāo)注:Web頁(yè)面用什么插件做標(biāo)注這個(gè)大家都很熟悉,我就不多說(shuō)了。需要注意的是,如果大屏頁(yè)面需要在不同比例的終端展示,那么此時(shí)的標(biāo)注與開(kāi)發(fā)可以使用 rem 作為基本單位來(lái)實(shí)現(xiàn),這樣實(shí)現(xiàn)的大屏頁(yè)面在后期會(huì)有更好的擴(kuò)展性與適應(yīng)性。

10. 整體細(xì)節(jié)調(diào)優(yōu)與測(cè)試

這部分是指頁(yè)面開(kāi)發(fā)完成后,將真實(shí)頁(yè)面投放到大屏進(jìn)行的測(cè)試與優(yōu)化。這里主要有兩部分工作。

視覺(jué)方面的測(cè)試(有點(diǎn)像 APP 的 UI走查):關(guān)鍵視覺(jué)元素、字體字號(hào)、頁(yè)面動(dòng)效、圖形圖表等是否按預(yù)期顯示、有無(wú)變形、錯(cuò)位等情況。

性能與數(shù)據(jù)方面的測(cè)試:圖形圖表動(dòng)畫是否流暢、數(shù)據(jù)加載、刷新有無(wú)異常;頁(yè)面長(zhǎng)時(shí)間展示是否存在崩潰、卡死等情況;后臺(tái)控制系統(tǒng)能否正常切換前端頁(yè)面顯示。

大屏設(shè)計(jì)的注意事項(xiàng)

1. 字體使用

字體優(yōu)先使用系統(tǒng)默認(rèn)字體,需要嵌入字體時(shí)考慮字體的可識(shí)別性、與當(dāng)前設(shè)計(jì)風(fēng)格是否融合、是否可免費(fèi)商用。

如果頁(yè)面是云端部署,需要嵌入字體包時(shí),我們可以使用 FontCreator 這類的軟件把那些用不到的字符從字體包中刪掉,然后重新打包上傳,減小字體包大小,可以優(yōu)化頁(yè)面加載體驗(yàn),避免在替換默認(rèn)字體的過(guò)程中出現(xiàn)頁(yè)面文字跳動(dòng)等現(xiàn)象。(一般來(lái)講一套字體文件包含了阿拉伯文、符號(hào)、拉丁文、日文、西里爾文、希臘文、拼音、注音符號(hào)等多種字符,對(duì)于大屏這個(gè)明確的場(chǎng)景,我們可以刪掉其它使用不到的字符,僅保留中文、拼音和數(shù)字)

2. 顏色搭配

色彩明度與飽和度差異顯著、對(duì)比鮮明, 盡量避免使用鄰近色配色。

使用深色暗色背景:深色暗色背景可減少拼縫帶來(lái)的不適感。由于背景面積大,使用暗色背景還能夠減少屏幕色差對(duì)整體表現(xiàn)的影響;同時(shí)暗色背景更能聚焦視覺(jué),也方便突出內(nèi)容,做出一些流光、粒子等酷炫的效果。

漸變色慎重使用:大屏普遍色域有偏差,顯示偏色,因而使用漸變色需要根據(jù)大屏反饋確定是否調(diào)整,純色最佳。

3. 頁(yè)面布局

主次分明、條理清晰、注意留白,合理利用大屏上各個(gè)小的顯示單元,并盡量避免關(guān)鍵數(shù)據(jù)被拼縫分割。

Q&A

1. 設(shè)計(jì)稿投到大屏上顯示效果不佳怎么辦?

大屏的分辨率、比例、使用環(huán)境、投射方式等均會(huì)對(duì)設(shè)計(jì)造成影響。理想情況下,我們應(yīng)該在設(shè)計(jì)開(kāi)始前,就能打開(kāi)大屏系統(tǒng)做一些簡(jiǎn)單測(cè)試。我們可以從網(wǎng)上收集不同設(shè)計(jì)師不同風(fēng)格的大屏設(shè)計(jì)作品,然后投上去查看實(shí)際效果。因?yàn)榇蠖鄶?shù)時(shí)候大屏都會(huì)存在色彩偏差,這時(shí)通過(guò)測(cè)試我們就能發(fā)現(xiàn)漸變色、鄰近色等不同類型的色彩搭配是否可以在目標(biāo)大屏上良好呈現(xiàn),如果不可以,那我們?cè)O(shè)計(jì)進(jìn)行時(shí)就不要使用顯示效果不佳的色彩搭配。另一方面,樣圖溝通環(huán)節(jié)及時(shí)測(cè)試也很重要。

2. 大屏設(shè)計(jì)定稿后,切圖切幾倍圖?

由于是將我們電腦屏幕投射到了大屏,大屏上的內(nèi)容是運(yùn)行在我們電腦瀏覽器上的頁(yè)面。所以切圖根據(jù)我們電腦的分辨率,正常切1倍圖就可以了。

3. 1920*1080的設(shè)計(jì)稿,投到9000*4320的屏幕上,文字圖片會(huì)虛么?

看情況,視大屏系統(tǒng)硬件規(guī)格與觀看距離來(lái)定。這塊有四個(gè)概念需要跟大家交流一下。

大屏邏輯分辨率(設(shè)計(jì)稿尺寸)、顯卡輸出分辨率、視頻矩陣切換器( DVI )支持分辨率、大屏實(shí)際物理分辨率。

一般后兩個(gè)是沒(méi)問(wèn)題的,大屏跟矩陣切換器是由大屏廠商提供,一般剛好配套大屏。容易出問(wèn)題的是顯卡輸出分辨率,我們電腦屏幕分辨率并不是最終顯卡傳遞到 DVI 接口的分辨率,傳遞到 DVI 接口的分辨率是電腦顯卡所能輸出的最大分辨率(部分電腦可設(shè)置或自定義輸出分辨率)。輸出分辨率等于 DVI 支持分辨率時(shí)顯示效果最佳。輸出分辨率低于 DVI 支持分辨率,DVI 會(huì)將信號(hào)放大后傳遞到大屏,放大的過(guò)程中就有圖像信息丟失,雖然此過(guò)程中有各種算法支持去保證圖像盡可能清晰,但算法再好,跟真實(shí)圖形還是有差距的。此外,多信號(hào)源投射效果優(yōu)于單個(gè)信號(hào)源投射。對(duì)于現(xiàn)場(chǎng)直播數(shù)據(jù)大屏,一般至少有兩個(gè)信號(hào)源,一個(gè)投屏,另一個(gè)也投屏但是處于備用狀態(tài)。

離大屏的距離也影響觀感,一般離得近,顆粒感明顯,距離稍遠(yuǎn),會(huì)顯的較為清晰。

4. 設(shè)計(jì)稿完成開(kāi)發(fā)后,發(fā)現(xiàn)在大屏上頁(yè)面有被拉伸或者壓縮的情況,怎么補(bǔ)救?

一般來(lái)講,開(kāi)發(fā)只需要對(duì)設(shè)計(jì)圖做還原即可。但特殊情況下,比如顯示器擴(kuò)展不正確導(dǎo)致頁(yè)面被拉伸或壓縮,這時(shí)就需做處理:我們可以先得到被拉伸/壓縮的比例,然后對(duì)整體視圖做壓縮/拉伸處理,再由其拉伸/壓縮,這樣被拉伸/壓縮的瑕疵就可以得到一定程度上的矯正。另外,了解被投電腦硬件特點(diǎn),有的電腦可以通過(guò)自定義分辨率解決這部分問(wèn)題。

5. 除自行開(kāi)發(fā)可視化大屏外,還可以通過(guò)哪些第三方服務(wù)來(lái)快速實(shí)現(xiàn)?

阿里云 DataV、騰訊云圖、百度 Sugar 等。

6. 數(shù)據(jù)可視化的圖表樣式可以在哪些地方找到參考?

圖表部分的二個(gè)庫(kù)是我們?cè)O(shè)計(jì)師可以打開(kāi)瀏覽查看的,這里面所有的圖表樣式都是基于代碼實(shí)現(xiàn)的,可以作為我們?cè)O(shè)計(jì)圖表的參考,也可以讓開(kāi)發(fā)拿代碼去用,或者在這些圖表的基礎(chǔ)上修改。

工具類的需要有一定的代碼基礎(chǔ),里面同樣有豐富的圖表,所以跟開(kāi)發(fā)的溝通也很重要,因?yàn)樗麄兛赡軙?huì)了解多一些更新的前沿的圖表形式,是我們?cè)O(shè)計(jì)師不知道的,所以彼此多溝通交流實(shí)在太重要了。

總結(jié)

數(shù)據(jù)可視化是一門龐大系統(tǒng)的科學(xué),本文所有討論僅針對(duì)大屏數(shù)據(jù)可視化這一特定領(lǐng)域,管中窺豹,如有遺漏或不足之處歡迎大家討論交流。

藍(lán)藍(lán)設(shè)計(jì)www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 平面設(shè)計(jì)服務(wù)。

 

如何構(gòu)建和驗(yàn)證設(shè)計(jì)風(fēng)格?來(lái)看高手的實(shí)戰(zhàn)案例!

資深UI設(shè)計(jì)者

如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請(qǐng)點(diǎn)這里

 

文章目錄

  1. 品牌定義
  2. 品牌映射(設(shè)計(jì)風(fēng)格構(gòu)建)
  3. 驗(yàn)證方案設(shè)計(jì)
  4. 空狀態(tài)設(shè)計(jì)
  5. 驗(yàn)證實(shí)施及結(jié)果
  6. 遺留問(wèn)題及后續(xù)關(guān)注

品牌定義

此前,除了產(chǎn)品名及代言人的形象露出外,產(chǎn)品層面尚未有過(guò)明確且體系化的品牌概念傳達(dá),因此無(wú)既有的概念或相關(guān)信息可遵循或參考,需從頭理清。

1. 收集相關(guān)數(shù)據(jù)

如上所述,由于目前所處階段,本次將以品牌自身單方面輸出為主,因此我們?cè)L談了相關(guān)業(yè)務(wù)負(fù)責(zé)人,探討了產(chǎn)品當(dāng)前在服務(wù)層面關(guān)注的方向以及力爭(zhēng)為用戶營(yíng)造的體驗(yàn)。

同時(shí),我們也想了解用戶在使用安居客過(guò)程中所形成的總體印象并將其作為補(bǔ)充,因此,抓取了應(yīng)用市場(chǎng)上安居客用戶的正面反饋并從中提煉出高頻詞匯。

△ 用戶評(píng)價(jià)詞云圖

2. 建立品牌心智地圖(Mental Map)

通過(guò)繪制品牌心智地圖,可將以上零散的信息分類及提煉,以此來(lái)組織并簡(jiǎn)化我們對(duì)產(chǎn)品品牌認(rèn)知的心智結(jié)構(gòu),最終描繪出一幅由品牌內(nèi)核所延展出的圖景,其組成可以是品牌的各個(gè)方面,凝練了關(guān)于一個(gè)品牌之所以是一個(gè)品牌的構(gòu)成。

△ 品牌心智地圖

3. 提煉品牌精髓(Brand Mantra)

進(jìn)一步的,從品牌心智地圖中提煉出構(gòu)成品牌的核心部分,分別從品牌功能(Brand Functions)、描述性修飾語(yǔ)(Descriptive Modifier)及情感性修飾語(yǔ)(Emotional Modifier)這三個(gè)維度去詮釋。

品牌功能描述了產(chǎn)品或服務(wù)的性質(zhì),即品牌能夠向用戶提供的體驗(yàn)或益處的類型;描述性修飾語(yǔ)將進(jìn)一步分類及明確品牌所傳達(dá)出樣貌之性質(zhì);情感性修飾語(yǔ)則解釋了給用戶帶來(lái)的益處是什么。

對(duì)安居客而言,作為連接房地產(chǎn)行業(yè)中中介與需求端的平臺(tái),其本質(zhì)上是一個(gè)信息服務(wù)平臺(tái);而由其對(duì)信息的深度、廣度及有效性的努力以及對(duì)信息傳達(dá)效率的追求可看出,其力求提供的是一種專業(yè)的信息服務(wù);結(jié)合監(jiān)管機(jī)制的建設(shè)力爭(zhēng)為用戶營(yíng)造一種可靠、安心的體驗(yàn)。

△ 品牌精髓

小結(jié)

通過(guò)以上步驟,基本能夠逐漸抽象出所要表達(dá)之物??珊?jiǎn)單將上述過(guò)程的目的理解為定義視覺(jué)風(fēng)格的方向。

△ 品牌概念抽象過(guò)程

品牌映射(設(shè)計(jì)風(fēng)格構(gòu)建)

明確所要表現(xiàn)的對(duì)象后,便可開(kāi)始構(gòu)建從內(nèi)容到形式這一轉(zhuǎn)化過(guò)程,最終構(gòu)建出契合品牌的設(shè)計(jì)風(fēng)格。

1. 文案風(fēng)格構(gòu)建

首先,嘗試將品牌概念人格化,以作為后續(xù)推導(dǎo)過(guò)程中的燈塔,避免偏離航向。基于所提煉出的品牌精髓,演繹出以下設(shè)定:

  • 品牌性別:男性
  • 品牌角色:專家
  • 品牌性格:沉著、從容
  • 與用戶的關(guān)系:安居客之于用戶就像是一位專業(yè)、貼心的「私人顧問(wèn)」,在用戶遇到問(wèn)題時(shí)沉著冷靜地為其指點(diǎn)迷津,在用戶產(chǎn)生疑惑時(shí)體貼入微地為其答疑解惑。

改版前文案風(fēng)格分析

現(xiàn)有方案中可窺見(jiàn)以下特征:

△ 改版前文案風(fēng)格

設(shè)計(jì)策略

為了貼合所設(shè)定的人格化形象,筆者制定了以下策略來(lái)調(diào)整文案寫作風(fēng)格:

  • 以書(shū)面語(yǔ)語(yǔ)體替代口語(yǔ)語(yǔ)體——遣詞更豐富、正式。如:挑選房源(去看看房子);樓盤優(yōu)惠活動(dòng)供你參與(快去看看哪些房子有活動(dòng)吧);查看樓盤詳情(你還可以看看其他的哦~)。
  • 以平鋪直敘的敘事風(fēng)格替代行銷口吻及俏皮語(yǔ)氣。如:除了旁觀,你也能發(fā)表自己的真知灼見(jiàn)(快參與你喜歡的話題發(fā)表評(píng)論吧?。?;可查看全部樓盤資訊(先看看其他人的動(dòng)態(tài)~)。
  • 構(gòu)建統(tǒng)一的句式結(jié)構(gòu)。

此前,空狀態(tài)經(jīng)手不同設(shè)計(jì)師,且團(tuán)隊(duì)中尚無(wú)可遵從的寫作風(fēng)格指南,原有文案多少顯得混雜零亂,而句式結(jié)構(gòu)也是文案風(fēng)格的構(gòu)成要素,因此,筆者嘗試構(gòu)建統(tǒng)一的句式結(jié)構(gòu)來(lái)滿足現(xiàn)已發(fā)現(xiàn)的五十多處以及將來(lái)仍會(huì)不斷產(chǎn)生的空狀態(tài)在表達(dá)時(shí)的需求。

將重新設(shè)計(jì)的所有文案按句式結(jié)構(gòu)的異同分類,從中可發(fā)現(xiàn)明顯的規(guī)律,其對(duì)應(yīng)的正是針對(duì)不同場(chǎng)景所使用的差異化策略,對(duì)于單獨(dú)出現(xiàn)的句型,在分析其所屬場(chǎng)景及所需引導(dǎo)策略后,判斷其是必要句型還是可復(fù)用其他句型,最終形成了能夠覆蓋當(dāng)前所有場(chǎng)景的五種句式結(jié)構(gòu),可指導(dǎo)未來(lái)同類場(chǎng)景的應(yīng)用。

△ 句式結(jié)構(gòu)構(gòu)建過(guò)程

2. 視覺(jué)風(fēng)格推導(dǎo)

風(fēng)格構(gòu)建

構(gòu)建思路:以品牌精髓中的情感修飾語(yǔ)及描述性修飾語(yǔ)作為核心意象,同時(shí)解構(gòu)對(duì)應(yīng)表現(xiàn)形式的形態(tài)要素,其后分別以形態(tài)要素為對(duì)象將核心意象進(jìn)行演繹。由于品牌精髓所處抽象層次較高,無(wú)法直接指向具體表達(dá)方式的選擇——再以得到的具體情感意象作為標(biāo)尺,尋求契合的表達(dá)方式。

色:將品牌精髓以顏色能夠觸發(fā)的感受為視角進(jìn)行演繹,并根據(jù)顏色與人類心理感知的映射關(guān)系確定基本色相范圍。

而對(duì)顏色具體的定義可在相同的表達(dá)訴求下進(jìn)一步控制色彩要素來(lái)獲取,如中性色的視覺(jué)表現(xiàn)在于色相上的控制,我們通過(guò)在色相上加入藍(lán)來(lái)獲取「高級(jí)感」;而由于安居客本身的品牌色即屬綠色,因此我們直接選用;對(duì)于藍(lán)色,考慮到實(shí)際應(yīng)用時(shí)與綠色的搭配,在色相上融入綠色使兩者呈現(xiàn)時(shí)能夠相互融合。

△ 色的定義

形:在實(shí)際建構(gòu)「形」的表達(dá)方式與情緒感受的映射關(guān)系時(shí)筆者發(fā)現(xiàn),不同于顏色的千變?nèi)f化,「形」在各維度的表達(dá)方式上更多的呈現(xiàn)一種二元對(duì)立的局面,這種情況下,不對(duì)品牌精髓進(jìn)行演繹亦可對(duì)表達(dá)方式作出選擇。

△ 形的定義

風(fēng)格應(yīng)用

色的應(yīng)用:由空狀態(tài)設(shè)計(jì)中對(duì)所有場(chǎng)景的意象設(shè)定,可對(duì)場(chǎng)景刻畫中所需的元素進(jìn)行如下分類:

  • 光影
  • 背景

針對(duì)插畫,且處于空狀態(tài)這種非正常場(chǎng)景,當(dāng)前濃郁的品牌色不便直接使用,因此從明度層面對(duì)其進(jìn)行處理,以得到適用的顏色。

△ 品牌色的處理

人作為場(chǎng)景構(gòu)建中的組成部分,并非主體,且需要與物形成對(duì)比,因此使用白色。

△ 人的顏色應(yīng)用

物在場(chǎng)景的構(gòu)筑中承擔(dān)了以下角色:

  • 與人的交互形成行為意象的傳達(dá);
  • 作為對(duì)環(huán)境的勾勒,構(gòu)成對(duì)場(chǎng)景的交代或環(huán)境意象的傳達(dá)。

對(duì)應(yīng)到結(jié)構(gòu),分別為:

  • 作為主體的單一物件;
  • 構(gòu)成近景與遠(yuǎn)景的不同物件。

對(duì)于前者,以中性色呈現(xiàn)其主體,主色點(diǎn)綴于次一級(jí)元素;而后者,遠(yuǎn)景作為主要場(chǎng)景元素施以中性色,近景混合應(yīng)用主色。如此,既保證情緒色的露出,也豐富畫面的細(xì)膩程度。

△ 物的顏色應(yīng)用

光影

  • 背景光:在表達(dá)虛無(wú)的場(chǎng)景中,以線性漸變來(lái)表達(dá)此概念,此時(shí)混合應(yīng)用兩個(gè)主色來(lái)呈現(xiàn)調(diào)性。
  • 光照:對(duì)于自然光的呈現(xiàn),另取暖色來(lái)表現(xiàn)光影,進(jìn)一步增加質(zhì)感。
  • 投影:陰影當(dāng)使用中性色。

△ 光照的顏色應(yīng)用

背景:白色或明亮的顏色更讓人有安全感,且我們希望圖示能融入界面中,因此設(shè)定為白色。

形的應(yīng)用:元素形狀、元素方向、主體占比、主體位置。

元素形狀:避免銳利的切角,更多的用矩形及圓形這類相對(duì)更穩(wěn)定的形狀。

△ 元素形狀定義

元素方向:以水平面或不同面構(gòu)成的穩(wěn)定體系為主,避免單獨(dú)應(yīng)用斜切面。

△ 元素方向定義

主體占比:占據(jù)畫面中較大比例。

△ 主體占比定義

主體位置:置于畫面中心偏下。

△ 主體位置定義

驗(yàn)證方案設(shè)計(jì)

1. 驗(yàn)證思路推導(dǎo)

我們的設(shè)計(jì)目標(biāo)是形成契合品牌的視覺(jué)風(fēng)格,若目標(biāo)達(dá)成,用戶應(yīng)當(dāng)能被具備明確視覺(jué)風(fēng)格的界面激發(fā)相應(yīng)感受,從而可得到如下測(cè)試過(guò)程:安排被試瀏覽相關(guān)界面,測(cè)量其情感感受。

那如何測(cè)量人的情感呢?

在對(duì)情感測(cè)量方法的搜尋中,筆者發(fā)現(xiàn)了心理測(cè)量(相對(duì)的是生理測(cè)量)中常用的語(yǔ)義差異量表(semantic differential scale),其由若干表達(dá)情感體驗(yàn)的詞匯和量尺組成,由用戶根據(jù)感受程度選取相應(yīng)的等級(jí),從而獲取到情感信息。

最終,可得到如下驗(yàn)證思路:

△ 驗(yàn)證思路

2. 樣本量設(shè)定

定性研究方法并非如定量研究方法那般天然具備確定樣本量的統(tǒng)計(jì)技術(shù),目前也尚無(wú)通用的技術(shù),業(yè)界較為熟知的 Jakob Nielsen 所提出的「可用性研究只需測(cè)試5個(gè)用戶」的說(shuō)法,由于其限于可用性研究,「測(cè)試5個(gè)用戶」的說(shuō)法也只是總結(jié)性的論述,實(shí)際也需酌情判斷,因此,為了確保獲取足夠的數(shù)據(jù),筆者嘗試尋求更和通用的解決方案,最終鎖定在了市場(chǎng)研究公司 Research by Design 的 Donna Bonde 所提出的指南(Qualitative market research: When enough is enough)。

筆者認(rèn)為其建設(shè)性在于:

  • 從不同研究方法的用途出發(fā),論證了定性研究適用樣本量的數(shù)量級(jí)迥異于定量研究的合理性;
  • 從實(shí)際的操作過(guò)程來(lái)探究樣本量與所發(fā)現(xiàn)問(wèn)題數(shù)量的關(guān)系;
  • 在上述論述范圍內(nèi),再去嘗試解構(gòu)對(duì)樣本量構(gòu)成影響的因素,這使其能夠根據(jù)具體情況進(jìn)行相對(duì)的樣本量估算;
  • 這種思路,使得其脫離了具體的使用場(chǎng)景——所使用的具體定性研究方法,單純針對(duì)「樣本量的設(shè)定」這一問(wèn)題本身,這使其具備了相當(dāng)?shù)耐ㄓ眯浴?

因此,筆者參照其分析進(jìn)行了對(duì)樣本量的設(shè)定。先根據(jù)實(shí)際項(xiàng)目及團(tuán)隊(duì)情況,對(duì)相關(guān)因素進(jìn)行賦值:

△ 樣本量設(shè)定

再根據(jù)以下公式可得出適用于本項(xiàng)目的樣本量:

3. 量表設(shè)計(jì)

量尺設(shè)計(jì)

量表類型:由于對(duì)評(píng)價(jià)對(duì)象提供了對(duì)立的形象,自然需要使用雙級(jí)量尺,即要求被試從0點(diǎn)開(kāi)始向兩端方向發(fā)展的數(shù)值中做出評(píng)選。

標(biāo)度數(shù):設(shè)定標(biāo)度數(shù)時(shí)需平衡兩點(diǎn),足夠精細(xì),充分滿足被試表達(dá)的需求;控制數(shù)量,避免選項(xiàng)太過(guò)瑣碎。

常用的標(biāo)度數(shù)中,七點(diǎn)評(píng)分量表相比五點(diǎn)評(píng)分量表能夠得到更準(zhǔn)確的結(jié)果,而11點(diǎn)量表所能收集到的數(shù)據(jù)雖然最接近正態(tài)分布,但對(duì)被試來(lái)說(shuō)成本也會(huì)隨之增加,增大疲勞效應(yīng),因此,筆者最終選擇了七點(diǎn)標(biāo)度:

△ 量尺標(biāo)度數(shù)

修飾詞:對(duì)于量尺的數(shù)字,需要通過(guò)形容詞來(lái)賦予意義,否則被試很難進(jìn)行判斷;且修飾詞需在意義上和相應(yīng)數(shù)值對(duì)應(yīng),這似乎很難實(shí)現(xiàn),幸而前人已對(duì)不同量尺形容詞就其表示的程度水平進(jìn)行過(guò)系統(tǒng)的評(píng)估,使得筆者能直接繞過(guò)這個(gè)問(wèn)題。

筆者按照所用的標(biāo)度數(shù),選擇了對(duì)應(yīng)能產(chǎn)生等現(xiàn)間距的修飾詞:

△ 量尺修飾詞

測(cè)量對(duì)象的語(yǔ)義轉(zhuǎn)化

基于輸出的文案風(fēng)格與視覺(jué)意象及其對(duì)應(yīng)策略,可分別確定具體的測(cè)量對(duì)象,再以此設(shè)定能夠顯示其對(duì)立形象的形容詞:

△ 語(yǔ)義轉(zhuǎn)化過(guò)程

量表結(jié)構(gòu)設(shè)計(jì)

為了避免語(yǔ)義啟動(dòng)造成被試評(píng)價(jià)時(shí)產(chǎn)生偏差,需將有關(guān)系的條目隨機(jī)擺放,并將褒義詞和貶義詞分布在量表兩端而不是互相集中在一邊,以起到語(yǔ)義抑制效果,避免被試在作答前不經(jīng)思考。

另外,在第一輪測(cè)試中,筆者發(fā)現(xiàn)不止一位被試在對(duì)某一條目評(píng)價(jià)時(shí)混淆了其描述對(duì)象,除了其個(gè)人認(rèn)知水平外,某些條目在當(dāng)前語(yǔ)境下所展現(xiàn)出的描述關(guān)系依然不夠明確,因此筆者按照條目的描述對(duì)象對(duì)其進(jìn)行了分類,并說(shuō)明其描述對(duì)象。

△ 量表結(jié)構(gòu)

空狀態(tài)設(shè)計(jì)

關(guān)于空狀態(tài)本身,相對(duì)于本文所涉及的其他內(nèi)容,其作為范式更被設(shè)計(jì)師所熟識(shí),但在設(shè)計(jì)策略及視覺(jué)表現(xiàn)上似乎又并非如想象中簡(jiǎn)單。

「空狀態(tài)」之稱乃立足于表現(xiàn)層之觀察,其承載的實(shí)際是若干種場(chǎng)景,反饋「空」只是其中的一種也是最后一種手段,條件允許的情況下,應(yīng)當(dāng)首先考慮如何去引導(dǎo)用戶。因本項(xiàng)目落地于空狀態(tài),上述其他設(shè)計(jì)策略不在此展開(kāi),下文將詳述空狀態(tài)的設(shè)計(jì)。

1. 表現(xiàn)空狀態(tài)

空狀態(tài)內(nèi)容

空狀態(tài)由兩部分構(gòu)成——反饋和引導(dǎo)。基于當(dāng)前情境的反饋能讓用戶獲悉所發(fā)生的事;在此基礎(chǔ)之上,還需提供引導(dǎo)以幫助用戶完成最終的任務(wù)。

反饋:反饋通常由圖像與文案組成,其風(fēng)格應(yīng)契合品牌調(diào)性,其內(nèi)容除了基本的反饋信息外也應(yīng)更多地考慮如何引導(dǎo)用戶。

引導(dǎo):此處的引導(dǎo)指的就是最終根據(jù)實(shí)際情境提供的操作,如無(wú)可支持的功能,可以文案形式進(jìn)行表達(dá)。

空狀態(tài)結(jié)構(gòu)類型

針對(duì)安居客產(chǎn)品中的場(chǎng)景,除了完整的空狀態(tài)結(jié)構(gòu),對(duì)于模塊化的頁(yè)面,由于模塊本身的高度有限,在數(shù)據(jù)為空時(shí),只取描述文案作為反饋,并在樣式上弱化按鈕使其在當(dāng)前結(jié)構(gòu)下保持原有的視覺(jué)權(quán)重,以其為另一種空狀態(tài)結(jié)構(gòu)。

△ 空狀態(tài)結(jié)構(gòu)

視圖結(jié)構(gòu)類型

空狀態(tài)本身的結(jié)構(gòu)和布局應(yīng)當(dāng)一致,但對(duì)于平臺(tái)型產(chǎn)品,伴隨著業(yè)務(wù)復(fù)雜性的是頁(yè)面結(jié)構(gòu)的多樣性,這使得空狀態(tài)呈現(xiàn)于不同容器中,為達(dá)到一致的視覺(jué)效果在視覺(jué)輸出環(huán)節(jié)就需要針對(duì)性地定義布局邏輯。

而上述所謂的一致效果即為空狀態(tài)模塊應(yīng)當(dāng)居中展示于所有容器中,但由于空狀態(tài)模塊的重心并非在其物理中心上,因此為達(dá)到視覺(jué)居中的效果,在將其物理居中的基礎(chǔ)上還需在垂直方向上作相應(yīng)調(diào)整。

完整視圖:視圖的高度隨設(shè)備而變化,因此使用相對(duì)定位,布局邏輯即為將空狀態(tài)模塊相對(duì)于視圖中心垂直上移固定距離。

△ 完整視圖的布局邏輯

模塊與列表:對(duì)于相近的模塊,可統(tǒng)一其高度(無(wú)法通用的場(chǎng)景還需另外定義高度),此時(shí)可使用絕對(duì)定位,布局邏輯即為空狀態(tài)模塊相對(duì)容器頂部保持固定距離。

△ 模塊布的局邏輯

對(duì)于列表,由于其高度不固定,在空狀態(tài)時(shí)常規(guī)的處理方式是將空狀態(tài)置于背景之上或 cell 之中,前者不適用于基于白色背景的空狀態(tài)設(shè)計(jì),而后者的形式與其實(shí)際層級(jí)關(guān)系不符,因此我們最終選擇了添加 view 來(lái)實(shí)現(xiàn)效果,如此就需定義高度來(lái)滿足此種場(chǎng)景中的所有情況,其布局邏輯也就與模塊中所應(yīng)用的相同。

2. 圖示的設(shè)計(jì)策略

圖示的設(shè)計(jì)策略核心在于其內(nèi)容的表達(dá)即意象的設(shè)定,常規(guī)的以空對(duì)象為意象的做法,無(wú)更多信息傳達(dá),亦無(wú)助于信息傳達(dá),是一種徒增冗余的可視化;以情緒為意象的做法由于其抽象程度和表意當(dāng)應(yīng)用于所有空狀態(tài),這種重復(fù)容易讓用戶厭煩且無(wú)趣;而近來(lái)越來(lái)越多見(jiàn)的場(chǎng)景化表現(xiàn)形式,設(shè)計(jì)者對(duì)于意象的設(shè)定依舊未脫離于上述范疇,更有甚者,一股腦鉆進(jìn)表現(xiàn)形式中不可自拔,竟無(wú)明確意象的設(shè)定。

基于上述分析,筆者認(rèn)為更合適的做法是:內(nèi)容上表現(xiàn)所引導(dǎo)的行為(如有),形式上以場(chǎng)景的構(gòu)筑間接表達(dá)意象。此作法更豐滿地引導(dǎo)了行為,表達(dá)方式上也更具感染力。

根據(jù)場(chǎng)景筆者設(shè)定了三類意象:

  • 平臺(tái)無(wú)內(nèi)容:虛無(wú)
  • 用戶無(wú)操作:行為
  • 異常情況:環(huán)境

對(duì)于「虛無(wú)」的概念,即以寫實(shí)的方式在空間層面描繪出來(lái),并讓人置身其中,營(yíng)造出一種孤寂的氛圍。

△ 「虛無(wú)」的意象表達(dá)

對(duì)于行為及環(huán)境,筆者將抽象的概念具象化,以其為意象。以「用戶未曾對(duì)相關(guān)對(duì)象發(fā)表評(píng)論」為例,對(duì)事物進(jìn)行主觀或客觀的闡述是一種抽象的概念,難以直接可視化,因此筆者將視角落在了行為的表達(dá)或?qū)嵤┬问缴?,從中選擇了「書(shū)寫」這一動(dòng)作作為意象,同時(shí)在構(gòu)建場(chǎng)景時(shí),打破人和物的比例關(guān)系并夸張?zhí)幚?,形成一種趣味性的觀感,進(jìn)一步觸發(fā)用戶的共情。

△ 「評(píng)論」的意象表達(dá)

其他場(chǎng)景示例:

△ 其他場(chǎng)景示例

驗(yàn)證實(shí)施及結(jié)果

定性類驗(yàn)證方法相對(duì)于埋點(diǎn)數(shù)據(jù)這類定量方法附帶的優(yōu)勢(shì)是可在設(shè)計(jì)過(guò)程中幫助改進(jìn)設(shè)計(jì),因此,整個(gè)過(guò)程中我們根據(jù)測(cè)試結(jié)果和測(cè)試過(guò)程中遇到的問(wèn)題迭代著設(shè)計(jì)方案以及測(cè)試流程本身。

第一輪測(cè)試中,被試被觸發(fā)的情感感知與我們的目標(biāo)方向相反,且還發(fā)現(xiàn)了超出我們預(yù)期的視覺(jué)可用性問(wèn)題;文案方面,多組條目用戶無(wú)法感知(本身為中性對(duì)象除外)。

△  第一輪測(cè)試輪廓圖

具體分析如下:

△ 第一輪測(cè)試結(jié)果分析

經(jīng)過(guò)對(duì)這些結(jié)果和反饋的分析后,我們著手調(diào)整視覺(jué)表現(xiàn):進(jìn)一步地分解插畫中視覺(jué)表達(dá)構(gòu)成的元素,并探究不同的處理手段與受眾感受間的關(guān)系,以此摸索達(dá)成目標(biāo)風(fēng)格的設(shè)計(jì)策略。并在此基礎(chǔ)上,調(diào)整對(duì)應(yīng)的形容詞詞對(duì),使其更的表達(dá)對(duì)應(yīng)的情感感受。

△ 迭代前后方案對(duì)比

其后,我們選擇了幾個(gè)具有代表性的場(chǎng)景進(jìn)行了應(yīng)用便進(jìn)行了第二輪測(cè)試,在得到了命中預(yù)期范圍的測(cè)試結(jié)果后,再對(duì)其他頁(yè)面進(jìn)行了統(tǒng)一調(diào)整。

△ 第二輪測(cè)試輪廓圖

在所有方案產(chǎn)出后,針對(duì)整體視覺(jué)和文案風(fēng)格進(jìn)行了第三輪測(cè)試,最終的結(jié)果基本都達(dá)到了預(yù)期,測(cè)試到此結(jié)束。

△  第三輪測(cè)試輪廓圖

遺留問(wèn)題及后續(xù)關(guān)注

1. 明確「品牌精髓」的定義及應(yīng)用

在撰寫此文的過(guò)程中,伴隨著對(duì)品牌精髓產(chǎn)生了更深的理解,筆者對(duì)于描述性修飾語(yǔ)及情感性修飾語(yǔ)的定義及提煉方式產(chǎn)生了疑問(wèn)——如「專業(yè)」一詞作為描述性修飾語(yǔ)是否會(huì)顯得寬泛?且由于品牌精髓作為后續(xù)加工過(guò)程的源頭,決定了整個(gè)加工過(guò)程的順利和準(zhǔn)確,因此,對(duì)其的準(zhǔn)確理解和應(yīng)用顯得尤為重要。

2. 進(jìn)一步探索情感轉(zhuǎn)換及其應(yīng)用

在有形產(chǎn)品設(shè)計(jì)領(lǐng)域,早在上世紀(jì)八十年代初便開(kāi)始關(guān)注人的感性需求及意象與產(chǎn)品設(shè)計(jì)的形態(tài)要素間的關(guān)系,并形成了體系化的理論——感性工學(xué),并從日本汽車行業(yè)的應(yīng)用滲透到了日本各個(gè)產(chǎn)品設(shè)計(jì)領(lǐng)域,進(jìn)而逐漸傳播到西方國(guó)家及中國(guó)等國(guó)家。但在「用戶體驗(yàn)設(shè)計(jì)」行業(yè),尚停留在對(duì)「情感化設(shè)計(jì)」一詞朗朗上口卻又渾然無(wú)知的階段。

而目前業(yè)界所「熟知」的 Donad. A. Norman 教授提出的三層次理論——亦是情感化設(shè)計(jì)領(lǐng)域除感性工學(xué)理論外另一個(gè)被公認(rèn)的理論體系,更接近于一種世界觀,解決「是什么」的問(wèn)題,而非方法論;解決「怎么辦」的問(wèn)題。這和 Jesse Jame Garrett 提出的「用戶體驗(yàn)要素」在軟件產(chǎn)品設(shè)計(jì)領(lǐng)域知識(shí)框架中的定位類似,因此,在實(shí)際應(yīng)用于交互設(shè)計(jì)與界面設(shè)計(jì)時(shí)還需彌補(bǔ)中間的斷層。

借此次空狀態(tài)改版,筆者在品牌輸出的過(guò)程中摸索著情緒感受與設(shè)計(jì)風(fēng)格的映射關(guān)系,形成了初步的構(gòu)建思路,且在關(guān)于感性工程的相關(guān)文獻(xiàn)中得到了印證,但在風(fēng)格應(yīng)用層面,此次只是初作嘗試,尚存在很大優(yōu)化空間。未來(lái),將以此為基礎(chǔ)針對(duì)界面進(jìn)行嘗試,并在情感轉(zhuǎn)換層面進(jìn)行更深入的挖掘與探索。

3. 嘗試建立視覺(jué)情感語(yǔ)義詞庫(kù)

在設(shè)計(jì)量表的過(guò)程中,筆者明顯感受到為測(cè)量對(duì)象設(shè)定形容詞詞對(duì)的困難——準(zhǔn)確把握測(cè)量對(duì)象與對(duì)應(yīng)形象間的聯(lián)想關(guān)系,甚至在實(shí)際測(cè)試過(guò)程中基于用戶的測(cè)試結(jié)果和反饋,筆者持續(xù)迭代著問(wèn)卷?xiàng)l目及對(duì)應(yīng)形容詞詞對(duì)的選用。

而以筆者目前對(duì)語(yǔ)義差別量表的理解和應(yīng)用,其作為「測(cè)量某一客體對(duì)受眾的意義」的工具,對(duì)于視覺(jué)風(fēng)格的構(gòu)建將會(huì)是重要的設(shè)計(jì)驗(yàn)證手段。

基于此,有必要尋求并建立一套視覺(jué)情感語(yǔ)義詞庫(kù),以保證量表設(shè)計(jì)的有效性。

4. 確認(rèn)情感測(cè)試中建立基準(zhǔn)線的必要性

在測(cè)試過(guò)程中,筆者明顯覺(jué)察到不同被試對(duì)相同概念顯著的理解差異,大致分為如下兩種情形:

  • 認(rèn)識(shí)不一樣:如某被試對(duì)于文案是否有趣的判斷標(biāo)準(zhǔn)為是否直白。
  • 錨定偏差:如某被試認(rèn)為文案就應(yīng)該是比較俏皮、小清新的,當(dāng)他看到的方案沒(méi)達(dá)到其預(yù)期時(shí),便會(huì)認(rèn)為其是沉悶的——實(shí)際上是中性的。

這直接影響到數(shù)據(jù)收集的準(zhǔn)確性。

筆者當(dāng)下的反應(yīng)是應(yīng)當(dāng)對(duì)被試先建立基準(zhǔn)線,從而能夠?qū)?shù)據(jù)進(jìn)行加權(quán)處理,但鑒于需要針對(duì)問(wèn)卷?xiàng)l目設(shè)計(jì)對(duì)應(yīng)的問(wèn)題及素材,筆者選擇了更敏捷的做法——把通過(guò)訪談所認(rèn)定的存在明顯偏差的結(jié)果作為異常值剔除出最后的統(tǒng)計(jì)。

因此,如后期將語(yǔ)義差別量表列入針對(duì)視覺(jué)風(fēng)格構(gòu)建的標(biāo)準(zhǔn)驗(yàn)證方法之中,為保證數(shù)據(jù)的準(zhǔn)確性,有必要對(duì)是否加設(shè)「建立被試對(duì)相關(guān)概念理解及程度的基準(zhǔn)線」這一環(huán)節(jié)進(jìn)行研究和確認(rèn)。

本文以項(xiàng)目為描述對(duì)象,因此,并未冗述所涉及到方法的更多細(xì)節(jié)(諸如其概念、優(yōu)劣、使用原則、注意事項(xiàng)等),待時(shí)機(jī)成熟時(shí)我們會(huì)陸續(xù)輸出相關(guān)方法及工具(如定性研究中樣本量的設(shè)定、量表中量尺的設(shè)計(jì)、訪談中的注意事項(xiàng)、語(yǔ)義差別量表的設(shè)計(jì)和使用等)的使用指南,包括封裝好的文檔工具,望能拋磚引玉。

藍(lán)藍(lán)設(shè)計(jì)www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 平面設(shè)計(jì)服務(wù)


這些UI和UX趨勢(shì),在2019年最值得關(guān)注

資深UI設(shè)計(jì)者

如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請(qǐng)點(diǎn)這里


當(dāng)你的產(chǎn)品短時(shí)間內(nèi)無(wú)法使用時(shí),如斷網(wǎng)、跨平臺(tái)無(wú)法分享等等。用戶可能會(huì)因而產(chǎn)生挫敗感,產(chǎn)生焦慮不爽的負(fù)面情緒。如何安撫用戶情緒?如何拉近用戶和平臺(tái)的距離?如何改善或提高用戶體驗(yàn)?zāi)??本期案例,就分享一些有趣的小彩蛋、微交互,讓你靈感爆棚!

往期回顧:

  1. 每月更新!10個(gè)記憶深刻的產(chǎn)品設(shè)計(jì)神細(xì)節(jié)?。?)》
  2. 《每月更新!10個(gè)記憶深刻的產(chǎn)品設(shè)計(jì)神細(xì)節(jié)?。?)》

文章目錄

  1. 我見(jiàn)過(guò)最贊的招聘啟事,來(lái)自程序員的別樣浪漫
  2. 斷網(wǎng)環(huán)境下,Google瀏覽器頁(yè)面的小恐龍可以打游戲喲
  3. 「親戚計(jì)算器」?原來(lái)小米還有這么有趣的功能設(shè)計(jì)
  4. 揉成一團(tuán)的廢紙,會(huì)讓你聯(lián)想到「刪除」這個(gè)動(dòng)作么?
  5. 支付寶的小無(wú)奈
  6. 優(yōu)優(yōu)教程網(wǎng)首頁(yè)里藏著的可愛(ài)表情,你發(fā)現(xiàn)了幾個(gè)?
  7. 2233娘真是貼心的小姐姐(*?▽?*)
  8. 讓人意想不到的團(tuán)隊(duì)展示hover效果
  9. 時(shí)間走著滴答滴,iPhone的時(shí)鐘藏著自己的小秘密
  10. 有道詞典也賣萌,一句有溫度的文案會(huì)有怎樣的力量?

我見(jiàn)過(guò)最贊的招聘啟事,來(lái)自程序員的別樣浪漫

如果不是互聯(lián)網(wǎng)從業(yè)者,大概你永遠(yuǎn)都不會(huì)發(fā)現(xiàn)百度主頁(yè)的代碼控制臺(tái)(console)里藏著那條最浪漫的招聘啟事。因?yàn)橹挥袚碛虚_(kāi)發(fā)網(wǎng)頁(yè)習(xí)慣的人,才會(huì)在瀏覽喜歡的網(wǎng)站時(shí)按下F12 調(diào)出網(wǎng)頁(yè)代碼查看。所以這條百度針對(duì)程序員的招聘被寫進(jìn)網(wǎng)站首頁(yè)代碼的console里,可謂是絕對(duì)精準(zhǔn)的招聘廣告投放了。

據(jù)說(shuō)這個(gè)彩蛋的設(shè)計(jì)并非百度的獨(dú)創(chuàng)而是 Google 先使用過(guò)的「小心機(jī)」,可是由于無(wú)從考證,所以小編并不能確定是哪家公司有才華的程序員小哥哥想出了這個(gè)妙計(jì)(知道的大神麻煩留言告知哦)。

但不得不承認(rèn)的是,很多時(shí)候我們都對(duì)程序員有太多刻板印象的誤解。那些看起來(lái)「木訥無(wú)趣」的程序員們認(rèn)真起來(lái),真的可能是最浪漫的人呢。

斷網(wǎng)環(huán)境下,Google瀏覽器頁(yè)面的小恐龍可以打游戲喲

Google Chrome 是一款由 Google開(kāi)發(fā)的 Web瀏覽工具,大氣的界面設(shè)計(jì)、良好的使用體驗(yàn)以及強(qiáng)大的插件擴(kuò)展功能,使其受到大量用戶的喜愛(ài)。在完善產(chǎn)品功能的同時(shí),Google 的設(shè)計(jì)師們也不忘花費(fèi)一些「小心思」讓產(chǎn)品更加有趣味性:在瀏覽器出現(xiàn)錯(cuò)誤或無(wú)網(wǎng)的情況下(想試試么?斷開(kāi)Wi-Fi或者拔下網(wǎng)線看看),我們會(huì)看到這只可愛(ài)的像素小恐龍。

小恐龍出現(xiàn)時(shí)是靜止的,但只要你按下鍵盤的左右鍵,這只小恐龍就會(huì)跑起來(lái),而操控上下鍵它就能躲避路上的障礙物。當(dāng)出錯(cuò)頁(yè)面變成可愛(ài)的小游戲,原本焦慮不爽的負(fù)面情緒好像也就沒(méi)那么嚴(yán)重了。一旦網(wǎng)絡(luò)恢復(fù),瀏覽器會(huì)自動(dòng)刷新到你所要瀏覽的頁(yè)面。真的是超貼心的設(shè)計(jì)了。

「親戚計(jì)算器」?原來(lái)小米還有這么有趣的功能設(shè)計(jì)

小米計(jì)算器內(nèi)置「親戚計(jì)算器」的功能,各種復(fù)雜的親戚關(guān)系幫你一鍵解決。老婆弟弟的妻子應(yīng)該怎樣稱呼呢?相信很多人都有過(guò)類似的對(duì)親戚關(guān)系產(chǎn)生疑問(wèn)的困擾。

梳理親戚關(guān)系有時(shí)候真讓人頭大,小米手機(jī)就很貼心的在系統(tǒng)里自帶了「親戚計(jì)算器」。將日常的復(fù)雜關(guān)系都羅列了出來(lái),真是符合中國(guó)特色的計(jì)算器設(shè)計(jì)呢~

揉成一團(tuán)的廢紙,會(huì)讓你聯(lián)想到「刪除」這個(gè)動(dòng)作么?

「作文紙條」App對(duì)于每日信息與文章的推送有著自己獨(dú)特的設(shè)計(jì)邏輯,如果推送內(nèi)容用戶當(dāng)天未讀,系統(tǒng)會(huì)將推送內(nèi)容自動(dòng)移到「廢紙簍」里。為了讓用戶在瀏覽「廢紙簍」內(nèi)容時(shí),明確感知到被刪內(nèi)容與正常內(nèi)容的差別,躺在「廢紙簍」里的信息視覺(jué)上模擬了揉皺紙團(tuán)的形象。

如同我們?cè)诂F(xiàn)實(shí)生活里,會(huì)將寫作時(shí)不滿意的內(nèi)容從筆記本中撕掉,并揉成紙團(tuán)丟進(jìn)垃圾桶的行為一般。將用戶熟悉的真實(shí)生活里的行為狀態(tài),移植到虛擬的交互設(shè)計(jì)里,會(huì)使用戶與產(chǎn)品的交互過(guò)程更形象生動(dòng)。

支付寶的小無(wú)奈

偶然在支付寶的芝麻信用里發(fā)現(xiàn)滿700分,就可以免押金租用一些數(shù)碼產(chǎn)品了。覺(jué)得很不錯(cuò)想分享這個(gè)信息給朋友,就點(diǎn)了一下轉(zhuǎn)發(fā)微信好友,結(jié)果發(fā)現(xiàn)微信不讓分享支付寶的信息。

本來(lái)分享受限的挫敗感讓人心情很不好,但當(dāng)看到支付寶很無(wú)奈的提示文案「微信又不讓分享了,整個(gè)人都不好了」,不愉快的心情立馬被逗樂(lè)了。相較之前微信分享失敗的一串鏈接,這樣幽默的微文案提示真的可愛(ài)多了呢~

優(yōu)優(yōu)教程網(wǎng)首頁(yè)里藏著的可愛(ài)表情,你發(fā)現(xiàn)了幾個(gè)?

當(dāng)初在制作優(yōu)優(yōu)網(wǎng)首頁(yè)的時(shí)候,為了不讓 hover狀態(tài)(鼠標(biāo)懸浮)過(guò)于無(wú)趣,分別在「靈感頻道」「教程排行榜 」「軟件排行榜」的 hover狀態(tài)里設(shè)計(jì)了不同的3個(gè)小表情,而且設(shè)計(jì)者大有來(lái)頭,正是人見(jiàn)人愛(ài)、花見(jiàn)花開(kāi)的美丫姐。

她機(jī)靈的調(diào)整了圖標(biāo)狀態(tài)后,從后臺(tái)數(shù)據(jù)來(lái)看,這里的點(diǎn)擊確實(shí)停駐時(shí)間長(zhǎng)了一些,相信讓用戶會(huì)心一笑的同時(shí),也拉近了用戶和平臺(tái)的距離感。不妨在你的下一個(gè)案例里也試試喲~

2233娘真是貼心的小姐姐(*?▽?*)

登錄網(wǎng)站或應(yīng)用在輸入密碼時(shí),無(wú)論周圍環(huán)境如何,我們總會(huì)潛意識(shí)里產(chǎn)生一絲不安全感。B站對(duì)于這個(gè)問(wèn)題的處理方式顯得十分可愛(ài),在用戶登錄賬號(hào)輸入密碼時(shí)背景里的2233娘會(huì)出現(xiàn)雙手捂眼的小動(dòng)畫。整個(gè)輸入密碼的操作其實(shí)與其他應(yīng)用可能并無(wú)差別,但因?yàn)橛辛诉@個(gè)蒙眼動(dòng)作的心理暗示作用,用戶會(huì)感到自己的隱私受到保護(hù)與尊重從而產(chǎn)生安全感。

讓人意想不到的團(tuán)隊(duì)展示hover效果

drygital設(shè)計(jì)工作室的網(wǎng)站有著個(gè)性又炫酷的視覺(jué)與交互效果。團(tuán)隊(duì)展示界面的 hover效果,就讓人意想不到眼前一亮:當(dāng)鼠標(biāo)的光標(biāo)移到單個(gè)成員的半身像時(shí),原本正襟危坐的照片會(huì)變成另一張,展示該成員個(gè)性或喜好的搞怪照片。

原照片展示了團(tuán)隊(duì)成員在工作中嚴(yán)謹(jǐn)專業(yè)的一面,而 hover效果呈現(xiàn)的圖片則展示了成員們私下生活里幽默有趣、個(gè)性鮮明的另一面。這樣的設(shè)計(jì)不僅突出了團(tuán)隊(duì)成員的個(gè)人特色展示,利于團(tuán)隊(duì)的歸屬感與凝聚力提升,也展現(xiàn)了團(tuán)隊(duì)的開(kāi)放包容與活力創(chuàng)新。

時(shí)間走著滴答滴,iPhone的時(shí)鐘藏著自己的小秘密

大家都知道 iOS系統(tǒng)的時(shí)鐘桌面圖標(biāo)會(huì)始終顯示當(dāng)前時(shí)間,但很少有人關(guān)注過(guò)時(shí)鐘圖標(biāo)里秒針的走動(dòng)方式。在常規(guī)狀態(tài)下,時(shí)鐘圖標(biāo)的秒針會(huì)呈現(xiàn)掃秒式地轉(zhuǎn)動(dòng);但當(dāng)桌面圖標(biāo)處于長(zhǎng)按狀態(tài)的晃動(dòng)效果時(shí),小時(shí)鐘的秒針會(huì)立馬變?yōu)樘胧降未鸬未鸬刈邉?dòng)起來(lái)。

據(jù)說(shuō)這個(gè)隱蔽的小細(xì)節(jié)設(shè)計(jì)是想表達(dá)向傳統(tǒng)時(shí)鐘的運(yùn)行模式致敬的意思。機(jī)械鐘秒變石英鐘,你 get到了 iPhone時(shí)鐘的小秘密了么?

有道詞典也賣萌,一句有溫度的文案會(huì)有怎樣的力量?

似信息崩潰,或加載緩慢的問(wèn)題,在產(chǎn)品實(shí)際使用中實(shí)在在所難免,一旦出現(xiàn),用戶的好情緒一定會(huì)受到影響。在這種時(shí)刻,一句生動(dòng)而有溫度的文案就是可以安撫用戶情緒、改善使用體驗(yàn)的利器法寶。


藍(lán)藍(lán)設(shè)計(jì)www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

 

產(chǎn)品設(shè)計(jì)師必備的模態(tài)體驗(yàn)知識(shí)

資深UI設(shè)計(jì)者

如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請(qǐng)點(diǎn)這里


很多設(shè)計(jì)師根據(jù)直覺(jué)進(jìn)行產(chǎn)品設(shè)計(jì)。雖然大部分情況下是沒(méi)問(wèn)題的,但是已經(jīng)證明了的通用標(biāo)準(zhǔn)可以更好的幫助你從邏輯上構(gòu)建有理有據(jù)的UI解決方案,而不是僅僅依賴于你的直覺(jué)。


本文我們將探討UI設(shè)計(jì)中的模態(tài)通用標(biāo)準(zhǔn),討論為什么僅有兩種類型的原因,并且分析App和網(wǎng)站在將信息體系結(jié)構(gòu)和用戶信息流轉(zhuǎn)換為直觀的用戶界面是如何失敗的,本文將使用“Purrrfect”這個(gè)產(chǎn)品來(lái)講解。


兩種基本屏幕類型:模態(tài)屏幕、非模態(tài)屏幕


基本每個(gè)可視化窗口幾乎都屬于這兩類中的一個(gè)。為了理解模態(tài)與非模態(tài)的區(qū)別,我們首先要定義模態(tài)屏幕。


什么是“模態(tài)屏幕”?

模態(tài)屏幕示例模態(tài)屏幕示例

模態(tài)屏幕有不同的形狀和大?。?/span>

全屏模態(tài)視圖(左1)

彈出窗口(左2)

氣泡彈窗(左3)

燈箱彈窗(左4)

快訊/通知

...


模態(tài)屏幕和非模態(tài)屏幕這兩種類型看起來(lái)似乎很好理解,它們都從屬于App的主窗口。但是有一個(gè)重要的區(qū)別:


模態(tài)窗口

創(chuàng)建一個(gè)禁用主窗口的模式,模態(tài)窗口作為前面的子窗口使其保持可見(jiàn)。用戶必須先與模態(tài)窗口進(jìn)行交互才能返回父級(jí)應(yīng)用程序。

 —— 維基百科


大多數(shù)模態(tài)屏幕,特別是在桌面應(yīng)用上可以輕松識(shí)別,因?yàn)樗鼈兏采w主窗口并且可見(jiàn):主窗口背景遮罩的彈出窗,彈出菜單和彈出框?qū)υ捒颍瑹粝鋸椏?,警告?..


但是移動(dòng)設(shè)備上的屏幕空間有限,這也是移動(dòng)設(shè)備上的許多模態(tài)屏幕占據(jù)整個(gè)屏幕的原因。它們不再保持底層主窗口可見(jiàn),所以很難將它與非模態(tài)屏幕區(qū)分開(kāi)來(lái):


Image title

iOS示例:移動(dòng)設(shè)備上的模態(tài)屏幕


兩者的主要區(qū)別在于屏幕的交互方式不同。雖然非模態(tài)屏幕允許用戶簡(jiǎn)單地返回到父級(jí)屏幕,但是模態(tài)屏幕要求用戶在返回主窗口之前完成操作(示例中為“保存”)或取消當(dāng)前操作。


非模態(tài)屏幕最明顯可視信息便是導(dǎo)航欄(示例中為標(biāo)簽欄)。即使在子級(jí)頁(yè)面,非模態(tài)屏幕也允許用戶在主導(dǎo)航來(lái)回跳轉(zhuǎn)。另外模態(tài)屏幕要求用戶在再次使用主導(dǎo)航之前必須關(guān)閉窗口(示例中為“Save ”或“ Cancel ”)。


為什么要使用模態(tài)?

模態(tài)屏幕解決了一個(gè)簡(jiǎn)單的問(wèn)題:用戶容易分心,所以有時(shí)候必須讓用戶全神貫注的進(jìn)行操作。單一的模態(tài)屏幕正是要求人集中在單一的任務(wù)上,然后再繼續(xù)其他操作。


“模態(tài)通過(guò)阻止人們?cè)谕瓿扇蝿?wù)或解除消息或視圖之前做其他事情來(lái)創(chuàng)造焦點(diǎn)” 

—— Apple


什么時(shí)候應(yīng)該使用模態(tài)?

模態(tài)屏幕的規(guī)則我們已經(jīng)了然于胸,與非模態(tài)屏幕相比,它能達(dá)到的目的是什么,應(yīng)該在什么樣的情況下使用它呢?


試想一下,我們正在創(chuàng)造一個(gè)巧妙而新穎的App:“ Purrrfect ” , 一個(gè)小貓數(shù)據(jù)庫(kù),它允許用戶上傳,查看和評(píng)論可愛(ài)的貓咪GIF。

Image title

資料來(lái)源:https://giphy.com/gifs/tDgXAst2PhIYw


我們App(簡(jiǎn)化)用戶流程如下圖所示:用戶打開(kāi)App,進(jìn)入幾個(gè)可用選項(xiàng)卡之一(我們的小貓數(shù)據(jù)庫(kù)),點(diǎn)擊其中一只小貓(進(jìn)入詳細(xì)的單一小貓視圖),然后點(diǎn)擊評(píng)論部分(進(jìn)入評(píng)論部分)。

Image title

Purrrfect用戶流程


另外用戶可以在每個(gè)階段執(zhí)行補(bǔ)充操作。例如他可以在小貓數(shù)據(jù)庫(kù)頁(yè)面中將另一只小貓?zhí)砑拥綌?shù)據(jù)庫(kù)中,又或者他可以在小貓?jiān)斍轫?yè)中編輯數(shù)據(jù)。


如何分辨模態(tài)與非模態(tài),其實(shí)沒(méi)有那么容易,這些只是我個(gè)人的經(jīng)驗(yàn)總結(jié):對(duì)自包含過(guò)程使用模態(tài)屏幕,對(duì)其他所有內(nèi)容使用非模態(tài)屏幕。


“自包含過(guò)程”是指每個(gè)操作都有明確的起點(diǎn)和終點(diǎn)。此操作有明確的時(shí)間范圍,將用戶從一般用戶流中移出,讓他專注于操作,然后再將他帶回到開(kāi)始的位置。


“需要特定的用戶任務(wù),決策或確認(rèn)的關(guān)鍵信息”

——Google


對(duì)于Purrrfect App來(lái)說(shuō),這意味著主要用戶流不是模態(tài)的。但是特殊的限時(shí)操作,如添加小貓,編輯小貓和撰寫評(píng)論都是模態(tài)的。

Image title

在用戶返回主流程之前,可以取消或保存完成所有模態(tài)操作。因此模態(tài)屏幕使用取消和保存按鈕(或其他類似操作)而不是后退按鈕。如果您的后退按鈕在非模態(tài)屏幕中觸發(fā)保存操作,您可能需要考慮使用取消和保存按鈕切換到模態(tài)屏幕。如果在模態(tài)屏幕中有兩個(gè)不同的操作,例如取消和保存,則無(wú)意義(因?yàn)樗鼈儠?huì)觸發(fā)相同的操作)您可能希望切換到非模態(tài)視圖。在這種情況下,主導(dǎo)航(例如標(biāo)簽欄)也應(yīng)保持在屏幕上可見(jiàn)。


讓我們回到我們改變游戲規(guī)則的App,Purrrfect界面如下圖所示:

Image title

Purrrfect用戶界面


在實(shí)際情況中,模態(tài)和非模態(tài)屏幕之間的區(qū)別通常沒(méi)那么明顯。例如圖像全屏頁(yè)面在大多數(shù)應(yīng)用中都是模態(tài)的,盡管它不是進(jìn)程或?qū)υ捒?。在一些特殊情況下,模態(tài)屏幕可能會(huì)承載頁(yè)面的焦點(diǎn)。如果我們的App屏幕中間是沒(méi)有其他操作(如編輯或評(píng)論)的情況,我們可能使用模態(tài)(全屏視圖)。但由于它允許用戶更深入地進(jìn)入信息架構(gòu)并執(zhí)行各種附加操作(顯示注釋,編輯  ......),因此它不再具有明確的終點(diǎn),因此它是主流程的一部分,所以應(yīng)該選擇非模態(tài)視圖。


設(shè)計(jì)師有責(zé)任了解清楚App的流程,評(píng)估某個(gè)操作是否應(yīng)該單獨(dú)展示,從而決定來(lái)模態(tài)是否有意義。如有疑問(wèn),請(qǐng)記住Apple的指導(dǎo)方針:


盡量減少模態(tài)的使用。通常人們更喜歡以非線性的方式與應(yīng)用交互。只有在獲得某人注意、任務(wù)必須完成或放棄,以繼續(xù)使用應(yīng)用或保存重要數(shù)據(jù)時(shí),才考慮創(chuàng)建一個(gè)模態(tài)來(lái)連接上下層級(jí)。

——? Apple


雖然不需要嚴(yán)格區(qū)分模態(tài)和非模態(tài),界面也可以完美展現(xiàn)。但是模態(tài)的概念深深植根于Apple,Google,Microsoft等企業(yè)的界面生態(tài)系統(tǒng)中,且用戶已經(jīng)形成了相應(yīng)的期望值。


如果Apple時(shí)不時(shí)的違反自己的規(guī)則,那么Apple將不會(huì)是Apple。例如,新版App Store在“今日”標(biāo)簽中打開(kāi)亮點(diǎn)作為模態(tài)屏幕,但仍然允許用戶在屏幕底部導(dǎo)航到下一步(沒(méi)有明確的終點(diǎn))。這樣用戶就可以在模態(tài)屏幕內(nèi)部更深入地導(dǎo)航到其他流程。從推薦以外的其他內(nèi)容打開(kāi)相同的App屏幕會(huì)導(dǎo)致屏幕顯示為非模態(tài)屏幕。這將保留標(biāo)簽欄和后退操作(再次單擊當(dāng)前標(biāo)簽欄圖標(biāo)以轉(zhuǎn)到其主屏幕)。

Image title

不一致的Apple UI


左邊的不一致可以通過(guò)....來(lái)解決

A:...在非模態(tài)子屏幕中打開(kāi)高亮顯示,并帶有后退按鈕并保留標(biāo)簽欄

B:...一旦用戶點(diǎn)擊模態(tài)屏幕內(nèi)的鏈接并繼續(xù)在App的父級(jí)別上的非模態(tài)子屏幕操作,從而關(guān)閉模態(tài)屏幕。


如何使用模態(tài)?

現(xiàn)在我們對(duì)何時(shí)使用模態(tài)有了一個(gè)大致的了解。那么“我們?nèi)绾芜M(jìn)行設(shè)計(jì)?”這是目前唯一的問(wèn)題。下面是對(duì)模態(tài)屏幕檢查后得到的列表:


頂部導(dǎo)航欄始終顯示關(guān)閉按鈕(或“取消”/“丟棄”/“最小化”/ ...)。當(dāng)用戶迷路時(shí),可以輕松關(guān)閉疊加層并導(dǎo)航回App的頂層。


iOS和Android上的取消按鈕通常位于導(dǎo)航欄的左上角。Android更喜歡關(guān)閉/“x”圖標(biāo),而iOS則喜歡“取消”文本,但是圖標(biāo)按鈕在ios也很常見(jiàn),經(jīng)常使用ios設(shè)備的應(yīng)該都知道。


一般情況下,iOS和Android上的保存按鈕都位于導(dǎo)航欄的右上角。但是這種放置規(guī)則在大屏幕設(shè)備上是不可取的。所以在屏幕底部固定浮動(dòng)或頁(yè)面末端的內(nèi)嵌是我個(gè)人推薦的放置位置。

Image title


多步模態(tài)

一旦模態(tài)對(duì)話框由多個(gè)步驟或子級(jí)頁(yè)面組成,事情就會(huì)變得更加復(fù)雜。一般情況下,繼續(xù)按鈕顯示在右上角。第二步不會(huì)打開(kāi)新的模態(tài)屏幕,而是保留在當(dāng)前模態(tài)屏幕,并在現(xiàn)有模態(tài)上覆蓋非模態(tài)子屏幕。


當(dāng)在屏幕底部放置主要操作(“保存”,“應(yīng)用”或“繼續(xù)”)時(shí),模態(tài)第二步的右上區(qū)域釋放了可選取消按鈕的空間。雖然會(huì)從左到右跳轉(zhuǎn),但這種方案仍然比不能在子屏幕上直接關(guān)閉更好一些。

Image title


動(dòng)畫

截止目前,iOS和Android在模態(tài)的使用方面非常相似。但是動(dòng)畫方面并不是這樣的。


iOS:動(dòng)畫在iOS中高度標(biāo)準(zhǔn)化。

非模態(tài)屏幕從右側(cè)進(jìn)入框架。標(biāo)簽欄在屏幕底部保持不變。頂部的導(dǎo)航欄也保持不變,但其內(nèi)容在自定義轉(zhuǎn)換中淡入淡出。此動(dòng)畫還為用于返回的邊緣滑動(dòng)手勢(shì)提供了基礎(chǔ)。


另一方面模態(tài)屏幕從框架的底部滑入并覆蓋整個(gè)界面(新的頂部導(dǎo)航欄)。他們不使用邊緣滑動(dòng)手勢(shì),如果沒(méi)有保存之類的重要操作,自定義下拉關(guān)閉手勢(shì)可能會(huì)好一些。


Android: Android上的動(dòng)畫更加的豐富多樣。

Google建議在Material Design指南中使用“有意義的過(guò)渡” 。Android本身并不區(qū)分動(dòng)畫是否為模態(tài)或者非模態(tài)。


總結(jié)

大部分設(shè)計(jì)師根據(jù)直覺(jué)來(lái)進(jìn)行產(chǎn)品設(shè)計(jì)。有時(shí)候直覺(jué)的確很重要。但是更重要的是要我們需要了解一些通用標(biāo)準(zhǔn),以便于在特定的時(shí)候選擇更好的適應(yīng)或者改變。


在我看來(lái)模態(tài)的概念是當(dāng)今應(yīng)用設(shè)計(jì)中最被忽視的UX原則之一。跨平臺(tái)和Web本地混合應(yīng)用并不能很好的使用模態(tài)的指南和規(guī)范。但是模態(tài)的基本規(guī)則你應(yīng)該了解,以便在必要的時(shí)候適應(yīng)或者改變它。


藍(lán)藍(lán)設(shè)計(jì)www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。

 

轉(zhuǎn)變被動(dòng)型設(shè)計(jì)思維 建立的設(shè)計(jì)流程

資深UI設(shè)計(jì)者

如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請(qǐng)點(diǎn)這里

我是從十幾人的小公司逐步跳槽到目前2千多人的中型公司的,朋友們吐槽的PM傻*、設(shè)計(jì)當(dāng)牲口、需求臨時(shí)亂改等等都經(jīng)歷過(guò),即使現(xiàn)在偶爾也有該情況發(fā)生。


如果你真的非常想進(jìn)階高級(jí)UI設(shè)計(jì)師行列、想突破底層職業(yè)生涯的瓶頸,

請(qǐng)逐漸放棄“你看領(lǐng)導(dǎo)傻逼不懂設(shè)計(jì),領(lǐng)導(dǎo)看你傻逼瞎JB設(shè)計(jì)”的態(tài)度。

Image title

對(duì)待工作的態(tài)度絕對(duì)是初中級(jí)UI設(shè)計(jì)師和高級(jí)UI設(shè)計(jì)師之間最大的區(qū)別;

有朋友說(shuō)因?yàn)樗麄兪谴笈?,自帶“牛逼設(shè)計(jì)”Buff,拿出來(lái)的東西別人第一印象就認(rèn)可,領(lǐng)導(dǎo)沒(méi)那么多事;自己在公司里就是個(gè)打雜UI,誰(shuí)都能上來(lái)捅一刀,沒(méi)可比性。


從大濕個(gè)人經(jīng)歷來(lái)看,任何環(huán)境的領(lǐng)導(dǎo)和工作本質(zhì)上都一樣,不可能說(shuō)看人下菜碟:給高級(jí)UI設(shè)計(jì)師的需求就完美清晰、需求明確,到手就能絲滑流暢不便秘的出稿;

給初中級(jí)UI的需求就邏輯混亂、模糊不清,到手是一坨屎還是稀的,握都握不住。


————————我是分割線————————


造成UI設(shè)計(jì)師高低級(jí)別之分的原因一個(gè)是能力差距,另一個(gè)是處事態(tài)度。

首先除工作經(jīng)驗(yàn)之外的能力都是需要初入職場(chǎng)就主動(dòng)訓(xùn)練的,這和所處工作環(huán)境無(wú)關(guān),它不會(huì)隨著工作年限增長(zhǎng)而有所提升,只能有意識(shí)的訓(xùn)練才行,包括溝通能力、分析能力、控場(chǎng)能力、分享能力等等。


工作初期不訓(xùn)練自身的主導(dǎo)能力,想著等有經(jīng)驗(yàn)了、是大牛了的時(shí)候別人就認(rèn)可那是不可能的;等到職業(yè)中后期你已經(jīng)發(fā)育不起來(lái)了,只能淪為被動(dòng)型美工,你們肯定也見(jiàn)過(guò)30多歲還是底層的平庸程序員、設(shè)計(jì)師。


初期能力確實(shí)有限但一定要敢說(shuō)敢練,想法無(wú)論對(duì)錯(cuò)一定要表達(dá)出來(lái),這是訓(xùn)練溝通和思考能力;最怕的就是做設(shè)計(jì)師的有話憋著不說(shuō),久而久之連敢想的能力都沒(méi)了。


————————我是分割線————————


能力差距是高低之分的硬性條件,但成為行業(yè)精英的人還是只有那20%的人,處事態(tài)度就是決定成就的另一軟性條件。

當(dāng)然不要求步入職場(chǎng)沒(méi)多久的人就有工作十多年的認(rèn)知和覺(jué)悟,借用華強(qiáng)哥的話:“年輕人不氣盛那還叫年輕人嗎?”


只是希望能及早的開(kāi)始矯正工作中的負(fù)面情緒,妄自菲薄絕對(duì)會(huì)造成惡性循環(huán)。

心里定位上就認(rèn)為自己不行,別人當(dāng)然也會(huì)覺(jué)得你不行,所以說(shuō)自信也是搞設(shè)計(jì)的必備心理素質(zhì),實(shí)話來(lái)講負(fù)面情緒在潛意識(shí)里確實(shí)會(huì)影響你的真實(shí)水平。


————————我是分割線————————


從進(jìn)入行業(yè)職場(chǎng)開(kāi)始,就要樹(shù)立一個(gè)良好的行業(yè)價(jià)值觀和從業(yè)態(tài)度。

很多從事UI設(shè)計(jì)的朋友,可能是學(xué)校相關(guān)專業(yè)、亦或培訓(xùn)轉(zhuǎn)行、再或者就是為了賺錢,怎么進(jìn)入這行無(wú)所謂,畢竟移動(dòng)互聯(lián)網(wǎng)爆發(fā)時(shí)給了所有人一塊蛋糕;


但是進(jìn)入后可能發(fā)現(xiàn)這一行不那么好做,絲毫不比之前從事行業(yè)輕松,更別提在學(xué)校的狀態(tài)了,錢難賺事還多;不過(guò)既然從事這個(gè)行業(yè),就要受得住壓力,擺的正態(tài)度,有做到行業(yè)精英的覺(jué)悟和沖勁,因?yàn)槟悴蛔鲞€有數(shù)十萬(wàn)的人要涌入這個(gè)行業(yè)等著做。


· Part01 設(shè)計(jì)流程解析 ·


大部分設(shè)計(jì)師可能受限于公司環(huán)境處于一種被動(dòng)設(shè)計(jì)環(huán)節(jié)里,我們來(lái)看下標(biāo)準(zhǔn)設(shè)計(jì)流程中設(shè)計(jì)所處的位置:

Image title

與設(shè)計(jì)相關(guān)的環(huán)節(jié)幾乎處于流程底部了,這也導(dǎo)致了一個(gè)現(xiàn)狀:設(shè)計(jì)師不參與前期工作又或者名義上參與了前期工作,但沒(méi)有從設(shè)計(jì)角度提出任何意見(jiàn),只是被動(dòng)接受。


雖然很多招聘需求上已經(jīng)寫明了:參與項(xiàng)目前期規(guī)劃,參與產(chǎn)品需求擬定等等;

但說(shuō)實(shí)話很多人把這個(gè)只當(dāng)作企業(yè)招聘的套話模版,其實(shí)這是企業(yè)真的希望設(shè)計(jì)師去參與的事,因?yàn)檫@樣可以幫助你更好的理解產(chǎn)品訴求,更有效的進(jìn)行本職工作。


————————我是分割線————————


下圖是大濕根據(jù)我目前的設(shè)計(jì)部日常工作總結(jié)的設(shè)計(jì)流程,也是我這里對(duì)設(shè)計(jì)師的基本能力要求;

它其實(shí)是一個(gè)閉環(huán),不過(guò)這里為了容易說(shuō)明我把它拆開(kāi)拉直了:

Image title

從上圖我們可以看到對(duì)UI設(shè)計(jì)師來(lái)說(shuō),它分為設(shè)計(jì)流程和設(shè)計(jì)職能兩個(gè)方面;

那這里來(lái)看一下為什么使用這種設(shè)計(jì)流程可以減少“需求難、設(shè)計(jì)難”的尷尬,同時(shí)我們也來(lái)看一下作為UI設(shè)計(jì)師,在不同階段的具體職能有哪些。


————————我是分割線————————


Image title

前期職能主要集中于產(chǎn)品階段和交互階段,目的是參與到產(chǎn)品整體設(shè)計(jì)中,從需求層和交互層理解產(chǎn)品功能,并以實(shí)際用戶角度和設(shè)計(jì)師角度去考慮產(chǎn)品是否合理。

這里只是給各位一個(gè)大綱,具體的交互可用性驗(yàn)證都會(huì)在后期內(nèi)容中詳細(xì)解讀。


————————我是分割線————————


Image title

中期職能就是所有設(shè)計(jì)師的本職工作階段,大濕這個(gè)系列的文章內(nèi)容多數(shù)集中于這個(gè)階段;主要是視覺(jué)設(shè)計(jì)層面的各類設(shè)計(jì)方法論如何應(yīng)用于實(shí)際工作設(shè)計(jì)中,這個(gè)我們后續(xù)也會(huì)有很多篇幅去詳解,這里不拓展了。


————————我是分割線————————


Image title

后期職能才是實(shí)際流程中最重要的環(huán)節(jié),因?yàn)榫退闱爸衅谝?guī)劃再好,他終究只是個(gè)未面世的概念階段;一旦實(shí)際開(kāi)發(fā)效果把控不好,產(chǎn)品一旦投入市面給用戶第一印象不好,想要挽回就太難了,所以作為設(shè)計(jì)師,一定要時(shí)刻跟進(jìn)著最后的一環(huán)。


————————我是分割線————————


不過(guò)這里還有一個(gè)默認(rèn)的設(shè)計(jì)師職場(chǎng)規(guī)則:

不要越權(quán),80%專注于本職工作內(nèi)容,20%參與建議其他環(huán)節(jié)內(nèi)容。

也就是說(shuō),作為UI設(shè)計(jì)師,你可以參與到需求環(huán)節(jié)或交互環(huán)節(jié)、對(duì)其提出建議和輔助修改內(nèi)容,但不可以橫插一杠子去干涉其他環(huán)節(jié)的工作決定。


所以如果目前你現(xiàn)在處于被動(dòng)接受型狀態(tài),那可以開(kāi)始嘗試改變現(xiàn)狀。

本意不是要求你去改變現(xiàn)有公司的狀態(tài)和環(huán)境,這也不是作為設(shè)計(jì)師能輕易改變的;

而是說(shuō)要開(kāi)始培養(yǎng)對(duì)UI設(shè)計(jì)師自身的一個(gè)認(rèn)知和定位,從而培養(yǎng)主動(dòng)性。


那也有朋友說(shuō)了你就會(huì)在這瞎JB扯,我們公司沒(méi)有PM、交互,都是老板直接說(shuō)要做個(gè)什么什么,然后需求、交互、設(shè)計(jì)都自己一個(gè)人做了,你說(shuō)這有屁用?

這我就覺(jué)得奇怪了,這公司都這樣了你還堅(jiān)持干嘛呀,我寫這個(gè)系列的目的不就是幫有需要的朋友早日進(jìn)入資源更好的環(huán)境嗎?


· Part02 設(shè)計(jì)方法論預(yù)熱 ·


下圖是我們團(tuán)隊(duì)工作中實(shí)際用到的設(shè)計(jì)方法論,現(xiàn)在不需要了解具體內(nèi)容,

因?yàn)楹罄m(xù)文章就是要向大家闡述這些方法如何結(jié)合到實(shí)際工作中的:

Image title

朋友們可能有疑問(wèn):我不是設(shè)計(jì)師嗎,弄這些方法論干嘛,我又不是PM,會(huì)做圖就行唄。但其實(shí)這是目前市場(chǎng)對(duì)高級(jí)設(shè)計(jì)師的要求,不僅要有視覺(jué)設(shè)計(jì)能力,更要有數(shù)據(jù)分析能力;


從13年互聯(lián)網(wǎng)爆發(fā)、萬(wàn)眾皆UI的盛況;到如今18年,熱度褪去行業(yè)清場(chǎng);但凡是能留下來(lái)的互聯(lián)網(wǎng)公司都摸清了如今環(huán)境下怎么去更貼合用戶口味,從市場(chǎng)中分一杯羹;


對(duì)設(shè)計(jì)師的能力要求也由13年的會(huì)做圖標(biāo)給8K,到現(xiàn)在七十二般武藝樣樣會(huì)的境地,這其實(shí)和冰山原理是一樣的,視覺(jué)表現(xiàn)層始終只是水上的一小部分,需求分析和用戶體驗(yàn)可用性才是水下的重頭部分,如今的企業(yè)如果真的想站得住腳,只能在這方面進(jìn)行競(jìng)爭(zhēng),市場(chǎng)就這樣,想立足的我們也沒(méi)辦法只能跟著前進(jìn)。


你從之前的專注視覺(jué)式工作到如今的數(shù)據(jù)、場(chǎng)景、用戶分析式工作勢(shì)必會(huì)覺(jué)得很累,但這是一個(gè)必經(jīng)階段。


————————我是分割線————————


方法論主要結(jié)合著上文的工作流程來(lái)看,是不同階段使用不同的理論指導(dǎo):

Image title

這些方法論具有模版性高、通用性強(qiáng)的特點(diǎn),可以復(fù)用到任何產(chǎn)品的設(shè)計(jì)分析中;


不需要對(duì)每種理論都理解透徹,我們本職是設(shè)計(jì)師,對(duì)設(shè)計(jì)常用理論吃透就可以了;

掌握其他相關(guān)理論只是為了更好的幫助我們?nèi)ダ斫夂团浜掀渌h(huán)節(jié)工作。


像“五導(dǎo)家”是阿里提出的產(chǎn)品設(shè)計(jì)流程,也是總監(jiān)來(lái)之后時(shí)刻向我們經(jīng)常灌輸?shù)?,作為產(chǎn)品設(shè)計(jì)流程的總體指導(dǎo)理論;

5W1H需求分析法能幫助我們更好的挖掘用戶實(shí)際需求,當(dāng)然這是PM常用的理論,但作為UI設(shè)計(jì)師也是我們?nèi)粘9ぷ髦谐S玫降姆椒ǎ?

KANO 模型是狩野紀(jì)昭發(fā)明的對(duì)用戶需求分類和排序的工具,延展出來(lái)的有“十字分析法”,在分析頁(yè)面內(nèi)容、主次排版時(shí)使用非常有效,這是交互和UI常用的理論,上文的設(shè)計(jì)流程中期職能也體現(xiàn)了對(duì)應(yīng)的應(yīng)用。


當(dāng)然我們這里還要清楚的認(rèn)識(shí)一點(diǎn),大濕從來(lái)不認(rèn)為設(shè)計(jì)師是理論派:

學(xué)習(xí)的所有理論知識(shí)目的都是為了經(jīng)我們手設(shè)計(jì)的產(chǎn)品體驗(yàn)更好、作出的設(shè)計(jì)稿更加站的住腳。

藍(lán)藍(lán)設(shè)計(jì)www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。


如何讓你的設(shè)計(jì)更有商業(yè)價(jià)值

資深UI設(shè)計(jì)者

如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請(qǐng)點(diǎn)這里

今年互聯(lián)網(wǎng)行業(yè)已步入了寒冬,整個(gè)行業(yè)大規(guī)模的裁員。美團(tuán)、拉勾、阿里、京東等公司均不同程度的“縮招”與裁員,預(yù)計(jì)會(huì)持續(xù)到2020年。時(shí)代發(fā)展很迅速,社會(huì)很殘酷,永遠(yuǎn)不要認(rèn)為危機(jī)離自己很遠(yuǎn)而安心地一直停留在舒適圈,因?yàn)楫?dāng)時(shí)代拋棄你的時(shí)候,并不會(huì)和你打招呼。面對(duì)環(huán)境的波動(dòng),最好的方式就是保持危機(jī)感,面對(duì)變化接受變化,并不間斷的學(xué)習(xí)。


——“在這個(gè)變幻莫測(cè)的時(shí)代,別只顧著低頭拉車,更要抬頭看路?!?


文章一共分為三個(gè)部分,它們之間的關(guān)系是循序漸進(jìn),逐層深入,又相輔相成。所以大家讀的時(shí)候,希望能夠融會(huì)貫通。


第一部分:設(shè)計(jì)行業(yè)的發(fā)展趨勢(shì)


我們正經(jīng)歷著巨大的商業(yè)模式變革與互聯(lián)網(wǎng)轉(zhuǎn)型,在這樣的驅(qū)動(dòng)下,設(shè)計(jì)師所承擔(dān)扮演的角色也會(huì)發(fā)生變化。根據(jù)設(shè)計(jì)價(jià)值,設(shè)計(jì)師被劃分為更靠近產(chǎn)品的UXD(User Experience)、以及在UXD基礎(chǔ)上提升出與業(yè)務(wù)更密切的UGD(User Growth Design),最后就是更偏純視覺(jué)的VD(Visual design)。那么在新的轉(zhuǎn)型中,設(shè)計(jì)師應(yīng)當(dāng)如何去打造自身的價(jià)值呢?

本文主要探討偏產(chǎn)品與業(yè)務(wù)方向的UXD與UGD。

Image title


一、設(shè)計(jì)與產(chǎn)品的關(guān)系


以前,設(shè)計(jì)師在團(tuán)隊(duì)里的位置會(huì)比較尷尬,因?yàn)闆](méi)法驗(yàn)證自己對(duì)業(yè)務(wù)的推動(dòng)是否產(chǎn)生了什么明確的價(jià)值。而大數(shù)據(jù)的來(lái)臨,設(shè)計(jì)的價(jià)值變得顯性化,作為與用戶關(guān)系密切的設(shè)計(jì)師,善用好數(shù)據(jù),可以發(fā)揮的作用其實(shí)很大。我們可以通過(guò)自己的設(shè)計(jì)思維與專業(yè)能力,為公司創(chuàng)造更大的價(jià)值,不單只是一個(gè)美觀的輸出。這就使得設(shè)計(jì)與產(chǎn)品業(yè)務(wù)關(guān)系越來(lái)越密切,是整個(gè)行業(yè)發(fā)展的必然趨勢(shì)。


舉一個(gè)設(shè)計(jì)以小成本提高業(yè)務(wù)的實(shí)例。這是我之前做的兩個(gè)雙11活動(dòng)運(yùn)營(yíng)位的入口圖。在改動(dòng)前banner點(diǎn)擊率大概是不到16%,改動(dòng)后提高到了40%,不消耗任何其他人力、物力成本,就可以用設(shè)計(jì)讓CTR翻倍。


設(shè)計(jì)目標(biāo):提高首頁(yè)banner與入口圖的點(diǎn)擊通過(guò)率

現(xiàn)有問(wèn)題:利益不突出、視覺(jué)點(diǎn)不夠集中、缺少點(diǎn)擊動(dòng)機(jī)

改進(jìn)方案:1、簡(jiǎn)化文案突出利益點(diǎn);2、增加商品推薦提高命中率;3、用搶的動(dòng)態(tài)按鈕引導(dǎo)用戶點(diǎn)擊;4、用動(dòng)態(tài)gif吸引用戶。

Image title


二、找到自身價(jià)值的重要性


前幾天幫一個(gè)朋友招設(shè)計(jì),面完后朋友問(wèn)我的意見(jiàn)。我說(shuō)手活可以,執(zhí)行也沒(méi)問(wèn)題。朋友打斷我說(shuō),除了基本的專業(yè)技能外,是否還能為公司帶來(lái)更進(jìn)一步的價(jià)值。很遺憾,這位設(shè)計(jì)師因缺少或者沒(méi)法證明自己有更高一層的價(jià)值,未滿足職位要求,最終沒(méi)有拿到offer。盡管我試著為她辯解說(shuō)插畫畫的還是很漂亮的。PM回我一句,我們不是招插畫,我們有更專業(yè)的插畫師。

像這樣的案例比比皆是,在我看了近百份簡(jiǎn)歷,面了不下十個(gè)設(shè)計(jì)師后,我覺(jué)得有必要跟大家分享一下設(shè)計(jì)師找到自身價(jià)值的重要性。而這個(gè)價(jià)值,不是我們覺(jué)得,而是要讓企業(yè)覺(jué)得我們能帶來(lái)他們需要的價(jià)值。


的確,很多招聘帖上會(huì)寫:會(huì)插畫、動(dòng)效可以加分。但我們必須得明白,加分是滿足必要條件之后才去考慮的。如果是去年,你也許會(huì)因?yàn)橛羞@樣的差異化優(yōu)勢(shì)而拿到一份還不錯(cuò)的offer,但是今年,10份簡(jiǎn)歷中有8份都會(huì)插畫,其中至少有3份以上畫的還挺不錯(cuò)。所以這個(gè)優(yōu)勢(shì)就會(huì)被大大削弱。并且形勢(shì)變了,公司更看重我們的設(shè)計(jì)能給產(chǎn)品的發(fā)展帶來(lái)多大的價(jià)值。

Image title


第二部分:了解設(shè)計(jì)師的價(jià)值分層


設(shè)計(jì)師的價(jià)值可以分為以下三層:設(shè)計(jì)協(xié)同、設(shè)計(jì)推動(dòng)業(yè)務(wù)增長(zhǎng)、設(shè)計(jì)驅(qū)動(dòng)產(chǎn)品。


第一層:設(shè)計(jì)協(xié)同


一個(gè)出色的執(zhí)行者,能夠在拿到需求后又完美地實(shí)現(xiàn)落地。簡(jiǎn)單地說(shuō)就是手上功夫好。


做好這個(gè)階段需要有優(yōu)秀的專業(yè)能力,良好的溝通能力,并參與到產(chǎn)品的探索與構(gòu)思中來(lái)。

Image title


第二層:推動(dòng)業(yè)務(wù)增長(zhǎng)


這個(gè)階段的設(shè)計(jì)師,會(huì)比上一個(gè)階段更能體現(xiàn)設(shè)計(jì)師的設(shè)計(jì)價(jià)值,并對(duì)產(chǎn)品產(chǎn)生一定的影響力。能在以用戶為中心的基礎(chǔ)上,推動(dòng)業(yè)務(wù)的增長(zhǎng),所以這個(gè)階段的設(shè)計(jì)也被稱為UGD(User Growth Design)。


需要設(shè)計(jì)師具備用戶洞見(jiàn)力,數(shù)據(jù)分析能力,從這兩個(gè)維度出發(fā),去熟悉業(yè)務(wù)、分析業(yè)務(wù),從而推動(dòng)業(yè)務(wù)。這個(gè)階段的設(shè)計(jì)師,也是市場(chǎng)最需要并且很稀缺的。

Image title


第三層:設(shè)計(jì)驅(qū)動(dòng)產(chǎn)品


這個(gè)階段的設(shè)計(jì)師,在團(tuán)隊(duì)中的價(jià)值可以說(shuō)是非常大了。從被動(dòng)的需求接收方,轉(zhuǎn)化為從戰(zhàn)略層,能主動(dòng)提出需求的一方。做到這一點(diǎn)的設(shè)計(jì)師是非常了不起的,也是我們UXD發(fā)展的終極方向。

Image title


第三部分:設(shè)計(jì)師需要具備的哪些思維?


一、從AARRR轉(zhuǎn)化型漏斗,培養(yǎng)增長(zhǎng)思維


設(shè)計(jì)師需要去深入探索產(chǎn)品本身,熟悉業(yè)務(wù),熟悉用戶。增長(zhǎng)黑客里有一個(gè)“AARRR”流量轉(zhuǎn)化漏斗型理論,就是根據(jù)不同階段的用戶參與行為的深度和類型,將我們的整個(gè)目標(biāo)拆分概括為:acquisition(獲取用戶)、Activation(激發(fā)活躍)、Retention(提高留存)、Revenue(增加收入)、Referral(傳播推薦)。在整個(gè)漏斗中,被導(dǎo)入的用戶在每個(gè)環(huán)節(jié)都會(huì)出現(xiàn)部分流失,最后層層深入到達(dá)底層的,實(shí)現(xiàn)最終轉(zhuǎn)化。

Image title


通過(guò)產(chǎn)品生命周期,設(shè)計(jì)師可以運(yùn)用自己的設(shè)計(jì)思維和專業(yè)技能,將每一層的漏斗直徑做到最大化,減少用戶的流失,抵達(dá)下一層的用戶就會(huì)更多,從而提高最終的轉(zhuǎn)化。


二、運(yùn)用GSA思維模型做設(shè)計(jì)


什么是GSA?

GSA分別代表的是:目標(biāo)(G=Goal),策略(S=Strategy),行動(dòng)(A=Action)

舉一個(gè)通俗易懂的例子,比如我想減肥,這是我定的目標(biāo)(G),然后我的策略(S)就是少吃多動(dòng),最后具體的做法(A)就是,不吃晚飯、每天運(yùn)動(dòng)2小時(shí)。

如何在具體項(xiàng)目中體現(xiàn)呢?下圖,運(yùn)用一個(gè)具體項(xiàng)目舉例:

Image title


GSA的特點(diǎn)是“以終為始”,優(yōu)勢(shì)在于可以幫助我們快速聚焦到最能幫助我們達(dá)成目標(biāo)、杠桿率(也就是投入產(chǎn)出比)最高的Action上。


三、培養(yǎng)數(shù)據(jù)思維,利用數(shù)據(jù)提升設(shè)計(jì)的價(jià)值


項(xiàng)目與需求上線后,設(shè)計(jì)師一定要去驗(yàn)證自己的設(shè)計(jì)是否有效地達(dá)成了目標(biāo)。這個(gè)時(shí)候你就需要去看數(shù)據(jù)反饋。沒(méi)有數(shù)據(jù)就就沒(méi)有比較,沒(méi)有比較就不能進(jìn)步。


關(guān)于數(shù)據(jù)的用處有很多,舉個(gè)例子,當(dāng)兩個(gè)人對(duì)各自的方案爭(zhēng)執(zhí)不休,分別覺(jué)得對(duì)方不好,但站在各自的邏輯上似乎都能說(shuō)得通,那怎么辦呢?分別做一個(gè)A/B測(cè)試,數(shù)據(jù)不會(huì)說(shuō)謊,哪一個(gè)方案更有效,一目了然。


那么如何將數(shù)據(jù)結(jié)合到我們的設(shè)計(jì)中呢?首先在設(shè)計(jì)前,我們需要先定一個(gè)目標(biāo),而每一個(gè)目標(biāo)就應(yīng)有一項(xiàng)對(duì)應(yīng)的數(shù)據(jù)指標(biāo)。比如,提高了某一塊的CTR(點(diǎn)擊通過(guò)率),提高CVR(轉(zhuǎn)化率),提高商品曝光、1/7/15/30日留存率等等。方便之后去驗(yàn)證自己的的action是否完成了自己的Goal。

Image title


拿到了數(shù)據(jù)之后,還需要分析數(shù)據(jù)。不管是有沒(méi)有達(dá)到目標(biāo),都要去分析原因,進(jìn)行復(fù)盤總結(jié)。復(fù)盤的好處是可以讓我們?cè)谶@一次項(xiàng)目中吸取有價(jià)值的經(jīng)驗(yàn)--失敗了就找失敗的原因,方便以后避開(kāi)同樣的錯(cuò)誤;成功了就分析成功的原因,并將成功的策略復(fù)制運(yùn)用到今后的工作中,增加以后的成功率。如此,不管有沒(méi)有成功,都能給我們帶來(lái)最大化的價(jià)值。我們也會(huì)更加的接近用戶、接近產(chǎn)品、接近業(yè)務(wù)。從而幫助我們進(jìn)一步洞察用戶、挖掘新的需求。

Image title


小結(jié):


以上就是今天所要分享的全部?jī)?nèi)容。再帶大家回顧一下,一共分為三部分:第一個(gè)是了解設(shè)計(jì)師的發(fā)展趨勢(shì),第二個(gè)是趨勢(shì)下的設(shè)計(jì)師價(jià)值分層(設(shè)計(jì)協(xié)同、設(shè)計(jì)推動(dòng)增長(zhǎng)、設(shè)計(jì)驅(qū)動(dòng)),第三個(gè)就是在價(jià)值分層的逐步遞升中所需要培養(yǎng)的用戶洞察力、GSA的策略、數(shù)據(jù)增長(zhǎng)思維等。

最后提示一下大家,閱讀的時(shí)候多融會(huì)貫通。另外,方法不是唯一的,要懂得去掌握方法的方法很重要。

藍(lán)藍(lán)設(shè)計(jì)www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì)  ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。

 

10個(gè)記憶深刻的產(chǎn)品設(shè)計(jì)神細(xì)節(jié)!

資深UI設(shè)計(jì)者

如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請(qǐng)點(diǎn)這里

在互聯(lián)網(wǎng)快速發(fā)展的進(jìn)程中,越來(lái)越多人將個(gè)人財(cái)產(chǎn)、隱私、數(shù)據(jù),以及心理安全都存放在產(chǎn)品平臺(tái)上。這么一來(lái),想要產(chǎn)品獲得用戶芳心,讓用戶用得放心,不僅要為用戶提供安全可靠的保障系統(tǒng),也要將安全氛圍顯化傳達(dá)給用戶。那么,可以從哪些方面著手設(shè)計(jì)產(chǎn)品,提升用戶安全感呢?下面一些案例,會(huì)從新的角度給你靈感。

上期回顧:《每月更新!10個(gè)記憶深刻的產(chǎn)品設(shè)計(jì)神細(xì)節(jié)》

1、ZEPETO是如何做到強(qiáng)制用戶注冊(cè),卻不讓人反感的?

很多時(shí)候我們可能只是心血來(lái)潮想嘗試一下某款app,并沒(méi)有注冊(cè)帳號(hào)長(zhǎng)期使用的打算。所以每當(dāng)打開(kāi)的應(yīng)用,如果出現(xiàn)強(qiáng)制要求注冊(cè),才能開(kāi)啟使用的情況,真的會(huì)對(duì)產(chǎn)品的體驗(yàn)好感全無(wú),甚至怕麻煩放棄使用。一些產(chǎn)品會(huì)提供「游客」身份試用簡(jiǎn)版「會(huì)員」享全部功能的選擇給新用戶,這無(wú)疑是一種體驗(yàn)不錯(cuò)的方案。

但如果受限于功能使用,或者就是要提高產(chǎn)品的用戶量,必須引導(dǎo)注冊(cè),該如何減少用戶的反感情緒呢?

最近爆紅的ZEPETO的登錄界面就很值得借鑒。用「制作ZEPETO」和「已有ZEPETO」的文案,替代生硬的「登錄」與「注冊(cè)」。相同的功能設(shè)計(jì),但因文案?jìng)鬟_(dá)情緒的不同給人帶來(lái)不一樣的感受。

「制作ZEPETO」幾個(gè)字不僅直白地說(shuō)明了產(chǎn)品意圖,還悄悄將「注冊(cè)」轉(zhuǎn)化成了用戶制作ZEPETO過(guò)程的一部分,無(wú)形中降低了用戶對(duì)強(qiáng)制性注冊(cè)的心理防備。

2、「抖音」的另類溫馨提示,規(guī)避責(zé)任和風(fēng)險(xiǎn)

為了吸引粉絲,短視頻的作者會(huì)爭(zhēng)相模仿,一些觀眾用戶也會(huì)因?yàn)橛腥とンw驗(yàn)嘗試,但很多視頻里的體驗(yàn)和動(dòng)作都是存在安全隱患的。為了規(guī)避風(fēng)險(xiǎn),「抖音」里某些視頻的下方會(huì)提示:「效果未知,請(qǐng)勿輕易嘗試」或者「該行為存在危險(xiǎn),請(qǐng)勿輕易模仿」。

如果刷「抖音」時(shí)長(zhǎng)超過(guò)五小時(shí),也會(huì)提示看視頻時(shí)長(zhǎng)并提醒用戶注意適當(dāng)休息。這些小提示的出現(xiàn),都是出于對(duì)用戶健康安全著想與負(fù)責(zé)的引導(dǎo),也是產(chǎn)品團(tuán)隊(duì)規(guī)避責(zé)任與風(fēng)險(xiǎn)的方式。

3、好的用戶提示能給用戶增加「安全感」

用戶在進(jìn)行語(yǔ)音交互時(shí),想取消當(dāng)前操作的概率非常大。如果系統(tǒng)按照錯(cuò)誤的指令執(zhí)行,會(huì)給用戶帶來(lái)挫敗感?!钢Ц秾殹沟恼Z(yǔ)音交互會(huì)根據(jù)用戶當(dāng)前的手勢(shì)進(jìn)行操作提醒,以減少用戶的學(xué)習(xí)成本。

不存在干擾或打斷用戶操作行為進(jìn)行的強(qiáng)制性,又能給予用戶對(duì)當(dāng)前操作進(jìn)行修正的機(jī)會(huì)。讓用戶輕松勝任操作,利用「控制錯(cuò)覺(jué)」打破用戶對(duì)不熟悉操作的顧慮與恐懼感。

4、適當(dāng)?shù)摹腹ぞ咛崾尽?能增加用戶的期待感

對(duì)于大多數(shù)團(tuán)隊(duì)來(lái)說(shuō),敏捷開(kāi)發(fā)時(shí)間短任務(wù)重,在有限時(shí)間內(nèi)并不能把所有功能都上線?!肝⑿拧箞F(tuán)隊(duì)在訂閱號(hào)里,添加了未開(kāi)發(fā)功能提示。

當(dāng)用戶長(zhǎng)按文章時(shí)會(huì)出現(xiàn)toast提示,用特定的交互與簡(jiǎn)要文字說(shuō)明提示用戶「功能正在開(kāi)發(fā)未上線」。

「工具提示」往往出現(xiàn)在新用戶引導(dǎo)流程,但微信團(tuán)隊(duì)將它用在了未完成開(kāi)發(fā)功能的提示上,讓用戶對(duì)之后上線的功能產(chǎn)生期待感。

5、怎樣向用戶傳達(dá)隱性的安全感?

在支付寶的「我的」頁(yè)面中,「總資產(chǎn)」的后面會(huì)顯示綠色的「賬戶安全保障中」的文案。同樣的,「財(cái)富」頁(yè)面的「總資產(chǎn)」項(xiàng)后面也會(huì)顯示「保障中」的微文案。不斷出現(xiàn)強(qiáng)調(diào)資金安全性的文案,其實(shí)是支付寶在通過(guò)細(xì)節(jié)設(shè)計(jì)提升用戶在使用產(chǎn)品期間的安全感。因?yàn)楫?dāng)涉及金錢交易時(shí),用戶都是極其慎重與不安的。

所以產(chǎn)品不僅要為用戶提供安全可靠的保障系統(tǒng),也要將不可見(jiàn)的安全氛圍顯性化傳達(dá)給用戶。通過(guò)界面細(xì)節(jié),比如文案展示出產(chǎn)品的安全性,能借助心理暗示的作用緩解用戶內(nèi)心的不安情緒,增強(qiáng)對(duì)產(chǎn)品的信任感。

6、「即刻」讓社區(qū)不友善言論自動(dòng)變萌的魔法是什么?

「即刻」app對(duì)于用戶評(píng)論的審核機(jī)制十分具有萌點(diǎn):如果用戶在發(fā)表評(píng)論的內(nèi)容中,包含不友善或具有人生攻擊的詞句,系統(tǒng)會(huì)自動(dòng)彈出模態(tài)彈窗,提醒用戶修改留言。如果用戶依舊不愿修改言論并堅(jiān)持發(fā)布,評(píng)論內(nèi)容是可以發(fā)布成功的,但言論中包含的不符合平臺(tái)規(guī)定的字眼會(huì)被系統(tǒng)強(qiáng)制修改。

比如在發(fā)布的評(píng)論中包含具有攻擊性的詞語(yǔ)「智障」,發(fā)布成功后會(huì)被系統(tǒng)修改為「大笨蛋」。沒(méi)有強(qiáng)行阻斷用戶的評(píng)論行為對(duì)用戶造成評(píng)論失敗的挫敗感,又巧妙化解了不友善言論的發(fā)布,維護(hù)了社區(qū)的和諧。將所有負(fù)面甚至不文明的言論全都自動(dòng)過(guò)濾強(qiáng)行變萌,設(shè)計(jì)出這個(gè)審核功能的小哥哥或小姐姐一定有著一顆敏感又溫柔的心吧~

7、也許你都不知道,自己會(huì)有「恐懼癥」

「恐懼癥」是一種以恐懼癥狀為主要臨床表現(xiàn)的精神類疾病,指對(duì)特定的人、物或場(chǎng)景有按耐不住的焦慮、緊張甚至是恐懼的心理。如果在「百度」搜索含有「密集恐懼癥」、「深海恐懼癥」等類似關(guān)鍵詞的圖片,會(huì)在呈現(xiàn)完整加載結(jié)果前出現(xiàn)遮罩遮蔽圖片,并用文案提醒用戶圖片可能引起不適請(qǐng)自行選擇是否繼續(xù)查看。

由于無(wú)法確保瀏覽內(nèi)容的用戶是否具有相關(guān)病癥,強(qiáng)制性阻斷操作給予提醒并將是否繼續(xù)的選擇權(quán)交與用戶,算是對(duì)用戶的使用體驗(yàn)很用心的考量了吧。

8、替用戶做決定,不一定是壞事

對(duì)于上班族而言,每天吃什么簡(jiǎn)直是個(gè)世紀(jì)難題。面對(duì)海量的店家及不同的組合優(yōu)惠,常常挑花了眼,還是無(wú)從下手。如果你也存在這樣的問(wèn)題,不如來(lái)試試「美團(tuán)外賣」新推出的「滿減神器」吧。

針對(duì)店家的優(yōu)惠特點(diǎn),系統(tǒng)會(huì)提前幫你羅列出最佳的優(yōu)惠選擇。不僅會(huì)標(biāo)注出各個(gè)套餐近期購(gòu)買的人數(shù),還會(huì)優(yōu)先推薦「高回頭率」的套餐選擇。解決了選擇困難的痛點(diǎn),讓用戶吃得實(shí)惠又省心。

9、轉(zhuǎn)賬也終于有「后悔藥」可以吃了

「支付寶」與「微信」早在幾年前就推出了「延時(shí)到賬」功能,但由于入口隱藏較深使用的人并不多。更重要的是即便中途發(fā)現(xiàn)被騙,也無(wú)法立馬撤銷交易,一旦延遲轉(zhuǎn)賬超時(shí)錢,還是會(huì)直接打到對(duì)方賬戶。而這一次新版「支付寶」聯(lián)合警方優(yōu)化了反詐騙的流程,對(duì)「延時(shí)到賬」功能的升級(jí)可謂是真正解決了轉(zhuǎn)賬安全的痛點(diǎn)。

對(duì)于選擇「延時(shí)到賬」的用戶,如果在到賬前發(fā)現(xiàn)被騙,雖無(wú)法自行撤回款項(xiàng)但只要上傳報(bào)警的相關(guān)憑證,這筆轉(zhuǎn)賬就會(huì)被臨時(shí)凍結(jié)。一旦警方判定被詐騙的情況屬實(shí),用戶的轉(zhuǎn)賬就能原路返回轉(zhuǎn)出帳號(hào)了。更貼心的是,即便用戶沒(méi)有進(jìn)行「延時(shí)轉(zhuǎn)賬」操作,當(dāng)「支付寶」的風(fēng)控系統(tǒng)識(shí)別到轉(zhuǎn)賬存在風(fēng)險(xiǎn)(比如對(duì)收款方賬戶的交易歷史行為存疑)會(huì)自動(dòng)提醒用戶進(jìn)行「延時(shí)轉(zhuǎn)賬」。

10、美團(tuán)外賣上線「加密號(hào)碼」,讓訂餐更安心

今天在用「美團(tuán)外賣」與商家進(jìn)行聯(lián)系時(shí),發(fā)現(xiàn)了一個(gè)「加密號(hào)碼」的彈窗。當(dāng)你確認(rèn)聯(lián)系商家后,會(huì)出現(xiàn)語(yǔ)音提示:「美團(tuán)外賣保護(hù)你的隱私,商家將不會(huì)知道你的號(hào)碼」。這個(gè)小細(xì)節(jié)很贊是因?yàn)樵诒Wo(hù)了用戶隱私的同時(shí)也通過(guò)語(yǔ)音提示在用戶心中強(qiáng)化了平臺(tái)的安全性與貼心。

以前如果用戶給商家差評(píng)了,很有可能會(huì)接到不少商家的騷擾電話,造成不好的產(chǎn)品使用體驗(yàn)。因此團(tuán)隊(duì)設(shè)計(jì)了「加密號(hào)碼」的功能,加強(qiáng)了用戶隱私的保護(hù),讓聯(lián)系商家變得更安心無(wú)負(fù)擔(dān)。

藍(lán)藍(lán)設(shè)計(jì)www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì)  cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。

 

追波粉絲7萬(wàn)的設(shè)計(jì)師Steve Wolf 是如何做Logo的?

資深UI設(shè)計(jì)者

如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請(qǐng)點(diǎn)這里

是什么讓你選擇進(jìn)入設(shè)計(jì)行業(yè)?能否講講你的成長(zhǎng)經(jīng)歷?

Steve Wolf:

很幸運(yùn),在我的成長(zhǎng)過(guò)程中,我的家庭非常支持我。我記得在5歲的時(shí)候就開(kāi)始跟著父親一起畫畫,有時(shí)候我會(huì)讓他給我畫一些東西,然后我就跑開(kāi)了,自己去畫它。我的父母都是音樂(lè)老師,所以音樂(lè)在我成長(zhǎng)中對(duì)我的影響也很大。

△ AFE

大約在高中快結(jié)束的時(shí)候,我就決定做一名工業(yè)設(shè)計(jì)師。我自己設(shè)計(jì)汽車,于是我就在內(nèi)布拉斯加大學(xué)卡尼爾分校學(xué)習(xí)藝術(shù)、CAD和素描課程。大二的時(shí)候,一個(gè)平面設(shè)計(jì)教授邀請(qǐng)我參加一個(gè)平面設(shè)計(jì)的資訊會(huì)議,當(dāng)時(shí)我對(duì)平面設(shè)計(jì)還不太了解,參加這個(gè)會(huì)議改變了我的人生軌跡,這之后,我的職業(yè)愿望從一個(gè)工業(yè)設(shè)計(jì)師改為平面設(shè)計(jì)師。

△ Bloody Mary Morning Poster

2011年,大學(xué)畢業(yè)沒(méi)多久,我搬到了達(dá)拉斯,在一家 Panini America 的體育球星卡公司擔(dān)任設(shè)計(jì)師,開(kāi)始了我的第一份工作,在這里,我為NFL,NBA,NHL和MLB設(shè)計(jì)了球星卡,并成為藝術(shù)總監(jiān)。四年后,我想要做一些改變,所以和妻子搬到德克薩斯州的奧斯汀,在那里我在GSD&M(GSD&M是美國(guó)德克薩斯的一家廣告公司,成立于1971年,客戶包括美國(guó)空軍、西南航空、凱撒賭場(chǎng)及酒店集團(tuán)等)廣告公司擔(dān)任高級(jí)設(shè)計(jì)師??爝M(jìn)到今天,我和我的妻子目前經(jīng)營(yíng)自己的設(shè)計(jì)工作室 Steve Wolf Designs。

△ working

在成長(zhǎng)中,增加了設(shè)計(jì)經(jīng)驗(yàn),同時(shí)我也犯了很多錯(cuò)誤。但作為設(shè)計(jì)師,重要的就是不斷的嘗試新的風(fēng)格,看看什么最適合你。直到今天,我依舊在努力提高自己的技術(shù),并在我的工作中嘗試新的風(fēng)格,只有這樣,我才能夠一直保持進(jìn)步。

優(yōu)設(shè):

以一個(gè)案例為例,能為我們講解一下設(shè)計(jì)過(guò)程么?

Steve Wolf:

Blueprint 是有史以來(lái)第一個(gè)全球性的學(xué)生運(yùn)動(dòng)員發(fā)展數(shù)字平臺(tái)/社區(qū),集數(shù)字媒體、學(xué)習(xí)、資源、工具和指導(dǎo)的獨(dú)特融合!他們的使命是關(guān)注學(xué)生運(yùn)動(dòng)員的整體發(fā)展與健康。

△ BluePrint

在與客戶進(jìn)行溝通時(shí),首先要確保了解他們是誰(shuí),以及他們想要什么樣的效果。在這個(gè)階段中,應(yīng)該從客戶那里獲得盡可能多的信息。我看到簡(jiǎn)報(bào)中的主要訊息是:這個(gè)品牌的核心價(jià)值觀是社區(qū)化、指導(dǎo)性、自我發(fā)現(xiàn)與靈感。該品牌的視覺(jué)設(shè)計(jì)是為了吸引各年齡段的學(xué)生運(yùn)動(dòng)員,包括年輕和年長(zhǎng)的。我擁有的信息越多,我就越有能力確保達(dá)到他們的期望并提供更有意義的工作。

△ BluePrint

△ BluePrint

△ BluePrint

在與客戶進(jìn)行初步對(duì)話之后,我開(kāi)始了情緒板階段:收集設(shè)計(jì),顏色,類型和攝影樣本,以創(chuàng)建可以進(jìn)行設(shè)計(jì)的可能方向。我向客戶提出了1-3個(gè)方向,這有助于我們所有人都能在風(fēng)格上找到相同的頁(yè)面。一旦客戶批準(zhǔn)了情緒板,我就開(kāi)始研究階段。

△ BluePrint

在研究階段,我查找競(jìng)爭(zhēng)對(duì)手的標(biāo)識(shí)/品牌,以確保我知道目前使用的是什么。我總是想努力創(chuàng)造出一些在競(jìng)爭(zhēng)中能夠脫穎而出的東西。我也研究別的設(shè)計(jì)實(shí)例,以幫助我獲得靈感。在研究階段,查看設(shè)計(jì)書(shū)籍、博客和 Pinterest 等內(nèi)容可以起到作用。

△ BluePrint

研究完成后,我就會(huì)開(kāi)始設(shè)計(jì)。根據(jù)項(xiàng)目和工作范圍,我通常會(huì)向客戶提供1-3種選擇。我們項(xiàng)目的大多數(shù)初始「草圖」通常直接在 Illustrator 中完成。初步設(shè)計(jì)探索完成后,我開(kāi)始完善最終選項(xiàng)以呈現(xiàn)給客戶。并確保我不會(huì)進(jìn)行無(wú)休止的修改。

△ BluePrint

一旦客戶確定了一個(gè)方向或者方案,我就開(kāi)始改進(jìn),并準(zhǔn)備最終設(shè)計(jì)方案。這個(gè)項(xiàng)目經(jīng)過(guò)了幾次修改,但最終的結(jié)果是讓客戶滿意,這是每個(gè)人都為之自豪的事情。

△ BluePrint

△ BluePrint

對(duì)比鮮明的色彩的搭配受到了體育產(chǎn)業(yè)的啟發(fā),并且對(duì)希望加入這個(gè)社區(qū)的學(xué)生產(chǎn)生吸引力。 字母「B」的造型作為了 Logo 的標(biāo)識(shí),可以在整個(gè)品牌中使用全彩色或黑白色。

優(yōu)設(shè):

在你的設(shè)計(jì)中,客戶的想法起到什么作用?

Steve Wolf:

它在整個(gè)過(guò)程中占比較大的部分,當(dāng)然也會(huì)影響最終的結(jié)果。每一天的結(jié)束,設(shè)計(jì)師的工作都應(yīng)該是把客戶的想法變成現(xiàn)實(shí)。

△ Degrees Of Perfect

在Steve Wolf Designs,我們將重點(diǎn)放在與客戶直接合作以獲得最佳結(jié)果。通過(guò)與客戶的對(duì)話,收集有關(guān)他們的想法的更多信息并提供新的觀點(diǎn),可以將他們的想法提升到一個(gè)新的水平,并使他們更強(qiáng)大。

優(yōu)設(shè):

您在設(shè)計(jì)過(guò)程中軟件操作與草圖部分是怎么操作的?

Steve Wolf:

我在整個(gè)作品中使用 Adobe Illustrator 最多。我發(fā)現(xiàn)它是我工作中最強(qiáng)大的工具,我喜歡用它工作。我也經(jīng)常使用 Indesign 和 Photoshop。

△ Herb Lester

我不會(huì)直接在紙上涂鴉,而是直接打開(kāi) Ai 來(lái)繪制草稿,當(dāng)然他們達(dá)到的目的是一樣的,一旦確定一些好的選項(xiàng),我就會(huì)將這些選項(xiàng)進(jìn)行細(xì)化,然后實(shí)現(xiàn)它們。

優(yōu)設(shè):

在進(jìn)行不同語(yǔ)種的 logo設(shè)計(jì),會(huì)有什么不同么?

Steve Wolf:

如果是其它語(yǔ)種,那肯定是一項(xiàng)挑戰(zhàn),但它不應(yīng)該成為設(shè)計(jì)的障礙。我的母語(yǔ)是英語(yǔ),所以如果我的任務(wù)是設(shè)計(jì)一些使用中文字符的東西,首先我需要確切的圖像來(lái)表示字符需要的樣子,保持可讀性,這樣我才能設(shè)計(jì)出適當(dāng)?shù)?logo。

△ Otto Cafe

這一切都是為了清楚地傳達(dá)一些東西,所以找一些能講或者讀這種語(yǔ)言的人幫忙是很有好處的。

優(yōu)設(shè):

您的設(shè)計(jì)靈感一般來(lái)源于什么?

Steve Wolf:

我受到平面設(shè)計(jì)行業(yè)以外的一些啟發(fā),比如烹飪、旅行和美術(shù)。我喜歡看烹飪節(jié)目和欣賞美食,這本身就是一種藝術(shù)形式。廚師準(zhǔn)備食物和掌握工藝的方式能夠激發(fā)我,并應(yīng)用在平面設(shè)計(jì)中。

△ CAFE BAR

每當(dāng)我到不同的城市或國(guó)家旅行時(shí),我總會(huì)感到神清氣爽并且有動(dòng)力去創(chuàng)造一些東西。沉浸在不同的文化中,看到我從未見(jiàn)過(guò)的建筑和自然之類的東西,總能激發(fā)我內(nèi)心的新想法。

△ Nature Preservation Series

最后,美術(shù),特別是繪畫,一直在激勵(lì)著我。我在大學(xué)期間實(shí)際上專注于繪畫,所以它在我的創(chuàng)作中占有特殊的位置。在繪畫中創(chuàng)造的形式和顏色總是激發(fā)我嘗試新的東西。

優(yōu)設(shè):

你覺(jué)得優(yōu)秀的 Logo 應(yīng)該是什么樣的?

Steve Wolf:

好的 Logo 應(yīng)該起到這樣的作用,它應(yīng)易于閱讀并傳達(dá)客戶提供的行業(yè)或服務(wù),它也應(yīng)該是令人難忘和獨(dú)特的,以便它能夠脫穎而出,當(dāng)然確保 Logo 適合其預(yù)期用途也很重要。

△ Austin

我嘗試將所有這些內(nèi)容融入到我自己的工作中,并且在創(chuàng)作過(guò)程中,我會(huì)時(shí)不時(shí)的進(jìn)行判斷和考量。

優(yōu)設(shè):

您的典型一天是怎樣的?

Steve Wolf:

我的一天從咖啡開(kāi)始。這成為了我們每天上班的動(dòng)力源泉。查看并回復(fù)電子郵件后,我開(kāi)始處理工作項(xiàng)目。我的工作時(shí)間每天都有所不同,這取決于我的工作量或我需要在一天中完成的任務(wù)。有時(shí)候我工作得很晚,有時(shí)候我可能只需要工作幾個(gè)小時(shí)。只要我完成工作,我就會(huì)保持靈活性。

△ working for BigCommerce

我和我的妻子離開(kāi)我們的家一起去工作,真的很有趣!

優(yōu)設(shè):

有什么建議可以給正在學(xué)習(xí)的設(shè)計(jì)師,您有推薦的書(shū)或網(wǎng)站么?

Steve Wolf:

我最喜歡的一些關(guān)于設(shè)計(jì)的書(shū)籍是 Alina Wheeler的《全品牌識(shí)別設(shè)計(jì)》(Designing Brand Identity),Robert Bringhurst的《印刷風(fēng)格元素》(The Elements of Typographic Style),Josef Albers的《色彩互動(dòng)》(Interaction of color)和Josef Müller-Brockmann的《平面設(shè)計(jì)中的網(wǎng)格系統(tǒng)》( Grid Systems in Graphic Design)。

△ Pattern

這些都是剛開(kāi)始學(xué)習(xí)設(shè)計(jì)時(shí)值得閱讀的好書(shū)。 Skillshare 對(duì)于有興趣了解更多設(shè)計(jì)的設(shè)計(jì)師來(lái)說(shuō)也是一個(gè)很好的工具。他們提供在線網(wǎng)絡(luò)視頻,其中包括教授各種知識(shí)和技巧的設(shè)計(jì)師。專注于學(xué)習(xí)設(shè)計(jì)過(guò)程的視頻會(huì)非常有用。

藍(lán)藍(lán)設(shè)計(jì)www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì)  cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì)  包裝設(shè)計(jì) 、 圖標(biāo)定制  用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

產(chǎn)品體驗(yàn)報(bào)告 | 要深度分析,不要表面賞析

資深UI設(shè)計(jì)者

如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請(qǐng)點(diǎn)這里

能知道產(chǎn)品改進(jìn)的工具,先上車吧!

某個(gè)時(shí)間我們下載了許多優(yōu)秀的APP,定了偉大的目標(biāo)“每天賞析一款優(yōu)秀產(chǎn)品,學(xué)習(xí)前沿的交互和視覺(jué)風(fēng)格,努力提高自己的審美和眼界,確保在工作中能迅速找到參考^_^…”


嗯,相信大家都有過(guò)類似的做法(不管你信不信,反正我信了)。自覺(jué)更新自己審美和眼界,值得表?yè)P(yáng)啊!(先給一顆糖吃)但是,時(shí)間一長(zhǎng)你會(huì)發(fā)現(xiàn) 索 mei 然 luan 無(wú) yi 味 si、沒(méi)有突破,基本每個(gè)設(shè)計(jì)點(diǎn)都有共同的理論支撐,而且每次賞析只能停留在基本的交互體驗(yàn)和視覺(jué)風(fēng)格上。


沒(méi)有強(qiáng)大的數(shù)據(jù)支撐,不知道為什么這么做?只知道設(shè)計(jì)理論 卻不知產(chǎn)品現(xiàn)狀?只能看到“點(diǎn)” 卻不知“面”的精彩?競(jìng)品的優(yōu)劣勢(shì)有哪些,我們應(yīng)該如何改善?不知道?因?yàn)槟銢](méi)有做深度分析!


下面開(kāi)始梳理我最近學(xué)習(xí)《產(chǎn)品體驗(yàn)報(bào)告》的一些心得,先上車吧,老鐵!



一、什么是產(chǎn)品體驗(yàn)報(bào)告?


產(chǎn)品體驗(yàn)報(bào)告,是體驗(yàn)者在深入了解某個(gè)產(chǎn)品的商業(yè)模式、目標(biāo)用戶、使用場(chǎng)景、市場(chǎng)現(xiàn)狀、產(chǎn)品功能、交互體驗(yàn)以及視覺(jué)風(fēng)格,同時(shí)還包含了競(jìng)品主要功能的對(duì)標(biāo),是先有深度再到廣度的分析報(bào)告,是全方位總結(jié)出來(lái)的圖文報(bào)告。


這里的“體驗(yàn)者”可以是:運(yùn)營(yíng)、產(chǎn)品、交互、UI等產(chǎn)品相關(guān)人員,現(xiàn)在已經(jīng)不局限于產(chǎn)品經(jīng)理做報(bào)告了,因?yàn)樾袠I(yè)需要多元化人才嘛,同時(shí)也為你跳槽、轉(zhuǎn)崗、晉升打好基礎(chǔ)嘛(重點(diǎn)是為漲薪帶來(lái)機(jī)會(huì))~


既然是一份圖文報(bào)告,就必須具備可呈現(xiàn)、可閱讀、可傳承的相關(guān)條件,類似于我們的工作總結(jié)、項(xiàng)目復(fù)盤等,產(chǎn)品體驗(yàn)報(bào)告也有特定的輸出框架和規(guī)范。



二、寫這個(gè)有什么用?


· 一般利用產(chǎn)品體驗(yàn)報(bào)告來(lái)指導(dǎo)產(chǎn)品改進(jìn);


· 用于加深對(duì)目標(biāo)產(chǎn)品和目標(biāo)崗位的了解,深度體驗(yàn)相關(guān)產(chǎn)品是必備流程;


· 也可以用于新入職或應(yīng)聘時(shí),為了摸清自身產(chǎn)品以及競(jìng)品而進(jìn)行的研究分析、面試時(shí)也能證明你對(duì)該產(chǎn)品做了充分準(zhǔn)備;


· 當(dāng)然也可以用來(lái)了解一些新生產(chǎn)品、感興趣的產(chǎn)品,拓展產(chǎn)品思維、設(shè)計(jì)思維。

產(chǎn)品體驗(yàn)是一個(gè)常規(guī)的手段,也是一個(gè)必要的流程,只有隨時(shí)隨地做到對(duì)行業(yè),市場(chǎng),用戶的了解,才能在關(guān)鍵時(shí)刻提出合適的解決方案。



三、前期準(zhǔn)備


熟悉產(chǎn)品&體驗(yàn)產(chǎn)品


熟悉APP是做報(bào)告的基礎(chǔ),可以根據(jù)自己的經(jīng)驗(yàn)、看法,去體驗(yàn)它,感受它的優(yōu)劣勢(shì)。正如前面所說(shuō),這個(gè)優(yōu)劣勢(shì)不光是停留在視覺(jué)、交互方面,還可以包括核心功能、特色功能等,甚至是戰(zhàn)略層面的。每個(gè)人都是用戶,所以不要怕判斷錯(cuò)誤,大膽去感受、去思考、去提意見(jiàn),然后把你的想法記錄下來(lái),零零散散的筆記沒(méi)事,后面再統(tǒng)一整理,第一感受是最真實(shí)的。


在記錄想法時(shí)候,最好把你的理由羅列出來(lái):哪里好、哪里還可以優(yōu)化、我應(yīng)該怎么做?這個(gè)記錄好了,后面寫報(bào)告的時(shí)候會(huì)很輕松。當(dāng)然也不要閉門造車,盡量和身邊的產(chǎn)品人員共同探討,發(fā)掘他們對(duì)產(chǎn)品的看法,或許能收集到你遺漏的點(diǎn)。


如果是你參與設(shè)計(jì)的產(chǎn)品,那直接把你之前的設(shè)計(jì)思考和建議 復(fù)盤即可。



收集&整理資料


資料收集是一個(gè)比較繁瑣的過(guò)程,需要多渠道去發(fā)掘信息,并把他們串聯(lián)起來(lái)再分類,相信收集過(guò)后會(huì)對(duì)整個(gè)產(chǎn)品的戰(zhàn)略層、范圍層、結(jié)構(gòu)層、框架層、表現(xiàn)層(用戶體驗(yàn)五要素)有大致的了解,后面會(huì)根據(jù)這5個(gè)層面做產(chǎn)品解剖。


收集具體層面:需要了解APP的市場(chǎng)反饋:各端下載量、使用評(píng)論,以及這個(gè)APP有哪些競(jìng)品,這些競(jìng)品的相關(guān)數(shù)據(jù)又是怎樣的。


如何獲得數(shù)據(jù)?可以通過(guò):手機(jī)應(yīng)用市場(chǎng)、APP Annie、神策數(shù)據(jù)等數(shù)據(jù)網(wǎng)站來(lái)收集。很多自家產(chǎn)品還有內(nèi)部研發(fā)的“數(shù)據(jù)觀象臺(tái)”,這些都能記錄留存、轉(zhuǎn)化、用戶特征、行為、點(diǎn)擊事件等重要數(shù)據(jù),是產(chǎn)品報(bào)告中的有力證據(jù)。

收集宏觀層面:可以直接通過(guò)公司官網(wǎng)、產(chǎn)品介紹、招聘網(wǎng)站、用研報(bào)告、運(yùn)營(yíng)報(bào)告等方式收集



分析資料


可以在寫報(bào)告的時(shí)候同時(shí)進(jìn)行。如果提前做好初步的資料分析,將會(huì)提高后面寫報(bào)告的效率。



分析具體層面:


(1)根據(jù)用戶的評(píng)論反饋初步判斷,提煉關(guān)鍵信息點(diǎn)進(jìn)行分類。同時(shí)可以查看競(jìng)品的用戶評(píng)價(jià),兩者之間做對(duì)比,分析為什么會(huì)出現(xiàn)這些優(yōu)勢(shì)或差距;

(2)競(jìng)品的行為數(shù)據(jù)我們基本看不到,是人家的產(chǎn)品機(jī)密,我們主要是自家產(chǎn)品的行為數(shù)據(jù),競(jìng)品只是參考意義;

(3)最后可以從功能、交互、視覺(jué)、運(yùn)營(yíng)的維度思考如何解決問(wèn)題并優(yōu)化,把這些都記錄下來(lái)。



分析宏觀層面:


根據(jù)搜集來(lái)的產(chǎn)品的背景、新聞、研究報(bào)告等信息進(jìn)行分析,提煉其中的重要觀點(diǎn),然后把這些觀點(diǎn)按照“用戶體驗(yàn)五要素”歸類,把搜集來(lái)的觀點(diǎn)和自己對(duì)產(chǎn)品的想法進(jìn)行碰撞,記錄思考過(guò)程。



推薦工具


為了便于共享、傳播及圖片處理,產(chǎn)品體驗(yàn)報(bào)告通常以PPT的形式記錄,因此我比較推薦的排版工具有:office PPT、Keynote、Axure、Mockplus、Sketch、Ps、Ai。


注意:制作一份產(chǎn)品體驗(yàn)報(bào)告,你要面向的是企業(yè)高層、上級(jí)領(lǐng)導(dǎo)、面試官、產(chǎn)品團(tuán)隊(duì)的同事、客戶等,所以需要結(jié)構(gòu)清晰,排版精美、簡(jiǎn)潔,這樣才會(huì)讓人很有讀下去的欲望,正如文章開(kāi)頭所說(shuō):可呈現(xiàn)、可閱讀、可傳承。特別是自己以設(shè)計(jì)師的身份拿出報(bào)告的時(shí)候,排版是否精美、信息主次區(qū)分是否明顯,也是對(duì)自身專業(yè)性的一種考量(文章最后我會(huì)分享一些簡(jiǎn)單的模板供大家參考)



四、輸出框架


講到這里,準(zhǔn)備工作就已經(jīng)做的差不多了,現(xiàn)在我們開(kāi)始規(guī)劃寫作思路。下面列舉的是比較全面思路,可根據(jù)現(xiàn)狀自定義框架(重點(diǎn)是產(chǎn)品分析那一步,綠篩那部分):


Image title


五、體驗(yàn)環(huán)境


Image title


六、產(chǎn)品背景


產(chǎn)品背景可以結(jié)合上面宏觀層面收集來(lái)的資料加以描述,盡量保證描述的邏輯性,要讓現(xiàn)狀、痛點(diǎn)、價(jià)值、目標(biāo)一目了然。不要記流水賬、也不要復(fù)制粘貼。具體思路如下:

Image title


可按照發(fā)散到聚焦、聚焦再發(fā)散的邏輯描述:先介紹市場(chǎng)環(huán)境→當(dāng)前環(huán)境造成什么問(wèn)題→用戶存在什么痛點(diǎn)→產(chǎn)品如何解決痛點(diǎn)→產(chǎn)品能達(dá)到什么目的→產(chǎn)品價(jià)值和未來(lái)的方向


為了更容易理解,下面拿Uber的一段產(chǎn)品背景做舉例參考:


Image title



七、產(chǎn)品分析


1.戰(zhàn)略層


產(chǎn)品定位:為“誰(shuí)”提供什么樣的服務(wù),解決“誰(shuí)”的什么需求;

產(chǎn)品類型:提供服務(wù)的產(chǎn)品屬于哪個(gè)領(lǐng)域,具有什么樣的產(chǎn)品屬性;

Image title


功能特性:代表了一個(gè)產(chǎn)品核心情緒,可以從產(chǎn)品定位和主要功能中提煉出關(guān)鍵詞。



Image title



目標(biāo)用戶&特征:大方向描述完后,現(xiàn)在開(kāi)始對(duì)產(chǎn)品的主角(用戶)進(jìn)行細(xì)分,用戶是誰(shuí)、特征是什么、他有什么問(wèn)題、使用場(chǎng)景是怎樣的。


用戶信息可以通過(guò)用戶調(diào)研、后臺(tái)數(shù)據(jù)、產(chǎn)品數(shù)據(jù)、競(jìng)品數(shù)據(jù)、市場(chǎng)數(shù)據(jù)等渠道收集,在我前2篇文章中有講到過(guò),如果前期有做這些準(zhǔn)備,可以提取相關(guān)信息寫入報(bào)告:


《用戶體驗(yàn)旅程圖 | 概念&實(shí)操&模板》

《用戶角色模型 | 拒絕“我認(rèn)為”的設(shè)計(jì)》


Image title



用戶需求&解決辦法:需求可以從實(shí)際數(shù)據(jù)和用戶反饋中提煉出來(lái),有些運(yùn)營(yíng)團(tuán)隊(duì)會(huì)通過(guò)組建鐵粉群、論壇、問(wèn)卷調(diào)查等方式集中活躍的目標(biāo)用戶,在這里可以得到他們的訴求,當(dāng)然最好的方法還是面對(duì)面做訪談。解決辦法對(duì)應(yīng)到需求,可以利用“KANO模型”歸類,舉例:


Image title


使用場(chǎng)景:通過(guò)“KANO模型”歸納了需求和解決辦法,然后就要列舉出用戶使用產(chǎn)品的環(huán)境:


· 什么情況下使用產(chǎn)品?這個(gè)情況會(huì)不會(huì)導(dǎo)致情緒波動(dòng)?


· 什么地方使用產(chǎn)品?


· 這些地方網(wǎng)絡(luò)環(huán)境好不好?不好該怎么辦?


· 定位有沒(méi)有覆蓋到?精不精準(zhǔn)?不精準(zhǔn)怎么辦?


· 移動(dòng)支付時(shí)賬號(hào)內(nèi)無(wú)零錢怎么辦?


· 正在等車時(shí),手機(jī)沒(méi)電怎么辦?



這個(gè)時(shí)候需要你保持一顆同理心,通過(guò)一個(gè)切入點(diǎn)把思維發(fā)散開(kāi),產(chǎn)品設(shè)計(jì)要考慮到極端情況,必須不停的問(wèn)“為什么”??梢越柚鷪F(tuán)隊(duì)的力量一起完善,C端產(chǎn)品每個(gè)人都是用戶。B端產(chǎn)品就需要身臨其境去現(xiàn)場(chǎng),或者實(shí)實(shí)在在找用戶調(diào)研。


行業(yè)分析:這個(gè)分析完全是宏觀層面的東西,一般通過(guò)政策、經(jīng)濟(jì)、社會(huì)、科技方面來(lái)發(fā)掘,行業(yè)新聞資料網(wǎng)上都能找的到,其次就是看你平時(shí)對(duì)行業(yè)的關(guān)注度了。當(dāng)然一些數(shù)據(jù)平臺(tái)也有直觀的信息可以參考:


Image title


應(yīng)用數(shù)據(jù):通過(guò)對(duì)比競(jìng)品在應(yīng)用市場(chǎng)的下載量可判斷出自身產(chǎn)品的市場(chǎng)占有量。用戶評(píng)論評(píng)星可以大致分析出產(chǎn)品口碑。迭代記錄是個(gè)好東西,可以了解競(jìng)品的研發(fā)方向。階段數(shù)據(jù)可以通過(guò)“友盟”等數(shù)據(jù)平臺(tái)接入應(yīng)用市場(chǎng)獲?。?


Image title



2.范圍層


這里從產(chǎn)品提供的功能(服務(wù))層面來(lái)分析,可以按以下2個(gè)維度區(qū)分,并描述他們帶來(lái)的價(jià)值:


· 基礎(chǔ)功能(必備的功能、解決問(wèn)題的、代表產(chǎn)品屬性的)

· 特色功能(核心且重要的、打破同質(zhì)化尋找差異化的、提升用戶滿意度的)



3.結(jié)構(gòu)層


可以通過(guò):功能架構(gòu)圖、業(yè)務(wù)流程圖、頁(yè)面流程圖去了解產(chǎn)品結(jié)構(gòu),并且能清晰的看到用戶完成一個(gè)任務(wù)的路徑,中間會(huì)發(fā)生什么,有多少步驟,然后把你的看法記錄下來(lái)。


對(duì)于競(jìng)品我們可以邊操作邊記錄,我建議一定要自己畫一遍,流程圖能幫助你梳理產(chǎn)品邏輯,畫完之后可以分析其中的優(yōu)缺點(diǎn),對(duì)比之下你會(huì)一目了然(解剖主要功能即可,像注冊(cè)/登錄/綁定 這些常規(guī)功能你自己看著辦~)


推薦工具:XMind、Axure



4.框架層


主要是對(duì)產(chǎn)品的重要界面進(jìn)行分析,并總結(jié)出優(yōu)劣勢(shì)和整改意見(jiàn),因?yàn)檫@些是整個(gè)產(chǎn)品的靈魂,例如:一級(jí)導(dǎo)航頁(yè)、主要業(yè)務(wù)流程頁(yè)、重要功能頁(yè)、特色功能頁(yè)以及用戶最喜歡的頁(yè)面。



5.表現(xiàn)層


表現(xiàn)層就是一個(gè)產(chǎn)品注入靈魂之后的肉體,既呈現(xiàn)層、UI設(shè)計(jì)。人的審美觀會(huì)根據(jù)時(shí)間發(fā)生變化,所以這里是檢驗(yàn)?zāi)闫綍r(shí)有沒(méi)有經(jīng)常性把玩優(yōu)秀APP、有沒(méi)有關(guān)注設(shè)計(jì)趨勢(shì)。有設(shè)計(jì)基礎(chǔ)的當(dāng)然可以盡情發(fā)揮,不是設(shè)計(jì)出生的可以對(duì)應(yīng)以下幾個(gè)維度做參考:


· 視覺(jué)舒適度


每個(gè)人都有評(píng)價(jià)設(shè)計(jì)的資格,當(dāng)你在使用一款產(chǎn)品的時(shí)候是否被包裝所吸引,一眼看上去辣不辣眼睛,這是產(chǎn)品最基本的臉面問(wèn)題。


(1)顏色、布局、版式、微交互、精致度等,如果這些讓你的情緒產(chǎn)生正面增長(zhǎng),那么恭喜你,你已經(jīng)被產(chǎn)品的“本能層次設(shè)計(jì)”所吸引;


(2)如果情緒波動(dòng)不大,說(shuō)明還看得過(guò)去~(同質(zhì)化很嚴(yán)重嘛)


(3)如果從視覺(jué)上讓你感覺(jué)不舒適、皺眉頭等負(fù)面情緒產(chǎn)生,那只能說(shuō)明:還有優(yōu)化的空間(夠委婉了吧)



· 視覺(jué)和交互的一致性


比如:頁(yè)面切換方式、反饋機(jī)制、加載刷新、空狀態(tài)、功能性按鈕的狀態(tài)、圖標(biāo)風(fēng)格、元素細(xì)節(jié)、設(shè)備適配、視覺(jué)語(yǔ)言等是否將一致性覆蓋到整個(gè)產(chǎn)品


· 品牌感


品牌設(shè)計(jì)是最容易在視覺(jué)上打破產(chǎn)品同質(zhì)化現(xiàn)象的方式,很多優(yōu)秀的產(chǎn)品早已深入人心,比如:企鵝-QQ、熊掌-百度、豬臉-飛豬……


將這些形象元素融入到APP里面,創(chuàng)造屬于自己的視覺(jué)效果,這是除功能以外尋找差異化的最佳方法。我舉一個(gè)“飛豬”的栗子:

Image title


“飛豬”將一個(gè)Logo特征融入到搜索框、toast、圖標(biāo)、標(biāo)簽等地方,從而提升視覺(jué)的一致性和品牌感,這是一種思維灌輸式的洗腦,將品牌映入人心



· 功能可見(jiàn)性


圍繞“視覺(jué)服從于功能”的原則。UI設(shè)計(jì)要把握好功能的視覺(jué)權(quán)重,比如:功能優(yōu)先級(jí)、入口層級(jí)、按鈕層級(jí)、哪些可操作等,這些都需要通過(guò)設(shè)計(jì)讓用戶感知到。


假設(shè)一個(gè)可點(diǎn)擊的地方,但用戶看不出來(lái)、沒(méi)感知到,這就是功能可見(jiàn)性極弱,影響使用體驗(yàn)。


同時(shí)還要考慮到用戶群體,如果是一款老年人、色盲者使用的產(chǎn)品,你的功能可見(jiàn)性又是怎樣的呢?


總之,我們做一個(gè)設(shè)計(jì)或者評(píng)價(jià)設(shè)計(jì)之前,腦袋里都要過(guò)一遍用戶使用場(chǎng)景。



八、競(jìng)品分析


基于戰(zhàn)略層面收集到的數(shù)據(jù),我們需要和競(jìng)品做宏觀對(duì)比、具體對(duì)比,看看別人家產(chǎn)品是怎么做的,為什么受用戶喜歡:


宏觀對(duì)比:

Image title


具體對(duì)比:


· 功能差異化對(duì)比

Image title


· 視覺(jué)和交互對(duì)比


這里可以運(yùn)用文章開(kāi)頭提到的“APP賞析”,站在UI設(shè)計(jì)和交互體驗(yàn)的角度做對(duì)比分析,羅列出雙方的優(yōu)劣勢(shì),并提出自己的建議。

另外,這么多資料沒(méi)有模板嵌套 會(huì)影響工作效率,我簡(jiǎn)單整理了一些PPT,后面會(huì)把這些文件都分享出來(lái)。

Image title



九、假如我是產(chǎn)品經(jīng)理


相信你做到這一步的時(shí)候,已經(jīng)對(duì)產(chǎn)品了解的比較透徹了,在解剖過(guò)程中你肯定有很多疑問(wèn)和自己的想法,沒(méi)關(guān)系,大膽把他寫出來(lái),這能夠檢驗(yàn)?zāi)愕姆治龀晒?


假如你是產(chǎn)品經(jīng)理或設(shè)計(jì)負(fù)責(zé)人,你會(huì)如何優(yōu)化、把控產(chǎn)品呢?就從以下四個(gè)方面開(kāi)始你的表演吧:


· 功能問(wèn)題

· 交互體驗(yàn)

· 視覺(jué)風(fēng)格

· 產(chǎn)品未來(lái)發(fā)展的設(shè)想



十、總結(jié)


(1)千萬(wàn)別急著動(dòng)手,先收集相關(guān)資料和數(shù)據(jù),認(rèn)真分析并做記錄;

(2)了解產(chǎn)品定位、用戶群體和市場(chǎng)現(xiàn)狀,知道產(chǎn)品為哪些人解決問(wèn)題、設(shè)計(jì)機(jī)會(huì)在哪里?;

(3)找到用戶訴求,參考競(jìng)品,結(jié)合產(chǎn)品現(xiàn)狀給出合理建議;

(4)與競(jìng)品做對(duì)比,找到優(yōu)缺點(diǎn),設(shè)想改進(jìn)方案。


藍(lán)藍(lán)設(shè)計(jì)www.yvirxh.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì)  cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì)  圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。

 

日歷

鏈接

個(gè)人資料

存檔