首頁

今年超火的放置類AR設(shè)計(jì),送你一份大廠出品的設(shè)計(jì)指南(下)

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

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

模型交互的設(shè)計(jì)分析及體驗(yàn)建議模型交互的作用范圍及交互特點(diǎn)


當(dāng)用戶在真實(shí)環(huán)境的場景中穩(wěn)定放下物體模型后,會有與模型進(jìn)行進(jìn)一步互動的需求。這類模型交互,通常會改變模型本身的物理屬性。例如:

  • 移動:改變物體在環(huán)境中的位置。
  • 縮放:改變物體的大小。
  • 旋轉(zhuǎn):旋轉(zhuǎn)物體便于用戶不改變自身位置觀察物體。
  • 刪除/重置:讓模型在環(huán)境中消失或出現(xiàn)。

基于目前的 AR技術(shù)和手機(jī)設(shè)備限制,目前的模型交互主要是通過屏幕利用二維交互驅(qū)動 AR 三維場景中的模型,從而與模型進(jìn)行互動。屏幕二維交互設(shè)計(jì),主要是利用二維手勢和界面控件去達(dá)到交互的目的。例如:

  • 按鈕/搖桿:在手機(jī)界面中設(shè)計(jì)按鈕、搖桿。
  • 手勢:目前技術(shù)支持的瞬間的手勢操作、連續(xù)的手勢操作。比如單指點(diǎn)擊、單指長按、雙指縮放、雙指旋轉(zhuǎn)等等,我們在日常使用APP常用的手勢操作。

通過進(jìn)行合理的分析設(shè)計(jì),賦予這些手勢和界面控件具體的功能,去控制三維場景中模型的移動、旋轉(zhuǎn)、縮放。

模型移動的交互定義及設(shè)計(jì)形式

用戶會與模型進(jìn)行互動,移動是最為常見的一種操作行為。通過在手機(jī)屏幕的手勢操作或按鈕操作,控制模型在現(xiàn)實(shí)場景中的位移。

我們需要通過設(shè)計(jì)用戶使用常用并熟知的手勢與模型進(jìn)行交互,利用二維手勢驅(qū)動三維空間中的模型在X軸、Y軸、Z軸的位移。

放置模型后根據(jù)移動范圍X軸、Y軸、Z軸,與在現(xiàn)實(shí)環(huán)境的虛擬模型進(jìn)行移動互動操作,設(shè)計(jì)手段包括手勢、搖桿的方式。可以參考以下五種設(shè)計(jì)內(nèi)容:

  • 單指按住左右移動:模型移動以屏幕有效的外側(cè)邊沿為限。
  • 單指按住前后移動:縱深移動遵循近大遠(yuǎn)小的透視效果。
  • 單指按住上下移動:模型以中軸線上下移動,實(shí)際為改變模型所在平面位置,投影以暗示高度。(需注意,單指按住前后和上下移動不會同時出現(xiàn)。)
  • 點(diǎn)哪去哪:模型從原位置向目標(biāo)位置移動。
  • 界面搖桿:若屏幕手勢交互有可能對控制對象造成持續(xù)遮擋,或者無法很好的完成復(fù)雜操作要求,可以通過屏幕控件滿足需求。

模型移動并非需要X、Y、Z三個軸均開放,實(shí)際是根據(jù)模型位移交互的具體需求去選擇開放維度,并設(shè)計(jì)合理的交互方式去響應(yīng)模型的移動??蓞⒖家韵掳咐?

模型旋轉(zhuǎn)的交互定義及設(shè)計(jì)形式

在現(xiàn)實(shí)場景中除了移動模型的位置,還可以通過旋轉(zhuǎn)360°來觀察模型細(xì)節(jié),不僅控制模型還能把玩模型,賦予模型生命感,讓用戶更好地與模型進(jìn)行互動。設(shè)計(jì)手段主要是針對手勢的設(shè)計(jì)??梢詤⒖家韵氯N設(shè)計(jì)內(nèi)容:

  • 雙指順/逆時擰:一只手雙指順時/逆時擰旋轉(zhuǎn)模型。
  • 雙指向左/向右滑動:一只手雙指左右滑動。
  • 單指向左/向右滑動:一只手單指左右滑動。

旋轉(zhuǎn)模型是為了全方位觀察模型,讓用戶更好地把玩模型。通過以下案例來進(jìn)行說明:

模型縮放的交互定義及設(shè)計(jì)形式

移動模型、旋轉(zhuǎn)模型都是與模型互動,如果想深入了解模型則需要對模型進(jìn)行縮放操作。設(shè)計(jì)手段包括手勢、滑動條、縮放倍數(shù)的按鈕??梢詤⒖家韵氯N設(shè)計(jì)內(nèi)容:

  • 雙指擴(kuò)展/捏合縮放:以模型的中心點(diǎn)等比縮放。
  • 拖動滑動條縮放:拖動滑動條在0-100%的范圍內(nèi)進(jìn)行縮放,當(dāng)標(biāo)尺拖動到極限時,則模型不再響應(yīng)縮放。
  • 固定縮放倍數(shù)按鈕:倍數(shù)已經(jīng)固定,限定縮放的大小。

雙指擴(kuò)展/捏合縮放是在二維手機(jī)界面被大家熟知的手勢操作,而滑動條、固定縮放倍數(shù)按鈕的縮放形式,在AR場景多用于游戲類產(chǎn)品,一般在模型放置時固定模型大小,進(jìn)入游戲后不支持手持操作??梢詤⒖家韵掳咐?

有一種特殊的情況,當(dāng)支持放置多個模型時,如何設(shè)計(jì)呢?此時,需要通過點(diǎn)擊選中模型,模型進(jìn)入選中態(tài),與其他模型區(qū)分開,選中后進(jìn)行的操作只作用于該模型,并支持刪除模型的功能。

為了增加模型交互時體驗(yàn)的豐富和細(xì)膩程度,模型交互(過程中、成功后)會有相應(yīng)的反饋設(shè)計(jì)。包括:模型自身的動效、符合真實(shí)世界的視覺表現(xiàn)、音效、震動、語音反饋等。

模型交互的設(shè)計(jì)原則和建議

1. 根據(jù)模型需要定義交互自由度

模型的交互程度,需根據(jù)特定模型的自身屬性/產(chǎn)品的類型去定義,并非所有可交互類型都需要涉及。跟核心模型體驗(yàn)無關(guān)的交互可禁止或增加操作難度。例如科普類模型固定放置在平面后,需要便捷地旋轉(zhuǎn)以查看模型細(xì)節(jié),但Y軸移動查看的需求不大,部分場景可考慮禁止Y軸操作。又例如游戲類 AR 模型位置相對固定,更多的體驗(yàn)在于與固定模型進(jìn)行的細(xì)部交互。

2. 手勢設(shè)計(jì)簡單且符合直覺

手勢設(shè)計(jì)優(yōu)先使用通用的方式,若沒有通用的方式,則盡可能使用簡單和符合用戶直覺的方式進(jìn)行設(shè)計(jì)。若違反該原則可能造成用戶的理解和記憶障礙,需要加重用戶引導(dǎo),避免給用戶造成操作困難。

3. 手勢設(shè)計(jì)按需搭配且不可沖突

在設(shè)定模型的交互自由度后,可選擇合適的手勢進(jìn)行搭配使用。但一種操作方式只可匹配一個交互結(jié)果,不可出現(xiàn)手勢沖突。手勢的搭配需要成套考慮。例如以下搭配:

異常處理的設(shè)計(jì)分析及體驗(yàn)建議

1. AR中異常情況的定義及設(shè)計(jì)內(nèi)容

傳統(tǒng)APP設(shè)計(jì)存在異常情況,比如無網(wǎng)絡(luò)加載失敗,登錄發(fā)生錯誤等情況,那在放置類AR 中是否存在異常情況呢?

在放置類AR 場景中體驗(yàn)時,由于使用者操作不當(dāng),導(dǎo)致模型出屏或模型丟失,無法與其再進(jìn)行交互,我們統(tǒng)稱為異常情況。還有一種情況比較特殊,當(dāng)正在體驗(yàn)放置類AR時,其它應(yīng)用突然被喚起,再重新返回放置類AR 場景的處理。所以我們從交互設(shè)計(jì)層面需要對異常情況進(jìn)行及時處理,正確引導(dǎo)用戶解決困惑,給使用者一個良好的 AR 體驗(yàn)。

在與模型互動過程中,會出現(xiàn)異常情況,需要通過一些設(shè)計(jì)形式可以及時地幫助使用者解決異常問題,設(shè)計(jì)手段包括:文字、動圖、語音、輔助圖形、重置、復(fù)位,具體運(yùn)用根據(jù)實(shí)際設(shè)計(jì)需求而定。可以參考以下設(shè)計(jì)內(nèi)容:

  • 模型出屏:模型出屏后視覺線索引導(dǎo)用戶找到模型,可以搭配文字、動圖、語音等形式,按照設(shè)計(jì)場景來自由組合。
  • 模型丟失:當(dāng)視覺線索引導(dǎo)未找到模型時,通過點(diǎn)擊按鈕將模型復(fù)位。按鈕可以常駐或非常駐。

當(dāng)發(fā)生模型出屏、模型丟棄復(fù)位的異常情況,根據(jù)產(chǎn)品類型和場景選擇合適的設(shè)計(jì)手段,解決用戶的困惑。結(jié)合具體案例以說明:

在異常情況中有一些相對特殊的情況,第一種情況:體驗(yàn)放置類AR時,手機(jī)來電后不得不離開,當(dāng)再次返回時,根據(jù)技術(shù)能力來進(jìn)行交互設(shè)計(jì)引導(dǎo),保留場景及模型或引導(dǎo)用戶重新獲取平面建立AR場景。第二種情況:當(dāng)進(jìn)入AR場景后,模型是固定大小尺寸,在設(shè)計(jì)時,需要考慮讓用戶可以重新放置模型在新的位置,提供重置按鈕。

游戲類、科普類設(shè)計(jì)時需要保留之前AR場景,有延續(xù)性的體驗(yàn),技術(shù)做不到保留,則需要重新識別平面再次建立AR場景進(jìn)行體驗(yàn),如果支持放置多個模型的場景,建議不保留。當(dāng)進(jìn)入AR場景后,模型是固定大小尺寸,在設(shè)計(jì)時,要考慮界面上需要重置按鈕,讓用戶可以重新放置模型在新的位置。下面結(jié)合案例具體說明:

此外,在AR內(nèi)容體驗(yàn)中也會發(fā)生丟失平面的異常情況。這里的異常處理可以使用話術(shù)準(zhǔn)確告知用戶原因,還可以配以圖片、動圖、語音,更具象更清晰引導(dǎo)用戶解決問題。需注意與平面識別引導(dǎo)的設(shè)計(jì)形式保持一致性,若平面識別未使用語音,則識別失敗提示也不能使用語音,避免突兀感??梢詤⒖家韵略O(shè)計(jì)內(nèi)容:

  • 純文字話術(shù):通過簡單明了的文字正確引導(dǎo)用戶操作。
  • 圖片/動圖+文字話術(shù):圖片/動圖詮釋文字的含義,幫助用戶理解如何操作。
  • 語音+文字話術(shù):語音輔助文字,使信息更有效傳達(dá),從而引導(dǎo)用戶操作。

2. 異常情況的設(shè)計(jì)原則和建議

模型出屏后需要及時引導(dǎo)用戶找到模型,避免焦慮感。

模型丟失后需要通過設(shè)計(jì)形式的組合搭配,以操作便捷的交互引導(dǎo)用戶。

建議在設(shè)計(jì)游戲類、科普類AR產(chǎn)品時,再次返回APP 需要保留之前的AR場景,保留延續(xù)性。

注意如果進(jìn)入AR場景時無音效和語音,則異常情況引導(dǎo)不能出現(xiàn)音效和語音,避免突兀感。

平面識別失敗后需要及時反饋用戶如何操作,需注意設(shè)計(jì)形式保持前后一致。

放置類AR的設(shè)計(jì)核心原則

以上就是AR放置類交互節(jié)點(diǎn)的分析和設(shè)計(jì)建議的詳細(xì)內(nèi)容。我們希望設(shè)計(jì)師能圍繞AR應(yīng)用的真實(shí)場景,考慮到每個體驗(yàn)節(jié)點(diǎn)的細(xì)節(jié),結(jié)合上文提到設(shè)計(jì)建議,在設(shè)計(jì)過程中關(guān)注以下關(guān)鍵目標(biāo),為用戶創(chuàng)造更加友好和細(xì)膩的交互流程和體驗(yàn)過程。

  • 清晰:傳達(dá)的內(nèi)容清晰明了,不會產(chǎn)生疑惑或歧義。
  • 有效:能幫助用戶成功達(dá)到交互目標(biāo)。
  • 流暢:無停頓感,過程一氣呵成。
  • 愉悅:用戶感覺愉快、無壓力。
  • 可控:可自主交互,過程反饋清晰,給用戶盡在掌握中的感受。

希望通過我們提出的設(shè)計(jì)內(nèi)容、設(shè)計(jì)原則建議能幫助到作為閱讀的設(shè)計(jì)師、開發(fā)者們,在日后的產(chǎn)品設(shè)計(jì)、交互設(shè)計(jì)中能讓用戶在放置類AR場景有更好的體驗(yàn),這也是我們編寫的目的所在,為AI科技盡綿薄之力。

藍(lán)藍(lán)設(shè)計(jì)sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(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īng)該了解的Loading動畫知識

用心設(shè)計(jì)

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

 

Loading動畫,在現(xiàn)在的設(shè)計(jì)中已經(jīng)是一個必須要考慮的系統(tǒng)元素,它能減緩用戶等待焦慮的心態(tài),也能用來作為品牌透傳,增加曝光。

那關(guān)于loading動畫相關(guān)知識,我覺得對于設(shè)計(jì)師來說是有必要去了解的,所以我找到了這篇優(yōu)秀文章,讓大家能夠深入了解loading動畫,透過現(xiàn)象看本質(zhì),學(xué)以致用。

圖片來源:Domaso

沒有人喜歡等待

在用戶心目中,優(yōu)秀的應(yīng)用、工具、網(wǎng)站都應(yīng)該是制作精良且能快速響應(yīng)他們需求的產(chǎn)品。

舉一個真實(shí)的例子:最近我們新發(fā)布了一個用戶評價的應(yīng)用,第一個版本并不完美,loading延遲在2-3秒。

你猜怎么著?

很多人認(rèn)為這3秒是一個故障。在實(shí)際開發(fā)中,你可能要面對龜速的網(wǎng)絡(luò),沒有優(yōu)化的代碼,操作時間長或數(shù)據(jù)處理太多等問題。因此,App的運(yùn)行速度可能沒有用戶預(yù)期中的那么快。雖然早期用戶可能會給你的產(chǎn)品第二次機(jī)會,但絕大多數(shù)人會立即退出它。

除非你的產(chǎn)品界面對用戶的行為提供了明確的即時反饋。剛才發(fā)生了什么?是操作錯誤還是在等待服務(wù)器的請求?用戶需要等待多長時間才能正常使用這個工具或網(wǎng)站?用戶為什么要等待呢?

讓我們一起深入了解Loading動畫:

  • loading動畫的歷史由來
  • 優(yōu)秀loading動畫所具備的特征
  • 細(xì)節(jié)可以做出精彩
  • 簡單處理還是精心制作
  • 有用的工具和資源

Loading動畫的歷史由來

對于這種類型的反饋,設(shè)計(jì)師會使用進(jìn)度條、loading示意圖、預(yù)loading、或旋轉(zhuǎn)器。它們向用戶解釋什么時間發(fā)生了什么或正在loading的過程,以減少用戶的心理焦慮。

你覺得設(shè)計(jì)師是從什么時候開始考慮加上這種反饋的?

我很驚訝的看到關(guān)于Nielsen Norman的一篇文章,提到響應(yīng)時間和loading動畫是在1993年(參考1985年的資料):

如果計(jì)算機(jī)無法提供快速響應(yīng),則應(yīng)該以百分比的形式向用戶提供持續(xù)反饋。【Myers 1985 論文,“計(jì)算機(jī)-人機(jī)界面百分比進(jìn)度指標(biāo)的重要性”】

顯示進(jìn)度的三個主要優(yōu)點(diǎn):向用戶保證系統(tǒng)沒有崩潰且正在處理他們的問題;告訴用戶還需要等待多久時間,讓用戶能騰出時間來做其他的事而不只是干等;甚至可以向用戶提供一些可以閱讀和查看的內(nèi)容,減少等待的焦慮?!?Jakob Nielsen, on January 1, 1993

自從Web 1.0以來,幾乎每個網(wǎng)站都有l(wèi)oading狀態(tài),用戶可以注意到當(dāng)頁面內(nèi)容正在loading時,這些Loading動畫活躍的身影。

在2007年的時候,網(wǎng)站的Loading形式大概是下面這張圖上的樣子:

2007年時的Loading

在那個年代,你可以找到像Firewoks(2007)、Flash (2008) 或者Loading GIF Generator (2009)這樣的工具來做這些 loading動畫。

到了2010年,隨著CSS3的迅猛發(fā)展,出現(xiàn)了很多教程教大家如何做CSS3動畫,也能找到大量的loading 動畫預(yù)設(shè)包。設(shè)計(jì)師也可以在Ps cs5中做這種loading動畫,這個在10年前是非常流行的。

在那時,Loading動畫更像是web的專屬問題,因?yàn)轫撁鎙oading確實(shí)是一個問題。在2010年的時候,很多Flash網(wǎng)頁都做了一些很有創(chuàng)意的loading動畫:

30個創(chuàng)意Flash loading案例(https://web3mantra.com/2010/09/08/30-creative-flash-preloaders-examples/)

漸漸地,設(shè)計(jì)師們開始不滿足于簡單的進(jìn)度條和旋轉(zhuǎn)Loading,到2014年-2016年的時候,變得更加關(guān)注這塊的設(shè)計(jì)。所以,你能發(fā)現(xiàn)更多關(guān)于loading教程,免費(fèi)的Loading設(shè)計(jì)資源,插件和開源項(xiàng)目。

2016年出現(xiàn)的Material Design loading(http://www.qooqee.com/news/muse-preloader-widget-tips)

設(shè)計(jì)趨勢和方法已經(jīng)發(fā)生了變化,但向用戶提供有效反饋的原則依然需要遵循。

優(yōu)秀loading動畫所具備的特征

在一個完美的世界里,loading動畫應(yīng)該:

1、盡可能少的顯示給用戶

如果你的工具或網(wǎng)站工作的足夠快,那就是非常完美的?;蛘咧辽僖沟盟鼈兊乃俣确嫌脩舻念A(yù)期,顯示好看的loading動畫只是一個緩兵之計(jì),等待太久了一樣會惹惱用戶。所以,首先應(yīng)該是解決內(nèi)容的loading問題。

2、給出具體時間

它可以是一條簡單的文本信息,告知大致的等待時間,也可以是可視化的圖形來表示??偣采蟼髁硕嗌傥募扛滦枰嗌俜昼??已經(jīng)進(jìn)行到了什么階段?這些體驗(yàn)上的設(shè)計(jì)細(xì)節(jié)都可以給用戶預(yù)期并減少焦慮。

宇航員數(shù)據(jù)loadingby Cream M.

3、告訴用戶為什么需要等待

一些應(yīng)用的loading過程,通常讓用戶不大容易理解。一個好的Loading動畫,應(yīng)該要告知用戶等待的原因以及等待的背后軟件正在做什么:

文件獲取動畫 by Vinoth

讓我們說回我的案例,那個反饋工具軟件。當(dāng)我們的等待時間超過1秒時,我們決定給這段等待時間增加一段解釋。動畫說明應(yīng)用目前正在處理截圖資源,這清晰的表明,我們的工具沒有崩潰,它只是正在處理請求:

好的loading動畫

4、讓等待的過程不那么讓人無聊

可以放一個有趣的動畫來吸引人,讓用戶的眼睛始終保持忙碌。

動畫來源:Alex Kunchevsky

5、減少用戶等待時間的心理感知

這與上面提到的一點(diǎn)非常相關(guān),如果你在等待的過程中發(fā)現(xiàn)了一些能夠吸引用戶注意力的東西,那么感覺上時間就會過得更快。它可以是一個引人注目的色彩搭配,有趣的想法,或者是一個什么特別的東西。

蛋糕loading by Pierre Kleinhouse

6、透傳公司品牌形象

如果用戶在用你的應(yīng)用或者網(wǎng)站時會有一段等待時間,為什么不機(jī)智的利用好這段時間呢?我不建議僅僅只是為了做loading而做一個loading動畫或者去在動畫里使用一些心理學(xué)技巧。我覺得最好是將品牌的聲音融入整個Loading動畫中,讓它成為一個非常重要的設(shè)計(jì)細(xì)節(jié):

BCG的車票應(yīng)用動畫 by Antonin

細(xì)節(jié)可以做出精彩

雖然有些人可能會認(rèn)為Loading只是一個很小的UI細(xì)節(jié),但它其實(shí)也有許多類型和變化。一般來說,我把loading動畫分為幾類,進(jìn)度條,無限循環(huán)的loading圖和骨架圖。

進(jìn)度條

當(dāng)可以明確loading時間時使用,進(jìn)度條可以通過數(shù)字或視覺化的形式來表現(xiàn)。

有數(shù)字進(jìn)度的,有時也稱為百分比指示符。他們可以簡單直接,也可以很有創(chuàng)意,需要對你的用戶業(yè)務(wù)表達(dá)更有效:

一個app loading頁 by Nguyen Tran

你也可以找到有趣的進(jìn)度條和循環(huán)動畫結(jié)合的loading圖。

Loading動畫by Dragonlady

進(jìn)度條背后的主要思想是顯示一個操作將花費(fèi)多長時間以及目前所處的狀態(tài)。根據(jù)UI需求的不同,進(jìn)度條也可以是線性的,沒有百分比的形式。

想想Gmail,它沒有顯示進(jìn)度百分比,但是用戶同樣可以感覺到加載的進(jìn)度。下面是兩個簡單而又創(chuàng)意的例子:

Gamil loading和一個創(chuàng)意loading動畫 by  Allen Zhang

循環(huán)Loading動畫

當(dāng)loading的時間是未知的時候來使用,它可以是默認(rèn)的旋轉(zhuǎn)圖,也可以是一些創(chuàng)意動畫,顯示應(yīng)用正在做一些事情。

計(jì)算loading圖標(biāo) by Hoang Nguyen

創(chuàng)意性loading動畫一樣可以與業(yè)務(wù)緊密相關(guān),并幫助支持品牌發(fā)聲。請思考下那些應(yīng)用會使用這種loading動畫?

LittlePin Spinner by Daniel Sofinet

無限循環(huán)動畫要求用戶在上傳或執(zhí)行某些操作時等待,但不要求具體需要多久時間,它們可能會非常簡單或非常有創(chuàng)意。

Loading cat by domaso. So cute!

Infinity by Eszter Balogh. 看起來非常有趣,但是你并不想他們永遠(yuǎn)不停下來。

如你所見,如今的loading動畫不僅僅只是一個系統(tǒng)狀態(tài)的UI元素。

骨架動畫

骨架動畫展示了loading頁面的變化過程,你可以把它理解為開始是一些頁面占位圖,逐步加載上一些可見的圖片,文本和其他內(nèi)容。

這個詞最早出現(xiàn)在Luke Wroblewski 的文章中,Luke建議使用骨架動畫來獲得更好的loading體驗(yàn)。這個想法得到了其他設(shè)計(jì)師的支持,并在Facebook、Linkedln、YouTube, Google Drive 等用戶界面中得到了應(yīng)用。

舉個栗子,如果你使用的是網(wǎng)頁設(shè)計(jì)工具Figma,你會在頁面頂部看到一個進(jìn)度條,同時還在逐步loadingUI:首先你會看到占位符,然后才是可用數(shù)據(jù):

Figma UI

簡單處理還是精心制作

除了這篇文章中所展示的一些優(yōu)秀案例和Dribbble上的設(shè)計(jì)概念,在目前大多數(shù)應(yīng)用中,你可能能看到還是一個默認(rèn)的Loading。

有一段時間,簡單的Loading被大眾所推崇,因?yàn)樗麄儗τ谛阅艿挠绊懽钚。ㄓ绕涫菍τ趙eb)。使用默認(rèn)的或開源的loading要容易的多,不需要設(shè)計(jì)師和開發(fā)花心思來設(shè)計(jì)和實(shí)現(xiàn)它。

如果你正在開發(fā)MVP或者項(xiàng)目的第一個版本,那么使用簡單的或者開源的loading動畫更符合邏輯。在這個階段,即使把loading動畫做的再怎么有創(chuàng)意,也并不會對你的產(chǎn)品有多么大的幫助,如果它不能解決真正的需求。

一些簡單的loading動畫案例

有趣的是,在2016-2019年,我們可以看到非常多精心的loading動畫。注重細(xì)節(jié),日益成熟的設(shè)計(jì)公司,更好的科技環(huán)境,更方便的設(shè)計(jì)工具,這些都使得loading動畫變得更加富有創(chuàng)造性。如果你瀏覽Dribbble,能找到非常多超贊的Loading動畫,所以這也成了展現(xiàn)自己設(shè)計(jì)能力的一種方式。

即使在我們只有5人的初創(chuàng)公司里,我們也會考慮更好的用戶體驗(yàn),讓我們用戶等待的體驗(yàn)更愉快。否則,我們做的反饋工具可能會失去用戶,沒有人希望失去用戶。


藍(lán)藍(lán)設(shè)計(jì)sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì)

Material Design 之響應(yīng)式柵格布局

用心設(shè)計(jì)

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

 

Material Design 響應(yīng)式布局柵格適應(yīng)屏幕尺寸和方向,確保布局的一致性。

列、間距和邊距

Material Design 布局柵格由三個元素組成:列、間距和邊距。

內(nèi)容放置在包含列的屏幕區(qū)域中。

列寬是使用百分比而不是固定值來定義的,以允許內(nèi)容靈活地適應(yīng)任何屏幕大小。網(wǎng)格中顯示的列數(shù)由查看屏幕的斷點(diǎn)范圍(預(yù)定屏幕大小的范圍)確定,無論是移動設(shè)備,平板電腦還是其他尺寸的斷點(diǎn)。

間距

間距是列之間的空間,它們有助于分離內(nèi)容。

間距在每個斷點(diǎn)范圍內(nèi)的值是固定的。為了更好地適應(yīng)屏幕,間距寬度可以在不同的斷點(diǎn)處改變。更寬的間距更適合大屏幕,因?yàn)樗鼈冊诹兄g創(chuàng)建了更多的空白。

邊距

邊距是內(nèi)容和屏幕左右邊緣之間的空間。

邊距寬度定義為每個斷點(diǎn)范圍的固定值。為了更好地適應(yīng)屏幕,邊距寬度可以在不同的斷點(diǎn)處改變。更寬的邊距更適合更大的屏幕,因?yàn)樗鼈冊趦?nèi)容的周邊創(chuàng)建了更多的空白。

自定義柵格

可以調(diào)整布局柵格以滿足您的產(chǎn)品和各種設(shè)備尺寸的需求。

自定義間距

可以調(diào)整間距以在布局的列之間創(chuàng)建更多或更少的空間。

自定義柵格

可以調(diào)整頁邊距,以在內(nèi)容和屏幕邊緣之間創(chuàng)建或多或少的空間。頁邊距對每個斷點(diǎn)使用固定值。

正文副本可讀性的理想長度是每行40-60個字符。

間距和邊距

在同一斷點(diǎn)內(nèi),間距和邊距寬度可以彼此不同。

水平柵格

Material Design布局柵格可以被水平滾動的觸摸UI自定義。列、間距和邊距從左到右排列,而不是從上到下排列。屏幕的高度決定水平柵格中的列數(shù)。

在非觸控和web平臺,水平滾動的UI并不常見。

可以定位水平柵格以適應(yīng)不同的高度,從而為頂部的app欄或其他UI區(qū)域留出空間。

斷點(diǎn)

斷點(diǎn)是具有特定布局要求的預(yù)定屏幕大小的范圍。在給定的斷點(diǎn)范圍內(nèi),布局將根據(jù)屏幕大小和方向進(jìn)行調(diào)整。

Material Design基于以下列結(jié)構(gòu)提供響應(yīng)式布局。使用4列,8列和12列柵格的布局可用于不同的屏幕、設(shè)備和方向。

每個斷點(diǎn)范圍決定每個顯示大小的列數(shù)、建議的邊距和間距。

柵格特點(diǎn)

彈性柵格

彈性柵格使用可縮放和調(diào)整內(nèi)容大小的列。彈性柵格的布局可以使用斷點(diǎn)來確定布局是否需要顯著更改。

固定柵格

固定柵格使用固定大小的列,具有流體邊距,以在每個斷點(diǎn)范圍內(nèi)保持內(nèi)容不變。固定柵格的布局只能在指定的斷點(diǎn)處更改。

UI(用戶界面)區(qū)域

布局由多個UI區(qū)域組成,例如側(cè)面導(dǎo)航,內(nèi)容區(qū)域和應(yīng)用欄。這些區(qū)域可以顯示操作、內(nèi)容或?qū)Ш侥繕?biāo)。UI區(qū)域應(yīng)跨設(shè)備保持一致,同時適應(yīng)不同屏幕尺寸的不同斷點(diǎn)。

為了提高設(shè)備之間的熟悉度,為桌面設(shè)計(jì)的UI元素應(yīng)該以與移動UI一致的方式進(jìn)行組織。

永久UI區(qū)域

永久UI區(qū)域是可以在響應(yīng)柵格之外顯示的區(qū)域,如導(dǎo)航抽屜。這些地區(qū)不能重疊。

持久UI區(qū)域

持久性UI區(qū)域是可以隨時根據(jù)命令顯示的區(qū)域,或者它們可以保持可見。它們可以打開或關(guān)閉,出現(xiàn)或消失。當(dāng)它們出現(xiàn)時,它們會壓縮內(nèi)容和柵格。

當(dāng)持久性UI區(qū)域可見時,其可見性不受與屏幕上其他元素交互的影響。

臨時UI區(qū)域

臨時UI區(qū)域暫時出現(xiàn),當(dāng)它們出現(xiàn)時,它們不會影響響應(yīng)式柵格。當(dāng)它們可見時,可以通過點(diǎn)擊其區(qū)域中的項(xiàng)目或其區(qū)域外的任何空間來隱藏它們。

當(dāng)UI區(qū)域可見時,其他屏幕元素不是交互式的。

原型

原型是結(jié)構(gòu)化布局,為布局、分層和陰影提供一致的方法。它們是一個起點(diǎn),旨在在進(jìn)行修改以滿足產(chǎn)品的特定需求。


藍(lán)藍(lán)設(shè)計(jì)sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì)

做10年UX才能明白的9個道理

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

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

最近,我注意到初創(chuàng)企業(yè)和成熟企業(yè)都對研究熱情備增 。企業(yè)欣然接受這一觀點(diǎn):富有意義的創(chuàng)新,需要把客戶作為復(fù)雜生命體來理解。

這太棒了。

我也反復(fù)聽過不少錯誤和模棱兩可的說法被反復(fù)提起。因此,為了幫助大家——因?yàn)槲掖_實(shí)喜歡幫助人——我在這里介紹一份簡單易學(xué)的糾正理解偏差的小清單,希望能夠廣泛傳播(我很有信心,因?yàn)檠芯勘砻鳎x者喜歡簡單易學(xué)的清單)。

UXRen

1、適應(yīng)不舒適的感覺

“我只知道一件事,就是我一無所知。”—蘇格拉底(Socrates)

我們在重視回答和害怕提問的環(huán)境中長大。在學(xué)校里,我們因?yàn)榛卮鹫_而得到獎勵;在工作中,我們因?yàn)樘岢龊玫狞c(diǎn)子而得到獎勵。難怪很多人會找理由避免做研究,特別是定性研究。顯得無知所產(chǎn)生的焦慮在心中滋長。定量的東西至少有標(biāo)準(zhǔn)化測試所帶來的熟悉感,令人舒適。保持研究型思維模式意味著要認(rèn)識到偏差無處不在,確定性只是一種錯覺,任何答案的有效期都是短暫的。因此從長遠(yuǎn)來看,好的問題更有價值得多。只有你承認(rèn)自己沒有答案,才能問出好問題—也才會了解更多。

UXRen

2、先提問,再做原型

“如果我們只測試開瓶器,可能永遠(yuǎn)不會意識到客戶更喜歡螺旋蓋的瓶子?!?br /> —維克多·隆巴迪(Victor Lombardi),《設(shè)計(jì)敗道:來自著名用戶體驗(yàn)案例的教訓(xùn)》(Why We Fail)

我們理所當(dāng)然會急于制作原型,測試原型。原型就是答案,可觸可摸,即使只是紙上的草圖。這樣做很舒服,比只是問問題舒服多了,即便這無異于燒錢。對于任何想要立竿見影地證明自己價值的人來說,只問問題,就像那只洗棉花糖的浣熊一樣,事與愿違。

太早制作原型的風(fēng)險在于,這會把資源投入去回答一個無人問及的問題,同時還忽略了機(jī)會成本。測試原型可以幫助你優(yōu)化好點(diǎn)子,但不會告訴你是否在解決恰當(dāng)?shù)膯栴},并且,也很容易將原型的亮點(diǎn)誤以為是點(diǎn)子的質(zhì)量。不論如何,研究報告中的亮點(diǎn)也容易被誤認(rèn)為是具有價值的洞察。

提出恰當(dāng)?shù)膯栴},不會讓不好的點(diǎn)子得到保留和維護(hù),反而會幫助你更快地將它們識別和清除。你只需要有足夠強(qiáng)大的內(nèi)心去擁抱錯誤。

(如果你正在想“嘿!這對我的團(tuán)隊(duì)會有幫助”,我們會非常樂意去你的辦公室呆一天,確定你是否準(zhǔn)備Mule Design Studio合作。)

 UXRen

3、了解目標(biāo)

除非你事先知道做某項(xiàng)研究的動機(jī),否則提問就是浪費(fèi)時間。你必須公開發(fā)誓:你的動機(jī)不是“為了證明自己是正確的”。這是每個人內(nèi)心隱藏的目標(biāo)。參看第一點(diǎn)。

通常,出于對研究的一腔熱情,團(tuán)隊(duì)往往會在目標(biāo)不明確、不一致時就開始跟客戶對話。然后,他們會感覺花了寶貴的時間,但卻不知道怎么去應(yīng)用自己了解到的東西來提供解決方案,因而沒有什么可供展示的。于是就有了這樣的說法:“我們?nèi)ツ曜隽搜芯?,但卻是浪費(fèi)時間。”于是,又回到了建立原型和測試原型的舒適圈。又或者,他們對聽到的內(nèi)容有不同的理解,結(jié)果又因誰對誰錯更加爭論不休。

在大公司、大機(jī)構(gòu)中,有時大家都有心照不宣的目標(biāo):“表現(xiàn)出我們在盡力做研究,不過還是讓產(chǎn)品負(fù)責(zé)人做他想做的事吧?!边@聽起來可能有點(diǎn)嘲諷意味,但通過跟許多在資金充足的研究部門的資深研究者交談,我了解到,盡管他們撰寫的報告相當(dāng)精彩,但對決策的影響卻為零。承認(rèn)這個事實(shí),是阻止它發(fā)生的第一步。

完美絕佳的起點(diǎn),是把你的目標(biāo)設(shè)置成:“我們需要確定水準(zhǔn),快速理解他人的觀點(diǎn)?!辈灰谑潞笕我馓砑悠渌繕?biāo)。

只有當(dāng)你確定了目標(biāo),才知道自己需要了解什么。而在你選擇怎么回答之前,你必須知道自己的問題是什么。

UXRen

4、在重大問題上達(dá)成一致

“從本質(zhì)上講,所有商業(yè)活動都是在人的行為上下賭注?!?br /> ——《“厚”數(shù)據(jù)的力量》(The Power of ‘Thick’ Data),《華爾街日報》

問題的質(zhì)量決定了結(jié)果的用處。提出錯誤的問題跟用原型解決錯誤的問題如出一轍,它們都會給你一些你不想要的東西。從優(yōu)先級最高的問題開始。確定這類問題的辦法是:如果你在這些問題上的假設(shè)搞錯了或忽略了,風(fēng)險會最大。

最重要的研究問題是你想要知道什么,而不是你在訪談中要問什么。事實(shí)上,直接拋出你的研究問題往往是最糟糕的方式。人們往往不知道或者不愿承認(rèn)他們真實(shí)的行為,但人人都很擅長編造答案。

設(shè)計(jì)研究總是和用戶研究混淆。回答高優(yōu)先級研究問題的方式多種多樣,跟有代表性的用戶對話只是其中一種。你所需要知道的,并非都是與用戶相關(guān)。

通常,最關(guān)鍵的問題是:“基于證據(jù),我們對客戶、競爭、內(nèi)部能力真正了解些什么?”問法各有不同。這可能是一個非常難以完全誠實(shí)作答的問題,但又得在短時間內(nèi)回答。

UXRen

5、時間和金錢永遠(yuǎn)是夠用的

當(dāng)研究被定義為設(shè)計(jì)之外的一種工作,人們就很容易把收集證據(jù)當(dāng)作額外負(fù)擔(dān),找理由不做。

通常,團(tuán)隊(duì)必須獲得權(quán)威人士的許可,才能進(jìn)行研究工作。提問本質(zhì)上是對權(quán)威的挑戰(zhàn)。如果你曾經(jīng)和一位不同意為百萬美元項(xiàng)目開展定性研究的領(lǐng)導(dǎo)合作,那么問問自己,這位領(lǐng)導(dǎo)購買一輛價值5萬美元的汽車前會不會自己做做研究?口頭上提出反對意見,心里面往往是害怕自己的主意被破壞,被證明錯誤,或者不那么行之有效。

如果你的目標(biāo)和高優(yōu)先級問題明確直白,不管時間和預(yù)算如何,你都可以了解到一些有用的信息。比如在線研究,午餐時間外出觀察,測試其他產(chǎn)品的可用性,發(fā)揮創(chuàng)意。

只要不是做調(diào)查就行。

UXRen

6、不要指望數(shù)據(jù)能改變想法

“當(dāng)一個人要靠著對某件事的不理解來拿薪水時,要讓他理解這件事是很困難的?!薄蚱疹D·辛克萊(Upton Sinclair)

即使研究已經(jīng)證明了這一點(diǎn),但訓(xùn)練有素的專業(yè)研究者還是往往很難接受。如果你習(xí)慣和重視某種特定數(shù)據(jù)類型的同事一起工作,那你可能很難去說服那些不假思索就否定這種觀點(diǎn)的人。而且,可能會因?yàn)閿?shù)據(jù)不足而讓某人覺得自己的專業(yè)能力受到了侮辱。

收集證據(jù)的全部意義在于基于證據(jù)做出決定。如果這些證據(jù)破壞或者反駁了決策者所信奉的想法,他們就會找理由去否定或忽視這些證據(jù)。這也是定性研究者在一些工程師驅(qū)動的組織中處境艱難的核心原因。即使問題需要的是更具描述性的答案,熟悉且擅長數(shù)字的人卻想要用數(shù)字表達(dá)的答案。

因此,在嘗試用數(shù)據(jù)去影響決策之前,你必須了解你的同事和領(lǐng)導(dǎo)的個人特點(diǎn)和他們所處的環(huán)境,了解他們是怎么做決定的。

UXRen

7、接受混亂帶來的不完美

“我們善變,愚蠢,記憶力差,且有自我毀滅的天賦?!?br /> ——蘇珊·柯林斯(Suzanne Collins),《饑餓游戲:嘲笑鳥》( Mockingjay)

人類的生活是混亂的。人類如果沒有遇到問題,就不需要產(chǎn)品和服務(wù),我們也就不會有工作。在真實(shí)、混亂的世界中為人們找出解決問題的最佳途徑需要一些時間,并在一定程度上放開控制。雖然有必要采取一種合乎道德的、足夠嚴(yán)格的方法,但并不存在絕對純凈的定性環(huán)境。明確的目標(biāo)和好的問題可以承受各種不可預(yù)知的情況的考驗(yàn)。

人們希望開展舒適有序、顯得專業(yè)的活動,這導(dǎo)致他們不恰當(dāng)?shù)厥褂媒裹c(diǎn)小組、可用性實(shí)驗(yàn)室、眼球追蹤、調(diào)查和光鮮的報告等方式,但其實(shí),不那么正式的研究可能會更加有效。

將證據(jù)納入設(shè)計(jì)決策,本身就是一個增強(qiáng)了解的過程。你永遠(yuǎn)不會找到正確的答案并解決問題。如果過程行之有效,你就會在做決策時信心備增。

UXRen

8、致力于合作

每個從事相同工作的人面對的都是相同的現(xiàn)實(shí)。做出產(chǎn)品決策的人需要對信息完全知情。如果知識只存在于一個人的頭腦中(除非你在倫敦,而那個人是你的出租車司機(jī)),那么知識本身有多好并不重要。

一組人制作報告,而另一組人收到報告后置若罔聞,便是沒有合作的研究。如果這樣工作,即使是最用心的團(tuán)隊(duì)也會讓知識溜走。而如果合作中缺乏證據(jù),則意味著每個人都心照不宣地默認(rèn):勝出的是個人偏好。這兩種方法都不是最有效的。

最有效的方法,是讓產(chǎn)品開發(fā)人員直接參與提問和回答。這樣做也很有趣。實(shí)現(xiàn)這一點(diǎn)的方法有多種,依具體公司或機(jī)構(gòu)而定。

提問關(guān)鍵在于建立一個共享的決策框架,以便做出更快更好的決策。我曾經(jīng)就此召開了一場研討會,它帶來了改變。

UXRen

9、找到糾正你的偏差的伙伴

“我們可能對顯而易見的事情視而不見,也可能對自己的盲目視而不見?!?br /> ——丹尼爾·卡尼曼(Daniel Kahneman), 《思考,快與慢》(Thinking Fast and Slow

你做了一些工作,找到了一些答案?,F(xiàn)在你需要確定它們的意義。在解釋研究結(jié)果時,合作變得尤為重要。每個人都被偏差所困擾,而且自己還無從察覺。我們所看到的是最符合我們現(xiàn)有信念的。因此,我們必須參考外部標(biāo)準(zhǔn)(包括預(yù)先設(shè)定的目標(biāo)和問題),一起工作,互相檢查。

這與你有多聰明或消息多靈通無關(guān)。一旦你接受了這一點(diǎn),只要你在一個心理上有安全感和相互尊重的團(tuán)隊(duì)中工作,識別出偏差就會是一場有趣的游戲。

維基百科(https://en.wikipedia.org/wiki/List_of_cognitive_biases)提供了不錯的認(rèn)知偏差清單,可以和認(rèn)知偏差圖( Cognitive Bias Codex  )一起打印出來貼在墻上。

也許,這就叫正確的設(shè)計(jì)。

UXRen

總之,當(dāng)我們在討論設(shè)計(jì)研究時,實(shí)際上是在討論基于證據(jù)的設(shè)計(jì)。創(chuàng)作、批評和探究都是設(shè)計(jì)過程中不可分割的一部分。將它們分裂開來,就會因無知、自負(fù)或恐懼而錯上加錯。

設(shè)計(jì)是一種價值的轉(zhuǎn)換。在實(shí)現(xiàn)任何產(chǎn)出之前,你必須先問問人們真正需要什么、看重什么,問問你希望從中得到什么樣的商業(yè)價值回報。

只要你采取道德的方法,誠實(shí)對待你的所見所聞,朝著富有價值的目標(biāo)前進(jìn),那么,你所提出的問題和你找到答案的方式都無關(guān)緊要。正確的方法并非只有一種,正確的答案也并非只有一個。享受不確定性吧!它永無止境。

藍(lán)藍(lán)設(shè)計(jì)sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(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設(shè)計(jì)師除設(shè)計(jì)外所需要具備的能力

用心設(shè)計(jì)

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

 

我們已經(jīng)或多或少看過一些優(yōu)秀作品,也知道了一些設(shè)計(jì)方法和技巧,了解到了一些相關(guān)的理論知識,自己也做過一些項(xiàng)目或者是練習(xí),總體來說都掌握了一定的設(shè)計(jì)能力;但是設(shè)計(jì)師想要擁有更多的資源(指薪資、工作機(jī)會等等)或者是想職業(yè)進(jìn)階,除了一定的設(shè)計(jì)能力之外是遠(yuǎn)遠(yuǎn)不夠的。

設(shè)計(jì)師還需要掌握更多的能力,才能讓自己成長提升,并且擁有他人無法取代的價值。我通過自己的經(jīng)歷和整理收集,發(fā)現(xiàn)目前如今不同階段的設(shè)計(jì)師對待同一個問題不同的角度以及特征,如下圖所示:

不難發(fā)現(xiàn),當(dāng)大家還是初級設(shè)計(jì)師的時候,剛剛接觸設(shè)計(jì)行業(yè),我們更多的是去觀察、學(xué)習(xí)、臨摹一些“好看”的作品,熟練地使用設(shè)計(jì)軟件和提升設(shè)計(jì)技法,最后的是自己做出來的產(chǎn)品是否漂亮美觀,最重要的是客戶/老板是否會買單,而自己無法清晰地定義自己設(shè)計(jì)的產(chǎn)品價值,也不能很好表達(dá)出自己的想法和觀點(diǎn)。所以產(chǎn)品走向會根據(jù)老板/客戶的水準(zhǔn)來定義,輪到自己表達(dá)只是支支吾吾,最后只是做為執(zhí)行無休止地改改改。一切由老板/客戶說的算,無法清晰地了解自己產(chǎn)品的定位,缺乏表達(dá)觀點(diǎn)的能力,缺乏一定的審美,作為執(zhí)行角色無休止加班成為了初級設(shè)計(jì)師最大的痛點(diǎn)。

而經(jīng)過一段時間的學(xué)習(xí)和工作后,逐漸轉(zhuǎn)型成為中級設(shè)計(jì)師后,有了一定的設(shè)計(jì)技法和軟件使用熟練度,有了一定的審美和視覺表現(xiàn)能力,平臺規(guī)模合作團(tuán)隊(duì)也逐漸變大,基本能滿足老板/客戶/業(yè)務(wù)方提出的需求。開始學(xué)習(xí)一些設(shè)計(jì)相關(guān)理論,開始拆解自己或別人產(chǎn)品的交互架構(gòu),更多地開始關(guān)注用戶體驗(yàn)起來,也會融入品牌元素到自己的產(chǎn)品當(dāng)中,為自己的產(chǎn)品做情感化設(shè)計(jì)和制定設(shè)計(jì)規(guī)范,會組織一些專業(yè)語言和業(yè)務(wù)溝通以及陳述自己的產(chǎn)品。但是如何從眾多的設(shè)計(jì)方案中找到最優(yōu)的方案來解決問題,如何更多地體現(xiàn)產(chǎn)品的價值,產(chǎn)品利益鏈如何形成商業(yè)閉環(huán),如何在團(tuán)隊(duì)/設(shè)計(jì)圈體現(xiàn)自己個人的價值,如何提升自己的個人影響力,成為了中級設(shè)計(jì)師這階段的痛點(diǎn)。

通過三年五年的沉淀,成為高級設(shè)計(jì)師后,形成了自己獨(dú)有的一套方法論和設(shè)計(jì)思維,能熟練地拆解每款產(chǎn)品和定義產(chǎn)品,視覺表現(xiàn)層已經(jīng)完全能駕馭,能清晰地闡述自己的設(shè)計(jì)思路和結(jié)論,產(chǎn)品用戶體驗(yàn)層也有了一定的經(jīng)驗(yàn)和方法,在團(tuán)隊(duì)中或者設(shè)計(jì)圈有自己一定的個人影響力,更多地會在工作中思考產(chǎn)品帶來的社會價值和商業(yè)價值,會用不同的思維去思考產(chǎn)品的各個維度,找到最優(yōu)的方法解決問題,會把固有的利益鏈轉(zhuǎn)換成商業(yè)閉環(huán),提升用戶轉(zhuǎn)化率等等。而這階段的設(shè)計(jì)師的主要痛點(diǎn)就是面臨著團(tuán)隊(duì)管理和溝通,朝著資深設(shè)計(jì)師和設(shè)計(jì)專家轉(zhuǎn)型,以及如何為平臺帶來的利益價值考核等等問題。

資深設(shè)計(jì)師或者設(shè)計(jì)專家這里不談,因?yàn)檫@階段所思考的問題大都和設(shè)計(jì)無關(guān)了。通過上述不難發(fā)現(xiàn),每個階段的設(shè)計(jì)師都有各自的特征和痛點(diǎn),雖然其中都包含著設(shè)計(jì)相關(guān)的能力,但是隨著階段的進(jìn)階設(shè)計(jì)相關(guān)的能力占比逐漸變少,更多的是其他的能力增長,所以設(shè)計(jì)師除了設(shè)計(jì)以外其他能力的重要程度顯而易見,那么我們來看看除了設(shè)計(jì)以外,設(shè)計(jì)師應(yīng)該掌握其他什么能力。

思考能力(Thinking)

思考能力作為首要的能力,不僅僅是設(shè)計(jì)師,其他職業(yè)一樣需要這個能力,這里所涵蓋的面太廣泛了也說不了,這里主要針對三點(diǎn)來講:核心競爭力、批判思維和分析能力。思考分為兩個層面:自我層面的和業(yè)務(wù)層面的思考;自我層面的思考就是要通過深度剖析自我,發(fā)掘自己處于哪個階段,有什么長處和不足,自己想要什么,需要往怎樣的方向發(fā)展;而業(yè)務(wù)層面的則是要需要思考業(yè)務(wù)產(chǎn)品的結(jié)構(gòu)框架、用戶體驗(yàn)、商業(yè)價值等等等等,前者更加關(guān)注自身的成長,后者更加關(guān)注業(yè)務(wù)的成長。

· 核心競爭力

核心競爭力就是有與別人不一樣的競爭力,想要做到別人無法替代你的地步,就要有自己個人核心的競爭力。如果你會做一張 Banner,我也會做一張 Banner,你會搞一個頁面,我也會搞一個頁面,那么你這個人就成為了可有可無的螺絲釘,唯一的優(yōu)勢就是年輕能拼能熬,等你熬銹了老了,隨時可以換一顆新的螺絲釘來取代你的位置。所以不管什么階段,我們要深度剖析自己,認(rèn)清自己的優(yōu)勢劣勢,并采取相應(yīng)的措施。

剖析自己的核心競爭力給大家一個大致思路,從異樣性和共通性入手。自己周圍或多或少有團(tuán)隊(duì),條件不足的話現(xiàn)在網(wǎng)絡(luò)各大平臺都很發(fā)達(dá),也能融入一些設(shè)計(jì)圈子中,和不同的人對比尋找自己的核心競爭力。異樣性是當(dāng)前的優(yōu)勢,找出其中的優(yōu)點(diǎn),不斷地放大深造,變成你的核心競爭力,而和別人不一樣的缺點(diǎn)找出來摒棄改正;共通性就是和大家一樣的地方,可以看作是偽劣勢,因?yàn)橹T多共通性中總有你最喜歡最擅長的一個,將它單獨(dú)拿出來不斷擴(kuò)大,逐漸就拉開了差異性,慢慢就轉(zhuǎn)化成你的核心競爭力了,而大家都有的缺點(diǎn),你把它糾正了,就成為你的核心競爭力了。

來舉一個栗子:小王是一名工作了3年的設(shè)計(jì)師,研究生畢業(yè),由于公司的原因平時工作最多接觸的就是一些運(yùn)營圖 banner,也有過很多品牌 VI 的經(jīng)驗(yàn),逐漸自己在視覺表現(xiàn)上有自己一定的見解和想法,也更加感興趣做視覺表現(xiàn)的東西。

那么他的共通性就有:1.工作3年之久;2.研究生畢業(yè);3.視覺表現(xiàn)能力強(qiáng)也更感興趣;4.做過品牌 VI 的經(jīng)驗(yàn);5.有自己的見解和想法。

由此推斷出小王的共通性是:1.工作經(jīng)驗(yàn)豐富;2.視覺表現(xiàn)力強(qiáng);3.有想法和見解;

異樣性是:1.學(xué)歷優(yōu)勢;2.品牌 VI 相關(guān)經(jīng)驗(yàn)

那么小王可以保持自己學(xué)歷優(yōu)勢下,可以繼續(xù)深造品牌 VI 相關(guān),逐漸轉(zhuǎn)型成為高學(xué)歷的品牌 VI 設(shè)計(jì)師,那么學(xué)歷和很多品牌 VI 的經(jīng)驗(yàn)就是小王的核心競爭力;也可以通過熱愛去學(xué)習(xí) C4D 動效等軟件繼續(xù)增強(qiáng)自己視覺表現(xiàn)力,配合自己豐富的工作經(jīng)驗(yàn)逐漸轉(zhuǎn)型成高學(xué)歷的創(chuàng)意藝術(shù)設(shè)計(jì)師,然后通過將自己的想法見解通過分享會、文章等模式產(chǎn)出,將這一點(diǎn)升級成個人影響力,那么綜合下來更加優(yōu)秀的視覺表現(xiàn)力、豐富的工作經(jīng)驗(yàn)和個人影響力也會逐漸變成小王的核心競爭力。

只有通過不同維度深度地剖析自己,找到自己的共通和異樣點(diǎn),清晰自己的價值定位,然后制定出適合自己成長目標(biāo)和方案,不斷放大增加自己的核心競爭力,成為不可取代的那個人。

· 批判思維

批判思維是一名設(shè)計(jì)師必須具備的思維能力,我們不僅僅要學(xué)會批判別人的作品,還要學(xué)會自我批判。這里不是指無腦的批判(之前遇到過一個實(shí)習(xí)生剛進(jìn)到公司里,就把之前所有人做的東西全部批判了一遍,重點(diǎn)是只說產(chǎn)品好看與否,完全不顧及平臺一致性商業(yè)價值用戶體驗(yàn)等等,最后只批判卻沒有任何實(shí)質(zhì)性的建議,頗有一種指點(diǎn)江山的感覺,然后后面再也沒見到過他了),這里是指在自己通過批判別人或自我的方案,不斷地優(yōu)化糾正,最后產(chǎn)出最優(yōu)質(zhì)的方案,這是批判思維的出發(fā)點(diǎn)。

不同的人有不同的經(jīng)歷,看待問題的維度是多種多樣的,所以一個方案產(chǎn)出后,通過不同的人思考后的結(jié)果是最好的解決方案。這也印證了波克定理:只有在爭辯中,才可能誕生最好的主意和最好的決定。所以當(dāng)設(shè)計(jì)師接到產(chǎn)品交互給到的原型圖后,不要上手就做圖,要通過自己經(jīng)驗(yàn)和想法去看待原型圖,然后提出更加優(yōu)質(zhì)的方案進(jìn)行討論,如果你的方案更加優(yōu)質(zhì),那么不僅是產(chǎn)品的質(zhì)量得到了優(yōu)化,你個人的經(jīng)驗(yàn)也得到了沉淀,下次遇到相同的場景就可以拿出來復(fù)用,直到遇到更好的方案。

唯一注意的事項(xiàng)就是注意溝通的方法,這里后文會提到,比你資歷高的人提出的觀點(diǎn)更加具有建設(shè)性,在毫無頭緒沒有創(chuàng)新的情況下就聽比你更有經(jīng)驗(yàn)的人的;遇到比你資歷低的人提出的觀點(diǎn)也不要嗤之以鼻,抓取其中有用的點(diǎn),沒準(zhǔn)是一個新的思維方向;總之,有數(shù)據(jù)說數(shù)據(jù),沒數(shù)據(jù)舉案例,沒案例講觀點(diǎn),如果連觀點(diǎn)都沒有的話,照著大佬說的話做就是了。

· 分析能力

分析能力也是設(shè)計(jì)師必須掌握的能力之一,無論你是創(chuàng)意藝術(shù)設(shè)計(jì)師,還是用戶體驗(yàn)設(shè)計(jì)師,譬如一張 Banner 氛圍傳遞或者文案排版,譬如插畫的配色或者場景搭建,譬如產(chǎn)品的布局結(jié)構(gòu)或者用戶體驗(yàn),這些都需要有一定的分析能力。通過拆解改版/競品/參照產(chǎn)品等,明確產(chǎn)品的最終目的、商業(yè)價值等等,有了這些準(zhǔn)備后才能對自己的產(chǎn)品進(jìn)行設(shè)計(jì)或者改版。而分析產(chǎn)品可以以用戶體驗(yàn)五要素的角度來分析,分別是:戰(zhàn)略層、范圍層、結(jié)構(gòu)層、框架層和表現(xiàn)層,具體相關(guān)的文章站酷、PM 社區(qū)、36氪等等都搜的到,這里不再細(xì)說;之前在分析產(chǎn)品的時候發(fā)現(xiàn)有些產(chǎn)品強(qiáng)行套用這五個要素進(jìn)去不適用,因?yàn)橛行┊a(chǎn)品的頁面它不存在戰(zhàn)略層或者范圍層的東西,所以我總結(jié)歸納了三個角度來分析產(chǎn)品。

案例就用淘搶購 v4.1 頁面(已上線)來講,三個角度主要是:表現(xiàn)層、用戶體驗(yàn)層和價值層。表現(xiàn)層主要就是產(chǎn)品頁面的配色、布局結(jié)構(gòu)之類的;用戶體驗(yàn)層就是產(chǎn)品的心智透出、交互流程之類的;價值層就是產(chǎn)品深度的價值體現(xiàn)了,比如商業(yè)價值、社會價值和用戶留存率之類的;大致可以套用這個公式去思考:為什么這里會用這種表現(xiàn)形式,它想要表達(dá)怎樣的效果,它要達(dá)到怎樣的最終目的,如果是自己去設(shè)計(jì)會怎樣做。舉例:因?yàn)樘詫氁?guī)范為卡片式設(shè)計(jì),在視覺表現(xiàn)上要統(tǒng)一,所以淘搶購 v4.1 的業(yè)務(wù)目的是統(tǒng)一視覺樣式,并且它需要給用戶產(chǎn)生一種“商品很便宜快去搶購再不搶購就沒了”的心智認(rèn)知,它的最終目的是引導(dǎo)用戶去商品 Detail 頁面購買商品和提高商品的點(diǎn)擊率,這樣通過協(xié)調(diào)關(guān)系形成平臺、商家和用戶之間的利益鏈商業(yè)閉環(huán)。

想要提升自己的分析能力除了項(xiàng)目和時間的沉淀外,更多的時候需要自己平時的積累,站酷等平臺有很多優(yōu)秀的作品,作者會把自己設(shè)計(jì)的分析和思路寫出來,我們可以看看別人的想法是否值得借鑒,然后再去分析一下,最后思考如果是自己的話會怎么去做;其次做設(shè)計(jì)的時候帶著同理心去做,把自己當(dāng)作用戶去看待自己的產(chǎn)品,通過不斷的積累提升自己對產(chǎn)品的敏銳度,將一些產(chǎn)品的隱性問題挖掘出來;另外可以多看一些好的設(shè)計(jì)分析書,比如《U一點(diǎn)料1、2》、《以匠心 致設(shè)計(jì)》等等,將學(xué)到的分析方法代入自己的產(chǎn)品或作品中,逐漸分析能力就增強(qiáng)了。

規(guī)劃能力(Plan)

規(guī)劃能力是日常工作生活中所需要掌握的能力,主要講業(yè)務(wù)規(guī)劃和職業(yè)生涯規(guī)劃,業(yè)務(wù)規(guī)劃能力應(yīng)對的是我們工作中處理業(yè)務(wù)所需要具備的能力,而職業(yè)生涯規(guī)劃應(yīng)對的是我們整個人生職業(yè)生涯規(guī)劃的能力。掌握這個能力后前者會給我們帶來業(yè)務(wù)處理效率上的提升,后者給我們帶來整個人生有益的好處,所以這個能力非常重要。

· 業(yè)務(wù)規(guī)劃

很多時候我們還在有條不紊地處理某個需求,心想著下班去吃個飯買水果回家洗澡睡覺的時候,突然來了一個緊急的需求,就把我們整天的計(jì)劃給打亂了,火急火燎地處理完這個需求,然后又把之前的需求做了,最后加班改改改導(dǎo)致整個計(jì)劃泡湯了。工作中遇到這樣的情況很多很多,處理方法有很多種,最經(jīng)典的就是四象限法則,把事情的緊急重要程度分為:重要且緊急、緊急不重要、重要不緊急和不重要且不緊急四個象限。

很多時候都是道理我們都懂,可是一遇到情況依舊手忙腳亂,根本原因是沒有認(rèn)真地把它代入自己的工作生活當(dāng)中。畫一個象限表,把自己今天所要處理的事務(wù)陳列出來五分鐘都不需要,一開始可能因?yàn)槭虑椴欢嗑蜎]堅(jiān)持下去,一旦養(yǎng)成習(xí)慣后,將來遇到多種緊急情況突發(fā)的時候就能認(rèn)識到這個習(xí)慣給你帶來的好處了,所謂養(yǎng)兵千日,用兵一時就是這個道理。

在做業(yè)務(wù)需求的時候,可能會碰到有些需求價值高,有些需求價值低但又很緊急,不知道怎么處理之間的關(guān)系,我們依舊可以套用四象限法則來制定一個四象限表:價值高且緊急、緊急但價值低、價值高不緊急和價值低不緊急。什么是價值高的需求呢,就是能讓你有充分思考和分析的需求,比如某個頁面的改版;價值低的需求則是相對不怎么需要思考和分析的需求,比如根據(jù)已有的規(guī)范改個顏色之類的。在時間的優(yōu)先級前,價值高的需求大于價值低的,最后剩下的就是價值不高且不緊急的。因?yàn)槲覀儫o法拒絕需求,需求來了肯定要是做的,工作不是愛好可以有多種選擇性,但我們要學(xué)會將需求分解成不同類型的,對自己有成長沉淀的需求那可以作為最高優(yōu)先級去處理,留夠充裕的時間去思考分析,然后沉淀經(jīng)驗(yàn)穩(wěn)定提升。

· 職業(yè)生涯規(guī)劃

這個在大學(xué)期間就學(xué)過相關(guān)的課程,只不過當(dāng)時并沒有太深的感觸,而是等工作以后才知道這項(xiàng)能力的重要性,它相當(dāng)于關(guān)系著你每個階段的里程碑,當(dāng)成游戲中的成就任務(wù)也不為過,還是自己設(shè)定的成就任務(wù)。某個階段想要達(dá)成什么樣的目標(biāo),想要獲得怎樣的成就,都是要自己一步一步慢慢規(guī)劃并且完成出來的。

因?yàn)槲矣龅竭^幾個非常努力的人,努力到讓人心悸的地步,每天除去吃飯睡覺工作時間就是在努力學(xué)習(xí),到最后還是很迷茫,不知道做什么,不知道如何體現(xiàn)自己的價值。這類沒有目的的努力的人是很可怕的,他們努力得沒有錯,但是這樣下去沒有成效的努力會讓他們覺得努力并沒什么用,然后逐漸開始產(chǎn)生抱怨、泄氣和放棄等負(fù)面情緒。

舉個例子來說明:如果你剛畢業(yè),給自己制定的長遠(yuǎn)的職業(yè)生涯規(guī)劃是在工作3~5年后進(jìn)到大廠工作提升自己,那么所拆分下來就需要一些項(xiàng)目工作經(jīng)驗(yàn)和優(yōu)秀的作品,再拆分下來就是如何做出優(yōu)秀的作品,細(xì)分到最后就是作品當(dāng)中的元素,比如圖標(biāo)排版布局之類的,那么就制定一段時間內(nèi)的練習(xí)就按照各類元素去做,比如圖標(biāo)畫兩個星期,APP 設(shè)計(jì)排版布局練習(xí)兩個星期,插畫練習(xí)畫兩個星期,這樣堅(jiān)持下來就組成一個完整的項(xiàng)目作品了,以此類推。有了規(guī)劃目標(biāo)并且在自我驅(qū)動的推動下,逐漸實(shí)現(xiàn)自己的職業(yè)目標(biāo)。

執(zhí)行能力(Execute)

執(zhí)行能力是指自我在工作&學(xué)習(xí)中執(zhí)行的能力,執(zhí)行能力為一個設(shè)計(jì)師最主要的核心技能,一切的能力都凌駕于這個基礎(chǔ)之上;哪怕你再能說會道,能賦予你的設(shè)計(jì)各種價值,能給予你的設(shè)計(jì)各種環(huán)境,但這些都是第二步,第一步就是你的設(shè)計(jì)表現(xiàn)達(dá)到期望值,如若第一步稿子都不好看,那么沒人愿意會聽你敘述的。前文已經(jīng)提及到了,設(shè)計(jì)師在初級至中級階段的時候大多數(shù)注重的就是表現(xiàn)手法,如同學(xué)說話一樣,表現(xiàn)手法可以看作是漢語拼音,然后才是組成一個個字,最后組成一句完整的話語。

· 自我執(zhí)行力

提升自我執(zhí)行的能力我大致分為兩個步驟:看和做。

首先先來說看,看其實(shí)是提高自己審美的一個過程,通過看一些平臺網(wǎng)站的優(yōu)秀設(shè)計(jì)作品,久而久之自己的審美能力才會提高,然而看分下來一種是帶有目的性和不帶有目的性的。不帶有目的性地去看是在自己有空余或?qū)W習(xí)時間,通過瀏覽設(shè)計(jì)網(wǎng)站采集學(xué)習(xí)一些你覺得好看的作品;采集是一個很好的習(xí)慣,我覺得是每個設(shè)計(jì)師必須養(yǎng)成的習(xí)慣,把自己平時覺得好的表現(xiàn)形式收集起來,等到某一天需要用到的時候,腦海中對當(dāng)前場景會有一定的印象,再根據(jù)印象去尋找采集到的作品,能很大程度上節(jié)省自己腦爆的時間,哪怕沒有采集或者文件丟失,自己的腦中大致也會有一個雛形方向。而帶有目的性地看是指針對某一個模塊去搜集整理,比如今天我需要做一個關(guān)于內(nèi)容的模塊,那么我就會去尋找一些做內(nèi)容的產(chǎn)品設(shè)計(jì),搜集到的各類關(guān)于內(nèi)容的表現(xiàn)手法,然后結(jié)合自己的經(jīng)驗(yàn)和分析,找出最適合自己產(chǎn)品的一種。

僅僅看是不夠的,在看過之后我們需要動手嘗試才能算真正地沉淀自己所看到、學(xué)到的東西。做設(shè)計(jì)最忌諱的就是“眼高手低或者眼低手高”這種狀態(tài),有了審美但表現(xiàn)手法跟不上,或者說表現(xiàn)手法有但是審美跟不上。一定要在自己吸收了一定的審美后,通過自己的嘗試去做出來,才能真正的沉淀到自己的大腦當(dāng)中,變成自己的表現(xiàn)手法之一。最后通過大量的積累,結(jié)合對商業(yè)需求的判斷形成設(shè)計(jì)策略,才能從容應(yīng)對不同的產(chǎn)品需求,哪怕你今天做金融相關(guān)的產(chǎn)品,還是明天做電商的產(chǎn)品,后天又改做工具類產(chǎn)品,一旦形成了自己不同的應(yīng)對策略,才能做到真正意義上的游刃有余。

很多時候我們只關(guān)注到魚的大小、魚的肉質(zhì)是否鮮美那20%層面的東西,往往忽視了80%最重要的捕魚技巧和方法;看到的只是產(chǎn)品是否好看,交互是否流暢,體驗(yàn)是否良好,沒有往更深層次地去想這個產(chǎn)品的商業(yè)背景是什么,設(shè)計(jì)師為什么要這樣設(shè)計(jì),如果換做自己的話會去怎么做;畢竟我們所做的一切訓(xùn)練、思考都是為了更好地為工作服務(wù),就如同脫離了商業(yè)背景以后,有些設(shè)計(jì)就只是單純的炫技,并沒有解決問題的價值,而設(shè)計(jì)師的工作核心就是解決問題,所以我們要結(jié)合作品的背景、價值等因素,去看、去做、去學(xué)相應(yīng)的表現(xiàn)手法才是自我執(zhí)行的核心所在。

表達(dá)能力(Express)

表達(dá)能力是設(shè)計(jì)師除去執(zhí)行能力外第二重要的能力,小到平日里的溝通對接,大到述職晉升面試,都離不開表達(dá)能力的支持。有些設(shè)計(jì)師經(jīng)常面試怎么都過不了關(guān),我本以為是作品集的問題,可是看完之后作品方面完全沒有什么問題,具體了解后才知道是在面試過程當(dāng)中不知如何闡述自己的作品和思路或者在闡述過程中由于緊張等因素導(dǎo)致表達(dá)斷斷續(xù)續(xù)不順暢,面試官就會覺得這個人不靠譜然后 PASS,明明做圖很優(yōu)秀卻輸在了表達(dá)上,這種情況就很憋屈。在廣告公司中,一個 LOGO 或者廣告視頻往往只是贈品,出售的卻是這個品牌VI的故事;如果一個設(shè)計(jì)師不懂得怎么闡述自己的業(yè)務(wù),不懂得怎么推銷自己的方案,不懂得拓寬自己的個人影響力,就單純的只會執(zhí)行作圖的話,那么這名設(shè)計(jì)師是不合格的。網(wǎng)傳有一個段子“一個公司的工資排名規(guī)律:用 Word 的不如用 Excel 的,用 Excel 的不如用 PPT 的,用 PPT 的不如講 PPT 的,講 PPT 的不如聽 PPT 的,聽 PPT 的不如聽匯報的,聽匯報的不如決定的,決定的不如簽字的”,由此可見表達(dá)能力在職場中的重要性。

· 業(yè)務(wù)表達(dá)

業(yè)務(wù)表達(dá)是指在自己工作的過程當(dāng)中,對自己的設(shè)計(jì)方案進(jìn)行闡述。大部分設(shè)計(jì)師會遇到一個困擾,當(dāng)設(shè)計(jì)稿做完以后就不知道怎么去表達(dá)自己的設(shè)計(jì)理念,被業(yè)務(wù)方/面試官/老板提出質(zhì)疑時,比如:“你這產(chǎn)品的設(shè)計(jì)為什么要用紅色?”、“聊天信息這塊兒為什么要用小氣泡的樣式?”,往往不知道怎么去說,有一種當(dāng)時就覺得好看所以這樣做了,也沒有去想那么多的感覺,或者其他優(yōu)秀的作品/競品是這樣做的,我也就這樣做了;那么結(jié)果往往就是自己的專業(yè)性遭到質(zhì)疑,然后轉(zhuǎn)變成業(yè)務(wù)方/老板進(jìn)行設(shè)計(jì)主導(dǎo),形成“改來改去還是第一版好”這樣類似的惡性循環(huán)中。

那么如何提升自己的業(yè)務(wù)表達(dá)能力呢?首先設(shè)計(jì)師要提升在設(shè)計(jì)領(lǐng)域的專業(yè)度,通過學(xué)習(xí)吸納設(shè)計(jì)相關(guān)的知識,然后代入自己的設(shè)計(jì)當(dāng)中去試著闡述設(shè)計(jì)稿,準(zhǔn)備工作先做到位,收集相關(guān)的數(shù)據(jù),掌握相對應(yīng)的設(shè)計(jì)理論,先說服自己再去說服別人。比如:“通過色彩心理學(xué)得知,紅色能帶給人興奮、激動、熱情等積極情緒,而我們產(chǎn)品所需要透出的氛圍是熱情的、積極向上的,相對應(yīng)地激發(fā)出用戶的正向情緒,所以我這里使用紅色?!?、“根據(jù)近半年數(shù)據(jù)研究得出,產(chǎn)品聊天信息模塊使用過程當(dāng)中女性用戶占總用戶數(shù)的85.9%,而小氣泡樣式相對比其他樣式更能迎合女性用戶群體的喜好,通過 A/B 測試結(jié)果得出,使用小氣泡樣式后數(shù)據(jù)上漲了15%左右,所以聊天信息模塊整體改版成小氣泡的樣式。”

通過自己前期的準(zhǔn)備(設(shè)計(jì)理論知識補(bǔ)充、用戶調(diào)研、數(shù)據(jù)測試等),將自己的設(shè)計(jì)理念表達(dá)出來,主導(dǎo)整個設(shè)計(jì)的方向,必要時可以理性地堅(jiān)持自己的設(shè)計(jì)方案,畢竟無論是老板還是業(yè)務(wù)方,出發(fā)點(diǎn)都是希望自己的產(chǎn)品能做到最好最完善,只要你給出數(shù)據(jù)支撐和專業(yè)性的建議,他們一定都會采納接受的,而最后你的能力和專業(yè)性也得到了對應(yīng)的認(rèn)可。

· 書面表達(dá)

我本人是強(qiáng)烈建議在能力達(dá)到一定程度的時候,通過寫作來檢視自己成果的。因?yàn)橥芏鄸|西自己是明白的,但是寫出來讓其他人看懂是另外一種能力了。自己一段時間的職業(yè)經(jīng)驗(yàn)總結(jié)、對設(shè)計(jì)的見解看法、自己獨(dú)特的設(shè)計(jì)思維、一本書的讀后感等等都可以通過書面表達(dá)出來,某個知識理論難的不是學(xué)習(xí),而是將它教授出去,因?yàn)橹挥心阆胍涯臣抡f明白,闡述得其他人都能看懂,那么首先你要對這件事理解得很透徹,然后通過自己的經(jīng)驗(yàn)和見解,轉(zhuǎn)化成通俗的語言說給別人聽。最好的狀態(tài)就是與你同樣級別的人你能與他用專業(yè)術(shù)語對話,級別比你低的人你能把理論轉(zhuǎn)換成他能聽懂的語言進(jìn)行交流,這樣才算是對理論概念理解透徹到位。

大家也明白,學(xué)習(xí)最有效的方法不是輸入而是輸出,設(shè)計(jì)也是一樣的。在學(xué)習(xí)某種理論方法后,通過書面表達(dá)出自己的見解和想法,并代入到相應(yīng)的例子當(dāng)中,做到舉一反三才能算是真正的學(xué)到了這個知識點(diǎn)。

· 述職

述職一般出現(xiàn)在晉升報告或者面試當(dāng)中,“諸侯朝于天子曰述職,述職者,述所職也?!笔雎毧梢哉f是工作報告中的總結(jié)性報告。向自己的老板述職是為了升職加薪,向面試官述職是為了獲取更好的工作機(jī)會;工作成果有了,但是述職做不好的話,在老板/面試官眼里你就做了無成效的工作,述職沒有想象的那么簡單,但是也沒有那么難,很多人都會經(jīng)歷兩個述職的誤區(qū),這些誤區(qū)我經(jīng)歷過也看到過,所以總結(jié)出來警醒大家。

一、把述職當(dāng)作流水賬

把述職當(dāng)作流水賬是很多新人容易犯的錯誤,當(dāng)述職的時候,有的人就會陳列出自己今年做了多少多少工作:“我今年改版了 XXX 模塊”、“我設(shè)計(jì)了 XXX 的首頁”、“我通過調(diào)查研究自主推導(dǎo)改版了 XXX 模塊并落地成功”等等,這時候你的老板/面試官會心里會想:“所以呢?”“然后呢?”,工作結(jié)果固然重要,但是決定你能否晉升/錄用的,不僅僅是把你做的工作進(jìn)行流水賬般的描述就夠了的。

二、把述職當(dāng)作邀功大會

這個誤區(qū)相對來說更高端一些,述職的時候有的人常常會像邀功一樣:“我今年通過改版了 XXX 模塊,導(dǎo)致用戶量從50%上漲到了80%”、“通過調(diào)查研究改版了 XXX 模塊,最后通過 A/B 測試發(fā)現(xiàn)數(shù)據(jù)上漲了5%,最后落地全部實(shí)施新的設(shè)計(jì)方案”,這些看似闡述了產(chǎn)品的背景、自己做了什么以及結(jié)果,但是往往來說還是不夠的,以上統(tǒng)統(tǒng)可以歸為無效述職。

你做了什么重要嗎?沒那么重要,重要的是你帶了什么樣的價值。述職所需要你做的,老板/面試官所想要了解的就是:分析為什么產(chǎn)品之前數(shù)據(jù)會那么低?你是通過那些方法得出解決方案的?為什么那么多種解決方案里你要選擇這一種?你這樣的方法能否沉淀成體系?如果換一個人來按照你的方法做是否可以得到同樣的效果?有效述職也就是決定你能向上一步的,是把你在工作中的感性認(rèn)知上升到理性規(guī)律的歸納總結(jié)的能力體現(xiàn)。

· SCQA 模型

SCQA 模型是一個“結(jié)構(gòu)化表達(dá)”工具,是麥肯錫咨詢顧問芭芭拉·明托在《金字塔原理》中提出的,而這個模型可以套用在業(yè)務(wù)表達(dá)、書面表達(dá)以及述職任何場景當(dāng)中;S是指場景(Situation),C是指沖突(Complication),Q是指問題(Question),A是指解決方案(Answer)。

無論你是在向業(yè)務(wù)方/老板闡述方案做工作匯報,還是自己寫作梳理都可以用到這個模型;S場景陳述的通常是大家都熟悉的事、普遍認(rèn)同的事、事情發(fā)生的背景。由此切入既不突兀交代了事情背景又容易讓大家產(chǎn)生共鳴,產(chǎn)生代入感,然后引出沖突C。Q是其中發(fā)現(xiàn)的問題,最后A給出相對應(yīng)的解決方案,是對Q的回答也是接下來我們要闡述的內(nèi)容。整個結(jié)構(gòu)其實(shí)是形成良好的溝通氛圍,然后帶出沖突和疑問,最后提供可行的解決方案。

我們熟知的廣告詞經(jīng)常使用這個套路:

得了灰指甲——描述場景【S】

一個傳染兩——發(fā)生了沖突【C】

問我怎么辦?——提出問題【Q】

馬上用亮甲!——給出解決方案【A】

這個模型無論作為演講的開場白,作為向業(yè)務(wù)方/老板闡述設(shè)計(jì)方案的開場,還是作為一篇文章的序言都是屢試不爽的。S場景需要讓對方產(chǎn)生共鳴,必須讓對方產(chǎn)生一種:“是的,你說的好有道理”的反應(yīng),只有場景被認(rèn)同了才能繼續(xù)故事的發(fā)展,這時候打破你給對方營造的安全感,制造C沖突,相繼提出Q問題,共同確認(rèn)面臨的一個問題,然后你給出你的A解決方案,而這個解決方案就是你整個敘述的核心和中心思想。

比如你要向業(yè)務(wù)方/老板闡述你的設(shè)計(jì)方案,就可以這樣來描述:“在 XXv2.0 版本上線后(交代場景),收集了近半年以來的數(shù)據(jù)發(fā)現(xiàn),女性用戶相對減少了20%(發(fā)生沖突),為什么會減少20%的女性用戶(提出疑問),根據(jù)我的調(diào)查研究發(fā)現(xiàn)原因是改版后整個產(chǎn)品色調(diào)偏男性化,由于我們產(chǎn)品的受眾群體大多是女性用戶,男女比例為1:3,所以在 v.2.1 的改版中我將整個產(chǎn)品色調(diào)改為偏女性化的方向(給出解決方案)”。

同樣,我寫這個章節(jié)的思路就可以這樣理解:設(shè)計(jì)師們工作中通常會面臨述職、面試以及寫文章等情況(交代場景),但是往往很多設(shè)計(jì)師不知道如何去表達(dá),思路也不是很清晰,導(dǎo)致述職無效、面試失敗等情況(發(fā)生沖突),要如何避免這種情況發(fā)生?如何鍛煉自己的表達(dá)能力?(提出疑問),那就要多通過 SCQA 模型在生活工作中去練習(xí)表達(dá)(給出解決方案)。

生活能力(Lives)

最后是生活能力,設(shè)計(jì)不是工作的全部,工作不是生活的全部,我們應(yīng)該過好自己的生活,產(chǎn)品設(shè)計(jì)都是從生活中獲得靈感和啟發(fā)的,我們?nèi)绾螌Υ约旱纳?,我們就會得到怎樣的反饋。多陪伴下自己的家人、培養(yǎng)一個興趣愛好、保持學(xué)習(xí)新鮮事物的動力等等,成為一個有趣的靈魂。往往設(shè)計(jì)師能從多樣化的生活中發(fā)現(xiàn)靈感和啟發(fā),也能從生活中找到不同用戶的痛點(diǎn)和感知;如何做一名好的設(shè)計(jì)師,就是帶著同理心去做設(shè)計(jì),如何帶著同理心做設(shè)計(jì),就是將自己當(dāng)作用戶,而用戶是融入到生活中的。下面我就來例舉兩個通過生活中的啟發(fā)改變產(chǎn)品設(shè)計(jì)的例子。

· 用戶擁有感

在購買星巴克的時候,為什么服務(wù)員要把顧客的名字寫在杯子上呢?難道僅僅是為了分辨嘛?像其他奶茶店一樣貼一張打印好的便簽不就好了么?去宜家購置家具的時候,為什么要讓顧客自己親手組裝家具?可口可樂為什么可以定制自己城市的易拉罐?因?yàn)檫@一切都是要給用戶塑造擁有感,人是一種很不理性的生物,只要先拿到一個東西,就會覺得自己擁有這個東西,就不想放掉它了,這就是擁有感最根本的示范。從心理學(xué)的角度來說這被稱為稟賦效應(yīng),意思就是我們對于自己所擁有東西的價值往往會看得更重。這就是為什么小時候玩的玩具、收集的畫冊、穿的衣服都已經(jīng)沒什么用了,我們還要留著當(dāng)紀(jì)念的原因。因?yàn)槲覀兊娜诵詫τ趽碛懈蟹浅?zhí)著,對于自己得到的東西非常迷戀,當(dāng)我們覺得要失去它的時候,會有一種損失感,覺得很不舍,會覺得心里很難受,這就是稟賦效應(yīng)在我們身上發(fā)生了最明顯的效果。

而這樣的營銷策略被用到產(chǎn)品設(shè)計(jì)當(dāng)中,例如前段時間很火的軟件 Zepeto,每個人都不一樣的生成圖片洗刷著我們的朋友圈;例如每年年末的賬單、網(wǎng)易云音樂總結(jié)等等,賬單它只是一份賬單,根據(jù)不同用戶生成不同的賬單,也就賦予了不同的意義;又例如各種 H5 性格測試生成的分享卡等等,這些都是產(chǎn)品設(shè)計(jì)中從生活中營銷案例中汲取經(jīng)驗(yàn)的體現(xiàn)。

· 線下導(dǎo)購轉(zhuǎn)線上

每當(dāng)我們?nèi)サ缴虉鼍€下商店的時候,導(dǎo)購員和我們素未謀面,但是卻可以通過我們的大致年齡、穿著、性別等因素推斷我們需要什么樣的產(chǎn)品,然后向我們推銷對應(yīng)的產(chǎn)品,如若剛好觸動我們的需求,于是我們就會發(fā)生購買這個行為。生活中線下導(dǎo)購的方式也被運(yùn)用到線上導(dǎo)購的產(chǎn)品中,同樣平臺和用戶素未謀面,可是可以通過掌握大數(shù)據(jù),分析用戶近半年、近一個月的購買和瀏覽商品的數(shù)據(jù),結(jié)合相對應(yīng)季節(jié)等因素推送給用戶所需要的產(chǎn)品。比如我平時經(jīng)常瀏覽一些潮牌個性的衣物,現(xiàn)在正值冬季,想買一件冬季穿的棉衣,那么當(dāng)我打開淘寶的時候,系統(tǒng)會推送一些潮牌大衣等冬季衣物在首頁,我正好有這個需求又符合我的口味愛好,自然而然就會點(diǎn)進(jìn)去購買了。

有一條創(chuàng)業(yè)準(zhǔn)則是這樣說的:“如果有點(diǎn)兒閑錢,還有點(diǎn)時間,但又找不到商機(jī),最好的辦法就是去鬧市、電梯、小區(qū)人流量最高的那個大門口,端杯茶,靜靜的聽人們抱怨?!?,谷歌、蘋果公司的設(shè)計(jì)思維首當(dāng)其沖的就是帶著同理心去設(shè)計(jì)、去制定設(shè)計(jì)策略,同理心來源于生活,而這一切只有設(shè)計(jì)師把自己的生活經(jīng)營好,才能從當(dāng)中獲得啟發(fā)和感悟,然后代入自己的設(shè)計(jì)理念當(dāng)中,設(shè)計(jì)出真正能根本解決問題的產(chǎn)品。

其次偶爾會從網(wǎng)上看到或者聽說 XX 設(shè)計(jì)師猝死,XX 設(shè)計(jì)師檢驗(yàn)出 XX 疾病等等,每每看到此類消息都會感到痛心,工作不是生活的全部,如果連自己的工作和生活都處理不好的話,那么說明這個人生活能力真的很糟糕。如果一個人整天筋疲力盡打不起精神,那么他的工作會做得好嘛?所以在這請求大家合理安排好工作時間,勞逸結(jié)合,多鍛煉身體,多花些時間陪伴父母、家人,這樣才能帶著健康的身心去工作,從而取得更好的工作成果,形成一個良性的循環(huán)。你怎樣對待生活,生活就會怎樣對待你。

總結(jié)

以上是我總結(jié)的除設(shè)計(jì)之外設(shè)計(jì)師需要掌握的技能,如果將這些比喻成大樹的話,設(shè)計(jì)能力是大樹的根部,是設(shè)計(jì)師立足的根本;而執(zhí)行能力則是這根樹的枝干,是支撐設(shè)計(jì)師全部的基礎(chǔ);表達(dá)能力是樹枝,撐起設(shè)計(jì)師的整個世界;思考能力則是樹葉花果,是設(shè)計(jì)師綜合的產(chǎn)物;大地就是生活能力,當(dāng)設(shè)計(jì)師的產(chǎn)物(物質(zhì)、地位等)“落地”時,滋養(yǎng)著大地,大地越“肥沃”,越能催生出茂盛的枝葉;而規(guī)劃能力就是一位辛勤的園丁,什么時候需要澆水,什么時候需要修剪枝葉,都是由園丁來承擔(dān)。

想要跑贏別人,首先得跑過那個跑得最快的自己。





藍(lán)藍(lán)設(shè)計(jì)sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì)

漲姿勢!設(shè)計(jì)師應(yīng)該要了解的9種常見中國傳統(tǒng)紋樣

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

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

設(shè)計(jì)師應(yīng)該要了解的9種常見中國傳統(tǒng)紋樣,制作傳統(tǒng)主題的海報、網(wǎng)頁、PPT都能用到。

云雷紋

祥云紋

八寶紋

云頭紋

壽字紋

萬字紋

唐草紋

環(huán)帶紋

纏枝紋

藍(lán)藍(lán)設(shè)計(jì)sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(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設(shè)計(jì)者

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

隨著時間流逝,我們會對不同的人事物有新的理解,比如那時聽歌聽旋律,現(xiàn)在聽歌聽故事。
希望文章對現(xiàn)階段的你有所幫助 —



版式的重要性就不多說了, 一個頁面的排版,基本就能看出一個人的設(shè)計(jì)功底了,而且不管你是從事vi、畫冊、電商、平面、網(wǎng)頁、ui都是離不開版式的,一手好的版式非常重要。其實(shí)版式可以簡單理解為,在一個限定好大小尺寸的畫面里,把信息進(jìn)行有視覺層次的展現(xiàn),基礎(chǔ)的字體圖片選擇應(yīng)用等就不多講了,這里主要講5點(diǎn),下面開始正文 ~



1.畫面切割,由大而小  


常見的分割有,左右、上下,而我則喜歡不規(guī)則分割(大體看是不規(guī)則,其中還是有著某種規(guī)則),我的習(xí)慣是先把畫面分割好,然后去填充對應(yīng)內(nèi)容,這樣就非常快速了,實(shí)際上和海報合成之前的靈感草圖是一樣一樣的,下面我就拿幾張近期的海報舉個栗子。



因?yàn)樯蠄D是海報,我都是以純圖片為背景的,就是在已有的空間上去分割出文案的位置,可能表達(dá)的不是很透徹,下面我以網(wǎng)頁來舉例子。


那么開始的就是大版面分割了,頁面做出來是新穎特別呢還是穩(wěn)定常規(guī)?基本就有感覺了,具體版面怎么分割,完全看個人,只要比例協(xié)調(diào),版塊與版塊之間銜接舒適就ok。



上圖左邊頁面結(jié)構(gòu),看起來就會顯得穩(wěn)定常規(guī)一些,而右邊則新穎一些,當(dāng)然分割不止是大版面,由大而小,大版面分完了就需要從店招開始依次往下進(jìn)行小版面的分割,最后去填充內(nèi)容,具體填充手法就看個人設(shè)計(jì)功底了,下面實(shí)際舉例,左邊為我創(chuàng)作之前的版面分割,大到頁面布局,小到某個地方的排版,都是事先分割好的。


也有這種情況,就是按照事先切割好的版塊設(shè)計(jì)途中,有了更好的想法,就會稍作改動,但是大體基本是沒有什么變化的(有時候?yàn)榱诵薷囊粋€版塊排版,結(jié)果把下面的排版都給改了去迎合這一個排版,都是淚)




2.了解版式中的點(diǎn)、線、面 


那么什么是點(diǎn)、線、面呢? 

簡單來講,單個元素、文字或者圖形都可以是點(diǎn),多個點(diǎn)相連就形成線,多個點(diǎn)、線在同一個平面內(nèi)相交形成面。


點(diǎn)

單個或者極小范圍內(nèi)的圖形元素,稱之為點(diǎn),點(diǎn)在版式中常用于,點(diǎn)綴、裝飾、平衡頁面輕重。


線是點(diǎn)運(yùn)動的軌跡,多個點(diǎn)的鏈接則形成了線,線常用于強(qiáng)調(diào)突出、鏈接、分割


擴(kuò)大的點(diǎn),或者多個點(diǎn)線則形成了面,常用于背景、區(qū)域劃分



下面舉個栗子,大家可以找找圖里的點(diǎn)線面分別是哪里,有什么作用。



應(yīng)該不難看出,單個的虛化漸變都是點(diǎn),單個的字母  數(shù)字也是點(diǎn),點(diǎn)在這里起到的是裝飾點(diǎn)綴作用,中間的大面積漸變是線的體現(xiàn),下面一排文案相連也是線的體現(xiàn),線在這里起到的是鏈接視覺作用,最后這張圖里多個點(diǎn)、線的存在就形成了面。




3.信息表達(dá)分主次


層級混亂是導(dǎo)致畫面失衡的重要因素,客戶看圖會看得云里霧里,這就注定了是一張失敗的圖,什么是層級,就是在一個畫面里,一眼能看出來主次,信息層級的清楚區(qū)分會給人舒適的瀏覽體驗(yàn),仔細(xì)觀看優(yōu)秀設(shè)計(jì)師的作品,你會發(fā)現(xiàn),好的作品會在瀏覽舒適的同時, 引導(dǎo)著你的視覺瀏覽順序,我們來看看案例。



我們來簡單看看問題,首先是上圖,產(chǎn)品和文字之間的距離沒有拉開,信息層級區(qū)分不夠明顯,沒有明顯的視覺瀏覽順序以及舒適的體驗(yàn),設(shè)計(jì)本身就是一個細(xì)節(jié)見證品質(zhì)產(chǎn)物,如果一個頁面里多個地方出現(xiàn)這種無層級的信息,則問題就大了。



那么信息分層的方法有哪些呢?


方法1:改變透明度,弱化其他信息的透明度來突出你想要突出的信息


方法2.拉開信息間距,把主題放在視覺焦點(diǎn)的位置展示,一般為中心,或者視覺瀏覽順序,即左右,或者上下

方法3:改變字體粗細(xì),通過調(diào)整字體粗細(xì)來進(jìn)行弱化和突出

方法4:顏色,通過色彩來區(qū)分主次,黑白灰我稱為無色調(diào),不算顏色。

方法5:大小,通過改變字體或者圖片大小來進(jìn)行弱化和突出

如果結(jié)合多種方法,那么信息層級的區(qū)分就會非常明顯了,下圖用到了居中,顏色,大小,透明度。


4.頁面平衡


也是很重要的一點(diǎn),平衡這個詞的概念非常廣泛,各種平衡,自然、物理、藝術(shù)、心理、色彩、空間等等都包含平衡,而在設(shè)計(jì)中,平衡也是不可缺少的一個構(gòu)成要素,畫面不平衡就會導(dǎo)致看起來不穩(wěn)定,在設(shè)計(jì)中,更多的是體現(xiàn)色彩與體積的平衡。



那么頁面為什么需要平衡?


我個人理解為,構(gòu)成版面的所有元素,不論是文字還是圖片,都是有份量的,比如面積大小、顏色深淺、我們在排版的時候要做到各種元素在畫面中的占比達(dá)到和諧,畫面才會平衡,那我們來看看常用的平衡有哪些。



4.1  色塊體積占比平衡



上圖中,非常明顯的平衡就是上下兩個色塊的面積占比基本一致,給人一種平衡感,色塊平衡多用于平衡頁面重心,讓畫面看起來更加穩(wěn)定,但是上圖因?yàn)閳D片反著的,所以才會給人一種另類的感覺。



4.2  位置空間的平衡


上圖就是空間平衡,沒有用整個圖片素材填滿整張圖,而是文字部分和圖片各占據(jù)一半,形成平衡。



在來看個栗子



上圖兩張基本一致,上圖就是移動了一下文案和裝飾英文的位置,以及加了根條線,卻給人不一樣的感覺,可以想想為什么。




5.對齊


關(guān)于對齊真的是非常基礎(chǔ)的一項(xiàng)內(nèi)容,也是非常重要的內(nèi)容,放在最后來講也是希望在提醒大家一遍,畫面里的信息一定是遵循著某種規(guī)則而擺放,絕對不是隨意擺放,有位大哥說過,隨意擺放經(jīng)不起時間推敲,有規(guī)則擺放則可能流芳百世 ~ 下面我們來看看對齊的例子。


你都看到哪些地方對齊了?  這樣產(chǎn)出的頁面,是否更具說服感呢,元素切勿隨意擺放,讓每一個元素位置都滿足為什么。




總結(jié):


版式中包含非常多的設(shè)計(jì)理念,從字體圖片的選擇、網(wǎng)格系統(tǒng)的規(guī)范、點(diǎn)線面的認(rèn)知、視覺平衡感、信息分層等多項(xiàng)知識點(diǎn)。今天沒有講柵格,因?yàn)槲矣X得我理解的柵格還不是很系統(tǒng)規(guī)范,等后續(xù)稍微成熟點(diǎn)在做分享吧,希望本篇文章能對現(xiàn)階段的你帶來幫助,感謝瀏覽,有問題歡迎留言探討。

藍(lán)藍(lán)設(shè)計(jì)sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(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ù)。

日歷

鏈接

個人資料

存檔