首頁

這些設(shè)計(jì)細(xì)節(jié)你知道嗎?

seo達(dá)人

目錄

  • 產(chǎn)品需求與設(shè)計(jì)研發(fā)的良性循環(huán)
  • 今日事今日畢
  • 設(shè)計(jì)文檔的規(guī)范性
  • 多渠道溝通
  • 驗(yàn)收不僅僅是記錄問題
  • 沉淀業(yè)務(wù)組件的必要性

 

一、產(chǎn)品需求與設(shè)計(jì)研發(fā)的良性循環(huán)

從產(chǎn)品經(jīng)理提出需求開始,到研發(fā)開發(fā)完成上線,整個過程我們可以看作是一個迭代。倘若與研發(fā)同一個迭代完成產(chǎn)品設(shè)計(jì),時間上肯定是不夠用。需求是永遠(yuǎn)都做不完的,一個人無論怎么埋頭苦干,還是會時間緊迫無法喘息!這時候團(tuán)隊(duì)合作顯得至關(guān)重要。我們需要進(jìn)行合理的任務(wù)管理,利用工具達(dá)到更好的效果。目前我們敏捷組產(chǎn)品與設(shè)計(jì)小團(tuán)隊(duì)用的是飛書文檔,它可以新建所需要的任務(wù)看板,清晰直觀的看到此任務(wù)當(dāng)前流轉(zhuǎn)的階段,任意拖拽方便快捷。

圖片
圖片

完善需求的詳細(xì)信息,比如:所屬項(xiàng)目、任務(wù)執(zhí)行人、優(yōu)先級、外審狀態(tài)、敏捷組、文檔鏈接等等,就可以從不同維度去管理任務(wù),篩選我們想要了解的重點(diǎn)。

那么基于此,如果我是視覺設(shè)計(jì),完成需求后就可以將它拖入下一泳道,等待排期。未完成的也就不會進(jìn)入到排期和研發(fā)階段,這樣基本上每個迭代研發(fā)都會提前拿到相應(yīng)的設(shè)計(jì)稿,盡管后續(xù)可能會有細(xì)節(jié)上的修改和返工,也不會很倉促。

 

二、今日事今日畢

每天的工作充滿“已知”和“未知”?!耙阎钡氖枪潭ㄒ龅男枨笤O(shè)計(jì),“未知”的是工作消息的各種溝通與答疑。
新的一周開始,我們可以安排下本周大致要做的事情,通過自己習(xí)慣的方式去記錄。簡單清晰即可,沒必要給自己增加額外負(fù)擔(dān)。
盡量不延誤,保證本周事情完成率90%以上不會對下周產(chǎn)生很大壓力。重要的事情和需要長時間投入的需求可以用完整且精力比較好的時間段去完成,瑣碎的任務(wù)集中時間去搞定,或者快下班了搞搞完。

圖片

三、設(shè)計(jì)文檔的規(guī)范性

每個人都有自己習(xí)慣的設(shè)計(jì)稿排列方式。整齊、清晰、直觀的布局,有利于研發(fā)快速捕捉到想要查看的信息。

圖片

?? 設(shè)計(jì)文檔基本由以下部分組成:目錄、交互原型、交互說明、視覺稿。交互稿與視覺稿最好合并在一個文檔中,方便研發(fā)查看。

圖片

?? 具體到頁面細(xì)節(jié)說明,可以安排在相應(yīng)設(shè)計(jì)界面的附近,用清晰的數(shù)字或者標(biāo)簽展示。

圖片

?? 如不同狀態(tài),不同變量的變化,也需要詳細(xì)標(biāo)注。

圖片

?? 設(shè)計(jì)內(nèi)容過多時,像以下細(xì)節(jié)單純在頁面上展示很容易被忽略,需要單獨(dú)拿出來在旁邊重點(diǎn)強(qiáng)調(diào)一下。

圖片

?? 如今標(biāo)注插件很多,不需要全部手動標(biāo)注了,但對于一些我們認(rèn)為研發(fā)會忽略和寫錯的尺寸、間距等,可以表示一下。設(shè)計(jì)軟件的自動展示標(biāo)注有時候會因?yàn)閳D層覆蓋之類的問題點(diǎn)不到某些元素,這個也需要檢查一下。不然研發(fā)就自由發(fā)揮了喲~

圖片

?? 各式各樣的組件有非常多的形式和狀態(tài),設(shè)計(jì)在引用時要明確類型,避免研發(fā)亂用。

圖片

?? 比如這個全局提示組件,組件本身可以提供多行展示的樣式和規(guī)則,但研發(fā)很有可能不知道某種情況下對應(yīng)的展示樣式,實(shí)現(xiàn)的不是我們預(yù)期。以下是日常迭代中研發(fā)實(shí)現(xiàn)的有問題的樣式與正確的對比:

圖片

如上述所講,完善補(bǔ)充細(xì)節(jié),譬如圖標(biāo)的顏色變量,懸停變化,狀態(tài)變化,引用組件備注等等,這些都是開發(fā)還原落地視覺設(shè)計(jì)的基礎(chǔ)。頁面設(shè)計(jì)中,所需的圖標(biāo)、圖例、圖片等素材,切圖并壓縮給到研發(fā),最好用統(tǒng)一的方式去管理圖標(biāo),比如iconfont,或者自己公司的組件平臺等。

 

四、多渠道溝通

當(dāng)接到新的需求并且拿到交互稿,前幾周也參加了需求&交互內(nèi)審,基本不會出現(xiàn)需求和框架大改的問題。大體了解背景和設(shè)計(jì)重點(diǎn)后,可完善視覺細(xì)節(jié)。

圖片

做完設(shè)計(jì)稿只是成功了一半,還需在設(shè)計(jì)內(nèi)審前,發(fā)給對應(yīng)的產(chǎn)品和交互同學(xué)評論提意見,先修改掉一波明顯的問題。這是視覺設(shè)計(jì)階段第一個比較重要的溝通,提前在大部分內(nèi)容上達(dá)成共識,節(jié)省了后續(xù)評審的時間。

圖片

修改完大家提的問題后,視覺評審會明顯順利許多~

 

五、驗(yàn)收不僅僅是記錄問題

1、項(xiàng)目上線前驗(yàn)收

提到驗(yàn)收是我非常頭疼的事。前期設(shè)計(jì)稿準(zhǔn)備充足的情況下,研發(fā)如果能實(shí)現(xiàn)到視覺稿的80%,驗(yàn)收起來不會特別吃力。有時會遇到驗(yàn)收內(nèi)容多,前端還原度低,耗費(fèi)設(shè)計(jì)同學(xué)大量時間,建立良好的驗(yàn)收機(jī)制非常關(guān)鍵,與研發(fā)同學(xué)的溝通和磨合也是必不可少的。

涉及到人員較少時,可以坐到一起面對面去溝通;若此次內(nèi)容較多,涉及不同人,可建立文檔。

圖片

一遍驗(yàn)收后并不完美,基本要2-3輪的繼續(xù)走查,針對優(yōu)先級比較高或者問題重災(zāi)區(qū),標(biāo)紅后給到相應(yīng)負(fù)責(zé)的前端繼續(xù)修改,保證上線前90%以上的問題得到解決。若還有問題遺留,可新建kaptain任務(wù)后續(xù)優(yōu)化,讓驗(yàn)收問題有跡可循。

2、日常全局驗(yàn)收

線上已有問題,按照模塊集中歸納,建立對應(yīng)的研發(fā)任務(wù)。開發(fā)過程中可與前端同學(xué)隨時溝通,提供細(xì)節(jié)補(bǔ)充。

有時我們認(rèn)為很簡單的去掉一條間隔線或者間距,可能涉及到非常多不同的場景面板,提前溝通也有利于研發(fā)評估工作量。

圖片

六、沉淀業(yè)務(wù)組件的必要性

每當(dāng)開始新的項(xiàng)目設(shè)計(jì),要費(fèi)好大功夫找源文件呀。適當(dāng)?shù)臍w納整理歷史文檔,也有助于我們快速的進(jìn)入設(shè)計(jì)狀態(tài),對新人也很友好!

圖片

以業(yè)務(wù)需求為背景,在組件庫的基礎(chǔ)之上,業(yè)務(wù)組件的整理尤為重要。按照每個人的使用習(xí)慣,我們可以建立自己的“業(yè)務(wù)”組件庫,方便需求迭代時快速定位。

比如,我們可以將業(yè)務(wù)組件分為幾部分:圖標(biāo)、圖例、場景等,進(jìn)而細(xì)化場景中的內(nèi)容。至于怎么去命名和排版細(xì)節(jié),都可以按照自己的習(xí)慣來整理,當(dāng)然組件形成后也可以擴(kuò)大到我們同業(yè)務(wù)線的UX或交互同學(xué)一起使用,提高設(shè)計(jì)效率。

圖片

可能對于非設(shè)計(jì)崗位來說,看到的僅僅是一張?jiān)O(shè)計(jì)圖,但在設(shè)計(jì)稿背后我們需要去支持和處理的細(xì)節(jié)也是非常有價值的存在。

希望這篇小小滴文章可以帶給你一定的幫助 ~(≧▽≦)/~


作者:小柴

轉(zhuǎn)載請注明:學(xué)UI網(wǎng)》這些設(shè)計(jì)細(xì)節(jié)你知道嗎?

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話,可以進(jìn)入一起成長學(xué)習(xí),請加藍(lán)小助,微信號:ben_lanlan,報(bào)下信息,藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請與我們聯(lián)系01063334945。


分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。


藍(lán)藍(lán)設(shè)計(jì)www.bouu.cn )是一家專注而深入的界面設(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ì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司



工作經(jīng)驗(yàn)|低代碼平臺,會給設(shè)計(jì)師的工作帶來哪些影響?

seo達(dá)人

一、低代碼平臺是什么?

低代碼開發(fā)平臺(LCDP,英文全稱為 Low-Code Development Platform),顧名思義,就是僅需通過少量代碼或無需代碼就可以快速生成應(yīng)用程序的開發(fā)平臺。借助低代碼平臺,你不需要像程序員一樣寫代碼,而是僅通過對于組件和模塊的拖、拉、拼、接就可以很迅速地搭建出一系列頁面,完成一個基礎(chǔ)產(chǎn)品。

圖片

低代碼平臺 OutSystems 的功能界面

低代碼平臺的誕生和發(fā)展的進(jìn)程簡述如下:

– 2000年:可視化編程語言誕生,通過一些可視化的界面來輔助用戶進(jìn)行編程;

– 2014年:著名的研究機(jī)構(gòu) Forrester 正式提出低代碼開發(fā)概念,并投身對該平臺的研究當(dāng)中,低代碼平臺在國外興起

– 2016年:國內(nèi)的低代碼平臺相繼發(fā)布;

– 2021年:中國市場的低代碼生態(tài)體系也逐步建立了起來,且正在加速發(fā)展,待開啟一個新紀(jì)元。

作為幫助企業(yè)和團(tuán)隊(duì)快速搭建產(chǎn)品、實(shí)現(xiàn)數(shù)字化的新工具,低代碼平臺的核心功能有以下幾點(diǎn):

1.可視化

以簡潔的圖形化操作界面為主,做到通俗易懂,降低使用者的操作門檻,開箱即用;同時你可以在搭建好的界面中進(jìn)行試用操作,所見即所得。

2.模型化

可以通過拖、拉、拽等方式拼接平臺上的組件,用來搭建頁面??梢造`活定義模型中的字段、元素和大部分布局。

3.工程化

通常包含開發(fā)調(diào)試、自動發(fā)布上線、數(shù)據(jù)監(jiān)測等一站式的產(chǎn)品開發(fā)能力

4.擴(kuò)展性

支持少量的代碼擴(kuò)展,可以實(shí)現(xiàn)一部分個性化的產(chǎn)品設(shè)計(jì)和開發(fā)需求,也可以和更多第三方工具聯(lián)動應(yīng)用,做到功能和信息的互通共享。

和組件庫一樣,低代碼平臺也是一種提效工具。但它與組件庫的不同之處在于:

 

1、有成套的成熟解決方案。

低代碼平臺提供的不僅是原子級別的組件,也包括頁面的模版、產(chǎn)品功能的框架和操作流程,比如提供各類企業(yè)級應(yīng)用常見的聚合表、儀表盤、報(bào)表等已經(jīng)成熟的功能界面解決方案。

 

2、能順暢銜接第三方工具。

低代碼平臺可以和很多第三方工具的接口打通,比如可以與產(chǎn)品文檔、設(shè)計(jì)軟件、后臺數(shù)據(jù)庫等無縫對接,讓工作過程更加專業(yè)、有序、可查。

 

3、注重流程而非單點(diǎn)提效。

讓各個產(chǎn)研環(huán)節(jié)之間更易產(chǎn)生聯(lián)動,適用于互聯(lián)網(wǎng)產(chǎn)品研發(fā)的全流程,不再局限于設(shè)計(jì)和開發(fā)環(huán)節(jié),也可以從業(yè)務(wù)、產(chǎn)品側(cè)直接做輸入。

理想化的情況是,業(yè)務(wù)側(cè)和產(chǎn)品側(cè)也可以輕松地使用低代碼平臺上提供的解決方案做出高質(zhì)量的“原型圖”,甚至是產(chǎn)品的基礎(chǔ)版本,設(shè)計(jì)師僅需要做部分調(diào)整,開發(fā)檢查優(yōu)化下代碼,產(chǎn)品就可以直接上線,比現(xiàn)在的工作流程要高效很多。

 

而且當(dāng)產(chǎn)品側(cè)在低代碼平臺上對文案做出調(diào)整后,相應(yīng)的代碼也會直接產(chǎn)生變化,這樣就大大減少 “產(chǎn)品 – 設(shè)計(jì) – 開發(fā)” 這種單線程的溝通方式帶來的細(xì)節(jié)調(diào)整上的時間成本和錯誤率。

 

二、對于設(shè)計(jì)師工作的影響

低代碼平臺帶來的產(chǎn)研方式的革新,對于不追求個性化體驗(yàn)的、從0-1的、功能相對單一、通用的企業(yè)級產(chǎn)品是合適使用的。這類產(chǎn)品的產(chǎn)研場景中,低代碼平臺可以代替設(shè)計(jì)師和開發(fā)完成重復(fù)性、低價值的體力勞動

不過,低代碼平臺在現(xiàn)階段也并非適用于所有產(chǎn)品。這種方式做出的頁面質(zhì)量和功能自由度會受限于可視化編輯器所提供的服務(wù)和能力,如果編輯器不支持某種自定義的功能樣式,那么產(chǎn)品形態(tài)在實(shí)現(xiàn)業(yè)務(wù)需求的過程中就會受限。所以對于業(yè)務(wù)需求和用戶體驗(yàn)要求較高的業(yè)務(wù)領(lǐng)域,低代碼平臺目前起到的作用還是有限的。

目前,接觸低代碼平臺的設(shè)計(jì)師可以被分為兩類,一類是用低代碼平臺的“用戶”,也就是自己參與的業(yè)務(wù)已經(jīng)開始使用低代碼平臺做提效工具來做設(shè)計(jì)和研發(fā)了;另一類是設(shè)計(jì)低代碼平臺的“設(shè)計(jì)師”,也就是自己參與的業(yè)務(wù)就是低代碼平臺產(chǎn)品的設(shè)計(jì)。

 

1、對于「用戶」類的設(shè)計(jì)師

使用低代碼平臺的一個核心思想是:低代碼平臺只是協(xié)助你工作的工具,不是你的替代品。它是手,而你是腦。你的思維和判斷不要被工具所限制。你可以從重復(fù)性和低價值的工作中解脫出來,更多把工作的重心放在:

1.吃透業(yè)務(wù)

把時間和精力放在理解業(yè)務(wù)和用戶需求、參與構(gòu)建產(chǎn)品上,嘗試讓設(shè)計(jì)思維更早地介入到產(chǎn)品構(gòu)建的過程中。低代碼平臺也可以變成你與產(chǎn)品和業(yè)務(wù)的無縫對接的橋梁,也更便于你了解他們的工作目標(biāo)和方向。

2.去同質(zhì)化

低代碼平臺的普遍應(yīng)用會進(jìn)一步帶來企業(yè)級產(chǎn)品的同質(zhì)化,這個時候更需要從用戶需求切入,以商業(yè)、社會、人文等不同維度的設(shè)計(jì)創(chuàng)新來綜合性地思考去同質(zhì)化的解決方案,提升用戶對于產(chǎn)品的認(rèn)知,增強(qiáng)產(chǎn)品的差異化。

3.學(xué)新技能

工具在變化,你所掌握的技能也要隨之更新。要充分關(guān)注和了解低代碼平臺的功能和進(jìn)展,不僅不排斥使用,還要隨之一同發(fā)展。你的工作技能將不再以設(shè)計(jì)繪圖技法為主,要在低代碼平臺帶來的協(xié)作方式變革中提升新的工作技能。

 

2、對于低代碼平臺的設(shè)計(jì)師

設(shè)計(jì)低代碼平臺的一個核心思想是:低代碼平臺本質(zhì)上研究的是“業(yè)務(wù)模型”、“界面設(shè)計(jì)”與“代碼實(shí)現(xiàn)”三者之間的關(guān)系。所以你可以:

1.從流程側(cè)切入

需求、界面、代碼通過一個可視化編輯器實(shí)現(xiàn)綁定在一起,其背后所對應(yīng)的業(yè)務(wù)、設(shè)計(jì)和研發(fā)之間的關(guān)系不可忽視。要保證流程上的無縫對接和通暢性就需要多了解他們之間的工作協(xié)同方式。

2.從用戶側(cè)切入

從低代碼平臺的核心用戶入手,為業(yè)務(wù)、設(shè)計(jì)和研發(fā)分別提供有針對性的功能服務(wù),以此提高平臺功能的豐富性、易用性和可拓展性。

現(xiàn)階段也只是低代碼平臺的起步階段,前路漫漫。如何最大限度地賦予不同類型的用戶操作權(quán)力、最大程度上實(shí)現(xiàn)定制化、擴(kuò)展到更多業(yè)務(wù)領(lǐng)域,都是需要繼續(xù)研究的可課題。

 

作者:元堯

轉(zhuǎn)載請注明:學(xué)UI網(wǎng)》工作經(jīng)驗(yàn)|低代碼平臺,會給設(shè)計(jì)師的工作帶來哪些影響?

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話,可以進(jìn)入一起成長學(xué)習(xí),請加藍(lán)小助,微信號:ben_lanlan,報(bào)下信息,藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請與我們聯(lián)系01063334945。


分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。


藍(lán)藍(lán)設(shè)計(jì)www.bouu.cn )是一家專注而深入的界面設(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ì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司



如何解析產(chǎn)品原型

seo達(dá)人

一、理解功能

下手前的第一步當(dāng)然是要先搞明白使用場景和功能用途,這個太基礎(chǔ)了,想必大家都懂。具體到這個項(xiàng)目來說,它是一個用于數(shù)據(jù)分析的服務(wù),后臺有一個信息量很大的數(shù)據(jù)庫,通過前臺進(jìn)行條件過濾后即可得到一張數(shù)據(jù)表。

圖片

看到原型我的第一反應(yīng)是:該從哪里開始操作?頁面功能的終點(diǎn)在哪?原因在于,頁面中有三個主按鈕“生成表格”,“預(yù)覽”和“應(yīng)用條件”,且視覺結(jié)構(gòu)基本扁平。和產(chǎn)品溝通后了解到,當(dāng)前的邏輯是先選擇指標(biāo),給指標(biāo)排序后就可以生成表格了,針對表格可以再應(yīng)用條件篩選,最終形成的表格可以導(dǎo)出。

 

二、結(jié)構(gòu)梳理

2.1 拆分重組功能

設(shè)計(jì)改造一般從大到小作調(diào)整。先優(yōu)化整體結(jié)構(gòu),盡可能讓功能分區(qū)更明確。理解了原型后不難看出,頁面的配置項(xiàng)分的很開,先在左邊欄加指標(biāo),再在內(nèi)容去上方排序,生成表格后再去右邊欄條件篩選。這種需要用戶點(diǎn)來點(diǎn)去的結(jié)構(gòu)顯然不太友好,而且細(xì)碎的分割消耗了大量的空間。

圖片

該頁面功能大概分為配置和數(shù)據(jù)展示兩大部分,不妨從這個角度重組頁面功能。配置生成類頁面有這樣幾種常見交互形式:一,分兩步,先配置再生成;二,模態(tài)浮層,通過彈窗或者抽屜配置;三,非模態(tài),用工具欄或抽屜容納配置項(xiàng)目。為了便于比對或調(diào)整配置項(xiàng),非模態(tài)的抽屜更適合操作場景。

圖片

功能結(jié)構(gòu)的優(yōu)化得到了如下的改進(jìn):

  • 易于統(tǒng)一卷展配置抽屜,避免了各個面板獨(dú)立控制和空間浪費(fèi)。
  • 減少了配置時的操作步驟,選好配置項(xiàng)即可一鍵生成。
  • 分區(qū)明顯,一邊操作另一邊展示,各司其職。

2.2 方案對比測試

對比測試方案的目的是盡可能考慮全各種設(shè)計(jì)方案,確定出一個最符合使用習(xí)慣和操作流程的布置。不論是手畫草圖還是用電腦畫線框圖都可以,期間多和產(chǎn)品或業(yè)務(wù)討論,可以讓對方理解整個的推導(dǎo)過程。

不過溝通中有兩點(diǎn)需要注意,首先討論方案前先過濾掉從設(shè)計(jì)的角度看明顯不合理的,評審的目的是通過多方意見調(diào)解讓方案達(dá)到最優(yōu),而不是展示工作量。其次是結(jié)構(gòu)和視覺方案盡量分開評估,否則對方會收到海量排列組合后的設(shè)計(jì)方案,評起來抓不住重點(diǎn)。下面是當(dāng)時和產(chǎn)品一塊研討的三個方案:

圖片

  • 方案一:指標(biāo)一列,過濾條件一列。其中指標(biāo)可以通過頁簽切換全部和已選。
  • 方案二:同方案一,但全部指標(biāo)和已選指標(biāo)上下顯示。
  • 方案三:全部指標(biāo)單占一列,已選指標(biāo)和過濾條件單占一列。

最終選定了方案三,綜合來看有如下原因:用戶添加條件篩選的頻次低,所以沒有單放一列并且可單獨(dú)卷展;并且方案三的布局在語義上更容易被理解為“庫和待應(yīng)用項(xiàng)”,提供更典型的心理暗示。

圖片

過濾條件的結(jié)構(gòu)做了一些特定的優(yōu)化:一,新增功能保持在頭部,避免被擠下去;二,條件關(guān)系配置直接外露,減少點(diǎn)擊的同時也沒有占用更多空間;三,條件卡片增加了。

圖片

至此,需求頁面的結(jié)構(gòu)已經(jīng)定了下來,之后就是常規(guī)意義上的視覺處理了。因?yàn)檫@部分比較細(xì)碎,單獨(dú)來講可能缺乏普適性,所以下面一章總結(jié)了一些常見且通用的設(shè)計(jì)點(diǎn)供大家參考,最后再提供頁面的最終視覺效果供大家參考。

 

三、視覺效果構(gòu)建

3.1 內(nèi)容元素的背景色

盡量讓內(nèi)容和表單展示在白色卡片上。大部分基礎(chǔ)組件樣式是按白色底色的場景來做的,放在其他顏色的背景上很容易出問題,比如表單的禁用態(tài)或者標(biāo)簽的顏色和底色融為一體時,可讀性很差,而且有一種不干凈的感覺。當(dāng)然這一條不絕對,如果深度定制了基礎(chǔ)組件的樣式,或是結(jié)構(gòu)功能簡單,背景采用其他顏色也是沒問題的。

圖片

3.2 陰影和描邊

陰影分割是一種常見的視覺表達(dá)手法,然而B端用戶的顯示器普遍比較糟糕,分辨率低且色域小,太輕的陰影效果不如描邊,有時甚至?xí)寛D形邊緣看起來很模糊。擔(dān)心顯示效果的話,實(shí)際上可以看一看 macOS 窗口的陰影尺寸和透明度。B端工具設(shè)計(jì)中,功能性比美觀度重要的多。

圖片

3.3 易讀性與復(fù)雜度

下次去宜家的時候可以觀察下結(jié)賬的柜員機(jī),你會震驚地看到里面仍然顯示著擬物化界面。元素的質(zhì)感對現(xiàn)代界面設(shè)計(jì)來說可能是增加了頁面復(fù)雜度,然而放到具體的操作場景中,擬物化界面可以給高速操作的收銀員提供更佳的功能可見性,有益于培養(yǎng)肌肉記憶。所以頁面易讀性與復(fù)雜度之間的平衡,取決于用戶在場景中的操作方式。

圖片

3.4 功能顏色的數(shù)量

功能顏色讓用戶不閱讀內(nèi)容就可以初步感知數(shù)據(jù)狀態(tài),比如警告色,標(biāo)識色等等。數(shù)量太多時用戶會記不住映射關(guān)系,顏色就失去了功能性。一個常見的錯誤是標(biāo)簽的配色,假如一個系統(tǒng)里有十種標(biāo)簽,千萬不要設(shè)計(jì)十種配色,不僅區(qū)分度低而且視覺上很混亂,盡可能先歸類再配色。再舉審核狀態(tài)的例子,除了成功失敗之外,審核流程還有各式各樣的中間態(tài),需要異化表現(xiàn)時,不妨嘗試通過圖形視覺信號區(qū)分,比如增加圖標(biāo)。

圖片

3.5 避免攤大餅

非必要不攤餅。隨著層級增多,用戶對層級歸屬的感知逐漸變差,內(nèi)容區(qū)也越來越窄,視覺效果難以把控。當(dāng)然,在B端系統(tǒng)設(shè)計(jì)中沒有什么完全不可打破規(guī)則,實(shí)在避免不了的話,可以著重突出頂層內(nèi)容或動態(tài)提示用戶當(dāng)前聚焦的層級。比如鼠標(biāo)懸停時高亮層級關(guān)系,類似編譯器的代碼區(qū)塊高亮功能。

圖片

3.6 數(shù)據(jù)與提示

  • 用真實(shí)字段內(nèi)容設(shè)計(jì):視覺設(shè)計(jì)前找產(chǎn)品或者研發(fā)要一份內(nèi)容字段樣本,有助于提高視覺保真度,同時避免開發(fā)上線后內(nèi)容擠不下或大面積留白的情況。
  • 表單項(xiàng)默認(rèn)值:表單中可以通過感知預(yù)測填充內(nèi)容,或設(shè)置常用的默認(rèn)配置,提高表單的填寫效率,減少機(jī)械操作。
  • 提示信息:提示信息的暴露程度取決于系統(tǒng)功能是否常規(guī),以及目標(biāo)用戶的理解能力。常用操作不提示,常用但晦澀的功能采用懸停提示,不常用且難懂的功能可以露出提示或幫助中心鏈接。

3.7 數(shù)據(jù)分析頁最終效果

經(jīng)過以上粗略的講解,希望大家對頁面控件和整體的視覺處理有了一定了解。針對高度定制化的B端頁面,視覺的核心目的是提高功能可見性和操作易用性,不是單純地去套規(guī)范。

圖片

 

四、工期管理及研發(fā)對接

除了頁面的設(shè)計(jì)流程,項(xiàng)目管理則是另一個重點(diǎn),B端項(xiàng)目經(jīng)常會倒排工期,個別戰(zhàn)略導(dǎo)向型的需求更是火燒眉毛。毋庸置疑,兩天工期的設(shè)計(jì)質(zhì)量多半是比不上一周工期的,下面講一講在時間緊張時如何保障輸出質(zhì)量。

4.1 按需求表單規(guī)劃

開始設(shè)計(jì)前,根據(jù) PRD 整理出一個任務(wù)表單,即當(dāng)期需求覆蓋的功能范圍。遇到緊急需求時,可以按照拆分出來的功能模塊分批交付開發(fā)。B端模塊的設(shè)計(jì)時間很少會完全符合預(yù)期,比如在設(shè)計(jì)時發(fā)現(xiàn)了一個重大優(yōu)化點(diǎn),從構(gòu)思概念方案到各方評估影響需要占用一部分工期,而通過模塊排期表可以更穩(wěn)妥地評估突發(fā)事件對后續(xù)輸出的影響,幫助產(chǎn)品評估是否投入資源做優(yōu)化。

圖片

4.2 先輸出核心頁面確認(rèn)方向

先輸出關(guān)鍵頁面給產(chǎn)品和業(yè)務(wù)確認(rèn),一來讓研發(fā)心里有底,二來控制改稿成本。返工在 B 端項(xiàng)目中很常見,有時候我甚至?xí)之嫴莞迦フ耶a(chǎn)品過方案,提前評估可行性,避免方案走了很遠(yuǎn)再被駁回。切忌等到交稿節(jié)點(diǎn)給產(chǎn)品一個突然驚喜。

4.3 組件與組件狀態(tài)

B端原型通??此浦挥幸粋€頁面,而算上各種面板的打開和關(guān)閉,頁面操作狀態(tài),彈窗,包括定制化組件樣式的說明,工作量并不小。組件狀態(tài)可以留到最后再補(bǔ)充,但務(wù)必和研發(fā)提前協(xié)商技術(shù)方案:首先確定常規(guī)功能能否用現(xiàn)成組件,采用哪款組件,這一部分之后就不再出交互視覺樣式了。其次和研發(fā)同事溝通非標(biāo)組件的交互形式,這樣他們可以先寫框架最后再加樣式,不會出現(xiàn)研發(fā)空窗。

圖片

 

五、初步排錯

交付設(shè)計(jì)稿或者做用戶測試之前,還差一步驗(yàn)證的工序。過濾掉明顯且粗粒度的問題,可以顯著提高后續(xù)的測試效率??陀^上驗(yàn)證可用性,主觀上評估體驗(yàn)。

5.1 小黃鴨調(diào)試法

小黃鴨調(diào)試法是一個工程師都知道,但設(shè)計(jì)師很少聽說的測試方法,本意是通過給桌上的橡皮鴨逐行解釋代碼來排查問題。驗(yàn)證階段不妨也試試這個方法,給想象中的人物講講界面的使用方法和元素的設(shè)計(jì)原因,講都講不通的功能,想必也不會特別好用。(認(rèn)識我的同事都知道我辦公桌上有張青年 Gary Anderson 給一個領(lǐng)導(dǎo)樣子的人解釋可回收標(biāo)識設(shè)計(jì)的照片。我的講解對象就是這個領(lǐng)導(dǎo)樣子的人,他已經(jīng)駁回了我的很多爛方案。)

5.2 走用戶流程

核對產(chǎn)品功能沒有缺漏后,就可以檢查用戶流程的流程度了。幾種常見的流程問題包括:不知從何下手;找不到功能入口;操作失誤難以補(bǔ)救;系統(tǒng)出錯原因不明。這些問題會突然地卡住用戶,感受上很糟糕。我們可以找出類似的卡點(diǎn),提供適當(dāng)?shù)囊龑?dǎo)。假如從設(shè)計(jì)上找不到解決方案,則需要提供可檢索的幫助中心以便用戶自行查閱解決。

圖片

 

結(jié)語

B端產(chǎn)品一般會有詳細(xì)的文檔,或者培訓(xùn)操作人員。然而以B端產(chǎn)品的體量和非常規(guī)的交互方式,很多操作不好記憶。單純按照原型施工,難以保障易用性。作為設(shè)計(jì)師的一個關(guān)鍵職責(zé),便是將產(chǎn)品操作邏輯翻譯成簡明易懂的頁面和圖形,盡可能鋪平體驗(yàn)的道路。

注1:文章示意圖內(nèi)容由于脫敏需要進(jìn)行了處理,實(shí)際設(shè)計(jì)時請記得盡量使用真實(shí)字段內(nèi)容。

注2:本文主要介紹流程處理,為避免繁瑣略去了一些視覺設(shè)計(jì)點(diǎn),想要了解更多可以參考上一篇文章《引起舒適!什么是好用的界面》。

 

作者:邢禹

轉(zhuǎn)載請注明:學(xué)UI網(wǎng)》如何解析產(chǎn)品原型

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話,可以進(jìn)入一起成長學(xué)習(xí),請加藍(lán)小助,微信號:ben_lanlan,報(bào)下信息,藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請與我們聯(lián)系01063334945。


分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。


藍(lán)藍(lán)設(shè)計(jì)www.bouu.cn )是一家專注而深入的界面設(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ì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司




設(shè)計(jì)師能力建設(shè)(1):如何更好地進(jìn)行設(shè)計(jì)溝通

seo達(dá)人



設(shè)計(jì)師是項(xiàng)目流程中的中間環(huán)節(jié),需要與不同角色的人員打交道,溝通必不可少。
  • 對上,要與產(chǎn)品經(jīng)理保持溝通,清楚地知道產(chǎn)品當(dāng)前的工作方向、目標(biāo),以及未來的工作計(jì)劃,甚至要通過與產(chǎn)品經(jīng)理溝通,側(cè)面了解領(lǐng)導(dǎo)的期望。
  • 對下,則要跟開發(fā)人員密切配合,跟進(jìn)開發(fā),推動設(shè)計(jì)落地。

與人溝通不是一項(xiàng)簡單的工作,其中包含了很多為人處事的技巧,這方面我并不在行。但是單純工作層面的溝通而言,我覺得并不復(fù)雜。

今天我們就來討論下設(shè)計(jì)師應(yīng)該如何做好設(shè)計(jì)溝通。主要有以下幾個方面:

 

1、深入理解需求,給自己增值

2、找準(zhǔn)關(guān)鍵角色,影響他人

3、主動溝通,拉近工作關(guān)系

4、基于用戶場景,提高溝通準(zhǔn)確性

5、重視設(shè)計(jì)評審,獲得多方認(rèn)可

 

一、深入理解需求,給自己增值

設(shè)計(jì)師是為產(chǎn)品服務(wù)的,打交道最多的就是產(chǎn)品經(jīng)理,但是產(chǎn)生分歧最多的應(yīng)該也是產(chǎn)品經(jīng)理。根本原因就是產(chǎn)品經(jīng)理和設(shè)計(jì)師會站在不同的維度去理解需求,產(chǎn)品經(jīng)理主要是從需求價值、功能設(shè)計(jì)的維度定義需求,而設(shè)計(jì)師則是從用戶體驗(yàn)角度理解需求。

現(xiàn)在很多的設(shè)計(jì)團(tuán)隊(duì)要求設(shè)計(jì)師要去理解業(yè)務(wù)場景、商業(yè)模式,要站在產(chǎn)品的角度思考需求,就是保證設(shè)計(jì)師能與產(chǎn)品經(jīng)理在一個頻道上溝通,這樣才能產(chǎn)出有價值的設(shè)計(jì)方案。才能讓產(chǎn)品經(jīng)理認(rèn)可你的能力,讓他覺得你的設(shè)計(jì)方案確實(shí)更加合理、有效,甚至對你產(chǎn)生依賴性,最終贏得話語權(quán)。

當(dāng)然這非常難,畢竟離了誰,地球都照樣轉(zhuǎn)。但是一旦形成了這樣的工作方法,你會發(fā)現(xiàn)設(shè)計(jì)工作會更加容易推進(jìn),溝通交流也會更加順暢。

 

二、找準(zhǔn)關(guān)鍵角色,影響他人

設(shè)計(jì)師想要做成事,需要自下而上地影響別人。

有些時候,產(chǎn)品經(jīng)理的需求并不清晰準(zhǔn)確。必要時,設(shè)計(jì)師要拉上更高一級的角色與產(chǎn)品經(jīng)理一起溝通,例如產(chǎn)品總監(jiān),將需求進(jìn)一步確定下來。

總監(jiān)這類角色比較重要,平時設(shè)計(jì)師很難有機(jī)會直接給領(lǐng)導(dǎo)匯報(bào),跟產(chǎn)品總監(jiān)或者設(shè)計(jì)總監(jiān)溝通匯報(bào)的機(jī)會更多。一方面他們的意見比較受領(lǐng)導(dǎo)重視,另一方面他們也比較清楚領(lǐng)導(dǎo)的想法。產(chǎn)品總監(jiān)會決定是否需要跟領(lǐng)導(dǎo)進(jìn)一步溝通,或者由他們直接跟領(lǐng)導(dǎo)匯報(bào)。

所以跟總監(jiān)匯報(bào),要能夠?qū)⒃O(shè)計(jì)方案的精髓有效地傳遞給他們,讓他們充分了解并信服設(shè)計(jì)方案。

當(dāng)然如果有機(jī)會,設(shè)計(jì)師還是要爭取直接給領(lǐng)導(dǎo)匯報(bào),畢竟自己產(chǎn)出的方案只有自己最熟悉,并且通過匯報(bào)也可以面對面了解領(lǐng)導(dǎo)的真實(shí)想法。

 

三、主動溝通,拉近工作關(guān)系

1、日常工作溝通

在我們的工作中,會遇到各種類型的產(chǎn)品經(jīng)理。有強(qiáng)勢的、有自以為是的等等,但是所謂“伸手不打笑臉人”,大家都是為了產(chǎn)品更好地發(fā)展在積極合作,當(dāng)你主動的、真誠地站在產(chǎn)品角度去請教業(yè)務(wù)或者需求時,大多人還是很配合。

講一下我的個人經(jīng)歷。

隨著產(chǎn)品線的擴(kuò)張,部門的產(chǎn)品經(jīng)理越來越多,有些沒有太多的交集,最開始對設(shè)計(jì)師缺少足夠信任,個別產(chǎn)品經(jīng)理會繞過交互設(shè)計(jì)師,直接找視覺完成方案后,推動開發(fā)上線。有的只是找交互設(shè)計(jì)師做下原型評審,并不傳達(dá)需求內(nèi)容,效果非常有限,導(dǎo)致設(shè)計(jì)師工作比較被動。

這一方面需要在流程制度上去約束產(chǎn)品經(jīng)理,另一方面設(shè)計(jì)師也要與產(chǎn)品經(jīng)理多溝通,提前知道產(chǎn)品規(guī)劃、介入需求。或者對沒有參與的需求進(jìn)行體驗(yàn)走查,帶著問題去找產(chǎn)品,并提出改進(jìn)方案,讓產(chǎn)品經(jīng)理意識到設(shè)計(jì)師對產(chǎn)品的價值,逐步扭轉(zhuǎn)不利的局面。

剛好最近在搞下季度的產(chǎn)品規(guī)劃,產(chǎn)品經(jīng)理搞得熱火朝天,但是都沒有主動將信息同步給設(shè)計(jì)師。

作為產(chǎn)品需求的下游,這種情況似乎也無可厚非。不過如果等著所有的需求都確定了,工作鋪天蓋地壓過來,設(shè)計(jì)師也承受不了大量的設(shè)計(jì)任務(wù)。

在我看來,提前了解需求信息,可以更好地開展后續(xù)設(shè)計(jì)工作。所以就主動出擊,找產(chǎn)品經(jīng)理聊聊工作,于是有了以下對話。

設(shè)計(jì)師:“大佬,最近忙什么呢?后面的產(chǎn)品有什么安排嗎?” 

產(chǎn)品經(jīng)理:“需求還在整理中”  

我:“好的,有什么材料可以先發(fā)給我看看嗎?” 

 產(chǎn)品經(jīng)理:“還在改方案,新的方案被領(lǐng)導(dǎo)否了“

…..(中間就閑扯了幾句,就此略過)

我:”好的,后面有需求可以提前跟我們溝通,我們設(shè)計(jì)側(cè)保證積極配合”。

產(chǎn)品經(jīng)理:“好的,那我先把之前的方案發(fā)你看看吧”

當(dāng)你主動地想要了解產(chǎn)品需求時,很多產(chǎn)品經(jīng)理還是比較歡迎的。

而當(dāng)產(chǎn)品經(jīng)理不知道該做什么或者怎么做時,設(shè)計(jì)師可以通過自己的專業(yè)能力,例如競品分析、數(shù)據(jù)分析等,介入到需求分析中,幫助產(chǎn)品經(jīng)理梳理需求,或者推進(jìn)產(chǎn)品體驗(yàn)升級。這時候你的設(shè)計(jì)建議,產(chǎn)品也更容易接納。

 

2、設(shè)計(jì)目標(biāo)溝通

對于成熟的設(shè)計(jì)團(tuán)隊(duì),設(shè)計(jì)師一般都有明確的分工協(xié)作,職責(zé)也比較清晰。單打獨(dú)斗的設(shè)計(jì)師,相對比較慘。容易陷入被動接受工作的局面,今天做個A產(chǎn)品頁面,明天改個B產(chǎn)品PPT,后天做C產(chǎn)品的頁面,誰都能提需求。天天看似很忙,結(jié)果工作上不成體系,工作績效都不知道該怎么寫。

所以設(shè)計(jì)師要做好自我工作的管理,建議設(shè)計(jì)師可以主動向產(chǎn)品團(tuán)隊(duì)靠攏。除了日常的項(xiàng)目工作,還要能夠找到一些體現(xiàn)自我價值的工作,可以更好地展現(xiàn)自驅(qū)能力。例如開展競品分析報(bào)告、系統(tǒng)走查、設(shè)計(jì)規(guī)范、組件庫建設(shè)沉淀等等。

這些偏向產(chǎn)品頂層規(guī)劃與設(shè)計(jì)工作,要及時與產(chǎn)品負(fù)責(zé)人進(jìn)行溝通,保證工作的方向和目標(biāo)與產(chǎn)品整體發(fā)展保持一致,并且最好能夠納入到產(chǎn)品規(guī)劃中,方便后續(xù)工作的開展。

 

3、抓住問題本質(zhì)、帶著方案溝通

設(shè)計(jì)是具象工作,看到設(shè)計(jì)方案才能做出評判。在工作溝通時,除了提出問題,還要盡量帶著方案解決問題。尤其是與領(lǐng)導(dǎo)溝通,不要直接問領(lǐng)導(dǎo)該怎做,而是應(yīng)該告訴領(lǐng)導(dǎo)我的方案是什么,請領(lǐng)導(dǎo)決策。

例如領(lǐng)導(dǎo)對現(xiàn)在版本不滿意,要改版。我們該怎么做呢?

我認(rèn)為,首先要弄清楚領(lǐng)導(dǎo)對哪些方面不滿意,例如風(fēng)格、顏色,還是框架布局。因?yàn)殡p方對改版的認(rèn)知可能不一致。搞清楚問題之后,才能更好地開展具體工作。另一方面如果不好與領(lǐng)導(dǎo)直接溝通,還可以與總監(jiān),產(chǎn)品經(jīng)理溝通討論,他們跟領(lǐng)導(dǎo)接觸更多,得到的信息也更多,可以側(cè)面了解領(lǐng)導(dǎo)的期望。

試圖搞清楚領(lǐng)導(dǎo)喜歡什么風(fēng)格,再著手進(jìn)行設(shè)計(jì),這種方法可能很難奏效。因?yàn)轭I(lǐng)導(dǎo)的喜好會發(fā)生變化,可能不經(jīng)意看到的頁面就讓他產(chǎn)生了改版的想法。又或者他今天喜歡這種風(fēng)格,明天喜歡另一種風(fēng)格,這樣會讓設(shè)計(jì)很難適從。

設(shè)計(jì)師還是需要通過主動調(diào)研分析,完成多個方案后,讓領(lǐng)導(dǎo)做出選擇,這樣可以更深刻地影響領(lǐng)導(dǎo)的思維。

 

四、基于用戶場景,提高溝通準(zhǔn)確性

例如最近有個產(chǎn)品需求,最開始是產(chǎn)品經(jīng)理跟我單線溝通的,感覺需求比較簡單,確實(shí)沒有仔細(xì)地了解用戶場景,就在產(chǎn)品原型基礎(chǔ)上修改了一版交互方案。后來產(chǎn)品經(jīng)理找到我說,業(yè)務(wù)需求方對方案還有些異議。于是進(jìn)行了第二輪溝通,這次邀請了產(chǎn)品經(jīng)理、業(yè)務(wù)方、還有開發(fā)同事參會。

剛開始討論的是第一輪的交互方案,發(fā)現(xiàn)產(chǎn)品經(jīng)理轉(zhuǎn)述業(yè)務(wù)方需求時,對信息理解有誤,于是重新討論用戶場景和需求。在會上快速完成了一版框圖原型,但是緊接著業(yè)務(wù)需求方又考慮到了一個新的場景,發(fā)現(xiàn)框圖方案仍然無法滿足要求,于是方案又被推翻了。

最后的會議由于時間關(guān)系,只是討論清楚了用戶場景,產(chǎn)品經(jīng)理還要再梳理一下才能轉(zhuǎn)化為產(chǎn)品需求,后續(xù)還要再拉會討論。

一個產(chǎn)品需求涉及到各種崗位角色,單方面溝通容易出現(xiàn)信息偏差,或者信息傳遞不到位。在關(guān)鍵的節(jié)點(diǎn),例如需求討論、設(shè)計(jì)評審,應(yīng)當(dāng)召集所有相關(guān)人員,盡量避免單線溝通。

同時要基于用戶場景溝通,不能含糊其詞,可以通過5WH方法刨根問底,真正地理解需求,否則就可能出現(xiàn)設(shè)計(jì)返工。

 

五、重視設(shè)計(jì)評審,獲得多方認(rèn)可

設(shè)計(jì)評審是非常重要的溝通方式,一般分為兩種,內(nèi)部評審和外部評審。

 

1、內(nèi)部評審

內(nèi)部評審指的是設(shè)計(jì)團(tuán)隊(duì)內(nèi)部的評審,主要作用是方案查缺補(bǔ)漏和正式評審預(yù)演。

設(shè)計(jì)師在評審過程中需要講清楚產(chǎn)品需求是什么,業(yè)務(wù)流程、競品分析、用戶分析,設(shè)計(jì)思考、以及設(shè)計(jì)方案等等。當(dāng)然由于現(xiàn)在都是敏捷開發(fā),一些需求都是比較小的迭代,所以前期的分析可以簡單講解下,重點(diǎn)是要講清楚需求和設(shè)計(jì)方案,讓其他設(shè)計(jì)師了解需求背景和內(nèi)容,并對設(shè)計(jì)方案提出改進(jìn)意見。

 

2、外部評審

外部評審更多的是確認(rèn)設(shè)計(jì)方案,而不是討論設(shè)計(jì)方案。同時可以拉通各方面信息,并將最后的評審結(jié)果傳遞給需求的相關(guān)責(zé)任人,作為后續(xù)工作的依據(jù)。

為了評審效率,在正式評審前,設(shè)計(jì)師可以拉上業(yè)務(wù)方、產(chǎn)品經(jīng)理做小范圍的方案評審,讓需求最直接的相關(guān)人員,確認(rèn)方案是否正確,并達(dá)成一致。保證正式外審方案受到質(zhì)疑時,獲得他們的支持,或者由他們出面解釋一些業(yè)務(wù)問題,更容易讓其他人員接受。

正式的外部評審可能會包括一些業(yè)務(wù)方的領(lǐng)導(dǎo)、產(chǎn)品總監(jiān)、設(shè)計(jì)總監(jiān)、開發(fā)、測試等人員。設(shè)計(jì)師需要重點(diǎn)講解從用戶體驗(yàn)角度對需求的拆解和分析,以及完整的設(shè)計(jì)方案。當(dāng)發(fā)生意見分歧時,可以通過競品分析、數(shù)據(jù)分析等輔助論證方案。

設(shè)計(jì)外審時,設(shè)計(jì)師要面對各個團(tuán)隊(duì)的挑戰(zhàn),但是也是展示個人能力的好機(jī)會。畢竟平時不會有各個崗位的領(lǐng)導(dǎo)、同事,能夠坐下來聽你講方案。

如果不重視設(shè)計(jì)評審,完成了設(shè)計(jì)方案,往群里一丟或者發(fā)個郵件就萬事大吉了。其實(shí)是失去了一次表現(xiàn)自己的機(jī)會。同時也無法將足夠的設(shè)計(jì)信息有效地傳遞給上下游,缺少了確認(rèn)的過程,后面容易造成各方面的信息混亂、扯皮。

 

總結(jié)

立足于做事本身,你會發(fā)現(xiàn)工作中的溝通相對要簡單很多。上面說了那么多,可以歸納為以下3點(diǎn):

1、用心溝通

2、主動溝通

3、及時溝通

 

作者:子牧先生

轉(zhuǎn)載請注明:學(xué)UI網(wǎng)》設(shè)計(jì)師能力建設(shè)(1):如何更好地進(jìn)行設(shè)計(jì)溝通

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話,可以進(jìn)入一起成長學(xué)習(xí),請加藍(lán)小助,微信號:ben_lanlan,報(bào)下信息,藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請與我們聯(lián)系01063334945。


分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。


藍(lán)藍(lán)設(shè)計(jì)www.bouu.cn )是一家專注而深入的界面設(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ì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司



信息無障礙研究與應(yīng)用

純純

信息無障礙,是指任何人在任何情況下都能平等地、方便地、無障礙地獲取信息和利用信息。隨著互聯(lián)網(wǎng)覆蓋越來越廣,對于身體有局限的群體而言,更加迫切通過互聯(lián)網(wǎng)獲取信息,而這就需要互聯(lián)網(wǎng)產(chǎn)品進(jìn)行信息無障礙的優(yōu)化。在我國其受益人群至少包括:8500多萬殘障人士,2億多60歲以上的老年人,數(shù)量龐大。率先考慮信息無障礙能為產(chǎn)品增加優(yōu)勢而帶來更多用戶。


如今智能手機(jī)掀起了一場無障礙輔助工具的革命,而站在這個關(guān)鍵點(diǎn)的互聯(lián)網(wǎng)設(shè)計(jì)師,也要開始行動起來,先從以下這幾個容易實(shí)現(xiàn)的事情開始著手進(jìn)行無障礙的優(yōu)化吧。




關(guān)于讀屏


對視障用戶來說,是用聽取讀屏語音來了解你設(shè)計(jì)的界面信息的。讀屏軟件就像他們了解互聯(lián)網(wǎng)世界的眼睛,它的原理是直接讀出界面里的文字,如果icon按鈕未加無障礙標(biāo)簽讀屏?xí)x為"無法發(fā)音",那么視障者就無法獲取這些信息,自然也就無法使用你設(shè)計(jì)的功能。


解決的辦法是:


1.需要在產(chǎn)品代碼中添加無障礙標(biāo)簽(Android :contentDescription ; iOS:accessibilityLabel在對應(yīng)的開發(fā)者文檔里很容易找到,可以發(fā)給你合作的研發(fā)同學(xué))。


2.裝飾性icon可隱藏標(biāo)簽不讀,提升讀屏效率。不建議不做處理也不加標(biāo)簽,那么用戶聽到的就是“無標(biāo)簽”,這樣會讓用戶以為這里有什么重要信息讀不到而感到不安。


3.標(biāo)簽語義簡短準(zhǔn)確,盡可能使用動詞。


4.必要時需要走查焦點(diǎn)順序,確保不會被錯誤的焦點(diǎn)順序誤導(dǎo)頁面含義。 



并且最好由設(shè)計(jì)師進(jìn)行語義的標(biāo)注,因?yàn)樵O(shè)計(jì)師才是對頁面里圖形應(yīng)用最了解的人。避免出現(xiàn)“搜索”被寫成“放大鏡”、或者是“searchBtn_123”之類的情況。 





關(guān)于色彩


顏色可以用來區(qū)分信息數(shù)據(jù)的類別和維度,也可以幫助傳達(dá)情緒等重要信息。然而,世界上有超過8%的男性和0.4%的女性都被色覺障礙的問題困擾。我們通?;\統(tǒng)的稱這類人群為“色盲”,他們是典型的識別顏色有問題的群體。


"色彩"的目標(biāo)是"易于感知",指的是互聯(lián)網(wǎng)產(chǎn)品的內(nèi)容信息的色彩對任何人來說,都應(yīng)該擁有足夠高的辨識度和舒適度,我從以下4個方向進(jìn)行介紹。 

 

1.更安全的配色


a.色盲人群:


設(shè)計(jì)師在進(jìn)行設(shè)計(jì)配色時應(yīng)時刻自測,避免明度相似的橙黃綠兩兩配色和明度相似的紅綠配色,因?yàn)檫@樣的配色勢必會造成色盲用戶的可讀性問題。并且,紅色在紅綠色盲眼中并不是一種明亮醒目的顏色。相反紅色對他們來說顯得非常深,而暗紅色則幾乎接近黑色。因此色盲人士很難分辨出文章內(nèi)的深紅色的強(qiáng)調(diào)字,從而遺漏關(guān)鍵信息(設(shè)計(jì)時,可利用此插件模擬色盲眼中的顏色:Color Oracle) 。




b.文化差異:


因?yàn)樯试诓煌瑖椅幕写聿煌x,所以對于國際用戶來說也是存在障礙的。在西方文化里,紅色通常用于表示消極趨勢,而綠色則表示積極趨勢,但在東方文化中卻正相反。


c.特殊群體:


臨床醫(yī)學(xué)研究表明對于部分自閉癥患者來說,高飽和高對比度的顏色,甚至只是黃色都會讓他們感到不舒服和不安,因此在自閉癥康復(fù)中心是不會出現(xiàn)過于對比刺激的顏色的。


另外,老年群體隨著年齡的增長,晶狀體變黃變渾濁,會選擇性的吸收藍(lán)光,從而導(dǎo)致老年人對藍(lán)色的鑒別能力下降明顯,如果你的主流用戶是老年人,請盡量避免將藍(lán)色運(yùn)用到重要的按鍵中去。



2.更強(qiáng)的文本對比度


文本對比度與可讀性息息相關(guān),它測量的文本顏色和背景色之間的明度差。WCAG AA對于文本對比度的規(guī)范是:4.5:1,若字號夠大(>18pt,或粗體>14pt)時,標(biāo)準(zhǔn)可降到3:1。如果滿足4.5:1這個標(biāo)準(zhǔn)會讓你的頁面視覺看起來不那么優(yōu)雅,可以嘗試局部加強(qiáng)可視性的方法:



關(guān)于可讀性其他需要注意的點(diǎn):盡量不要在圖片上疊加文字,除非你能保證圖片背景顏色單一且對比度足夠高。



Material Design設(shè)計(jì)規(guī)范建議,需要淡淡的遮罩確保上層文字的可讀性;并且不建議極高對比度的文本,因?yàn)檫@樣會使一部分視障者看到的字旋轉(zhuǎn)模糊。


 

3.更多樣的視覺變量 


顏色是數(shù)據(jù)可視化中最常用的視覺變量之一。但是對于無法辨別顏色的用戶,如果顏色作為的唯一的提示信息,他們可能將無法理解你傳達(dá)的信息。那么有什么改善的方法呢?


a. 不讓顏色成為唯一的視覺變量:除顏色外,我們可以追加圖標(biāo)、紋理或者文字來加以標(biāo)注。



b.色盲模式:Trello作為一款工具產(chǎn)品,在標(biāo)注信息時,提供色盲模式可打開和關(guān)閉,并用不同紋理加以區(qū)別,色盲友好模式是一個很好的范例,它可以有效幫助色盲,又不會妨礙非色盲用戶。


c.以明度飽和度為度量:雖然色盲人士對色相的辨識能力較弱,但卻對明度、飽和度非常敏感。我們可以使用明度或飽和度區(qū)分信息。看這個例子:傳統(tǒng)熱力圖習(xí)慣用暖色代表熱力高冷色代表熱力低,Google Analaytics的熱力圖采用深藍(lán)色顯示熱度高的時段、淺藍(lán)色顯示熱度低的時段,簡單有效。




關(guān)于控件


控件可以是按鈕、鏈接、輸入框或任何帶有事件監(jiān)聽器的HTML元素。控件太小或彼此太靠近可能會給用戶帶來糟糕的體驗(yàn)問題。


比如對于無法用指尖精確定位的用戶(有顫抖疾病的用戶),或因年齡而導(dǎo)致靈活性降低的老年用戶,都會難以點(diǎn)擊過小控件。


為了給用戶足夠的間距來準(zhǔn)確選擇控件,Material Design建議至少48×48dp,iOS設(shè)計(jì)系統(tǒng)將目標(biāo)熱區(qū)尺寸最小值定為44 x 44pt,而WCAG對WEB的規(guī)范則建議至少44×44px。一個控件可以在視覺上是24 x 24px,但是在所有邊上都會有一個額外的填充使它達(dá)到44×44px。并且太靠近的控件可能會因誤點(diǎn)擊而帶來挫敗感,所以同時還建議控件之間的空間足夠遠(yuǎn)以減少誤觸。Microsoft給pc的建議是至少有8px的間距,而Material Design推薦的控件至少間隔8dp。我們可根據(jù)以上規(guī)范來審視自己設(shè)計(jì)的控件。




關(guān)于文字


1.文字大小:


有視覺障礙的用戶可能會把字號調(diào)得很大。你需要保證你的設(shè)計(jì)在大字號的情況下內(nèi)容不會溢出或排版錯亂。做設(shè)計(jì)的時候,可以使用2倍以上的字體測試你的設(shè)計(jì)。


在互聯(lián)網(wǎng)早期,設(shè)計(jì)了字號在9-14px之間的網(wǎng)頁,如今已與20年前不同,瀏覽器已經(jīng)可以在任何尺寸設(shè)備上使用,小到智能手表大到4K熒幕,我們不能再使用固定的字號來設(shè)計(jì)產(chǎn)品了。字號應(yīng)該與設(shè)計(jì)本身一樣具有響應(yīng)性。例如可以允許用戶自定義字號、行高或字間距等以達(dá)到舒適的閱讀水平。


 

2.文字樣式:


文字作為傳達(dá)信息的重要載體,對于許多用戶來說,裝飾字體或草書字體都是比較難閱讀的。且用過細(xì)的、過小的、斜體和全大寫文本,也會降低識別度。




關(guān)于動效


有效的動畫可以給頁面帶來生命感,但如果濫用動效不僅會分散用戶注意力,嚴(yán)重的話對某些用戶來說來說可能是致命的(光敏性癲癇的臨床誘因之一就是閃光圖像的刺激)。


1997年的一天,日本電視臺正在播放《精靈寶可夢》第38集“電腦戰(zhàn)士3D龍”,但就在這天晚上發(fā)生了600多名兒童昏倒在家中集體送醫(yī)事件,轟動了動畫界,任天堂的股價也隨之大跌。原來,為了達(dá)到震撼效果,3D龍的背景運(yùn)用了“藍(lán)-紅-藍(lán)”的快速閃爍來表現(xiàn)爆炸,這樣高頻率的閃爍刺激了孩子們脆弱的眼睛,導(dǎo)致他們集體患上了急性光敏癥。也因?yàn)檫@件事日本開始著手對動畫片的制作制定規(guī)范。Twitter在2019年為了保護(hù)對閃爍圖像敏感的人員安全,也采取了禁用APNG動圖格式的措施。


另外WCAG 2.3.3官方說明,一些用戶會因滾動頁面的動效(例如緩動和視差滾動)而觸發(fā)大腦前庭疾病從而產(chǎn)生頭暈的癥狀,所以iOS、Mac、Windows 10都具有關(guān)閉動效的功能。


為了避免給特殊人群造成困擾,設(shè)計(jì)師在開始做動效之前,應(yīng)該看看以下四條是否滿足:


1.動效每秒閃動不超過3次,發(fā)生的閃光區(qū)域不超過超過25%否則,光敏癲癇患者會有發(fā)病的風(fēng)險(xiǎn)。


2.避免過于夸張的視差和運(yùn)動效果,因?yàn)榇竽X前庭失調(diào)者會引發(fā)眩暈。


3.避免有多個元素通過不斷移動、閃爍而分散注意力,因?yàn)檫@可能會讓注意力缺陷者產(chǎn)生困擾 。


4.如果有上述情況,需提供一些控件或選項(xiàng)來暫停、隱藏或者更改任何動畫或效果的頻率。


結(jié)語


作為體驗(yàn)設(shè)計(jì)師,研究無障礙會讓我們收獲良多。當(dāng)然,目前所做的改進(jìn)并非一勞永逸,而是我們與更廣范圍的用戶保持持續(xù)對話的開端。不斷改進(jìn)產(chǎn)品的無障礙體驗(yàn),讓產(chǎn)品更友善,讓美妙的互聯(lián)網(wǎng)的世界變得更平等,我們希望能不斷向這一目標(biāo)前進(jìn)。




作者:百度MEUX    來源:站酷

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話,可以進(jìn)入一起成長學(xué)習(xí),請加藍(lán)小助,微信號:ben_lanlan,報(bào)下信息,藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請與我們聯(lián)系01063334945。

分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)www.bouu.cn )是一家專注而深入的界面設(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ì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司


想要為元宇宙做設(shè)計(jì),這些可以幫到你

純純

人類與其他物種最顯著的不同點(diǎn)之一是人類擁有與他人溝通和交流的能力。在整個人類社會的發(fā)展史中,溝通和交流行為需要雙方處在同一個物理空間中。但進(jìn)入21世紀(jì),虛擬空間的出現(xiàn)讓我們社交方式正在發(fā)生翻天覆地的變化,它已經(jīng)成為我們每天生活的一部分,對設(shè)計(jì)師而言,虛擬空間設(shè)計(jì)仍是一個全新的、亟待探索的領(lǐng)域,我們有很多事可以做。

你或許聽說過元宇宙這一新興概念,它是一個增強(qiáng)的、或者說是一個完全虛擬的空間,我們需要使用VR頭戴設(shè)備和數(shù)字形象才能進(jìn)入。在這個有社交距離的時代,元宇宙可以讓我們感受到更加緊密的社交關(guān)系:不論我們相隔多遠(yuǎn),我們都可以看到和感受到對方。包括META(前身為Facebook)在內(nèi)的很多商業(yè)巨頭正在入局元宇宙,在他們洞察到的的商業(yè)機(jī)會上投資數(shù)十億美金,這些投資在未來將為大量的元宇宙設(shè)計(jì)創(chuàng)造機(jī)會。

考慮到這一點(diǎn),這篇文章主要描述關(guān)于元宇宙設(shè)計(jì)的一切:包括元宇宙的概念、設(shè)計(jì)元宇宙的技術(shù),以及設(shè)計(jì)元宇宙的工具。

一、什么是元宇宙?

元宇宙一詞首次出現(xiàn)在Neal Stephenson于1992創(chuàng)作的科幻小說《雪崩》中,講述了主人公在被稱為“元宇宙”的虛擬空間和現(xiàn)實(shí)空間中來回穿梭旅行。斯皮爾伯格的電影《頭號玩家》也描繪了一個在不久的將來會出現(xiàn)的類似元宇宙的概念,在電影中,主角生活在類似于虛擬現(xiàn)實(shí)中,與其他玩家一起在元宇宙世界中探索。



《頭號玩家》

雖然最初元宇宙可能起源于科幻小說,但它無法被單一的定義,它更像是創(chuàng)建一個沉浸式虛擬空間的想法,人們可以在其中自然地互動。你可以想象一個充滿數(shù)字形象的 3D 世界,它能提供全方位的數(shù)字體驗(yàn)。

事實(shí)上,元宇宙并不是一個新興的概念,早在2000年,一款名為“第二人生”的平臺就已經(jīng)擁有了許多在我們今天看來與元宇宙有關(guān)的功能。作為一個用戶,你可以在“第二世界”中完成與現(xiàn)實(shí)世界中相同的事情,但它與現(xiàn)在我們所說的元宇宙有一個關(guān)鍵區(qū)別——“第二人生”并不是一個必須要借助VR/AR設(shè)備體驗(yàn)的互動世界,最主要的原因是當(dāng)時的 AR/VR 設(shè)備還無法創(chuàng)造沉浸式的交互體驗(yàn)。

從2022年開始,我們逐漸意識到,AR和VR才是組成元宇宙的關(guān)鍵元素,因?yàn)樗鼈兛梢詣?chuàng)造更加真實(shí)的虛擬體驗(yàn)(并且我們已經(jīng)擁有可以使其實(shí)現(xiàn)的技術(shù))。只要用戶戴上頭戴裝置,他們就能立刻進(jìn)入一個完全不同的世界。盡管用戶周圍的所有物體都是虛擬的,但它們對用戶來說是真實(shí)自然的。

下面是一些日常交互行為如何在元宇宙中應(yīng)用的示例:

工作

辦公室這個場景其實(shí)可以自然的進(jìn)化成元宇宙,因?yàn)楝F(xiàn)在流行的混合辦公模式(一部分員工在實(shí)體辦公室辦公,一部分員工遠(yuǎn)程辦公)非常適合在元宇宙中實(shí)現(xiàn)。無論人們住在哪里,他們都可以作為一個團(tuán)隊(duì)一起工作,因?yàn)樵钪娼o了他們一種共享物理空間的感覺。Oculus 的 Horizon WorkRoom就是一個很好的例子。

培訓(xùn)課程

元宇宙可以成為學(xué)習(xí)的絕佳場所,它可以讓學(xué)生與老師或教練在元宇宙中進(jìn)行實(shí)時互動,就像在現(xiàn)實(shí)中上課一樣真實(shí)自然,你甚至可以認(rèn)為他們是同處于一個空間中的。

游戲

元宇宙很可能會首先在游戲行業(yè)中脫穎而出,自然而然地繼承許多游戲設(shè)計(jì)的許多屬性。比如元宇宙里的內(nèi)容可能會由用戶生成,并且元宇宙鼓勵用戶長期參與。


二、設(shè)計(jì)師如何為元宇宙進(jìn)行設(shè)計(jì)?


從設(shè)計(jì)師的視角來看,元宇宙是擁有許多可交互的服務(wù)的巨大平臺,用戶可以在其中完全自主的選擇他們想要的服務(wù)。進(jìn)入元宇宙需要用戶創(chuàng)建數(shù)字形象,它不僅僅是用戶名和圖片,更像是用戶真實(shí)形象的數(shù)字孿生,用來與虛擬世界中的任何對象進(jìn)行交互。就像真人一樣,數(shù)字形象有一個身份來幫助用戶進(jìn)行訪問。



Oculus Quest來創(chuàng)建屬于你自己的形象

元宇宙有很大概率成為Web3.0的關(guān)鍵元素,這是基于區(qū)塊鏈的新一代更加民主化的互聯(lián)網(wǎng)版本。產(chǎn)品設(shè)計(jì)師將專注于創(chuàng)建 3D 空間,這些空間可以是現(xiàn)有物理場所(即家庭、辦公室、俱樂部),也可以是一個全新的世界(空間站、卡通世界等),但無論是什么樣的虛擬空間,它都應(yīng)該讓用戶感到舒適。



虛擬辦公空間. 圖片取自Meta.

為元宇宙設(shè)計(jì)意味著設(shè)計(jì)一個完全沉浸的世界,設(shè)計(jì)師需要更全面更綜合的能力。

下面列舉了設(shè)計(jì)師在設(shè)計(jì)元宇宙時需要特別關(guān)注的幾個領(lǐng)域:

1.可用性 

可用性是優(yōu)秀設(shè)計(jì)的基本屬性,創(chuàng)造一個易用的元宇宙體驗(yàn)是非常巨大的挑戰(zhàn),因?yàn)樵S多關(guān)鍵的設(shè)計(jì)因素都會對用戶產(chǎn)生消極影響,比如暈動病(motion sickness):用戶長期佩戴 VR設(shè)備所帶來的頭暈、惡心等癥狀,設(shè)計(jì)師在設(shè)計(jì)元宇宙的體驗(yàn)時就應(yīng)該想到這一點(diǎn),并想辦法進(jìn)行優(yōu)化。

元宇宙設(shè)計(jì)目前仍舊處于早期階段,這提供了從一開始就構(gòu)建易用性體驗(yàn)的絕佳機(jī)會。設(shè)計(jì)師不應(yīng)該只是在已有的經(jīng)驗(yàn)基礎(chǔ)上進(jìn)行適配,而應(yīng)該找到新的、更舒適的方法來幫助用戶長時間停留在虛擬空間中。



技術(shù)造成的暈動病。圖片來自Harmony.

2.元宇宙中的內(nèi)容 

互聯(lián)網(wǎng)時代的用戶習(xí)慣瀏覽網(wǎng)站和應(yīng)用程序來獲取內(nèi)容,那么元宇宙中,用戶會期待什么樣的內(nèi)容呢?答案很有趣:和現(xiàn)在他們每天正在獲取的內(nèi)容一樣就可以了。在元宇宙世界中,用戶會選擇他們熟悉的內(nèi)容進(jìn)行互動,比如文章、視頻、音樂、電影等等。但他們消費(fèi)這些內(nèi)容的方式可能不同,比如元宇宙中用戶無需購買大屏幕電視即可觀看電影,他們可以依靠他們的頭戴設(shè)備。

從設(shè)計(jì)的視角來看,在元宇宙中內(nèi)容以最適合的形式展示給用戶這一點(diǎn)尤為重要,但目前還沒有簡單且正確方法可以實(shí)現(xiàn)這一目標(biāo),因此設(shè)計(jì)師必須嘗試各種內(nèi)容形式,才能找到適合在元宇宙展示內(nèi)容的形式。

3.數(shù)字商品 

元宇宙是一個擁有數(shù)字商品的數(shù)字世界。數(shù)字商品有它的局限性,你不能把它們帶到物理世界中去,但它們也擁有巨大的優(yōu)勢——你在元宇宙中購買的數(shù)字商品可以以不同的方式在不同的環(huán)境中使用。例如,你可以購買一頂棒球帽,在你最喜歡的游戲和辦公室中佩戴它,使其成為你個人風(fēng)格的重要組成部分。當(dāng)然,這個功能目前只是一個構(gòu)想,需要那些在元宇宙運(yùn)營的公司愿意支持?jǐn)?shù)字商品在不同場景下的切換時才有可能實(shí)現(xiàn)。

4.去中心化的支付系統(tǒng) 

去中心化支付是元宇宙體驗(yàn)的重要一環(huán)。在虛擬空間中用加密貨幣支付數(shù)字商品比用真錢支付要方便得多。加密貨幣可以在用戶加入的所有不同虛擬世界中發(fā)揮作用,在今天,一些虛擬世界也證明了這種商業(yè)模式的可持續(xù)性。Decentraland就是一個很好的例子,它是一個 3D 虛擬世界平臺,提供自己專有的貨幣,名為 Mana。

5.為增強(qiáng)現(xiàn)實(shí)和虛擬現(xiàn)實(shí)設(shè)計(jì) 

從技術(shù)角度來看,AR 和 VR 設(shè)備的質(zhì)量在未來一定會大幅提升,它們是用戶進(jìn)入元宇宙的硬件基礎(chǔ)。在過去,AR技術(shù)被認(rèn)為是邁向虛擬世界的第一步,但隨著技術(shù)不斷進(jìn)步,我們逐漸發(fā)現(xiàn)虛擬世界的真正力量將通過 VR 展現(xiàn)??梢灶A(yù)見的是 VR 技術(shù)在未來會更加吸引用戶,因?yàn)樗梢詣?chuàng)造一種逼真的感覺,一種讓用戶沉浸在交互中的體驗(yàn)。

以下幾個方面值得在設(shè)計(jì)時重點(diǎn)關(guān)注:

環(huán)境理解

理解物理環(huán)境中的用戶。景深和透視是物理環(huán)境的兩大特征,因此,VR 設(shè)備中的傳感器將能夠映射用戶周圍的世界,以便設(shè)計(jì)師可以在創(chuàng)造沉浸虛擬世界的同時保證用戶的安全。

真實(shí)的面部表情設(shè)計(jì)

眾所周知,人類之間的互動很多都是不依賴語言的,面部表情可以幫助人們傳達(dá)感受,因此,數(shù)字形象要像真實(shí)的人與人交互一樣傳達(dá)人類情感。

VR手勢設(shè)計(jì)標(biāo)準(zhǔn)化(頭部、手部和身體移動)

設(shè)計(jì)標(biāo)準(zhǔn)化將會制定一些通用交互模型,這樣當(dāng)設(shè)計(jì)師為元宇宙制作產(chǎn)品時,用戶將更輕松地學(xué)習(xí)如何使用它。

聲音交互

以聲音為基礎(chǔ)的交互很可能成為虛擬世界中的一個重要組成部分。對用戶來說,在私密環(huán)境中用語音進(jìn)行交互要比在公開場合更加舒適。

6.隱私保護(hù) 

在元宇宙中,侵犯在線隱私的行為會讓用戶感到被冒犯,所以從元宇宙設(shè)計(jì)第一天開始,隱私、安全和數(shù)據(jù)保護(hù)就應(yīng)該是重要的組成部分。

不僅如此,防止網(wǎng)絡(luò)霸凌也應(yīng)是元宇宙設(shè)計(jì)中不能忽視的一部分,用戶應(yīng)該有自由決定他們在何時想和誰在一起的權(quán)利(或一個人獨(dú)處,或去公司上班),并將那些對他們產(chǎn)生負(fù)面影響的人從他們的社交圈中移除。產(chǎn)品設(shè)計(jì)師需要與數(shù)據(jù)安全專家以及行為心理學(xué)家密切合作,以創(chuàng)建更安全和人性化的服務(wù)。

7.更少的干擾性廣告 

談到元宇宙,或許我們腦中會想到一些基于廣告曝光的商業(yè)模式,因?yàn)樵谠钪嬷兄踩霃V告將會是一件收入頗豐的生意,然而事實(shí)上,將廣告植入虛擬世界需要謹(jǐn)慎、謹(jǐn)慎再謹(jǐn)慎。

想象一下,在你未來生活的元宇宙中,一些公司為了能更有針對性的為你提供服務(wù),會跟蹤你并記錄下你的一舉一動。這是一件讓人非??謶值氖拢m然元宇宙的創(chuàng)建者可能并不會這么做,但我們必須意識到這樣做的風(fēng)險(xiǎn)非常高,特別對于那些把廣告曝光作為商業(yè)模式重點(diǎn)一環(huán)的商業(yè)巨頭來說(比如Meta),需要非常嚴(yán)肅的去思考是否可以接受過度廣告植入帶來的風(fēng)險(xiǎn)。


三、元宇宙設(shè)計(jì)工具

這里列舉了5個設(shè)計(jì)工具,對于想要設(shè)計(jì)元宇宙的設(shè)計(jì)師來說,這些工具都應(yīng)該派上用場。

1. 故事板 

故事板是來自電影行業(yè)的創(chuàng)作工具。它是一個圖形組織板,其中包含按順序顯示的動作場景的圖片,這些能讓工作人員更容易理解場景的性質(zhì)和演員必須傳達(dá)的情感。就像拍攝電影一樣,如果沒有好的故事講述,就不可能創(chuàng)造出身臨其境的虛擬世界體驗(yàn)。



故事版案例。圖片來自NN Group.


2. 3D建模工具 

元宇宙是一個天然的3D世界,這個世界越真實(shí),用戶越能夠進(jìn)入沉浸式的體驗(yàn)。對于想要創(chuàng)造元宇宙體驗(yàn)的設(shè)計(jì)師來說,最好能成為3D建模大師,熟練使用如Blender、Cinema 4D、Houdini等建模工具。



使用 Blender 創(chuàng)建房屋模型。圖片來自Blender.

3. 社會學(xué) 

設(shè)計(jì)師如果只通過搭建一些高質(zhì)量的3D物體(例如房子、汽車和其他人類環(huán)境屬性)就想創(chuàng)造出一個元宇宙,那幾乎是不可能的。讓元宇宙看起來和現(xiàn)實(shí)世界一樣真實(shí)的關(guān)鍵因素是如何能讓設(shè)計(jì)的物體之間的相互協(xié)作達(dá)到和諧統(tǒng)一。為了設(shè)計(jì)出一個擁有健康社會的的虛擬世界,設(shè)計(jì)師應(yīng)該了解現(xiàn)實(shí)世界是如何運(yùn)作的,這就是產(chǎn)品創(chuàng)造者必須學(xué)習(xí)人類學(xué)、建筑學(xué)和城市設(shè)計(jì)的原因。

諸如用戶訪談、問卷、非參與性觀察研究(在不知道被觀察者的情況下進(jìn)行觀察)等方法對于創(chuàng)建好的用戶體驗(yàn)來說非常重要。

4. 交互原型 

創(chuàng)造真實(shí)的交互對設(shè)計(jì)師來說是首要目標(biāo)。在設(shè)計(jì)互動體驗(yàn)時,很重要的一點(diǎn)是不要白費(fèi)力去做重復(fù)的事情,使用一些在過往設(shè)計(jì)中驗(yàn)證過的經(jīng)驗(yàn)和方法會更有效。

現(xiàn)在,有一些工具可以幫助我們做到這一點(diǎn),其中很重要的一個工具是“交互SDK模塊”(Interaction SDK),這是一個模塊化組件庫,元宇宙設(shè)計(jì)師可以在其產(chǎn)品中使用。在這個組件庫中有很多元宇宙會用到的的基本框架和對象,比如基礎(chǔ)手部控制模型、距離計(jì)算器、手勢檢測等等。



使用交互 SDK 創(chuàng)建的虛擬手部和控件。圖片來自Macprotricks.

5. 情景研究 

對于設(shè)計(jì)師來說,僅僅將一個產(chǎn)品設(shè)計(jì)出來是遠(yuǎn)遠(yuǎn)不夠的,我們還需要對設(shè)計(jì)的產(chǎn)品不斷的進(jìn)行測試,看看它是否能為用戶提供出色的使用體驗(yàn)。情景研究是一個非常好的方法和技術(shù),這項(xiàng)技術(shù)可以幫助設(shè)計(jì)師直接了解虛擬世界中發(fā)生了什么,以及哪些設(shè)計(jì)領(lǐng)域需要改進(jìn)。通過沉浸在你所創(chuàng)造的體驗(yàn)中,你會看到它的優(yōu)點(diǎn)和缺點(diǎn)。

元宇宙代表了數(shù)字技術(shù)進(jìn)化歷程的下一個階段,最終元宇宙設(shè)計(jì)將融合人們的真實(shí)生活和虛擬生活。人們不僅會在元宇宙中互動,還會在元宇宙中生活。目前,我們正處于這一旅程的早期階段,它為產(chǎn)品設(shè)計(jì)師提供了一個塑造互聯(lián)網(wǎng)未來的絕佳機(jī)會。

作者:Nick Babich    來源:站酷

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話,可以進(jìn)入一起成長學(xué)習(xí),請加藍(lán)小助,微信號:ben_lanlan,報(bào)下信息,藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請與我們聯(lián)系01063334945。

分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)www.bouu.cn )是一家專注而深入的界面設(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ì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司




設(shè)計(jì)師應(yīng)該掌握的需求分析方法

純純

所謂的“產(chǎn)品設(shè)計(jì)導(dǎo)向”指的是產(chǎn)品建設(shè)之前要圍繞著產(chǎn)品的立項(xiàng)、目標(biāo)用戶等等去規(guī)劃產(chǎn)品的功能點(diǎn),明確產(chǎn)品核心價值;在產(chǎn)品上線之后,通過數(shù)據(jù)分析和功能反饋,發(fā)掘更多的需求,去規(guī)劃下一步的”功能增刪改“,將產(chǎn)品的設(shè)計(jì)方向引導(dǎo)到更正確的位置,提升用戶留存率,延伸挖掘出產(chǎn)品更多的可能。


另一方面,從現(xiàn)在的設(shè)計(jì)環(huán)境而言,對所有的設(shè)計(jì)師既是機(jī)遇,又是挑戰(zhàn)。大量的UI專用工具(Sketch、Principle、Flinto、Origami等)的出現(xiàn),大大提升了產(chǎn)品前期的UI設(shè)計(jì)師的工作效率,所以現(xiàn)在“全鏈路思維”已經(jīng)從剛出現(xiàn)時的“概念化思維”變成了“主流化趨勢”。所以現(xiàn)在很多的UI設(shè)計(jì)師在站酷發(fā)布自己的作品的時候大部分都喜歡加入一些產(chǎn)品前期分析(功能設(shè)計(jì)、用戶畫像等)內(nèi)容。


但是很多設(shè)計(jì)師的分析環(huán)節(jié)明顯就是為了證明“有”而去“做”,缺少了真正的分析部分。給我印象很深刻的就是之前看到的一個二手房買賣的UI設(shè)計(jì)作品,典型用戶畫像里主流用戶是:“男、七十歲、目標(biāo)是給自己的兒子購買婚房”。實(shí)際上這種所謂的產(chǎn)品分析流程對于設(shè)計(jì)師而言是沒有任何幫助的,只是從形式上走個過場罷了。


本篇主要講述產(chǎn)品設(shè)計(jì)中的一些分析方法,范圍從“個人練習(xí)式設(shè)計(jì)”到“團(tuán)隊(duì)合作式運(yùn)作”,知識點(diǎn)大概有:空雨傘思維、文章大概六千字左右,建議閱讀時間:15分鐘。適讀人群:初級產(chǎn)品經(jīng)理、交互設(shè)計(jì)師、在工作中職能范圍與產(chǎn)品規(guī)劃有關(guān)的UI設(shè)計(jì)師、想要學(xué)習(xí)產(chǎn)品設(shè)計(jì)的新人(文中含有大量配圖用來輔助觀點(diǎn),因此建議PC端閱讀)。



產(chǎn)品運(yùn)作流程概覽

我遇到的比較普遍的問題是:很多設(shè)計(jì)師對于自己所在公司產(chǎn)品的運(yùn)作流程并不是十分了解。這樣會在你實(shí)際配合工作的時候感到無從下手。有的甚至于同一家公司的不同設(shè)計(jì)師對于產(chǎn)品設(shè)計(jì)方面的理解也不盡然相同。所以說要從淺到深的學(xué)習(xí)產(chǎn)品功能設(shè)計(jì),就必須先理清當(dāng)前工作的常規(guī)流程,例如常見的產(chǎn)品運(yùn)作流程(如下圖)

上面是一個相對規(guī)范的產(chǎn)品開發(fā)流程,實(shí)際上你在看到上述流程圖后,對照自己公司的情況,會發(fā)現(xiàn)有一些崗位上的缺失。出現(xiàn)這種情況最大的原因是因?yàn)楹芏喙緯岩恍┞毮苓M(jìn)行合并用來節(jié)省成本,現(xiàn)在仍然有大多數(shù)的公司并沒有交互設(shè)計(jì)師的崗位,但是交互設(shè)計(jì)的職能不代表沒有,而是被產(chǎn)品經(jīng)理或者視覺設(shè)計(jì)師兼任了。你需要明確團(tuán)隊(duì)中各個人負(fù)責(zé)的職能部分,才能更好地提升溝通效率。



個人思考方法(一):空·雨·傘

上面講到了設(shè)計(jì)師的“全鏈路思維”現(xiàn)在已經(jīng)成為了一種主流的觀點(diǎn),將來的前期的鐵三角“產(chǎn)品經(jīng)理、交互設(shè)計(jì)師、UI設(shè)計(jì)師”很有可能結(jié)合變成是“交互視覺二合一”甚至是“產(chǎn)品交互視覺三合一”的狀態(tài)。所以現(xiàn)在很多的設(shè)計(jì)師開始嘗試自己去DIY一個需求或者做ReDesign這樣的設(shè)計(jì),希望可以通過這樣的方式完成自己跨領(lǐng)域能力的一個積累。但是當(dāng)他們打開電腦的時候,大部分人會發(fā)現(xiàn)自己突然變得沒有思路,從產(chǎn)品方向點(diǎn)確定到產(chǎn)品視覺產(chǎn)出之間出現(xiàn)了斷層。

其實(shí)做過設(shè)計(jì)練習(xí)的人都知道,由于一些現(xiàn)實(shí)場景的不同,一些人在做設(shè)計(jì)練習(xí)的過程中會受到很多條件的局限,尤其是在孤立無援的情況下,你面對自己的練習(xí)作品往往會無從下手。當(dāng)然,不同的場景下有不同的分析方法。

在團(tuán)隊(duì)協(xié)作的時候,分析方法要全面、嚴(yán)謹(jǐn)、反復(fù)推敲。

在個人練習(xí)的時候,分析方法要高效、直接、簡化不必要的流程,以培養(yǎng)自己的分析能力為主,在這種場景下,空·雨·傘就是一個非常好的思考提升方法(如下圖)

簡單概述“空雨傘”思考方式:觀察(事實(shí)) → 思考(內(nèi)在) → 產(chǎn)出(解決方案)

運(yùn)用在設(shè)計(jì)上就是:發(fā)現(xiàn)痛點(diǎn) → 思考原因 → 提出解決方案?!翱铡び辍恪币?yàn)楹唵?、成本低、易上手,可以作為設(shè)計(jì)入門培養(yǎng)思考能力的一種方法,但是在使用空·雨·傘的分析方法時需要結(jié)合一定的具體調(diào)研(或者輕量級的用戶研究)相配合,不然又會變成一味的“拍腦門兒”式的主觀臆測,對于分析能力提升沒有絲毫幫助。



個人思考方法(二):邏輯樹

邏輯樹又稱問題樹、演繹樹或分解樹等。很多咨詢公司分析問題最常使用的工具就是“邏輯樹”。邏輯樹是將問題的所有子問題分層羅列,從最高層開始,并逐步向下擴(kuò)展。


簡單來形容一下邏輯樹:把一個已知問題當(dāng)成樹干,然后開始考慮這個問題和哪些相關(guān)問題或者子任務(wù)有關(guān)。每想到一點(diǎn),就給這個問題(也就是樹干)加一個“樹枝”,并標(biāo)明這個“樹枝”代表什么問題。一個大的“樹枝”上還可以有小的“樹枝”,如此類推,找出問題的所有相關(guān)聯(lián)項(xiàng)目。邏輯樹主要是幫助你理清自己的思路,不進(jìn)行重復(fù)和無關(guān)的思考。


如果你要運(yùn)用邏輯樹方法去分析產(chǎn)品,主要的一點(diǎn)在于學(xué)會細(xì)化拆解目標(biāo)。


舉個例子:

在2017年我創(chuàng)建了自己的個人站酷號,但在發(fā)布了一部分的文章之后,我開始意識到文章的可讀性始終不高。在這個時候我們就可以按照邏輯樹的分析方法去進(jìn)行拆解分析,去發(fā)現(xiàn)自己提升的空間。

如上圖,就是邏輯樹最簡單的一種場景應(yīng)用。確定目標(biāo)后向下進(jìn)行拆分,拆分出三級邏輯樹是比較容易的,甚至你可以沿著已經(jīng)列出來的大綱繼續(xù)深入細(xì)化,再拆分出更細(xì)更深層的各種提升點(diǎn)。


邏輯樹分析法在個人作品中的主要作用是發(fā)散思維;在實(shí)際工作中的作用則是針對特定問題進(jìn)行分析,理清思路??偠灾?,是讓你在分析的過程中更加有條理,避免重復(fù)思考。但是邏輯樹分析也有一個缺陷,就是在邏輯樹分析的過程中,根據(jù)現(xiàn)象分裂出子層級的步驟十分依賴你的認(rèn)知能力,就如同做設(shè)計(jì)一樣,當(dāng)你感覺界面的視覺出現(xiàn)出題的時候,需要利用你學(xué)出來的知識去進(jìn)行視覺優(yōu)化,如果你對設(shè)計(jì)理論知識掌握程度并不是很強(qiáng),那就不能采用邏輯樹分析法解決問題。


總而言之,邏輯樹分析法適用于對問題研究十分深入的情況下,如果你對當(dāng)前的環(huán)境認(rèn)知并不充足,那么就很容易走入歪路,跑偏主題。



實(shí)際項(xiàng)目:用戶調(diào)研訪談

在一些實(shí)際項(xiàng)目中,用戶調(diào)研是需求來源的主要渠道。提起用戶調(diào)研,很多人會覺得這不屬于UI設(shè)計(jì)師應(yīng)該做的事情。其實(shí)行業(yè)逐漸規(guī)范的現(xiàn)在,用戶調(diào)研、分析需求的能力也成為了衡量UI設(shè)計(jì)師能力的一個標(biāo)準(zhǔn)。現(xiàn)在的互聯(lián)網(wǎng)產(chǎn)品種類繁多,從早期只做主流行業(yè),到現(xiàn)在基本所有的冷門行業(yè)都有涉及;作為設(shè)計(jì)者而言,大多數(shù)設(shè)計(jì)師已經(jīng)開始在設(shè)計(jì)的過程中心有余而力不足。


造成這種現(xiàn)象的主要原因?yàn)槭且驗(yàn)殡S著行業(yè)的細(xì)分以及范圍的擴(kuò)大,我們距離用戶的真實(shí)場景偏離太遠(yuǎn),導(dǎo)致我們在設(shè)計(jì)中很容易理所當(dāng)然的賦予給用戶大量無用的東西。偏離了用戶所需要的主要軌道。因此對于很多的設(shè)計(jì)師來說,學(xué)會了解用戶以及分析需求成為了十分重要的事情。


然后整理了一下我在用戶調(diào)研過程中的幾點(diǎn)認(rèn)知:


第一,保證調(diào)研的目標(biāo)的準(zhǔn)確性

我們需要明確,我們希望通過調(diào)研達(dá)到怎樣的目的?(例如:提升部分頁面轉(zhuǎn)化率、收集用戶對于產(chǎn)品不滿意的地方、通過用戶使用產(chǎn)品發(fā)現(xiàn)用戶潛在的痛點(diǎn))

第二,有目標(biāo)的選擇用戶

一般來講互聯(lián)網(wǎng)公司都有收集客戶反饋的部門,他們掌握著所有客戶的反饋意見。我們在選擇調(diào)研用戶的時候,最好可以根據(jù)我們在調(diào)研行動確立初期擬定的目標(biāo)去選擇調(diào)研目標(biāo)

第三,適當(dāng)?shù)臏?zhǔn)備調(diào)研內(nèi)容

當(dāng)我們確定了調(diào)研目標(biāo)和調(diào)研用戶之后,就可以根據(jù)現(xiàn)有狀況去準(zhǔn)備調(diào)研內(nèi)容。調(diào)研內(nèi)容一定是要在事先擬定好(開始調(diào)研之后根據(jù)實(shí)際情況進(jìn)行改動)

一般市場調(diào)研細(xì)分的維度通常有四種,分別是:地理、人口統(tǒng)計(jì)、行為、心理統(tǒng)計(jì)。運(yùn)用在互聯(lián)網(wǎng)產(chǎn)品里面就更加的復(fù)雜。以B端產(chǎn)品為例:我們在調(diào)研中可能要把調(diào)研對象分為客戶(老板)和用戶(業(yè)務(wù)員)去進(jìn)行不同情況的信息跟蹤,而且根據(jù)產(chǎn)品的屬性不同,需要提前預(yù)設(shè)好調(diào)研內(nèi)容的側(cè)重


第四,調(diào)研過程中

在調(diào)研過程中,我們可以適當(dāng)結(jié)合上文講述到的“空雨傘”方式去進(jìn)行調(diào)研觀察,收集用戶需求(如下圖)

在調(diào)研過程中,除了思考之外更多需要注意的是對用戶洞察的記錄與剖析,在記錄用戶行為的過程中,需要遵循“不干擾”、“不引導(dǎo)”、“記錄客觀”等原則,這樣可以才可以保持用戶行為記錄的準(zhǔn)確性。


第五,獲取反饋整理結(jié)果

在調(diào)研結(jié)束后,我們應(yīng)該產(chǎn)出一份完整的調(diào)查報(bào)告,按照本次調(diào)研預(yù)設(shè)目標(biāo)進(jìn)行整理,規(guī)劃出合適的大綱,把調(diào)研收獲轉(zhuǎn)化為明確的產(chǎn)出,產(chǎn)出形式最好以報(bào)告(PPT、PDF),而不是口述或者微信消息,這兩者之間差別很大~



需求歸類:KANO模型

雖然說現(xiàn)在很多的公司都開始建立了用戶體驗(yàn)類的部門,但是因?yàn)橛脩粽{(diào)研或者體驗(yàn)類的工作很難去量化產(chǎn)出。而且在大部分情況下當(dāng)產(chǎn)品按照用戶調(diào)研反饋的結(jié)果進(jìn)行調(diào)整后,往往很少會出現(xiàn)我們幻想中的“逆襲”、“口碑急劇上升”,有時還會因?yàn)槭艿揭徊糠钟脩粲^點(diǎn)的帶偏導(dǎo)致產(chǎn)品口碑下降,用戶表示不滿;又或者會出現(xiàn)需求級規(guī)劃混亂,重要功能反而后上線這種尷尬的情況。


所以這驅(qū)使著團(tuán)隊(duì)中負(fù)擔(dān)“用研用體”職能的角色對用戶需求進(jìn)行正確的分類和排序

這個時候就可以運(yùn)用到卡諾模型(KANO模型)。

KANO 模型是東京理工大學(xué)教授狩野紀(jì)昭(Noriaki Kano)發(fā)明的對用戶需求分類和優(yōu)先排序的有用工具,以分析用戶需求對用戶滿意的影響為基礎(chǔ),體現(xiàn)了產(chǎn)品性能和用戶滿意之間的非線性關(guān)系。根據(jù)不同類型的質(zhì)量特性與用戶滿意度之間的關(guān)系,狩野教授將產(chǎn)品服務(wù)的質(zhì)量特性分為五類:


1.基本型需求

用戶對企業(yè)提供的產(chǎn)品或服務(wù)因素的基本要求。是用戶認(rèn)為產(chǎn)品“必須有”的屬性或功能。當(dāng)其特性不充足(不滿足顧客需求)時,用戶很不滿意;當(dāng)其特性充足(滿足用戶需求)時,用戶也可能不會因而表現(xiàn)出滿意。對于基本型需求,即使超過了用戶的期望,但用戶充其量達(dá)到滿意,不會對此表現(xiàn)出更多的好感。

例如對于網(wǎng)盤類產(chǎn)品來說,用戶的基本需求是有快速的上傳和下載。如果下載速度達(dá)不到用戶的期望,則用戶滿意度將一落千丈。對于顧客而言,這些需求是必須滿足的,理所當(dāng)然的。對于這類需求,企業(yè)的做法應(yīng)該是注重不要在這方面失分,需要企業(yè)不斷地調(diào)查和了解顧客需求,并通過合適的方法在產(chǎn)品中體現(xiàn)這些要求。


2.期望型需求

提供該功能,用戶滿意度提高,如果不提供該功能,用戶會感覺到不滿。當(dāng)然在這里要補(bǔ)充一句,這里的需求并不都是我們整理出的主觀需求,也有可能是用戶在使用的過程中產(chǎn)生的客觀類需求,例如遇到不會的體驗(yàn),需求得到響應(yīng)時我們給的反饋

例如對于一些O2O類的產(chǎn)品,雖然做的都比較成熟,但是由于體量龐大的原因,偶爾也會受到糟糕體驗(yàn),用戶在受到糟糕的體驗(yàn)之后往往會期望能通過反饋得到心理上的安慰。例如攜程(旅程預(yù)計(jì)時間偏差)、美團(tuán)(酒店體驗(yàn)差)、餓了么(用餐體驗(yàn)差)等。在用戶遇到這種糟糕體驗(yàn)之后,期望能通過投訴建議獲得官方的反饋,那么官方把這種問題解決的越圓滿,用戶的滿意度也會隨之提高。

3.興奮型需求

又稱魅力型需求。指不會被用戶過分期望的需求。對于興奮型需求,隨著滿足用戶期望程度的增加,用戶滿意度也會急劇上升,但一旦得到滿足,即使表現(xiàn)并不完善,用戶表現(xiàn)出的滿意狀況則也是非常高的。反之,即使在期望不滿足時,用戶也不會因而表現(xiàn)出明顯的不滿意。


4.無差異型需求

不論提供與否,對用戶體驗(yàn)無影響。是質(zhì)量中既不好也不壞的方面,它們不會導(dǎo)致顧客滿意或不滿意。


5.反向型需求

用戶沒有這個需求,提供后用戶滿意度反而會下降。

按照kano模型分析可以對收集到的產(chǎn)品需求進(jìn)行分類,篩選掉一些不合理的需求。更好更有目的性的完成產(chǎn)品待辦清單的記錄。

作者:千夜Ryan_Vision    來源:站酷

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話,可以進(jìn)入一起成長學(xué)習(xí),請加藍(lán)小助,微信號:ben_lanlan,報(bào)下信息,藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請與我們聯(lián)系01063334945。

分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)www.bouu.cn )是一家專注而深入的界面設(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ì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司




光影和空氣,是完美排版的最后一塊拼圖

純純

咱一起來聊聊排版的問題:


NO.1


如果你看過我過往的文章,也許會對我的排版多少有點(diǎn)印象,夸張的大字,極強(qiáng)的對比,還有一些微妙的層級關(guān)系;坦誠的講,我的風(fēng)格揉雜了 2 種設(shè)計(jì)體系 —— 瑞士風(fēng)格 / 擬物風(fēng)格;


1.瑞士風(fēng)格

整潔、嚴(yán)謹(jǐn)、工整、理性化、實(shí)用的特征是瑞士平面設(shè)計(jì)的精神所在;這種一絲不茍,傳達(dá)準(zhǔn)確的風(fēng)格,即所謂瑞士國際主義風(fēng)格。簡單的說,由于 Swiss Design 這種風(fēng)格簡單明確,傳達(dá)功能準(zhǔn)確,因而很快得到世界范圍內(nèi)的普遍認(rèn)可,成為戰(zhàn)后影響最大的一種平面設(shè)計(jì)風(fēng)格,也是國際最流行的風(fēng)格,因此,又被稱為國際主義平面設(shè)計(jì)風(fēng)格;

簡單的說,瑞士的這種設(shè)計(jì)風(fēng)格典型的代表就是我們看到的雜志,其中有 3 個特點(diǎn):講究網(wǎng)格 / 非常理智的克制顏色的使用 / 層級關(guān)系;有趣的是,審美和潮流是循環(huán)的,隨著時代的發(fā)展,越來越多的app開始重新挖掘出來瑞士風(fēng)格并加以使用,比如我們iOS系統(tǒng)自帶的應(yīng)用們,Spotify:

年少的時候,我經(jīng)??粗@些個app會不禁的問,為什么在沒有一張圖片的情況下還能如此好看?這些年終于明白了前人良苦用心:文字是內(nèi)容,同樣也是構(gòu)成;是信息,同樣也是裝飾;簡單可以理解為,不管在平面還是網(wǎng)頁亦或者是UI界面,在沒有可用的裝飾下,信息本身要承擔(dān)起裝飾和傳達(dá)的雙重功能,這就是瑞士風(fēng)格的核心本質(zhì)。


2.擬物風(fēng)格

iOS是擬物的典型代表,網(wǎng)上對于這塊的講解已經(jīng)過于飽和了,我也沒必要贅述;那么這一趴,來聊聊對我產(chǎn)生深遠(yuǎn)影響的錘子科技吧。我第一次接觸到 smartisan OS 并沒有覺著多么驚艷,潛意識里只不過是覺著把 iOS 的圖標(biāo)畫的更漂亮了一點(diǎn)而已…

但當(dāng)我打開下圖這個頁面的時候,我意識到我對擬物的理解還是淺薄了,第一次被光影的層次震撼到:

通過光影塑造了一個三維空間,讓整個畫面豐富飽滿,也打破了我幼稚的設(shè)計(jì)觀,PS.不管錘子科技現(xiàn)在如何,我依然敬佩 Paco / 方遲 / 羅子雄的設(shè)計(jì)團(tuán)隊(duì)為這個行業(yè)做出的貢獻(xiàn),respect!

毫無保留的說,我的設(shè)計(jì)就是二者的融合,以 層次對比 作為核心理念。


NO.2

啰嗦了半天,趕緊進(jìn)入正題;如果你是一名產(chǎn)品體驗(yàn)設(shè)計(jì)師,一定聽說過 “奧卡姆剃刀” ,這個定律通常用在交互鏈路的設(shè)計(jì)上(意思就是在用戶路徑中沒必要的步驟,省了就完事了),“如無必要,勿增實(shí)體” 即簡單有效原理;


同樣,在嘈雜的視覺結(jié)構(gòu)里,畫面也需要奧卡姆剃刀,當(dāng)你在對畫面的飽和上困擾不已,并急于找到一些背景和紋理填充的時候,我建議你先冷靜一下…因?yàn)轫撁娴目仗撐幢厥切枰獙?shí)體化的東西來填充的;上文有說過以  “層次對比” 作為核心理念出發(fā),要區(qū)別于平面設(shè)計(jì),營造一個立體空間,所以先理一下畫面結(jié)構(gòu): 

通常來講,如果想要不平,把二維空間轉(zhuǎn)化成三維空間是必要的一步,需要在Z軸上下功夫;如果你恰巧也是一名攝影愛好者,可以想象下照相機(jī)的焦距和景深,工作原理是相同的,需要 前景 / 主體和背景 三個層次;當(dāng)然,虛實(shí)的對比對信息的呈現(xiàn)和層次的拉開是極其重要的,這里需要通過景深來控制效果,你可以通過 photoshop 濾鏡-模糊畫廊的“場景模糊”來做到:

另外,空間的感覺想要被突顯,那么“光影和空氣”的價值就可以無限放大了,按照如上所說的結(jié)構(gòu),把內(nèi)容和自然物質(zhì)擺進(jìn)去就好了,甚至可以做到舉一反三(比如不同顏色的氛圍,我就不展開了):

整個case下來,你會發(fā)現(xiàn)用光來聚焦在信息上,自然而然就形成了我們說所得 “信息優(yōu)先級”;有點(diǎn)時候空氣和光影的飽滿程度超乎你的想象,這種自然存在的物質(zhì)可以很好的幫助畫面分層,以達(dá)到填充的效果,并不是一定要依賴于實(shí)體化的裝飾。


對了,如果你跟我一樣閑著沒事干的話,借用 keynote 的動畫效果做一個吊炸天的動效,一定可以成為匯報(bào)場上最靚的崽( 注意:視頻有音樂)! 

NO.3

本來不打算再開一個章節(jié)說這個,但還是覺著很有必要再說下(我好糾結(jié)),作為PPT來講,ta的主要用途分為兩種:其一是給人看的,其二是給人講的;不管是哪種,盡可能的簡化文字,是對輸入者關(guān)愛;

以上圖為例(實(shí)名diss自己的作品),坦誠的講左邊的部分大多數(shù)觀者是不會有心思來看的,按照視覺系統(tǒng)的處理,這部分就會被當(dāng)成一個“面”而被忽略掉,這種情況下右邊顯得有力很多,也能幫助觀者聚焦信息,所以還是那句話,能不寫的就別寫,能少些的別多寫,保持信息的密度也是設(shè)計(jì)師必要的職責(zé)之一。

作者:負(fù)能量的補(bǔ)給站    來源:站酷

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話,可以進(jìn)入一起成長學(xué)習(xí),請加藍(lán)小助,微信號:ben_lanlan,報(bào)下信息,藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請與我們聯(lián)系01063334945。

分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)www.bouu.cn )是一家專注而深入的界面設(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ì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司




視覺層面的三維解析

純純

界面設(shè)計(jì)是一個很龐大的體系,具有很多原則,比如輕量、容錯、清晰等等,其中包含了交互層面以及視覺層面等,今天我想單獨(dú)把視覺剝離出來,來講一講我對界面設(shè)計(jì)“視覺層面”的理解與認(rèn)知。


在我看來,界面設(shè)計(jì)的視覺層面主要可以分為三個維度來解析:信息傳遞、視覺美化、創(chuàng)意創(chuàng)新。


信息傳遞是讓用戶看的明白,快速清晰的獲取信息;

視覺美化是讓用戶看的舒服,讓界面足夠美觀;

創(chuàng)新創(chuàng)意是讓用戶看的驚喜,看到一些不一樣的創(chuàng)意點(diǎn)。


如下圖:



三個維度的目標(biāo)如何實(shí)現(xiàn)呢?我提取了以下三個關(guān)鍵詞:



清晰、和諧、獨(dú)特是我們要達(dá)成的目標(biāo),達(dá)成目標(biāo)一定會有一些原理所在,而有了原理就會有具體的執(zhí)行方法,所以后面的每一個知識點(diǎn),我都會按照“設(shè)計(jì)目標(biāo)-執(zhí)行原理-執(zhí)行方法”的邏輯給大家講解,大綱如下:


1 清晰 

1.1清晰-降噪-容器整合

1.2清晰-聚焦-局部放大


2 和諧

2.1 和諧-呼應(yīng)-顏色呼應(yīng)

2.2 和諧-節(jié)奏-變化對比

2.3 和諧-飽滿-負(fù)形縮減


3 獨(dú)特

3.1 獨(dú)特-品牌延展-IP形象結(jié)合

3.2 獨(dú)特-事物本意-事物圖形化



1.清晰 

1.1清晰-降噪-容器整合  

設(shè)計(jì)目標(biāo):清晰

執(zhí)行原理:信息降噪

執(zhí)行方法:容器整合



當(dāng)界面信息過于分散時,會對用戶造成不必要的干擾,導(dǎo)致用戶產(chǎn)生疑惑甚至直接離開界面。


作為設(shè)計(jì)師,要做的就是對信息進(jìn)行整合,我們可以稱之為信息減噪,目的就是讓頁面更加清晰,減少干擾。


這里我經(jīng)常使用“容器整合法”來讓內(nèi)容更加清晰、聚焦。


當(dāng)分散的內(nèi)容裝進(jìn)一個“容器后”,就可以使內(nèi)容聚焦在容器當(dāng)中,讓信息更加規(guī)整。而卡片就是一個很好的“容器”。


實(shí)際案例:

在改版騰訊動漫個人中心的時候,頭部就存在信息分散不聚焦的問題,四個視覺觸點(diǎn)(綠色圈處)分散在四個角落,形成極大干擾。



這里我就采用了”卡片容器“的方法,將信息裝進(jìn)容器中,減少分散信息的干擾,使界面更加清晰、工整,效果如下:


 

現(xiàn)在很多產(chǎn)品都在使用卡片化的布局,尤其是在信息數(shù)量、層級較多的時候,更加需要有容器將其規(guī)整起來,這樣才會讓界面保持不亂!



1.2 清晰-聚焦-局部放大  

設(shè)計(jì)目標(biāo):清晰

執(zhí)行原理:聚焦

執(zhí)行方法:局部放大




我們在平時做需求的時候,經(jīng)常會遇到信息特別多,特別亂的時候,如果此時我們選擇什么都想突出,最后的結(jié)果一定適得其反,什么都突出部不了,這時候就需要我們選擇一些內(nèi)容來進(jìn)行局部放大,反而可以讓整體信息更加聚焦、清晰。


這種方法經(jīng)常用在有數(shù)字展示的頁面當(dāng)中,比如下面這種頁面:



再比如,下面這個模塊信息,如果”3“沒有放大,整體的信息會亂到你眼花繚亂,我們看下對比:



所以,大家在遇到有數(shù)字,且信息雜亂的時候,就可以采用局部放大的方式來使整體更加聚焦、清晰。



2.和諧  

2.1 和諧-呼應(yīng)-顏色呼應(yīng) 

設(shè)計(jì)目標(biāo):和諧

執(zhí)行原理:呼應(yīng)

執(zhí)行方法:以顏色呼應(yīng)為例


 

很多時候我們會覺得自己做的東西很不和諧,其中一個很重要的原因就是因?yàn)轫撁嬷袥]有貫穿的元素,也就是沒有呼應(yīng),很常用的一個呼應(yīng)的方法就是顏色呼應(yīng)。


例如這個畫面總看起來不夠和諧,你會覺得綠色很突兀,就是因?yàn)轭伾蠜]有呼應(yīng):



而一旦你想辦法,讓綠色“事出有因”,比如取自眼鏡的顏色:



那么,突兀的問題解決了,和諧的目標(biāo)也就實(shí)現(xiàn)了。

而剛才那個人中心的界面:



我們會發(fā)現(xiàn),圖標(biāo)的顏色也是取自背景色,所以整體看起來才會如此和諧。


除了顏色呼應(yīng),還有很多呼應(yīng)的方式,比如圖形、圖標(biāo)風(fēng)格等等,這里就不再舉例了。



2.2 和諧-節(jié)奏感-對比變化 

設(shè)計(jì)目標(biāo):和諧

執(zhí)行原理:節(jié)奏感

執(zhí)行方法:對比變化



對于音樂,節(jié)奏感是非常重要的,如果一段音樂一直是一個頻率,那可能也算不上音樂了。


界面也是一樣的,節(jié)奏感是讓頁面變得“和諧”很重要的因素之一,如何做到呢?


我們在展示文字列表的時候,你覺得下面兩種哪個更舒服些呢?



我猜你會覺得第二個舒服一些,因?yàn)樗凶兓?,有?jié)奏感,所以它和諧、舒適。


我們會發(fā)現(xiàn)很多產(chǎn)品首頁帶有封面圖的列表都有很多種排法,例如1帶多,1x2,2x2,2x3等等:



就是為了防止每個模塊過于重復(fù),如果每個模塊都是每排兩張封面,一直下來:



看起來會非常乏味。


2.3  和諧-飽滿-負(fù)形縮減 

設(shè)計(jì)目標(biāo):和諧

執(zhí)行原理:飽滿

執(zhí)行方法:負(fù)形縮減



在做圖標(biāo)或者字體的時候,經(jīng)常要講一個原則就是“飽滿”,界面上每個“不能拆分的元素”都需要盡量做到飽滿,比如圖標(biāo),再比如下面這個信息組件:



正文就屬于不能拆分的單一原子,大家可能會問,這種信息不就是方方正正的一個信息塊嗎,怎么會不飽滿呢,比如行間距過大:



再比如,我在優(yōu)化騰訊動漫信息流的時候,發(fā)現(xiàn)正文出現(xiàn)的表情遠(yuǎn)遠(yuǎn)大于文字,如下圖:



表情一旦出現(xiàn),就會造成大量空隙(負(fù)形過大),導(dǎo)致整體不夠飽滿、和諧。

我們可以看下其他產(chǎn)品,表情和文字幾乎都是一樣的大小,他們都會盡量縮小負(fù)形空間(也就是空隙小大):



在這樣的原則之下,優(yōu)化后的效果如下:



以上是關(guān)于和諧的幾點(diǎn)方法。


3.獨(dú)特 

如果你的界面做到了清晰、和諧,在視覺層面就已經(jīng)算是及格了,如果還能加上一點(diǎn)小創(chuàng)意,就可以讓人眼前一亮。

如何能夠做到獨(dú)特?可以從兩方面出發(fā),1是品牌,2是內(nèi)容本身含義。


3.1獨(dú)特-品牌延展-吉祥物結(jié)合  

設(shè)計(jì)目標(biāo):獨(dú)特

執(zhí)行原理:品牌延展

執(zhí)行方法:IP形象結(jié)合



從品牌出發(fā),可以有很多方向,比如logo,圖形,品牌吉祥物等,下面以品牌吉祥物為例:

在做小說閱讀器的時候,有一個設(shè)置選項(xiàng)是選擇文字的背景顏色,選擇控件是圓形,而品牌形象也偏圓形,此時就可以將圓形控件與形象相互結(jié)合:



但是選擇控件有兩種狀態(tài),為了更加生動,就讓給形象正面面對你的時候作為選擇狀態(tài),而轉(zhuǎn)過身作為非選擇狀態(tài),大概效果如下:



此創(chuàng)意已在騰訊動漫小說落地實(shí)現(xiàn)。


3.2 獨(dú)特-事物本意延展-事物圖形化 

設(shè)計(jì)目標(biāo):獨(dú)特

執(zhí)行原理:事物本意延展

執(zhí)行方法:事物圖形化



除了品牌,還可以根據(jù)事物本身的意思來延展圖形,比如日間夜間模式的切換按鈕,男女性別的切換按鈕,都可以利用事物本身的含義來延展圖形設(shè)計(jì):



此創(chuàng)意已在騰訊動漫個人中心模塊落地。


再比如,彈幕的展示方式,就可以聯(lián)想到電視機(jī),再把電視機(jī)圖形化,如下圖:


這里需要注意下,有時候如果圖形過于普通,可以配合動效來增加獨(dú)特性,但一定要注意開發(fā)成本。

作者:黑澤雙熾    來源:站酷

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話,可以進(jìn)入一起成長學(xué)習(xí),請加藍(lán)小助,微信號:ben_lanlan,報(bào)下信息,藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請與我們聯(lián)系01063334945。

分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)www.bouu.cn )是一家專注而深入的界面設(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ì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司



靈動島,是創(chuàng)新還是妥協(xié)?

博博

2022蘋果秋季新品發(fā)布會,最大的亮點(diǎn)是iPhone 14 Pro系列一改之前「劉?!乖O(shè)計(jì),首次采用了「藥丸」挖孔屏。

01

什么是靈動島(Dynamic island)

2022蘋果秋季新品發(fā)布會,備受關(guān)注的新一代iPhone如期而至,此次發(fā)布會最大的亮點(diǎn)是iPhone 14 Pro系列一改之前「劉海」設(shè)計(jì),首次采用了「藥丸」挖孔屏。雖然「藥丸」在安卓陣營中并不是什么新鮮玩意,但一向以創(chuàng)新著稱的蘋果還是玩出了不一樣的花樣,帶來了全新的交互方式,模糊了硬件和軟件的界限,通過實(shí)時變化顯示重要的提醒、通知以及簡單的功能操作,蘋果把這一創(chuàng)新稱之為靈動島(Dynamic island)。



02

靈動島能做什么 / 不能做什么

靈動島其實(shí)可以簡單的理解為基于前置攝像頭區(qū)域拓展的消息通知和快捷操作的新交互方式。

來電

當(dāng)有來電時,靈動島會發(fā)生變化,并在后臺打電話時顯示通話時間和聲音波紋。



音樂

有點(diǎn)類似于鎖屏后的音樂功能操作,保留了基本的播放、暫停、前進(jìn)、后退等功能。



Airpods

連接AirPods后,AirPods的型號外觀和當(dāng)前電量會一起顯示。



導(dǎo)航

顯示導(dǎo)航方向和距離,并且能夠在適當(dāng)?shù)臅r候放大顯示更多導(dǎo)航信息。



Face ID

以前Face ID認(rèn)證會顯示在屏幕中間,現(xiàn)在集成于靈動島的擴(kuò)展功能之中。



充電

當(dāng)充電時,會顯示充電的狀態(tài)以及當(dāng)前電量百分比。



當(dāng)然,目前除了官方展示的這些功能以外,還會有更多的應(yīng)用方式,在此不一一列舉。但靈動島也并不是萬能的,例如會存在以下的局限性:

重度使用場景

從官方給出的樣例來看,靈動島更多的是承擔(dān)了消息通知和提醒的作用,并不適用于重度使用和復(fù)雜交互等場景,例如消息聊天、刷短視頻、買賣交易等等。

過于復(fù)雜的圖形

受限于前置物理攝像頭,靈動島這個區(qū)域并不能顯示過于復(fù)雜的圖形,并需要避開攝像頭區(qū)域,因?yàn)樵搮^(qū)域是不能顯示任何圖像的。



軟硬件的邊界

靈動島的實(shí)際效果并不會像宣傳圖中那樣好,特別是在反光強(qiáng)烈的戶外。攝像頭的挖孔清晰可見的,即使是在黑色不發(fā)光的OLED屏幕上,軟件和硬件的界限還是能夠明顯區(qū)分。



03

對于靈動島的各方反應(yīng)

新事物的出現(xiàn),總會伴隨著支持和反對兩種聲音,此次靈動島的創(chuàng)新交互,自然也是褒貶不一,還需要經(jīng)受時間的考驗(yàn),因?yàn)榧词故翘O果這樣的公司也難免會犯錯,比如3D Touch、MacBook上的Touch bar等。

支持方認(rèn)為「靈動島是繼劉海屏之后的又一個成功設(shè)計(jì),甚至?xí)絼⒑F粒軞g迎」。

「靈動島的設(shè)計(jì)非常討巧,同時也給挖孔屏帶來了更多的想象空間」。

而反對方的理由也十分充分,首先是羅永浩第一時間發(fā)表了自己的觀點(diǎn),表面上是硬贊這個創(chuàng)新,但實(shí)則是諷刺了這樣多此一舉的方式,「先在臉上涂屎,然后再把屎的顏色調(diào)整得跟粉底差不多」



很多的輿論認(rèn)為,靈動島的創(chuàng)新是蘋果的一種無奈和妥協(xié),因?yàn)樽詮牡谝淮鷌Phone革新性的使用觸摸屏之后,十多年以來手機(jī)在工業(yè)設(shè)計(jì)方面并沒有太多的創(chuàng)新,大部分廠家是在屏幕分辨率,后蓋材質(zhì),攝像頭像素上面做文章,而蘋果作為一個工業(yè)設(shè)計(jì)創(chuàng)新的公司,也只能通過后置攝像頭模組的排列來維持每一代iPhone的變化。所以此次靈動島的創(chuàng)新,被認(rèn)為是工業(yè)設(shè)計(jì)乏力之后推動交互設(shè)計(jì)創(chuàng)新的無奈之舉。



但無論支持還是反對,前置攝像頭挖孔屏終究是一個過渡性的方案,最終會被全面屏所替代,而在這個過渡時期,很明顯蘋果的解決思路與國內(nèi)的絕大多數(shù)廠商都不一樣。

04

為什么國產(chǎn)手機(jī)不做靈動島

國產(chǎn)手機(jī)的前置攝像頭解決方案除了「劉海」以外,單攝像頭「圓孔」和雙攝像頭「藥丸」設(shè)計(jì)都已經(jīng)非常成熟,但是為什么經(jīng)過這么多年的迭代,依然沒有創(chuàng)新呢?

思維方式的差異

國產(chǎn)手機(jī)廠商的思路跟蘋果相反,希望盡可能的把前置攝像頭做得越小越好,甚至頭部的廠商嘗試探索升降攝像頭和屏下攝像頭的解決方案,目的就是為了把前置攝像頭隱藏。而蘋果的思路則是,既然現(xiàn)階段的技術(shù)沒有辦法把前置攝像頭隱藏,那么干脆就以此為基礎(chǔ),把這個區(qū)域運(yùn)用到極致。

缺少創(chuàng)新和引領(lǐng)者

似乎國內(nèi)的用戶更關(guān)心的是電量是否持久、屏幕刷新率高不高、拍照功能強(qiáng)不強(qiáng)大等問題,秉持著「人民需要什么,我們就造什么」的成功理念,各大廠商也開始在這些方面內(nèi)卷,從60Hz到120Hz刷新率,從千萬像素到一億像素,從萊卡加持到一英寸大底傳感器... 大家都在做從1到100的事情,而很少有關(guān)注從0到1,因?yàn)檫@樣做的性價比的確不高。



市場的接受和認(rèn)可程度

當(dāng)劉海屏第一次出現(xiàn)的時候,很多用戶都在吐槽,其中也包括很多蘋果的忠實(shí)用戶,寧愿買iphone8P也不愿意使用劉海屏的iPhone X。而經(jīng)過一兩年的審美教育以及國產(chǎn)手機(jī)的跟風(fēng)之后,才慢慢的被更多用戶所接受。因此國內(nèi)的廠商很難有信心通過一己之力去改變用戶習(xí)慣,并贏得市場的認(rèn)可。我相信,蘋果發(fā)布以后,各大廠商已經(jīng)在積極的學(xué)習(xí)和模仿,新的一輪內(nèi)卷即將拉開帷幕。

即便如此,國產(chǎn)廠商也并不是完全沒有在前置攝像頭的區(qū)域努力嘗試過。例如魅族曾經(jīng)在前置攝像頭上顯示當(dāng)前電量,稱之為「環(huán)形電量」,并盡可能的使其與狀態(tài)欄的其它信息融為一體。



榮耀的通話時間膠囊和自拍膠囊,都以前置攝像頭為基礎(chǔ)做延展,可以看得出在想盡辦法的規(guī)避前置攝像頭所帶來的不好體驗(yàn)。




雖然VIVO的原子通知不是圍繞前置攝像頭區(qū)域拓展,但從效果和想法來看,也與靈動島的概念比較類似。



HTC曾經(jīng)出過一款HTC U Ultra,當(dāng)然那時候還沒有全面屏的概念,所以HTC把它稱之為副屏,可以顯示消息通知、音樂播放操作、App快捷入口等等。



除此以外,幾乎所有劉海屏的手機(jī)都有把劉海隱藏起來的功能。



05

對設(shè)計(jì)師的影響

靈動島的出現(xiàn),對 iOS 原本通知、交互、卡片、彈窗等一系列交互規(guī)范進(jìn)行了解構(gòu)再重做,就好比「劉海屏」首次出現(xiàn)的時候,需要設(shè)計(jì)師對全新交互邏輯、卡片行為、動畫等重新適配。那么對于「靈動島」我想需要考慮的是這幾個方面。

新的交互方式

之所以叫靈動島,就是因?yàn)樗恰胳`動」的,擁有不同的狀態(tài)變化,以適應(yīng)各種功能提示和操作。設(shè)計(jì)師在使用這個功能的時候,需要充分考慮其場景,恰如其分的給予提醒而不給用戶帶來過多的打擾。

新的容器

不同形態(tài)的容器可以裝載不同的內(nèi)容,相比于以往常規(guī)的通知提醒,新的容器可以展示更多的信息,甚至是簡單的功能操作。在提出解決方案的時候,留給設(shè)計(jì)師更多的想象空間。

新的表達(dá)方式

靈動島相當(dāng)于一個永遠(yuǎn)在桌面上的島嶼,比任何App的優(yōu)先級都要高,所以會成為各個應(yīng)用的必爭之地,使用一種好的表達(dá)方式,必然能夠達(dá)到事半功倍的效果,因此也是考驗(yàn)設(shè)計(jì)師在寸土寸金的區(qū)域中,通過視覺化手段表達(dá)的能力。

最后,我想蘋果的初衷是為了更好的用戶體驗(yàn),消除一部分用戶對于挖孔屏的焦慮,如果能夠真正的站在用戶的角度、克制的去使用新的交互方式,會得到用戶的喜愛和市場的認(rèn)可。

我認(rèn)為靈動島既是一種創(chuàng)新也是一種妥協(xié),對于工業(yè)設(shè)計(jì)硬件創(chuàng)新乏力的妥協(xié),更是對技術(shù)發(fā)展的妥協(xié)。我也相信,真正的全面屏?xí)r代終究會到來,期待那個時候蘋果再一次給我們帶來真正意義上的,里程碑式的,創(chuàng)新!


作者:撿蘑菇的人


藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話,可以進(jìn)入一起成長學(xué)習(xí),請加微信ban_lanlan,報(bào)下信息,藍(lán)小助會請您入群。歡迎您加入噢~~

希望得到建議咨詢、商務(wù)合作,也請與我們聯(lián)系01063334945。 


分享此文一切功德,皆悉回向給文章原作者及眾讀者. 免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。 


藍(lán)藍(lán)設(shè)計(jì)www.bouu.cn )是一家專注而深入的界面設(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ì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司 

日歷

鏈接

個人資料

存檔