五十路熟妇高熟无码视频,无码簧片,亚洲大尺度无码无码专线,亚洲欧美日韩国产自偷,jizz无码在线观看视频,av色综合,99精品国产成人一区二区,亚洲粉嫩av一区二区黑人

首頁

設(shè)計(jì)不是改界面,而是讀懂情緒

清陽 設(shè)計(jì)思維

作為專注于體驗(yàn)設(shè)計(jì)的創(chuàng)新團(tuán)隊(duì),蘭亭妙微UI設(shè)計(jì)公司認(rèn)為:一個(gè)好的設(shè)計(jì),不僅要解決問題,更要撫慰情緒。我們從“不確定感”“壓力”和“關(guān)懷”三種典型情緒出發(fā),重新拆解航班狀態(tài)頁的設(shè)計(jì)邏輯,讓它不再是冰冷的工具,而是成為用戶旅程中善解人意的“情緒伙伴

你有沒有匆忙趕著去機(jī)場(chǎng)的經(jīng)歷?是否也在航班延誤時(shí)感到過焦慮? 這些情緒我們都曾體驗(yàn)過——但它們真的被運(yùn)用到設(shè)計(jì)中了嗎?

這一次,我們從“情緒”出發(fā),重新設(shè)計(jì)了航班狀態(tài)頁,分享 3 個(gè)由用戶情緒驅(qū)動(dòng)的設(shè)計(jì)決策。

01.情緒:不確定感

想象一下這個(gè)場(chǎng)景: 用戶可能正坐在趕往機(jī)場(chǎng)的火車上。一邊盯著時(shí)間,一邊核對(duì)路線,腦子里不斷計(jì)算著:“我來得及嗎?萬一航班有變化怎么辦?”

這是一種非常典型的不確定時(shí)刻。 不是恐慌,而是那種微妙卻持續(xù)的緊張——用戶此刻只想確認(rèn)一件事:一切是否仍在按計(jì)劃進(jìn)行。

我們的設(shè)計(jì)回應(yīng)在這個(gè)場(chǎng)景中,用戶最需要的,其實(shí)就是航班狀態(tài)信息本身的確定性反饋。 而最常見、也最容易引發(fā)誤解的狀態(tài)之一,就是航班“延誤”。

但延誤并不等于災(zāi)難——航班依然會(huì)飛,有時(shí)甚至反而給用戶多出了一點(diǎn)趕往機(jī)場(chǎng)的時(shí)間;起飛延誤,也不一定意味著落地延誤。

而在舊版本中,“延誤”與“取消”使用了同一種紅色。這種表達(dá),會(huì)在第一秒就把“延誤”解讀為一種危險(xiǎn)信號(hào),放大了用戶原本就存在的不確定感。

因此在改版中,我們將“延誤”的顏色調(diào)整為橙色:

  • 與“正常起飛”的綠色保持清晰區(qū)分
  • 在視覺上依然足夠顯眼
  • 但在情緒感知上更加克制
  • 也更符合“延誤”本身的真實(shí)嚴(yán)重程度

一個(gè)顏色的變化,背后對(duì)應(yīng)的其實(shí)是一種“風(fēng)險(xiǎn)等級(jí)可視化分級(jí)設(shè)計(jì)”,而不是簡單的視覺改動(dòng)——讓信息 既足夠被看見,又不會(huì)過度制造恐慌。

也正是在這種細(xì)微的情緒調(diào)節(jié)中,用戶的不確定感被悄悄降低了。

02.情緒:壓力

再換一個(gè)場(chǎng)景:用戶已經(jīng)站在值機(jī)柜臺(tái)前,一只手拿著護(hù)照,另一只手扶著行李,也許身旁還有一個(gè)小孩正拉著他們的衣角。外部刺激密集、節(jié)奏迅速,這是一種短暫但強(qiáng)烈的壓力時(shí)刻。

在這種狀態(tài)下,用戶最迫切的需求,往往不是“瀏覽”; 而是馬上確認(rèn)關(guān)鍵信息是否齊全——PNR 號(hào)、行李額度、值機(jī)所需的任何關(guān)鍵信息。 這不是一個(gè)可以讓用戶慢慢尋找入口的時(shí)刻。

他們只想快速、明確、毫不猶豫地進(jìn)入「我的預(yù)訂」。

我們的設(shè)計(jì)回應(yīng)

航班狀態(tài)頁,往往是用戶走到柜臺(tái)前最后查看一次的頁面。  因此在這個(gè)高壓場(chǎng)景中,“我的預(yù)訂”必須是第一時(shí)間被看到的入口。

在這次改版中,我們做了三件小調(diào)整:

  1. 讓入口更加明顯
  2. 增加圖標(biāo),方便用戶快速理解
  3. 文案從泛泛的“查看預(yù)訂(View bookings)”,調(diào)整為更貼近當(dāng)下心智模型的“我的預(yù)訂 My booking”

這些變化看起來都不大,但它們背后遵循的是同一個(gè)原則:在高壓力狀態(tài)下,為用戶提供「最短決策路徑(Shortest Decision Path)」。

當(dāng)用戶無需思考“我要點(diǎn)哪里”,而是第一眼就知道“這就是我要找的”,壓力,便在這一瞬間被有效削減了。

03.情緒:關(guān)懷(Care)

在旅程的后半段,節(jié)奏逐漸慢了下來。

用戶已經(jīng)通過安檢,買了一杯咖啡,坐下等待登機(jī)。

在這個(gè)相對(duì)放松的時(shí)刻,他們偶爾會(huì)再次打開航班狀態(tài)頁,然后看到一個(gè)按鈕:“分享航班狀態(tài)”。

也正是在這一瞬間,用戶的情緒,從“關(guān)注自己”,悄然轉(zhuǎn)向了“想到別人”。

他們會(huì)想到來接機(jī)的朋友或家人——

是否順利、是否會(huì)在機(jī)場(chǎng)焦急地反復(fù)確認(rèn)時(shí)間。 于是,一個(gè)非常真實(shí)、也非常普遍的念頭出現(xiàn)了:“我想讓對(duì)方更方便一點(diǎn)。”

我們的設(shè)計(jì)回應(yīng)

為了讓這種“關(guān)懷”更容易被表達(dá),我們?cè)谶@次改版中優(yōu)化了“航班分享”的入口: 讓用戶可以一鍵將航班信息發(fā)送給接機(jī)的人, 對(duì)方無需再向用戶反復(fù)確認(rèn),便能直接跟蹤航班的實(shí)時(shí)動(dòng)態(tài)。

這不是一個(gè)效率型功能,而是一個(gè)典型的“情緒外溢(Emotional Spillover)”場(chǎng)景——用戶所感知到的安心,被自然地傳遞給了另一端的人。

設(shè)計(jì)在這一刻所做的,只是順勢(shì)托住了這種善意:讓用戶,幫別人更輕松一點(diǎn)。

結(jié)語:像方法派演員一樣設(shè)計(jì)

如果要總結(jié)這一切,我想說:設(shè)計(jì)不僅是在“做界面”,而是在“進(jìn)入用戶的情緒”。

這有點(diǎn)像演員的“方法派表演(Method Acting)”——他們不是站在外面詮釋角色,而是走進(jìn)角色,成為角色本身。

當(dāng)你也帶著這樣的方式進(jìn)入用戶的情緒場(chǎng)景時(shí),你會(huì)發(fā)現(xiàn):

很多設(shè)計(jì)決策不再是反復(fù)權(quán)衡的“選擇題”,而會(huì)變成一種順理成章、甚至“非這樣不可”的結(jié)果。

因?yàn)榇藭r(shí)你已經(jīng)不再是站在屏幕這一側(cè)為用戶設(shè)計(jì),你是在用戶的狀態(tài)之中,替他們做出判斷。

轉(zhuǎn)載:人人都是產(chǎn)品經(jīng)理

蘭亭妙微(藍(lán)藍(lán)設(shè)計(jì))m.wtxcl.cn 是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)B端界面設(shè)計(jì)桌面端界面設(shè)計(jì)APP界面設(shè)計(jì)圖標(biāo)定制用戶體驗(yàn)設(shè)計(jì)交互設(shè)計(jì)UI咨詢高端網(wǎng)站設(shè)計(jì)平面設(shè)計(jì),以及相關(guān)的軟件開發(fā)服務(wù),咨詢電話:01063334945。

 

image.png

讀懂用戶心理,才是好 UI 設(shè)計(jì)的開始

清陽 設(shè)計(jì)思維

在設(shè)計(jì)領(lǐng)域,優(yōu)秀的用戶界面(UI)設(shè)計(jì),從來不止是視覺上的美感,更是對(duì)用戶心理的深刻理解。本文將帶你深入了解優(yōu)秀 UI 設(shè)計(jì)背后的心理學(xué)原理,揭示為什么某些設(shè)計(jì)能夠讓人感到自然、流暢,甚至在無意識(shí)中提升用戶體驗(yàn)。
 
你肯定遇到過那種用起來恰到好處的設(shè)計(jì)。一切元素仿佛都在它該在的位置,你無需費(fèi)力去辨認(rèn)、思考,也不會(huì)煩躁地點(diǎn)來點(diǎn)去才能弄明白。
 
這可不是什么魔法,背后靠的是成熟的心理學(xué)原理。
 
出色的 UI 設(shè)計(jì),可不只是選對(duì)了色調(diào),或是用了漂亮的字體。它之所以好用,是因?yàn)槎聪と藗兊乃季S方式:知道人們會(huì)注意什么、忽略什么,以及什么會(huì)讓用戶感到舒適、順暢。
 
下面我們就來剖析優(yōu)秀 UI 設(shè)計(jì)背后的心理學(xué)原理,幫你打造出讓用戶輕松上手、體驗(yàn)感極佳的界面。
 
蘭亭妙微 UI 設(shè)計(jì)公司多年專注于用戶界面與體驗(yàn)設(shè)計(jì),堅(jiān)持以用戶心理為底層邏輯,在美觀與易用之間找到最佳平衡,讓每一個(gè)界面都好看、好用、好懂。

 

1.大腦是個(gè) “偷懶的天才”(認(rèn)知負(fù)荷)

關(guān)鍵在于:人類的大腦很強(qiáng)大,但也超級(jí) “偷懶” 。

我們一直都在努力節(jié)省腦力。這就是為什么優(yōu)秀的 UI 設(shè)計(jì)不會(huì)讓人們進(jìn)行沒必要的思考。要是你的應(yīng)用程序用起來像解謎游戲,用戶會(huì)直接離開,說不定走之前還會(huì)留下一篇言辭激烈的差評(píng)。

設(shè)計(jì)不是為了炫耀你有多聰明,而是要讓用戶感覺自己很聰明 。

這些技巧能讓大腦 “不宕機(jī)” :

  • 清晰呈現(xiàn)層級(jí)關(guān)系。通常,每個(gè)界面只設(shè)置一個(gè)主要操作就夠了。
  • 別搞沒必要的選擇。這又不是智力競(jìng)猜節(jié)目。

把復(fù)雜內(nèi)容藏起來,等需要的時(shí)候再展示。(對(duì),說的就是你 “高級(jí)設(shè)置” 。 )

2.“選擇過多” 問題(希克定律)

希克定律很簡單:你給別人的選擇越多,他們做決定花的時(shí)間就越長,而且越想哭,或者直接放棄。

你有沒有盯著一個(gè)按字母順序排列,從 “阿富汗” 開始羅列了 30 個(gè)國家的下拉菜單發(fā)懵?就是這種情況。

設(shè)計(jì)要做的是減少?zèng)Q策難度。不是剝奪用戶選擇自由,而是讓選擇路徑一目了然。

像極簡主義者一樣設(shè)計(jì):

  • 把大任務(wù)拆分成小步驟。
  • 突出最常見或推薦的選項(xiàng)。
  • 使用默認(rèn)設(shè)置,反正大多數(shù)用戶都會(huì)選它。

3.目標(biāo)應(yīng)易于點(diǎn)擊(菲茨定律)

小得可憐的按鈕、細(xì)得離譜的文本鏈接,還有關(guān)閉按鈕 “X” 比果蠅還小的可關(guān)閉彈窗。

我們都為此吐槽過。菲茨定律表明,點(diǎn)擊某物所需的時(shí)間取決于兩個(gè)因素:目標(biāo)的大小和距離。所以,要是你想讓用戶真的去點(diǎn)擊按鈕,那就得讓它便于點(diǎn)擊。

實(shí)用建議如下:

  • 增大觸摸目標(biāo),在移動(dòng)端尤其如此。畢竟沒人能像忍者那樣手指精準(zhǔn)。
  • 把主要按鈕放在易于觸及的位置,想想大拇指操作的區(qū)域。
  • 避免將操作按鈕堆疊得太近。誤觸現(xiàn)在可是新的“抓狂亂點(diǎn)”源頭。

4.視覺層級(jí):為何你的用戶會(huì)迷失

用戶看屏幕可不是從上到下逐行閱讀,他們?yōu)g覽的樣子就像喝了濃縮咖啡的松鼠,這兒瞅瞅那兒看看。

所以,你得像指揮家引領(lǐng)管弦樂隊(duì)那樣把控視覺層級(jí)。通過尺寸、顏色、粗細(xì)和間距來告訴用戶:“嘿,先看這兒!”

要是沒有視覺層級(jí),所有元素都在爭搶用戶的注意力。可要是所有元素都在大喊大叫,那就什么都聽不見了。

不妨試試這些方法:

  • 主要操作使用粗體,不太重要的內(nèi)容用細(xì)一些的字體。
  • 像對(duì)待本職工作一樣利用好留白(因?yàn)檫@就是你的工作)。
  • 想快速檢驗(yàn)效果?瞇著眼看你的設(shè)計(jì),最先映入眼簾的就是焦點(diǎn)。

5.熟悉感勝過創(chuàng)意

你或許想成為按鈕設(shè)計(jì)界的畢加索,或者重新發(fā)明導(dǎo)航欄。但你猜怎么著?人們偏愛他們熟悉的東西。

登錄表單總是按固定順序設(shè)置郵箱和密碼輸入框,這并非偷懶,而是因?yàn)榇蠹覍?duì)此熟悉。

具體做法如下:

  • 關(guān)鍵流程,如注冊(cè)、結(jié)賬、導(dǎo)航等,沿用標(biāo)準(zhǔn)的UI模式。
  • 把創(chuàng)意用在微交互或視覺效果上,別用在基礎(chǔ)布局上。
  • 記住:熟悉意味著可靠,怪異則會(huì)引發(fā)懷疑。

6.物以類聚(格式塔心理學(xué))

格式塔心理學(xué)本質(zhì)上是我們大腦快速解讀現(xiàn)實(shí)的方式。我們不會(huì)把事物看成孤立的元素,而是依據(jù)接近性、相似性、對(duì)齊方式和連續(xù)性對(duì)它們進(jìn)行分組。

如果你的用戶界面(UI)不遵循這些模式,用戶就會(huì)感到困惑。而困惑會(huì)讓用戶迅速關(guān)閉頁面。

舉例如下:

  • 外觀相似的按鈕應(yīng)該執(zhí)行類似的操作,別誤導(dǎo)用戶。
  • 在表單中,將相關(guān)字段放在一起,別把“姓名”和“郵箱”像彩蛋一樣隨意分散。
  • 對(duì)齊內(nèi)容,未對(duì)齊的元素會(huì)在潛意識(shí)層面引發(fā)混亂。

7.情感大于邏輯

告訴你個(gè)秘密:人們做決策時(shí)憑的是情感,之后才從邏輯上找理由。這一點(diǎn)在 UI 設(shè)計(jì)中同樣適用。

想想看,你有沒有因?yàn)槟硞€(gè)按鈕給人的感覺很好就點(diǎn)了它?比如那令人愉悅的懸停效果,或是那巧妙的動(dòng)畫。

設(shè)計(jì)能引發(fā)愉悅感,也可能帶來挫敗感。

如何從情感角度進(jìn)行設(shè)計(jì):

  • 使用有個(gè)性的微文案,一點(diǎn)點(diǎn)魅力就能產(chǎn)生很大效果。
  • 動(dòng)畫要流暢得像黃油般順滑,而不是像邁克爾?貝電影那樣夸張。
  • 打造令人愉悅的瞬間:比如一條歡快的成功提示信息、一個(gè)五彩紙屑動(dòng)畫,或是一個(gè)讓人滿意的加載狀態(tài)。

8.人們記住的是峰值與結(jié)尾(峰終定律)

用戶不會(huì)記得使用過程中的每一秒,他們記住的是最強(qiáng)烈的瞬間和結(jié)尾,這就是峰終定律。

所以,如果你的結(jié)賬流程十分順暢,但確認(rèn)頁面卻像 404 錯(cuò)誤頁一樣糟糕,猜猜他們會(huì)記住什么?

設(shè)計(jì)小貼士:

  • 找出你的“峰值時(shí)刻”,讓它們令人愉悅。
  • 絕不要忽視結(jié)尾。確認(rèn)消息、感謝頁面、注冊(cè)成功頁面,它們比你想象的更重要。

9.用戶體驗(yàn)的真正大敵:不確定性

要是用戶不確定某個(gè)按鈕的功能,就會(huì)猶豫不決。而這種猶豫會(huì)破壞操作的連貫性。

最出色的用戶界面(UI)能消除疑慮。它們仿佛在告訴用戶:“嘿,點(diǎn)這兒,放心,不會(huì)誤刪所有東西。”

可以利用以下方法:

  • 清晰的標(biāo)簽:“保存草稿”就比“提交”更明晰。
  • 微文案:短短一行字就能打消用戶的顧慮。
  • 反饋:及時(shí)告知用戶剛剛發(fā)生了什么,以及接下來會(huì)怎樣。

10.助你保持思路清晰的工具

說實(shí)話,有時(shí)候你確實(shí)沒時(shí)間從頭構(gòu)建每一個(gè)流程。這時(shí)候,像 “Made in Figma” 這樣的插件就能救急。

它能讓你直接使用預(yù)先構(gòu)建好的 UI 流程和組件,這些都遵循了最佳實(shí)踐。無需猜測(cè),也不用到處找靈感。就好比有個(gè)不嘮叨的設(shè)計(jì)副駕在幫你

當(dāng)我想在不犧牲質(zhì)量的前提下快速推進(jìn)工作,或者大腦靠咖啡因強(qiáng)撐,只需要一個(gè)可靠的布局來開展工作時(shí),我就會(huì)經(jīng)常用它。

額外福利:要是你還在看……

首先,感謝你。顯然你對(duì)優(yōu)秀設(shè)計(jì)非常上心。

其次,這里有一份基于心理學(xué)的 UI 設(shè)計(jì)小抄:

  • 去除干擾(少即是多)
  • 引導(dǎo)視覺
  • 遵循默認(rèn)設(shè)置和模式
  • 兼顧情感與邏輯進(jìn)行設(shè)計(jì)
  • 讓用戶有掌控感
  • 要是拿不準(zhǔn)怎么做?別耍小聰明,保持清晰就

轉(zhuǎn)載:人人都是產(chǎn)品經(jīng)理

蘭亭妙微(藍(lán)藍(lán)設(shè)計(jì))m.wtxcl.cn 是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)B端界面設(shè)計(jì)桌面端界面設(shè)計(jì)APP界面設(shè)計(jì)圖標(biāo)定制用戶體驗(yàn)設(shè)計(jì)交互設(shè)計(jì)UI咨詢高端網(wǎng)站設(shè)計(jì)平面設(shè)計(jì),以及相關(guān)的軟件開發(fā)服務(wù),咨詢電話:01063334945。

 

image.png

 

 

毫無亮點(diǎn)的界面,該怎么加設(shè)計(jì)感?這個(gè)破班,不上也罷!

濤濤 設(shè)計(jì)思維

你是不是也常遇到這種情況:拿到手的界面原型平平無奇,滿屏都是基礎(chǔ)文字和按鈕,想優(yōu)化加設(shè)計(jì)感卻無從下手,改來改去要么還是單調(diào)乏味,要么畫蛇添足影響體驗(yàn),最后只能煩躁吐槽:“這破班,不上也罷!”

設(shè)計(jì)的理性與感性:以邏輯為基,以情感為翼

濤濤 設(shè)計(jì)思維

設(shè)計(jì)的感性與理性之爭,似乎從未有過標(biāo)準(zhǔn)答案。有人將設(shè)計(jì)視作靈感迸發(fā)的藝術(shù)創(chuàng)作,重感性表達(dá);有人將其當(dāng)作解決問題的工程實(shí)踐,尊理性決策;也有人籠統(tǒng)說 “要平衡二者”,卻始終說不清該如何平衡。事實(shí)上,這場(chǎng)爭論的核心誤區(qū),在于混淆了設(shè)計(jì)的決策過程與表達(dá)結(jié)果兩個(gè)維度。設(shè)計(jì)從來不是非此即彼的選擇,而是一場(chǎng)理性為根、感性為枝的生長 —— 理性決定設(shè)計(jì)的方向與可行性,讓設(shè)計(jì)不偏離解決問題的本質(zhì);感性賦予設(shè)計(jì)的溫度與感染力,讓設(shè)計(jì)超越功能成為與用戶共鳴的載體。二者并非對(duì)立或并列,而是層層嵌套的先后關(guān)系:先以理性錨定目標(biāo),再以感性點(diǎn)亮價(jià)值。

如何為日本市場(chǎng)打造多場(chǎng)景設(shè)計(jì)語言

鶴鶴 設(shè)計(jì)思維

圍繞「如何更好地觸達(dá)日本用戶」這一目標(biāo),并行探索了兩種不同的設(shè)計(jì)方向:
一種側(cè)重‘日式美學(xué)體驗(yàn)’,另一種側(cè)重‘saas商業(yè)信任’。
這個(gè)過程引發(fā)了我們關(guān)于「美學(xué)價(jià)值」與「商業(yè)目標(biāo)」如何平衡的深度思考,本文旨在沉淀與分享我們團(tuán)隊(duì)的這次探索過程與方法論。
首先,設(shè)計(jì)之前先讀懂日本美學(xué)的“潛臺(tái)詞”:
日本設(shè)計(jì)常被視為高級(jí)感的代名詞,其設(shè)計(jì)感強(qiáng)的同時(shí)能保證信息足夠清晰明了。這背后是深植于其傳統(tǒng)哲學(xué)的獨(dú)特美學(xué)——「間」(Ma)與「侘寂」(Wabi-Sabi),一種于克制中見風(fēng)骨的藝術(shù)。它并非懸浮的理論,而是可以被轉(zhuǎn)譯為現(xiàn)代設(shè)計(jì)語言的實(shí)用準(zhǔn)則。
對(duì)我們而言,其核心是
通過克制的色彩、有序的留白和對(duì)細(xì)節(jié)的極致打磨,踐行“少即是多”的哲學(xué)理論
一、色彩:「和風(fēng)三色」的碰撞
在色彩選上,我傾向于從日本傳統(tǒng)色譜(https://nipponcolors.com/)中汲取靈感。相比于高飽和度的色彩,源自自然的
低飽和度、低明度的配色
更能營造出沉靜、雅致的氛圍。為了讓設(shè)計(jì)更具識(shí)別性,會(huì)考慮適度選擇
櫻色、松綠、靛藍(lán)
三個(gè)顏色,喚起用戶對(duì)日本文化的深層共鳴。
簡單來說:櫻色、松綠、靛藍(lán)這三種顏色,雖然沒有一個(gè)官方固定的名稱,但它們的確是能夠完美代表日本傳統(tǒng)審美和自然觀的經(jīng)典色彩組合,之所以如此具有代表性,是因?yàn)槊恳环N顏色都深深植根于日本的自然、文化和歷史之中,感興趣的同學(xué)可以自己去了解一下,在這里我們把它們簡稱為
「和風(fēng)三色」。
 
二、布局:嚴(yán)謹(jǐn)?shù)牧舭着c“直角vs圓角”的思辨
布局是日式設(shè)計(jì)的靈魂,而留白(間)則是其精髓。
視覺元素間的留白比例通常會(huì)達(dá)到30%-50%
,遠(yuǎn)超一般的設(shè)計(jì)標(biāo)準(zhǔn)。這不僅是為了美觀,更是為了引導(dǎo)視線,讓信息有序地呈現(xiàn)。設(shè)計(jì)中嚴(yán)格遵循網(wǎng)格系統(tǒng),對(duì)文字與圖片的間距、字體的行間距進(jìn)行精細(xì)到像素級(jí)別的調(diào)整,構(gòu)建一種“板正”的秩序感。
參考:https://www.webdesignclip.com/
 
這里有一個(gè)很有趣的細(xì)節(jié)值得探討:
邊角處理的選擇
選擇圓角——能帶來親和、自然的感覺,符合一部分日式設(shè)計(jì)中對(duì)
“有機(jī)形態(tài)”
的追求。
選擇直角
——
基于嚴(yán)格網(wǎng)格系統(tǒng)的排版中,銳利的直角能夠最大化地強(qiáng)化秩序感和專業(yè)性,讓整個(gè)界面看起來如同精心切割的木工作品,精準(zhǔn)而有力。
選擇哪一種,取決于想傳遞的具體氣質(zhì),我們也是應(yīng)用到了不同的場(chǎng)景里進(jìn)行嘗試。
三、圖片:承載“視覺呼吸”的侘寂之窗
在日式排版中,圖片往往不只是信息的補(bǔ)充,更是
營造“視覺呼吸感”的關(guān)鍵載體
因此,在圖片選擇上,需要格外注意它能否傳達(dá)出「侘寂」美學(xué)中那種對(duì)不完美、無常、自然的敬畏感。
通過
大量的留白來突出主體
,引導(dǎo)觀者進(jìn)入一個(gè)寧靜的哲學(xué)意境。
它們與文字和圖標(biāo)一起,共同構(gòu)成了那個(gè)充滿呼吸感、值得細(xì)細(xì)品味的設(shè)計(jì)空間。
 
站點(diǎn)實(shí)戰(zhàn)復(fù)盤——兩種設(shè)計(jì)策略的并行探索:
一、 兩種設(shè)計(jì)哲學(xué)(方案)的碰撞
1、以‘日式美學(xué)優(yōu)先’建立情感連接
方案A ————
  •  
    溝通方式:
    感性溝通——傳達(dá)“我能讓你變得很有品位”的概念,向他們兜售一個(gè)關(guān)于“理想之家”的筑夢(mèng)工具;
  •  
    設(shè)計(jì)目標(biāo):
    希望能第一時(shí)間抓住用戶眼球,讓用戶感知到這是一家高級(jí)的公司;
  •  
    風(fēng)格調(diào)研:
    在本地用戶投票調(diào)研中拿到了不俗的票數(shù),說明成功地引發(fā)了用戶“共鳴”;
  •  
    差異化:
    在普遍SaaS網(wǎng)站中,風(fēng)格比較獨(dú)特鮮明;
  •  
    總結(jié):
    通過大面積的留白、克制的和風(fēng)配色、以及嚴(yán)謹(jǐn)?shù)木W(wǎng)格系統(tǒng)和銳利的直角,去傳遞產(chǎn)品的專業(yè)與品位,旨在先與用戶建立情感共鳴。
     
     
2、以‘本土信任優(yōu)先’驅(qū)動(dòng)商業(yè)轉(zhuǎn)化
方案B ————
  •  
    溝通方式:
    理性溝通——傳達(dá)“我們很厲害”的概念,告訴用戶我們?cè)谫u一個(gè)“解決方案”;
  •  
    信賴感強(qiáng):
    藍(lán)色主色搭配黃色的輔助色,配合線條插畫,是日本SaaS網(wǎng)站建立用戶信任的“標(biāo)配”元素;
  •  
    風(fēng)格清晰:
    明確的SaaS風(fēng)格,降低用戶認(rèn)知成本,同樣在本地用戶投票調(diào)研中拿到了不俗的票數(shù);
  •  
    總結(jié):
    符合日本主流SaaS網(wǎng)站的設(shè)計(jì)范式,開門見山地展示了軟件的核心功能、客戶案例墻、增長數(shù)據(jù),通過“理性溝通”,用最快的速度告訴用戶“相信我,我能幫你解決問題”;
 
*配圖僅截取方案的某一部分
二、團(tuán)隊(duì)的決策與沉淀:設(shè)計(jì)策略的“情境化”應(yīng)用
經(jīng)過用戶調(diào)研和團(tuán)隊(duì)內(nèi)部的深入討論,我們達(dá)成共識(shí):在SaaS官網(wǎng)這一
以“轉(zhuǎn)化”為核心
的特定場(chǎng)景下,以方案B——“信任優(yōu)先”的策略更貼合現(xiàn)階段的商業(yè)目標(biāo)。
它在建立用戶信任、降低認(rèn)知和決策成本上表現(xiàn)更優(yōu),是更穩(wěn)妥的市場(chǎng)切入策略。最終上線后,我們的結(jié)論也在日本市場(chǎng)中得到了相應(yīng)的數(shù)據(jù)驗(yàn)證。
當(dāng)然,我們對(duì)于方案A的驗(yàn)證也沒有完全舍棄,而是應(yīng)用在線下推廣的應(yīng)用中,在平面設(shè)計(jì)領(lǐng)域盡可能發(fā)揮出日式美學(xué)的魅力。
image.png
三、設(shè)計(jì)的答案,永遠(yuǎn)在“情境”之中
我們只是在不同聲道上與用戶對(duì)話,作為設(shè)計(jì)師,我們的目標(biāo)就是成為一個(gè)“多聲道”的溝通者,既要懂得如何用“工程師”的語言搭建高效的轉(zhuǎn)化橋梁,也要懂得如何用“藝術(shù)家”的語言構(gòu)建引發(fā)共鳴的情感空間。
這或許也是國際化設(shè)計(jì)最迷人的挑戰(zhàn)吧!
 
 
作者:群核科技MCUX
鏈接:https://www.zcool.com.cn/article/ZMTY3ODA2OA==.html
來源:站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。
 

蘭亭妙微(藍(lán)藍(lán)設(shè)計(jì))m.wtxcl.cn 是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)B端界面設(shè)計(jì)桌面端界面設(shè)計(jì)APP界面設(shè)計(jì)圖標(biāo)定制用戶體驗(yàn)設(shè)計(jì)交互設(shè)計(jì)UI咨詢高端網(wǎng)站設(shè)計(jì)平面設(shè)計(jì),以及相關(guān)的軟件開發(fā)服務(wù),咨詢電話:01063334945。

 

image.png

 
 

為什么 AI 產(chǎn)品都愛用藍(lán)紫色?背后藏著色彩心理學(xué)與行業(yè)巧思

鶴鶴 設(shè)計(jì)思維

打開手機(jī)里的各類 AI 應(yīng)用,你大概率會(huì)被一種藍(lán)紫色調(diào) “包圍”:通義 APP 的 logo、百度的問 AI 按鈕、釘釘?shù)?AI 表格圖標(biāo)、訊飛星火的官網(wǎng) banner……
 
可用的色彩那么豐富,為何 AI 產(chǎn)品偏偏對(duì)藍(lán)紫色 “情有獨(dú)鐘”?其實(shí)這種選擇并非設(shè)計(jì)師隨意為之,背后既貼合大眾的認(rèn)知習(xí)慣,也藏著心理學(xué)邏輯與行業(yè)設(shè)計(jì)巧思。

image.png

一、色彩設(shè)計(jì)心理學(xué):精準(zhǔn)契合 “穩(wěn)重 + 創(chuàng)新” 的核心需求

 
顏色從來不止是視覺裝飾,更承載著大眾的心理聯(lián)想,而藍(lán)紫色恰好精準(zhǔn)踩中了 AI 產(chǎn)品最需要的兩大認(rèn)知標(biāo)簽 ——“靠譜穩(wěn)重” 與 “前沿創(chuàng)新”。
 
藍(lán)色自帶的 “信任感” 早已深入人心:支付寶用藍(lán)色傳遞安全可靠,多數(shù)科技品牌以藍(lán)色彰顯專業(yè)嚴(yán)謹(jǐn),AI 產(chǎn)品自然也借助這份 “信任紅利”,讓用戶從視覺上就先認(rèn)可其技術(shù)實(shí)力。
 

image.png

但僅靠藍(lán)色遠(yuǎn)遠(yuǎn)不夠,AI 功能還需凸顯 “新意”,避免陷入傳統(tǒng)科技產(chǎn)品的沉悶感。此時(shí)紫色的加入,恰好補(bǔ)上了 “創(chuàng)新感” 的缺口:紫色由藍(lán)色與紅色調(diào)和而成,既保留了藍(lán)色的理性穩(wěn)重,又融入了紅色的活力,卻無紅色的刺眼感,比藍(lán)色多了幾分創(chuàng)造力與神秘感。

image.png

 
這種 “理性基底 + 創(chuàng)新活力” 的雙重質(zhì)感,堪稱為 AI 量身定制 ——AI 既要靠嚴(yán)謹(jǐn)算法體現(xiàn)邏輯,又要靠創(chuàng)新功能吸引用戶,藍(lán)紫色的組合完美適配這一核心特質(zhì)。

image.png

以釘釘為例,其主色調(diào)為藍(lán)色,但在 AI 相關(guān)設(shè)計(jì)中大量融入紫色調(diào):官網(wǎng)首頁 banner、分類卡片、功能按鈕、UI 界面及裝飾圖形等,均采用藍(lán)色搭配淺紫、粉紫的組合,既保留了品牌的專業(yè)感,又傳遞出 “能創(chuàng)造新價(jià)值” 的工具屬性,精準(zhǔn)契合 AI 突破常規(guī)的定位。這種 “藍(lán)色穩(wěn)根基 + 紫色添新意” 的搭配,讓 AI 產(chǎn)品既不冰冷遙遠(yuǎn),又不失專業(yè)可信度。
 

二、打破科技色慣例:在同質(zhì)化中實(shí)現(xiàn)差異化突圍

 
早年科技圈幾乎是 “藍(lán)色的天下”:海外的 IBM、Meta、微軟、推特等品牌,均是藍(lán)色的重度使用者;國內(nèi)不少互聯(lián)網(wǎng)品牌的主題色選擇,也或多或少受此影響。

image.png

若 AI 產(chǎn)品繼續(xù)沿用純藍(lán)色,極易在同質(zhì)化競(jìng)爭中被淹沒,而藍(lán)紫色則成為最具性價(jià)比的破局方案。一方面,藍(lán)紫色調(diào)未脫離 “科技感” 的大眾認(rèn)知框架,不會(huì)讓用戶產(chǎn)生陌生感;另一方面,鮮艷的藍(lán)紫漸變自帶強(qiáng)烈視覺吸引力,能營造出未來感與現(xiàn)代感,快速抓住用戶眼球。隨著越來越多 AI 產(chǎn)品采用這一配色,藍(lán)紫色逐漸成為行業(yè)視覺約定,幫助用戶快速識(shí)別 AI 工具與相關(guān)內(nèi)容。

image.png

 
阿里通義千問便是典型代表:設(shè)計(jì)中摒棄了阿里系傳統(tǒng)的橙紅色,也未跟風(fēng)科技圈的純藍(lán)色,轉(zhuǎn)而采用青藍(lán)到亮紫的漸變?cè)O(shè)計(jì),從 logo、頁面 UI 到宣傳海報(bào),均貫穿藍(lán)紫色調(diào)。既與其他 AI 產(chǎn)品形成差異化辨識(shí)度,又牢牢扎根于大眾對(duì) “科技色調(diào)” 的認(rèn)知,實(shí)現(xiàn)了平衡與突圍。
 

三、數(shù)字場(chǎng)景 “天生百搭色”:適配多場(chǎng)景使用需求

 
AI 產(chǎn)品需適配手機(jī)、電腦等多終端的日常使用,而藍(lán)紫色恰好是數(shù)字場(chǎng)景的 “理想配色”,經(jīng)得住各類屏幕與使用場(chǎng)景的考驗(yàn)。
 
其一,顯示效果友好。藍(lán)紫色在屏幕上不會(huì)像紅、黃色那般刺眼,也不會(huì)因過淺而模糊不清,尤其是漸變效果,能在手機(jī)、電腦上呈現(xiàn)出豐富層次感。無論是深色模式下的護(hù)眼需求,還是淺色模式下的醒目度要求,藍(lán)紫色都能完美適配,契合用戶晝夜切換的使用習(xí)慣。

image.png

 
其二,視覺效果突出。藍(lán)紫色搭配和諧不易出錯(cuò),同時(shí)貼合當(dāng)下設(shè)計(jì)潮流,能讓用戶直觀感受到產(chǎn)品的新潮感,提升對(duì)產(chǎn)品的好感度。
 
當(dāng)然,藍(lán)紫色并非 AI 產(chǎn)品的 “萬能公式”:ChatGPT、騰訊元寶采用綠色主題,更顯活潑靈動(dòng);ima 頁面以淺綠色為主,按鈕等元素搭配深灰色,無明確主題色;納米 AI 的 logo 選用紅色,風(fēng)格特立獨(dú)行(這類配色在 AI 產(chǎn)品中相對(duì)小眾,不建議輕易嘗試)。

image.png

 
但對(duì)絕大多數(shù) AI 產(chǎn)品而言,藍(lán)紫色仍是最穩(wěn)妥的選擇:既契合大眾對(duì) “靠譜科技” 的認(rèn)知,又能在競(jìng)爭中脫穎而出,還能適配各類使用場(chǎng)景。下次再看到藍(lán)紫色調(diào)的 AI 產(chǎn)品,你便會(huì)明白,這背后藏著設(shè)計(jì)師精準(zhǔn)拿捏用戶心理的 “設(shè)計(jì)巧思”。
 

蘭亭妙微(藍(lán)藍(lán)設(shè)計(jì))m.wtxcl.cn 是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)B端界面設(shè)計(jì)桌面端界面設(shè)計(jì)APP界面設(shè)計(jì)圖標(biāo)定制用戶體驗(yàn)設(shè)計(jì)交互設(shè)計(jì)UI咨詢高端網(wǎng)站設(shè)計(jì)平面設(shè)計(jì),以及相關(guān)的軟件開發(fā)服務(wù),咨詢電話:01063334945。

 

image.png

8 個(gè)極具巧思的 UI 設(shè)計(jì)案例,打破同質(zhì)化困局

濤濤 設(shè)計(jì)思維

隨著設(shè)計(jì)行業(yè)的蓬勃發(fā)展,產(chǎn)品 UI 的整體水準(zhǔn)持續(xù)提升,但同質(zhì)化現(xiàn)象也愈發(fā)明顯。想要讓產(chǎn)品在同類競(jìng)品中脫穎而出,設(shè)計(jì)師需要在細(xì)節(jié)表達(dá)、功能適配、情感共鳴等維度持續(xù)探索。今天就為大家精選 8 個(gè)極具創(chuàng)意的 UI 設(shè)計(jì)案例,希望能為你的設(shè)計(jì)實(shí)踐帶來新的靈感。

UI 與 UX 設(shè)計(jì):別再混淆的兩大產(chǎn)品核心設(shè)計(jì)領(lǐng)域

濤濤

在科技產(chǎn)品主導(dǎo)的當(dāng)下,“用戶體驗(yàn)”“用戶界面” 早已不是行業(yè)黑話,而是決定產(chǎn)品成敗的關(guān)鍵。但很多人仍會(huì)將 UI 設(shè)計(jì)與 UX 設(shè)計(jì)混為一談,認(rèn)為兩者只是名稱不同,實(shí)則它們?nèi)缤a(chǎn)品的 “形” 與 “神”,分工明確卻又密不可分。今天我們就來清晰拆解兩者的區(qū)別、聯(lián)系,以及各自的核心價(jià)值。

平面設(shè)計(jì)師轉(zhuǎn)型 UX 設(shè)計(jì):7 個(gè)實(shí)戰(zhàn)指南,從美學(xué)到體驗(yàn)的進(jìn)階之路

濤濤

對(duì)于深耕平面設(shè)計(jì)領(lǐng)域的創(chuàng)作者而言,轉(zhuǎn)型 UX 設(shè)計(jì)并非從零開始的冒險(xiǎn) —— 你們多年積累的美學(xué)素養(yǎng)、布局思維和問題解決能力,早已是踏入 UX 領(lǐng)域的堅(jiān)實(shí)基礎(chǔ)。隨著用戶體驗(yàn)在產(chǎn)品競(jìng)爭中的權(quán)重日益提升,UX 設(shè)計(jì)師的職業(yè)前景也愈發(fā)廣闊:據(jù) Interaction Design Foundation 數(shù)據(jù)顯示,UX 設(shè)計(jì)師年均薪資約 74,000 美元,遠(yuǎn)超平面設(shè)計(jì)師的 41,000 美元。從專注視覺呈現(xiàn)到兼顧用戶需求與交互邏輯,這場(chǎng)轉(zhuǎn)型需要思維的重塑與技能的拓展。以下 7 個(gè)實(shí)戰(zhàn)指南,將幫你平穩(wěn)跨越邊界,在 UX 設(shè)計(jì)領(lǐng)域站穩(wěn)腳跟。

一個(gè)完整的B端設(shè)計(jì)流程

鶴鶴

 
從渡輪預(yù)定,認(rèn)識(shí)業(yè)務(wù)概念
這次案例是一個(gè)我最近在預(yù)定的船票預(yù)定服務(wù),由一家叫名門大洋的渡輪服務(wù)公司提供。下面是對(duì)它預(yù)定的簡單介紹:
步驟1:打開官網(wǎng),到 [船上生活] 模塊查看有哪些船(只有兩艘)和房型,以及船上有哪些服務(wù)設(shè)施等。

image.png

步驟2:進(jìn)入 [運(yùn)費(fèi)和費(fèi)用] 模塊,先看他們的預(yù)約規(guī)則,然后打開他們提供的PDF查看預(yù)定的日期和價(jià)格,來確定自己想要選的房間。這里房型價(jià)格和熱門時(shí)間有關(guān),官方分了A、B、C三個(gè)價(jià)格檔來對(duì)應(yīng)熱門冷門時(shí)間。
 
步驟3:進(jìn)入 [預(yù)定] 模塊,填寫個(gè)人信息和想預(yù)約的房型,房型選擇有3個(gè),如果前面的選擇滿房就向后遞補(bǔ),填寫完成后,就可以點(diǎn)擊發(fā)送預(yù)定信息。
 
步驟4:隔日等待反饋郵件,到郵箱中查看。還能預(yù)定的話就會(huì)有一個(gè)鏈接,進(jìn)入鏈接中進(jìn)行支付。之后就可以獲得登船的憑證。
 
后續(xù)的細(xì)節(jié)就忽略,一個(gè)簡單的買票緩解,操作起來這么麻煩,是不是感覺非常陌生,這是因?yàn)閲庥泻芏喾?wù)的預(yù)定都需要到官網(wǎng)預(yù)定,和國內(nèi)出行完全依賴綜合旅游軟件如飛豬、攜程、去哪兒等不同。
而這個(gè)訂票的流程,到審核(人工的)回復(fù)的整個(gè)過程,就叫 —— 業(yè)務(wù)流程,是一個(gè)被設(shè)計(jì)好并標(biāo)準(zhǔn)化的商業(yè)實(shí)踐過程。
每家公司的經(jīng)營都會(huì)包含大量的業(yè)務(wù),房間預(yù)定只是它的其中一個(gè)業(yè)務(wù),還包括登船、房間清理、物資采購等。而每個(gè)常規(guī)的業(yè)務(wù)的執(zhí)行如果全憑員工自己的想法、感覺,那么企業(yè)的運(yùn)轉(zhuǎn)一定會(huì)一團(tuán)亂麻。所以經(jīng)營者就要針對(duì)這些常見的業(yè)務(wù),設(shè)計(jì)出相應(yīng)的流程出來進(jìn)行標(biāo)準(zhǔn)化,讓員工和顧客遵循這套流程來完成商業(yè)活動(dòng)。
而業(yè)務(wù)只有流程框架還不夠,必須包含大量的細(xì)節(jié),比如前面提到的不同定價(jià)時(shí)段,滿房的遞補(bǔ),退票的方式等等,這些都是業(yè)務(wù)流程中的細(xì)節(jié)規(guī)則,我們可以統(tǒng)稱它們?yōu)?“業(yè)務(wù)邏輯”。
簡單來說,企業(yè)經(jīng)營要先確定業(yè)務(wù),然后設(shè)計(jì)流程,再制定具體的業(yè)務(wù)邏輯,形成完整的商業(yè)閉環(huán)。但這和設(shè)計(jì)師有什么關(guān)系呢?
 
 
因?yàn)闃I(yè)務(wù)是產(chǎn)品的出發(fā)點(diǎn),常規(guī)項(xiàng)目只有業(yè)務(wù)形式確定下來,才會(huì)進(jìn)入產(chǎn)品的設(shè)計(jì)階段,而不是先設(shè)計(jì)產(chǎn)品功能再讓業(yè)務(wù)去適配它的特性。而產(chǎn)品后續(xù)一系列的復(fù)雜、抽象、晦澀的決策也全都和業(yè)務(wù)有非常大的聯(lián)系,
如果設(shè)計(jì)師不先理解業(yè)務(wù),就可能無法理解產(chǎn)品的需求和決策,導(dǎo)致最終的設(shè)計(jì)結(jié)果和目標(biāo)想去甚遠(yuǎn)。
 
 
從業(yè)務(wù)到需求的制定過程
這個(gè)預(yù)定過程對(duì)于熟悉國內(nèi)互聯(lián)網(wǎng)的我們來說肯定是太復(fù)雜了,用個(gè)線性流程表示的話,對(duì)比如下:
 
國內(nèi)軟件預(yù)定:打開軟件 - 搜索船票 - 選擇日期 - 選擇房型 - 完成支付
官方網(wǎng)站預(yù)定:搜索官網(wǎng) - 打開官網(wǎng) - 查看房型 - 查看價(jià)格 - 填寫信息 - 等待回復(fù) - 查看郵件 - 完整支付
 
從字面上感覺可能不明顯,但實(shí)際上操作時(shí)長、點(diǎn)擊次數(shù)以及總消耗時(shí)間,它的做法遠(yuǎn)比國內(nèi)的服務(wù)慢,加上細(xì)節(jié)里有很多會(huì)延長完成時(shí)間的邏輯,比如沒有想要的房型就要重新去選一遍,而這在國內(nèi)軟件里一開始就能知道直接規(guī)避掉。
這個(gè)業(yè)務(wù)過程非常的原始,后臺(tái)可能有一個(gè)簡單的收件系統(tǒng),由人工來逐一審核提交的郵件,創(chuàng)建訂單,然后再提交回復(fù)。
如果我們要提高這個(gè)業(yè)務(wù)的效率,就必須要改進(jìn)這套系統(tǒng),將人工的機(jī)制進(jìn)行簡化,即客戶可以直接在前端完成篩選、預(yù)定、支付的操作。相信大家都很熟悉這種操作過程,而這種改進(jìn)就叫 ——
企業(yè)數(shù)字化升級(jí)
。就是本來使用人工或者很原始的方式執(zhí)行的業(yè)務(wù)流程,引入數(shù)字化的系統(tǒng)、產(chǎn)品,來提升它的運(yùn)行效率。
 
而產(chǎn)品經(jīng)理要在這個(gè)過程做業(yè)務(wù)的分析,具體分析什么呢,可以簡單總結(jié)成:
  •  
    當(dāng)前的業(yè)務(wù)是什么樣的
  •  
    當(dāng)前業(yè)務(wù)存在的具體缺陷
  •  
    構(gòu)思產(chǎn)品的整體框架形態(tài)
  •  
    確定產(chǎn)品的具體功能需求
 
前兩點(diǎn)前面已經(jīng)解釋過了,當(dāng)前業(yè)務(wù)是存在缺陷的,而產(chǎn)品經(jīng)理必須先理解完業(yè)務(wù)和找出問題,才能進(jìn)行后續(xù)工作,而不是直接忽視背景打開 Axure開始畫圖。
有了問題,下一步就是建立產(chǎn)品的框架,比如這個(gè)業(yè)務(wù)會(huì)涉及到多個(gè)端,產(chǎn)品就要先創(chuàng)建多個(gè)端的功能框架出來,包含的端可以簡化成下面三個(gè):
 
用戶端就是普通的網(wǎng)頁預(yù)定模式(這里不討論APP和小程序等),讓用戶直接選擇日期、船型、房型后支付獲取憑證,非常容易理解,不用多做介紹,我們重點(diǎn)放在管理端和后臺(tái)服務(wù)的解釋上。
 
TIPS:這里有個(gè)可以思考的小點(diǎn),沒做用戶系統(tǒng)你們可以分析下為什么。
 
在管理端上,管理員已經(jīng)不需要手動(dòng)審核預(yù)約了,所以只需要對(duì)訂單和賬單(這是兩件事)有查看和管理的操作即可,來完成一些特殊業(yè)務(wù)事件的處理。
而在后臺(tái)服務(wù)上,就要確定有哪些數(shù)據(jù)信息,以及處理它們的方式。比如訂單的支付、退款,會(huì)涉及到非常復(fù)雜的后臺(tái)處理過程,包括不同支付方式接入、對(duì)不同貨幣的支持、資金的轉(zhuǎn)出等等。其它功能還包括房型數(shù)據(jù)更新、價(jià)格數(shù)據(jù)更新。這些都是用戶端和管理端無法直接看見,但又在真實(shí)運(yùn)行的功能。
根據(jù)上面對(duì)不同端的分析和構(gòu)想,就可以創(chuàng)建產(chǎn)品的 —— 功能架構(gòu)圖,比如下面這個(gè)極簡的版本:
 
對(duì)于一個(gè)成熟的產(chǎn)品經(jīng)理來說,進(jìn)一步制定產(chǎn)品的需求肯定不是直接打開Axure畫原型,而是先圍繞業(yè)務(wù)的需求制定 —— 數(shù)據(jù)字段。
數(shù)據(jù)字段即前、后端服務(wù)中要存儲(chǔ)、計(jì)算、展示的具體對(duì)象。比如一個(gè)房間,前端頁面會(huì)展示房間名、價(jià)格、人數(shù)、面積、類型、評(píng)價(jià)等各種數(shù)據(jù)。但這些數(shù)據(jù)不是憑空出現(xiàn)的,而是要先計(jì)劃和開發(fā)才能實(shí)現(xiàn)的內(nèi)容,且不同字段背后可能還包含復(fù)雜的設(shè)置或計(jì)算規(guī)則。
所以產(chǎn)品要花很多時(shí)間分析應(yīng)該記錄哪些數(shù)據(jù)字段,這些數(shù)據(jù)怎么產(chǎn)生,背后有什么邏輯,在前端顯示的標(biāo)準(zhǔn)是什么。
 
用個(gè)更具體的案例來解釋,比如要?jiǎng)?chuàng)建房間價(jià)格這個(gè)字段,這個(gè)字段的值就具體價(jià)格值。但是房間的具體價(jià)格不是固定的,包含三個(gè)檔位,根據(jù)日期決定的檔位進(jìn)行靈活的變動(dòng)。所以要實(shí)現(xiàn)正確的價(jià)格顯示,光有一個(gè)房間價(jià)格字段是不夠的,我們需要建立更多字段來滿足它的使用,包含:
  •  
    房間基礎(chǔ)定價(jià):房間的基底價(jià)格,用于做計(jì)算的基數(shù)
  •  
    房價(jià)當(dāng)前系數(shù):根據(jù)忙時(shí)和閑時(shí)變更定價(jià)的系數(shù),比如忙時(shí)是原來的1.5倍,閑時(shí)是原來的0.8倍
  •  
    房間當(dāng)前價(jià)格:根據(jù)定價(jià)基數(shù)x 系數(shù)得到的當(dāng)前價(jià)格,是前端展示和付款的具體金額
 
這是個(gè)非常簡化的版本,除了使用基數(shù)x系數(shù)的邏輯外,也可能直接給房間制定A、B、C三個(gè)價(jià)格的字段直接填價(jià)格不做系數(shù)計(jì)算。在真實(shí)項(xiàng)目中,該功能會(huì)創(chuàng)建得字段數(shù)遠(yuǎn)不止這些,產(chǎn)品還需要去明白數(shù)據(jù)的來源、計(jì)算邏輯、應(yīng)用規(guī)則。
對(duì)于成熟的項(xiàng)目來說,項(xiàng)目的數(shù)據(jù)字段就是業(yè)務(wù)需求的延展,是整個(gè)業(yè)務(wù)正常運(yùn)行的基石和原材料,產(chǎn)品制定的需求就包括它們的內(nèi)容和規(guī)則,再讓后端工程師去實(shí)現(xiàn)出來(而不是后端自己憑感覺想)。
有了上面這些準(zhǔn)備,那么產(chǎn)品應(yīng)該做成什么樣就清晰很多了。下一步,產(chǎn)品經(jīng)理就可以先用思維導(dǎo)圖去規(guī)劃管理端的頁面結(jié)構(gòu)與內(nèi)容,而這種思維導(dǎo)圖通常被稱為 ——
產(chǎn)品地圖
image.png
規(guī)劃完產(chǎn)品地圖后,下一步才進(jìn)入正式的產(chǎn)品原型設(shè)計(jì)過程,將我們對(duì)產(chǎn)品應(yīng)該做成什么樣通過原型線框圖表現(xiàn)出來,只要能讓其他人理解我們的意圖即可。
image.png
 
 
當(dāng)然只看圖是不夠的,很多細(xì)節(jié)的決策和邏輯就需要添加文字的說明,這種結(jié)合原型+文字的需求就交 PRD需求文檔。它的作用是讓設(shè)計(jì)師、程序員、測(cè)試工程師可以看懂并把它們做出來的 “施工方案”。
而作為B端UI設(shè)計(jì)師就要在了解業(yè)務(wù)和獲得這些需求后,才能明白我們后面應(yīng)該完成哪些工作,輸出什么樣的界面內(nèi)容。
 
B端設(shè)計(jì)的前期分析要求
在項(xiàng)目中B端設(shè)計(jì)師的工作可以分成三個(gè)步驟,即:
 
前期準(zhǔn)備要做的事情很多,包括參與立項(xiàng)的各種會(huì)議,接收各種信息和要求。但占據(jù)我們最多精力的工作,就是展開對(duì)項(xiàng)目設(shè)計(jì)的 —— 前期分析,這也是很多同學(xué)在作品集包裝中看到的大段分析文本的來源。
 
每個(gè)項(xiàng)目前期的分析內(nèi)容都有差異,但我們大體可以總結(jié)成以下幾個(gè)模塊:
  1.  
    項(xiàng)目分析
  2.  
    業(yè)務(wù)分析
  3.  
    產(chǎn)品分析
  4.  
    體驗(yàn)分析
  5.  
    設(shè)計(jì)分析
 
項(xiàng)目分析就是了解整個(gè)項(xiàng)目背景的過程,比如這個(gè)企業(yè)的背景、提供的服務(wù)、業(yè)務(wù)的內(nèi)容等等,最重要的目標(biāo)就是 ——
明確項(xiàng)目目標(biāo)
,即項(xiàng)目要實(shí)現(xiàn)什么成果的預(yù)期。在這個(gè)渡輪項(xiàng)目中,項(xiàng)目的目標(biāo)可以總結(jié)成提高顧客預(yù)定的效率和體驗(yàn),同時(shí)降低人工審核處理的工作量。
了解這些信息是最起碼的要求,假設(shè)你不了解這些項(xiàng)目的信息,直接開始跟著產(chǎn)品原型畫圖肯定是非常迷茫的。就像一個(gè)士兵被分了把槍到前線接收指令,你并不知道自己為何而站,為什么要占領(lǐng)前面那些陌生的高地。
業(yè)務(wù)分析則是了解項(xiàng)目具體面向業(yè)務(wù)的具體流程、規(guī)則、邏輯。渡輪的預(yù)定業(yè)務(wù)邏輯我們上篇已經(jīng)探討過了,很容易理解。但我們的項(xiàng)目是對(duì)原先業(yè)務(wù)流程的優(yōu)化,這就意味著業(yè)務(wù)端必然會(huì)發(fā)生一定的改變,我們就要清楚這個(gè)改變的原因,舊業(yè)務(wù)的模式和缺陷,以及新業(yè)務(wù)的形態(tài)和優(yōu)勢(shì)。
 

image.png

這些信息主要從產(chǎn)品經(jīng)理那里了解,或者他在特定的會(huì)議中會(huì)提供,就看你有沒有認(rèn)真聽了。即使沒說也可以主動(dòng)提問,這個(gè)問題并不復(fù)雜。
再接著就是產(chǎn)品分析,這個(gè)分析是理解產(chǎn)品經(jīng)理規(guī)劃的產(chǎn)品是什么樣的,即通過查看原型和文檔來理解他的意圖。雖然只是看,但理解起來并不會(huì)太輕松,越復(fù)雜的項(xiàng)目理解起來成本越高,所以我們也稱這個(gè)過程是一個(gè)分析過程。
如果不能理解這個(gè)邏輯,就可以找一本相機(jī)說明指南仔細(xì)閱讀,即使這本指南寫的事無巨細(xì),你要徹底搞懂它有哪些產(chǎn)品功能和對(duì)應(yīng)操作邏輯,也要花費(fèi)大量的精力和時(shí)間。

image.png

再下一步,就是體驗(yàn)分析部分,而這里要我們發(fā)揮主觀能動(dòng)性的部分就多了。通常,體驗(yàn)分析的目標(biāo),就是在產(chǎn)品需求確定后去找到有哪些可以提升體驗(yàn)的地方,確保最終設(shè)計(jì)的成果能讓用戶感覺體驗(yàn)更好。
要實(shí)現(xiàn)這個(gè)目標(biāo)就要盡可能了解用戶,即 ——
用戶調(diào)研
。因?yàn)轶w驗(yàn)是基于用戶產(chǎn)生的,只有足夠了解用戶你才知道怎么面向他們做什么。雖然用戶調(diào)研的方式多種多樣,但在B端領(lǐng)域中用研卻很簡單,因?yàn)槲覀兏菀字苯雍拖到y(tǒng)的操作員(不是用戶端消費(fèi)者)溝通,了解他們的訴求。
然后根據(jù)他們的訴求,來推導(dǎo)產(chǎn)品應(yīng)該怎么設(shè)計(jì)、怎么優(yōu)化更能滿足他們的訴求,技術(shù)處體驗(yàn)方案。這個(gè)過程可以講的內(nèi)容有很多,篇幅關(guān)系不在這里展開,了解體驗(yàn)分析對(duì)B端項(xiàng)目來說是非必須的,大致理解概念即可。
最后就是設(shè)計(jì)分析,即根據(jù)前面的獲取的信息,思考接下來的設(shè)計(jì)應(yīng)該完成哪些工作,以及交付什么樣的結(jié)果。用更直白的話說,就是足夠了解自己的工作目標(biāo)和任務(wù)。
因?yàn)楫a(chǎn)品需求不會(huì)清晰的寫著設(shè)計(jì)師要完成多少個(gè)頁面,畫多少個(gè)圖標(biāo),制作多少動(dòng)效,如何和程序員協(xié)作等,所以我們要自己對(duì) “確定要做” 的和 “可能會(huì)做” 的事情進(jìn)行分析,才能確定工作量。
 
以上就是前期準(zhǔn)備中要分析的內(nèi)容,根據(jù)項(xiàng)目的大小會(huì)花費(fèi)不同的精力和時(shí)間,但不會(huì)太多。它們遠(yuǎn)沒有大家想象中復(fù)雜,準(zhǔn)備做的越多,后續(xù)設(shè)計(jì)的效率也就越高,過稿率也會(huì)更高。
 
B端設(shè)計(jì)的實(shí)踐與交付
前面完成分析工作以后,下一步就可以展開設(shè)計(jì)相關(guān)的工作了。而正常設(shè)計(jì)流程絕不是打開Figma 創(chuàng)建第一個(gè)畫布開始一次性畫完所有內(nèi)容就結(jié)束了,而是要分為不同階段,逐步完成不同內(nèi)容的設(shè)計(jì)。
我們可以簡單分為下面幾類設(shè)計(jì)對(duì)象:
 
首先是交互設(shè)計(jì),交互是B端最重要的設(shè)計(jì)對(duì)象,決定產(chǎn)品界面的布局和操作方式。很多新人以為交互是產(chǎn)品經(jīng)理完成的,但實(shí)際上他們制作的產(chǎn)品原型只包含了少量的交互信息或是完全沒有。
所以設(shè)計(jì)師需要去填補(bǔ)交互信息,即產(chǎn)品怎么使用的規(guī)則。如果項(xiàng)目簡單,比如我們這次設(shè)計(jì)的預(yù)定系統(tǒng),因?yàn)椴僮骱徒换ズ苌伲强梢韵劝言O(shè)計(jì)做完以后再考慮交互的問題。但如果項(xiàng)目很復(fù)雜,就肯定要提前通過原型的方式把交互先確定下來,再完成后續(xù)的界面視覺設(shè)計(jì)。
為什么要做交互設(shè)計(jì),我們假設(shè)房間的退款流程非常復(fù)雜,要經(jīng)過人工操作和審批還有檢查等十幾個(gè)流程才能完成退款,中間有非常多的操作。如果我們不先做交互直接做頁面,很可能會(huì)因?yàn)楦鞣N錯(cuò)誤、意見要重做,這會(huì)造成巨大的時(shí)間浪費(fèi)。在項(xiàng)目中先完成交互的最大貢獻(xiàn)就在提高效率,而不是增加額外的工作量。
 
確定了功能、布局、交互以后,完成界面就變得輕松了也容易理解,而主要的難點(diǎn)就是你想做出什么風(fēng)格的界面,就是設(shè)計(jì)師自己發(fā)揮和探索的部分了。
 
對(duì)于小型項(xiàng)目來說,完成界面的設(shè)計(jì)基本就可以進(jìn)入后續(xù)的交付工作了。但如果是規(guī)模較大的項(xiàng)目,就需要再設(shè)計(jì)過程中制定 ——
項(xiàng)目設(shè)計(jì)規(guī)范
,來確保多人協(xié)作或未來迭代時(shí)設(shè)計(jì)的一致性和效率。
而B端項(xiàng)目設(shè)計(jì)規(guī)范主要包含三個(gè)部分內(nèi)容,即 ——
布局規(guī)范、樣式規(guī)范、組件庫
布局規(guī)范是B端界面框架、全局組件、響應(yīng)式規(guī)則、柵格參數(shù)的標(biāo)準(zhǔn),這些內(nèi)容決定了項(xiàng)目的整體布局和框架的一致性。
 
樣式規(guī)范則是UI元素上使用的樣式參數(shù)標(biāo)準(zhǔn),比如色彩、字體、字號(hào)、圓角、投影等。在Figma中提供的Style樣式功能,就是解決樣式規(guī)范應(yīng)用的重要工具之一。
 
組件庫是將設(shè)計(jì)好的UI元素進(jìn)行統(tǒng)一整理的地方,因?yàn)锽端不同B端界面中有大量重復(fù)應(yīng)用的設(shè)計(jì)元素,所以我們會(huì)這些元素進(jìn)行匯總,存放到固定的位置方便后面復(fù)用,而不用每次都重新設(shè)計(jì)一遍。
Figma提供的Component,就是幫助我們將組件進(jìn)行存儲(chǔ)并復(fù)用的功能,通過它可以很快的完成對(duì)同一個(gè)組件的匯總、編輯、復(fù)用。
 
設(shè)計(jì)的最后一個(gè)部分,就是動(dòng)效設(shè)計(jì)了。但在B端中,這部分的設(shè)計(jì)需求其實(shí)非常少,比如我們本次項(xiàng)目的界面就很簡單,完全不需要畫蛇添足去添加動(dòng)效。只有在完成界面設(shè)計(jì)后確實(shí)需要制作動(dòng)效演示的地方,設(shè)計(jì)師才會(huì)去制作相關(guān)的動(dòng)效演示。
所有設(shè)計(jì)完成且通過團(tuán)隊(duì)的評(píng)審以后,那最后的工作,就是協(xié)助程序員交付你的設(shè)計(jì)了。而交付部分包含 ——
標(biāo)注切圖和設(shè)計(jì)走查
兩個(gè)步驟。
標(biāo)注切圖就是提供項(xiàng)目的標(biāo)注文件,讓程序員可以看到設(shè)計(jì)的具體參數(shù)和說明,比如字號(hào)大小、間距、色號(hào)等等,他們需要根據(jù)這些信息完成對(duì)頁面開發(fā)的參數(shù)設(shè)置。切圖則是提供圖標(biāo)、圖片、LOGO等無法用代碼實(shí)現(xiàn)出來的視覺元素,它們需要將這些圖形置入到前端項(xiàng)目文件內(nèi),才能在頁面中正常顯示。
標(biāo)注和切圖的實(shí)現(xiàn)方式有很多種,今天最主流的方法有兩種,一種是直接使用 Figma的團(tuán)隊(duì)協(xié)作完成,另一種是上傳藍(lán)湖這類專屬的標(biāo)注、切圖工具。

image.png

最后的設(shè)計(jì)走查,是前端工程師在完成前端頁面開發(fā)以后,設(shè)計(jì)師去檢查軟件界面的 “還原度”。前端界面開發(fā)類似室內(nèi)裝修的施工,即使有詳細(xì)的圖紙最后的施工結(jié)果也可能想去甚遠(yuǎn)。
所以作為最熟悉設(shè)計(jì)稿的角色,設(shè)計(jì)師就需要去檢查開發(fā)出來的結(jié)果存在哪些問題,并通過特定工具來提交這些錯(cuò)誤并監(jiān)督程序員完成對(duì)它們的修復(fù),讓前端實(shí)現(xiàn)的界面和設(shè)計(jì)稿盡可能一致。
在B端項(xiàng)目中,往往留給設(shè)計(jì)走查的時(shí)間很少,所以最終上線效果大多和設(shè)計(jì)稿的差距極大。而專業(yè)B端設(shè)計(jì)師就要依靠自己的經(jīng)驗(yàn),盡可能在整個(gè)項(xiàng)目的開展過程中避免兩者的差距過大,這就是另一個(gè)話題了。
完成以上這些步驟以后,我們?cè)诒敬雾?xiàng)目的設(shè)計(jì)工作就基本結(jié)束,最終就是等待項(xiàng)目被開發(fā)完成并最終上線了。



作者:酸梅干超人
鏈接:https://www.zcool.com.cn/article/ZMTY4MDUwMA==.html
來源:站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。

蘭亭妙微(藍(lán)藍(lán)設(shè)計(jì))m.wtxcl.cn 是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)B端界面設(shè)計(jì)桌面端界面設(shè)計(jì)APP界面設(shè)計(jì)圖標(biāo)定制用戶體驗(yàn)設(shè)計(jì)交互設(shè)計(jì)UI咨詢高端網(wǎng)站設(shè)計(jì)平面設(shè)計(jì),以及相關(guān)的軟件開發(fā)服務(wù),咨詢電話:01063334945。

 

image.png

日歷

鏈接

個(gè)人資料

存檔