首頁(yè)

掌握這些基本要素,讓你的界面設(shè)計(jì)脫穎而出

天宇 設(shè)計(jì)思維

對(duì)于設(shè)計(jì)同學(xué)來(lái)說(shuō),很多基礎(chǔ)知識(shí)可能看起來(lái)很簡(jiǎn)單,容易被忽視。但隨著設(shè)計(jì)經(jīng)驗(yàn)越來(lái)越多,更建議大家牢固系統(tǒng)地掌握這些基礎(chǔ)知識(shí)。在本篇文章中作者給大家系統(tǒng)性地講解了界面設(shè)計(jì)進(jìn)階過(guò)程中需要搞懂的基本設(shè)計(jì)要素。一起來(lái)看吧。

當(dāng)下大多數(shù)界面設(shè)計(jì)類(lèi)軟件都是以矢量圖的方式工作。通過(guò)調(diào)整參數(shù)來(lái)定義圖形的大小,并且在不降低質(zhì)量的情況下對(duì)圖形進(jìn)行拉伸和放大。

界面設(shè)計(jì)進(jìn)階密籍:掌握這些基本要素,讓你的設(shè)計(jì)脫穎而出

在進(jìn)行界面設(shè)計(jì)時(shí),我們需要生成出各種尺寸的矩形、圓形等對(duì)象,規(guī)定這些對(duì)象的尺寸和樣式,并對(duì)這些對(duì)象進(jìn)行移動(dòng),將它們放到合適的位置上。

界面設(shè)計(jì)進(jìn)階密籍:掌握這些基本要素,讓你的設(shè)計(jì)脫穎而出

很多基礎(chǔ)知識(shí)可能看起來(lái)很簡(jiǎn)單,容易被忽視。但隨著設(shè)計(jì)經(jīng)驗(yàn)越來(lái)越多,更建議大家牢固系統(tǒng)地掌握這些基礎(chǔ)知識(shí),厚積薄發(fā)才能越走越遠(yuǎn)!

一、盒子模型

盒子模型是在設(shè)計(jì)和開(kāi)發(fā)中定義數(shù)字接口最基本的方法。我們所做的大多數(shù)設(shè)計(jì)都是根據(jù)盒子模型進(jìn)行,因此了解盒子模型對(duì)界面設(shè)計(jì)來(lái)說(shuō)非常重要。

盒子模型由四個(gè)主要元素組成:

內(nèi)容 (content)、內(nèi)邊距(padding)、邊框(border)、外邊距(margin)。

界面設(shè)計(jì)進(jìn)階密籍:掌握這些基本要素,讓你的設(shè)計(jì)脫穎而出

內(nèi)邊距(padding)是內(nèi)容和邊框線(xiàn)之間的空間,如下圖灰色區(qū)域。內(nèi)邊距的范圍越廣,內(nèi)容的安全區(qū)域就越大。

外邊距(margin)是盒子與其他元素之間的空白區(qū)域,如下圖藍(lán)色區(qū)域。外邊距保證了盒子與盒子之間有足夠的間距。

二、尺寸

寬度(width)和高度(height)是定義對(duì)象大小的參數(shù)。在二維空間上,寬度代表橫軸上的比例,高度代表縱軸上的比例。

界面設(shè)計(jì)進(jìn)階密籍:掌握這些基本要素,讓你的設(shè)計(jì)脫穎而出

一定比例的寬和高構(gòu)成的矩形是容納對(duì)象的最小矩形框。如果對(duì)象本身是不規(guī)則的形狀,在設(shè)計(jì)時(shí)我們需要根據(jù)對(duì)象的尺寸制定一個(gè)規(guī)則的矩形框,方便交付開(kāi)發(fā)。

界面設(shè)計(jì)進(jìn)階密籍:掌握這些基本要素,讓你的設(shè)計(jì)脫穎而出

三、角度

角度定義了對(duì)象順時(shí)針旋轉(zhuǎn)的方向,默認(rèn)為0°。另外旋轉(zhuǎn)也可以是負(fù)數(shù),比如-15°旋轉(zhuǎn)與345°旋轉(zhuǎn)的角度是相同的。

界面設(shè)計(jì)進(jìn)階密籍:掌握這些基本要素,讓你的設(shè)計(jì)脫穎而出

如果我們想要一個(gè)統(tǒng)一的界面,最好不要手動(dòng)旋轉(zhuǎn)對(duì)象,而是通過(guò)輸入度數(shù)來(lái)旋轉(zhuǎn),這樣會(huì)比手動(dòng)旋轉(zhuǎn)更精確。

旋轉(zhuǎn)對(duì)圓形來(lái)說(shuō)是特殊的存在,因?yàn)橐粋€(gè)圓形無(wú)論旋轉(zhuǎn)到哪個(gè)角度看都是一樣的。

界面設(shè)計(jì)進(jìn)階密籍:掌握這些基本要素,讓你的設(shè)計(jì)脫穎而出

四、圓角半徑

邊框半徑數(shù)值越大,這個(gè)形狀的圓角度數(shù)就越大。例如一個(gè)矩形,既能一次性設(shè)置四個(gè)點(diǎn)的圓角半徑,也可以單獨(dú)設(shè)置某個(gè)點(diǎn)的圓角半徑。

正常來(lái)說(shuō),設(shè)置圓角的圖形看起來(lái)比直角圖形更友好。界面設(shè)計(jì)中,相同的圖形最好能保持一樣的的圓角度數(shù),這樣界面看起來(lái)會(huì)更統(tǒng)一。

界面設(shè)計(jì)進(jìn)階密籍:掌握這些基本要素,讓你的設(shè)計(jì)脫穎而出

另外一個(gè)圖形是否需要圓角,要根據(jù)產(chǎn)品風(fēng)格靈活選擇,確保與當(dāng)前使用場(chǎng)景相匹配。例如某個(gè)產(chǎn)品的logo或主視覺(jué)使用了不同半徑的圓角,在界面中我們也可以使用不同半徑的圓角按鈕,保持風(fēng)格統(tǒng)一。

界面設(shè)計(jì)進(jìn)階密籍:掌握這些基本要素,讓你的設(shè)計(jì)脫穎而出

一旦我們決定了用某種樣式的圓角按鈕,那么界面中的其他按鈕也應(yīng)該保持一致。

五、填充

填充是指對(duì)對(duì)象內(nèi)容的操作,填充的可以是一種顏色,也可以是一張圖片。

針對(duì)不同對(duì)象,我們需要差異化定義每個(gè)對(duì)象的填充效果,保證這些對(duì)象簡(jiǎn)單易懂,清晰可見(jiàn)。

界面設(shè)計(jì)進(jìn)階密籍:掌握這些基本要素,讓你的設(shè)計(jì)脫穎而出

在設(shè)計(jì)過(guò)程中,可以對(duì)同一個(gè)對(duì)象組合使用多種填充效果。例如一個(gè)正方形頭像,首先填充一張照片,在照片的基礎(chǔ)上再添加各種顏色效果,能讓頭像的設(shè)計(jì)與界面更匹配。

界面設(shè)計(jì)進(jìn)階密籍:掌握這些基本要素,讓你的設(shè)計(jì)脫穎而出

六、描邊

如果說(shuō)填充強(qiáng)調(diào)對(duì)象內(nèi)部,那么描邊就是對(duì)對(duì)象外部邊框的操作。

描邊分為內(nèi)部邊框、居中邊框和外部邊框三種樣式,其中只有內(nèi)部邊框不會(huì)在視覺(jué)上使對(duì)象變大。

界面設(shè)計(jì)進(jìn)階密籍:掌握這些基本要素,讓你的設(shè)計(jì)脫穎而出

例如下圖是一個(gè)60px大小的正方形,有2px的描邊。從左起分別是內(nèi)邊框、居中邊框、外邊框的描邊效果。因?yàn)閮?nèi)邊框是在正方形內(nèi)部描邊,所以視覺(jué)上看這個(gè)正方形仍是60px大小。

界面設(shè)計(jì)進(jìn)階密籍:掌握這些基本要素,讓你的設(shè)計(jì)脫穎而出

居中邊框是指正方形的外部和內(nèi)部各占1px,那么采用居中邊框的正方形尺寸變成了62×62。

同理,外部邊框是指正方形的外部多了2px,采用外部邊框的正方形尺寸變成了64×64。

對(duì)于不同的對(duì)象,我們可以設(shè)定不同寬度的描邊,描邊的樣式可以是虛線(xiàn)、實(shí)線(xiàn)、純色、漸變色等多種樣式。

界面設(shè)計(jì)進(jìn)階密籍:掌握這些基本要素,讓你的設(shè)計(jì)脫穎而出

目前大多數(shù)設(shè)計(jì)軟件支持修改描邊的端點(diǎn)和節(jié)點(diǎn)。端點(diǎn)樣式包括方頭、平頭和圓頭,節(jié)點(diǎn)樣式包括斜接連接、圓角連接、斜角連接。

界面設(shè)計(jì)進(jìn)階密籍:掌握這些基本要素,讓你的設(shè)計(jì)脫穎而出

七、陰影

陰影是UI設(shè)計(jì)中最常用的效果,根據(jù)對(duì)象的X軸、Y軸的偏移程度、模糊程度、擴(kuò)展程度、顏色和不透明度等屬性構(gòu)成。

界面設(shè)計(jì)進(jìn)階密籍:掌握這些基本要素,讓你的設(shè)計(jì)脫穎而出

通過(guò)設(shè)置模糊能讓陰影的面積擴(kuò)散擴(kuò)得更大,顏色由深變淺。一般來(lái)說(shuō)陰影的不透明度低于40%時(shí),呈現(xiàn)的效果比較好。

界面設(shè)計(jì)進(jìn)階密籍:掌握這些基本要素,讓你的設(shè)計(jì)脫穎而出

當(dāng)陰影的擴(kuò)展程度為負(fù)數(shù)時(shí),陰影看起來(lái)會(huì)更自然。對(duì)比上下兩個(gè)圖例也能看出來(lái),擴(kuò)展程度為負(fù)時(shí)陰影看起來(lái)更柔和。

界面設(shè)計(jì)進(jìn)階密籍:掌握這些基本要素,讓你的設(shè)計(jì)脫穎而出

使用陰影有助于劃分界面的層次結(jié)構(gòu)!在設(shè)計(jì)中,讓陰影看起來(lái)自然柔和不生硬是界面美觀與否的關(guān)鍵因素之一。

首先要避免純黑色陰影,純黑對(duì)比太強(qiáng)會(huì)影響視覺(jué)效果,建議使用基礎(chǔ)色調(diào)派生的顏色作為陰影顏色。

例如基礎(chǔ)色是綠色,可以使用飽和度、亮度較低的深綠色作為陰影顏色。陰影顏色確定后,再給陰影足夠大的模糊數(shù)值,最終會(huì)得到了一個(gè)不錯(cuò)的陰影效果。

界面設(shè)計(jì)進(jìn)階密籍:掌握這些基本要素,讓你的設(shè)計(jì)脫穎而出

顏色太深、太生硬的陰影和按鈕顏色對(duì)比太大,設(shè)計(jì)時(shí)應(yīng)盡可能調(diào)整陰影的顏色、透明度等參數(shù),避免生成這種效果;把黑色陰影調(diào)整成同色系的深色陰影,陰影的效果看起來(lái)就會(huì)更自然、更柔和;再把陰影的擴(kuò)展程度調(diào)成負(fù)數(shù),就能消除陰影的外展,讓陰影看起來(lái)更真實(shí)。

界面設(shè)計(jì)進(jìn)階密籍:掌握這些基本要素,讓你的設(shè)計(jì)脫穎而出

內(nèi)陰影

內(nèi)陰影在UI設(shè)計(jì)中相對(duì)少見(jiàn),內(nèi)陰影和上面所講的陰影有相同的參數(shù)設(shè)置,只不過(guò)內(nèi)陰影是在圖形內(nèi)部起效果。

界面設(shè)計(jì)進(jìn)階密籍:掌握這些基本要素,讓你的設(shè)計(jì)脫穎而出

內(nèi)陰影無(wú)法像外陰影那樣展現(xiàn)圖層之間的深度和層級(jí)關(guān)系,只對(duì)圖形內(nèi)部起作用。如果內(nèi)陰影使用太多,可能會(huì)混淆圖層間的層級(jí)關(guān)系,讓界面關(guān)系看起來(lái)不明確。

界面設(shè)計(jì)進(jìn)階密籍:掌握這些基本要素,讓你的設(shè)計(jì)脫穎而出

八、模糊

1. 高斯模糊

高斯模糊是最常用的設(shè)計(jì)效果,呈現(xiàn)出從中心向四周均勻擴(kuò)散的模糊效果。高斯模糊由半徑控制,半徑數(shù)值越大,模糊效果越明顯。

高斯模糊常用在界面之間的過(guò)渡或者用來(lái)模糊背景突出景深效果。

界面設(shè)計(jì)進(jìn)階密籍:掌握這些基本要素,讓你的設(shè)計(jì)脫穎而出

高斯模糊還可以作為陰影效果,放在對(duì)象下面使用。例如新建一個(gè)橢圓做成模糊效果,放在對(duì)象下面,就能快速呈現(xiàn)出一個(gè)帶有陰影的效果。

界面設(shè)計(jì)進(jìn)階密籍:掌握這些基本要素,讓你的設(shè)計(jì)脫穎而出

2. 背景模糊

蘋(píng)果在操作系統(tǒng)中經(jīng)常使用背景模糊,呈現(xiàn)出背景很模糊的玻璃效果。

背景模糊主要針對(duì)圖層覆蓋的內(nèi)容起作用,比如新建一個(gè)矩形調(diào)整透明度,做成背景模糊效果,那么該圖層覆蓋的區(qū)域會(huì)變模糊,圖層沒(méi)有覆蓋的區(qū)域保持不變。

界面設(shè)計(jì)進(jìn)階密籍:掌握這些基本要素,讓你的設(shè)計(jì)脫穎而出

3. 動(dòng)感模糊

動(dòng)感模糊由模糊數(shù)值和角度兩個(gè)參數(shù)控制,用來(lái)模擬對(duì)象在不同角度上的移動(dòng)效果。

界面設(shè)計(jì)進(jìn)階密籍:掌握這些基本要素,讓你的設(shè)計(jì)脫穎而出

4. 縮放模糊

當(dāng)對(duì)象由內(nèi)到外變得模糊時(shí),就會(huì)發(fā)生縮放模糊。這種模糊效果在界面設(shè)計(jì)中用得較少。

界面設(shè)計(jì)進(jìn)階密籍:掌握這些基本要素,讓你的設(shè)計(jì)脫穎而出

縮放模糊由模糊數(shù)值和原點(diǎn)兩個(gè)參數(shù)控制。在縮放模糊中可以隨機(jī)設(shè)置模糊原點(diǎn),通過(guò)移動(dòng)原點(diǎn)獲得一些有趣的圖形效果。

界面設(shè)計(jì)進(jìn)階密籍:掌握這些基本要素,讓你的設(shè)計(jì)脫穎而出

最后

以上是界面設(shè)計(jì)進(jìn)階過(guò)程中需要搞懂的基本設(shè)計(jì)要素,希望通過(guò)本次系統(tǒng)性的講解,能更進(jìn)一步提升設(shè)計(jì)精細(xì)度

專(zhuān)欄作家

作者:Clippp,每周精選設(shè)計(jì)文章,專(zhuān)注分享關(guān)于產(chǎn)品、交互、UI視覺(jué)上的設(shè)計(jì)思考。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)作者許可,禁止轉(zhuǎn)載。

題圖來(lái)自 Unsplash,基于CC0協(xié)議。

該文觀點(diǎn)僅代表作者本人,人人都是產(chǎn)品經(jīng)理平臺(tái)僅提供信息存儲(chǔ)空間服務(wù)。

蘭亭妙微(bouu.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶(hù)體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢(xún)、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì),以及相關(guān)的軟件開(kāi)發(fā)服務(wù),咨詢(xún)電話(huà):01063334945。我們建立了一個(gè)微信群,每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì),有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng),咨詢(xún)及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan

完美界面設(shè)計(jì)秘訣:界面設(shè)計(jì)的八大黃金法則

天宇 設(shè)計(jì)思維

如果你想設(shè)計(jì)出卓越,高效和流暢的用戶(hù)界面,就請(qǐng)參考Ben Shneiderman的“界面設(shè)計(jì)的八大黃金法則” 。蘋(píng)果,谷歌和微軟設(shè)計(jì)的產(chǎn)品都反映了Shneiderman的法則,這些行業(yè)巨頭制定的用戶(hù)界面指南都包含Shneiderman黃金法則中的特征,而這些公司的熱門(mén)界面設(shè)計(jì)則是法則的視覺(jué)體現(xiàn)。本文將告訴你如何整合8大黃金法則來(lái)改進(jìn)你的工作。

界面設(shè)計(jì)的八大黃金法則

Ben Shneiderman(生于1947年8月21日)是美國(guó)馬里蘭大學(xué)人機(jī)交互實(shí)驗(yàn)室的計(jì)算機(jī)科學(xué)家和教授。他的工作可以媲美Don Norman和Jakob Nielsen。Shneiderman在其熱門(mén)書(shū)“設(shè)計(jì)用戶(hù)界面:有效的人機(jī)交互策略(Designing the User Interface: Strategies for Effective Human-Computer Interaction)”中介紹了界面設(shè)計(jì)的八個(gè)黃金法則:

一致性

當(dāng)你在設(shè)計(jì)類(lèi)似的功能和操作時(shí),可以利用熟悉的圖標(biāo),顏色,菜單的層次結(jié)構(gòu),行為召喚,用戶(hù)流程圖來(lái)實(shí)現(xiàn)一致性。規(guī)范信息表現(xiàn)的方式可以減少用戶(hù)認(rèn)知負(fù)擔(dān),用戶(hù)體驗(yàn)易懂流暢。一致性通過(guò)幫助用戶(hù)快速熟悉產(chǎn)品的數(shù)字化環(huán)境從而更輕松地實(shí)現(xiàn)其目標(biāo)。

常用用戶(hù)使用快捷操作

隨著使用次數(shù)的增加,用戶(hù)需要有更快的完成任務(wù)的方法。例如,Windows和Mac為用戶(hù)提供了用于復(fù)制和粘貼的鍵盤(pán)快捷方式,隨著用戶(hù)更有經(jīng)驗(yàn),他們可以更快速,輕松地瀏覽和操作用戶(hù)界面。

提供有用信息的反饋

用戶(hù)每完成一個(gè)操作,需要系統(tǒng)給出反饋,然后用戶(hù)才能感知并進(jìn)入下一步操作。反饋有很多類(lèi)型,例如聲音提示,觸摸感,語(yǔ)言提示,以及各種類(lèi)型的組合。對(duì)于用戶(hù)的每一個(gè)動(dòng)作,應(yīng)該在合理的時(shí)間內(nèi)提供適當(dāng)?shù)?,人性化的反饋。如設(shè)計(jì)多頁(yè)問(wèn)卷時(shí)應(yīng)該告訴用戶(hù)進(jìn)行到哪個(gè)步驟,要保證讓用戶(hù)在盡量少受干擾的情況下得到最有價(jià)值的信息。

作者/版權(quán)持有人:Google,Inc.    版權(quán)條款和許可:合理使用

Windows Media Player設(shè)計(jì)師應(yīng)該牢記Ben Shneiderman的第三個(gè)黃金法則:提供有用信息的反饋。體驗(yàn)不佳的錯(cuò)誤消息通常會(huì)只顯示錯(cuò)誤代碼,對(duì)用戶(hù)來(lái)說(shuō)這毫無(wú)意義。作為一名好的設(shè)計(jì)師,你應(yīng)該始終給用戶(hù)以可讀和有意義的反饋。

設(shè)計(jì)流程需要設(shè)計(jì)一個(gè)完結(jié)

不要讓你的用戶(hù)猜來(lái)猜去,告訴他們其操作會(huì)引導(dǎo)他們到哪個(gè)步驟。例如,用戶(hù)在完成在線(xiàn)購(gòu)買(mǎi)后看到“謝謝購(gòu)買(mǎi)”消息提示和支付憑證后會(huì)感到滿(mǎn)足和安心。

提供簡(jiǎn)潔的錯(cuò)誤操作的解決方案

用戶(hù)不喜歡被告知其操作錯(cuò)誤。設(shè)計(jì)時(shí)應(yīng)該盡量考慮如何減少用戶(hù)犯錯(cuò)誤的機(jī)會(huì),但如果用戶(hù)操作時(shí)發(fā)生不可避免的錯(cuò)誤,不能只報(bào)錯(cuò)而不提供解決方案,請(qǐng)確保為用戶(hù)提供簡(jiǎn)單,直觀的分步說(shuō)明,以引導(dǎo)他們輕松快速地解決問(wèn)題。例如,用戶(hù)在填寫(xiě)在線(xiàn)表單時(shí)忘記填寫(xiě)某個(gè)輸入框時(shí),可以標(biāo)記這個(gè)輸入框以提醒用戶(hù)。

允許撤銷(xiāo)操作

設(shè)計(jì)人員應(yīng)為用戶(hù)提供明顯的方式來(lái)讓用戶(hù)恢復(fù)之前的操作,無(wú)論是單次動(dòng)作,數(shù)據(jù)輸入還是整個(gè)動(dòng)作序列后都應(yīng)允許進(jìn)行返回操作,正如Shneiderman在他的書(shū)中所說(shuō):

“這個(gè)功能減輕了焦慮,因?yàn)橛脩?hù)知道即便操作失誤,之前的操作也可以被撤銷(xiāo),鼓勵(lì)用戶(hù)去大膽放手探索。”

給用戶(hù)掌控感

設(shè)計(jì)時(shí)應(yīng)考慮如何讓用戶(hù)主動(dòng)去使用,而不是被動(dòng)接受,要讓用戶(hù)感覺(jué)他們對(duì)數(shù)字空間中一系列操作了如指掌,在設(shè)計(jì)時(shí)按照他們預(yù)期的方式來(lái)獲得他們的信任。

減少短時(shí)記憶負(fù)擔(dān) 

人的記憶力是有限的,我們的短時(shí)記憶每次最多只能記住五個(gè)東西。因此,界面設(shè)計(jì)應(yīng)當(dāng)盡可能簡(jiǎn)潔,保持適當(dāng)?shù)男畔哟谓Y(jié)構(gòu),讓用戶(hù)去再認(rèn)信息而不是去回憶。再認(rèn)信息總是比回憶更容易,因?yàn)樵僬J(rèn)通過(guò)感知線(xiàn)索讓相關(guān)信息重現(xiàn)。例如,我們經(jīng)常發(fā)現(xiàn)選擇題比簡(jiǎn)答題更容易,因?yàn)檫x擇題只需要我們對(duì)正確答案再認(rèn),而不是從我們的記憶中提取。被彭博商業(yè)周刊稱(chēng)為“世界上最具影響力的設(shè)計(jì)師之一”的Jakob Nielsen發(fā)明了幾種可用性研究方法,包括啟發(fā)式評(píng)估。信息再認(rèn)而非回憶就是Nielsen界面設(shè)計(jì)10種可用性啟發(fā)式原則之一。

了解蘋(píng)果的設(shè)計(jì)如何整合Shneiderman的8大黃金法則

蘋(píng)果整合Shneiderman的八項(xiàng)黃金法設(shè)計(jì)出成功的產(chǎn)品,他們從Mac到移動(dòng)設(shè)備設(shè)計(jì)都取得了巨大的成功,他們以產(chǎn)品設(shè)計(jì)的一致性,直觀而美麗為榮。蘋(píng)果的iOS人機(jī)界面指南也告訴我們他們的設(shè)計(jì)團(tuán)隊(duì)如何應(yīng)用Shneiderman的設(shè)計(jì)原則。

1. 一致性

“一致性”和“感知的穩(wěn)定性”在Mac OS的設(shè)計(jì)中體現(xiàn)得淋漓盡致。不管是80年代的版本,還是現(xiàn)在的版本,Mac OS菜單欄設(shè)計(jì)都包含一致的圖形元素。

作者/版權(quán)持有人:StockSnap.io    版權(quán)條款和許可:CC0

作者/版權(quán)持有人:StockSnap.io    版權(quán)條款和許可證:CC0

隨著時(shí)間的推移,Mac OS的外觀有很大變化,Mac OS菜單欄設(shè)計(jì)都保持一致。

2. 快捷操作

如前所述,Mac允許用戶(hù)使用各種鍵盤(pán)快捷鍵,使用頻率高的包括復(fù)制和粘貼(Command-X和Command-V)以及截圖(Command-Shift-3)。

作者/版權(quán)持有人:StockSnap.io    版權(quán)條款和許可證:CC0

Mac允許用戶(hù)鍵盤(pán)快捷方式操作實(shí)現(xiàn)通常需要鼠標(biāo)、觸控板或其他輸入設(shè)備才能完成的操作。

3. 有用信息反饋

當(dāng)用戶(hù)點(diǎn)擊Mac桌面上的文件時(shí),該文件會(huì)“突出顯示”,這是視覺(jué)反饋的一個(gè)很好的示例。另外,當(dāng)用戶(hù)拖動(dòng)桌面上的文件夾時(shí),他們可以看到在按住鼠標(biāo)時(shí),文件夾顯示被移動(dòng)的狀態(tài)。

作者/版權(quán)持有人:Euphemia Wong    版權(quán)條款和許可:合理使用

作者/版權(quán)持有人:Euphemia Wong    版權(quán)條款和許可:合理使用

4.  操作流程的設(shè)計(jì)

當(dāng)用戶(hù)將軟件安裝到Mac OS時(shí),提示信息的屏幕顯示用戶(hù)當(dāng)前的安裝步驟。

作者/版權(quán)持有人:Google,Inc.    版權(quán)條款和許可:合理使用

5.  錯(cuò)誤操作的解決方案

在軟件安裝過(guò)程中,如果發(fā)生錯(cuò)誤,用戶(hù)將收到友好的提示信息。提供復(fù)雜的解決方案,或用戶(hù)難以理解的解決方案,或只報(bào)錯(cuò)不提供解決方案,都是極大影響用戶(hù)體驗(yàn),使用戶(hù)沮喪的關(guān)鍵原因。根據(jù)錯(cuò)誤操作的嚴(yán)重程度,區(qū)分何時(shí)使用小的,不會(huì)影響用戶(hù)操作的提醒,以及何時(shí)使用大的,侵入式提醒。但當(dāng)錯(cuò)誤操作發(fā)生時(shí),請(qǐng)謹(jǐn)慎選擇正確的語(yǔ)氣和正確的語(yǔ)言提醒用戶(hù)操作錯(cuò)誤。

作者/版權(quán)持有人:Google,Inc.    版權(quán)條款和許可:合理使用

Mac OS通過(guò)顯示一個(gè)溫和的提示消息向用戶(hù)解釋出現(xiàn)了什么錯(cuò)誤操作及其原因。另外,解釋這是由于自己的安全偏好選擇,進(jìn)一步向用戶(hù)保證,告訴他們一切在掌控范圍內(nèi)。

作者/版權(quán)持有人:Manutencaonet Blogspot     版權(quán)條款和許可:CC BY 3.0

Windows系統(tǒng)中這個(gè)非常不友好的提示信息使用“fatal(后果嚴(yán)重的)”和“terminated(被終止)”字樣。這樣的負(fù)面的,不友好的言語(yǔ)肯定會(huì)嚇倒大多數(shù)用戶(hù)!

6. 允許撤銷(xiāo)操作

當(dāng)用戶(hù)在安裝過(guò)程中提供信息時(shí)發(fā)生錯(cuò)誤,允許他們重新回到上一步,而不必重新開(kāi)始。

作者/版權(quán)持有人:Euphemia Wong    版權(quán)條款和許可:合理使用

7. 給用戶(hù)掌控感

讓用戶(hù)有權(quán)選擇是繼續(xù)運(yùn)行程序還是退出程序,Mac的活動(dòng)監(jiān)視器允許用戶(hù)在程序意外崩潰時(shí)“強(qiáng)制退出”。

作者/版權(quán)持有人:Euphemia Wong    版權(quán)條款和許可:合理使用

8. 減少短時(shí)記憶負(fù)荷

由于人類(lèi)短時(shí)記憶每次只能記住5個(gè)東西,所以蘋(píng)果iPhone屏幕底部的主菜單區(qū)域中只能放置4個(gè)及以下的應(yīng)用程序圖標(biāo),這個(gè)設(shè)計(jì)不僅涉及對(duì)記憶負(fù)荷的考慮,還考慮了不同版本一致性問(wèn)題。

作者/版權(quán)持有人:Brian Voo    版權(quán)條款和許可:合理使用

工作表:如何將Shneiderman的8項(xiàng)黃金法則應(yīng)用于你的界面設(shè)計(jì)

作為設(shè)計(jì)師,你的工作是創(chuàng)建直觀,精美和流暢的用戶(hù)界面設(shè)計(jì),讓用戶(hù)感到輕松和滿(mǎn)意。下面這個(gè)工作表可以幫你把上述這些規(guī)則應(yīng)用于你的設(shè)計(jì)中。

譯者:oftodesign

原文作者:Euphemia Wong(The Interaction Design Foundation用戶(hù)體驗(yàn)研究員,設(shè)計(jì)師)

本文由 @oftodesign 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載。

蘭亭妙微(bouu.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶(hù)體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢(xún)、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì),以及相關(guān)的軟件開(kāi)發(fā)服務(wù),咨詢(xún)電話(huà):01063334945。我們建立了一個(gè)微信群,每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì),有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng),咨詢(xún)及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan

界面設(shè)計(jì)方法:界面設(shè)計(jì)的原則與標(biāo)準(zhǔn)

天宇 設(shè)計(jì)思維

編輯導(dǎo)語(yǔ):前幾篇文章中,我們已經(jīng)了解到了許多關(guān)于界面設(shè)計(jì)的相關(guān)知識(shí)。今天這篇文章讓我們回歸一下界面設(shè)計(jì)本身,談一談其設(shè)計(jì)原則與標(biāo)準(zhǔn),希望對(duì)你有幫助。

前面介紹了5種基本的界面形式,如果從構(gòu)成界面的要素(構(gòu)件)層面看,實(shí)際上所有的界面都是一樣的,因?yàn)樗鼈兌际怯赏瑯拥目丶?gòu)成的,只是控件的位置不同而已。

因此就有必要對(duì)界面的布置進(jìn)行統(tǒng)一的標(biāo)準(zhǔn)化,建立了界面布置的標(biāo)準(zhǔn)后設(shè)計(jì)效率會(huì)提升、同時(shí)也為界面設(shè)計(jì)資料的復(fù)用奠定了基礎(chǔ)。

界面設(shè)計(jì)的標(biāo)準(zhǔn)化非常重要,因?yàn)榻缑媸怯脩?hù)認(rèn)知系統(tǒng)的窗口,這個(gè)標(biāo)準(zhǔn)實(shí)際上是構(gòu)建“人-機(jī)-人”工作環(huán)境的標(biāo)準(zhǔn)之一,標(biāo)準(zhǔn)化的界面形式也可以減少用戶(hù)的認(rèn)知負(fù)擔(dān)和培訓(xùn)成本。

這里給出一些界面設(shè)計(jì)上的基本原則和標(biāo)準(zhǔn)供作參考,按照從整體到局部的順序,重點(diǎn)提出以下的幾個(gè)界面設(shè)計(jì)時(shí)的原則與標(biāo)準(zhǔn)(不限于此):

  • 界面布局對(duì)原則
  • 子窗體設(shè)置的原則
  • 字段控件的標(biāo)準(zhǔn)
  • 美工設(shè)計(jì)的原則

這些原則/標(biāo)準(zhǔn)根據(jù)界面的使用場(chǎng)景不同、設(shè)計(jì)師的設(shè)計(jì)理念的不同等都會(huì)有所不同,需要根據(jù)具體情況具體分析設(shè)計(jì),這些原則和標(biāo)準(zhǔn)僅供參考。

一、界面布局的原則

1. 整體布局

界面的布局是用戶(hù)理解業(yè)務(wù)功能的重要手段,布局一定要以“業(yè)務(wù)導(dǎo)向”,布局的規(guī)范化、規(guī)律化可以培養(yǎng)用戶(hù)逐漸地走向“無(wú)師自通”的方向,如:

  1. 同類(lèi)界面的布局要統(tǒng)一,卡式、主細(xì)表、樹(shù)形等同樣格式要風(fēng)格一致;
  2. 重要信息放在界面的核心位置,如:左上方位置,次要信息放在其它位置。關(guān)于界面重要信息的擺放位置請(qǐng)參看前面的博文;
  3. 界面上近似內(nèi)容要放在相近處,如:加框以示區(qū)別、或拉大與其它內(nèi)容區(qū)域的距離;
  4. 重視用戶(hù)界面友好性,易于操作、易于查看,比如:常用按鈕在鼠標(biāo)移動(dòng)最短的地方配置。工具欄的左端配置界面操作開(kāi)始的功能按鈕、右端配置界面操作結(jié)束功能按鈕等;
  5. 界面橫向一次的顯示信息量(標(biāo)題個(gè)數(shù))多少,要以完成一次操作不用或是少用橫向滾動(dòng)條為標(biāo)準(zhǔn)(縱向滾動(dòng)條不限),因?yàn)轭l繁使用橫向滾動(dòng)條會(huì)使得用戶(hù)看到了左端的信息看就不到右端、造成看了右端又忘了左端信息的現(xiàn)象。

界面設(shè)計(jì)方法 (2) — 4.界面設(shè)計(jì)的原則與標(biāo)準(zhǔn)

圖1 布局原則

如圖1所示,細(xì)表區(qū)的標(biāo)題設(shè)置過(guò)多(A~J),致使大約有40%的信息在處在窗口外,用戶(hù)不使用橫向滾動(dòng)條就看不到。

如果這是一個(gè)頻繁操作的動(dòng)作,那么工作效率就會(huì)低下,這就是所謂的應(yīng)用體驗(yàn)設(shè)計(jì)的不好,這種設(shè)計(jì)會(huì)極大地造成用戶(hù)滿(mǎn)意度的下降。解決的方法可以考慮采用分頁(yè)表達(dá)的形式。

注:對(duì)具有自適應(yīng)功能的界面也存在同樣的原則,由于列數(shù)過(guò)多界面自適應(yīng)后的字體太小看不清楚,為了看清楚必須要放大字體,結(jié)果還是要頻繁地使用橫向滾動(dòng)條,所以適當(dāng)減少列數(shù)是最有效的解決方法。

2. 局部尺寸

要約定好界面上基本的控件距離、尺寸,參見(jiàn)圖2,比如:

  • 窗口與控件之間的距離;
  • 控件之間的間距,包括縱向的行間距、橫向的字段框間距等;
  • 控件的高度;
  • 使用文字的字號(hào)大小等。

界面設(shè)計(jì)方法 (2) — 4.界面設(shè)計(jì)的原則與標(biāo)準(zhǔn)

圖2 界面設(shè)計(jì)標(biāo)準(zhǔn)的制定

二、子窗體設(shè)置原則

以組件的主界面為第一層界面,子窗體的層數(shù)最好控制在3層以?xún)?nèi),也就是連續(xù)打開(kāi)三個(gè)界面為限,參見(jiàn)圖3:

  • 從菜單第一次打開(kāi)的為主界面(父)
  • 從主界面打開(kāi)的第二層為子界面(子)
  • 從子界面打開(kāi)的第三層為子界面的子界面(孫)等

界面設(shè)計(jì)方法 (2) — 4.界面設(shè)計(jì)的原則與標(biāo)準(zhǔn)

圖3 子窗體的層數(shù)示意圖

如果內(nèi)容實(shí)在是比較多,最終彈出的子窗體要超過(guò)3層時(shí),可以考慮另外再設(shè)置一個(gè)組件來(lái)分擔(dān)處理的內(nèi)容,不然子界面彈出過(guò)多,就會(huì)造成界面的混亂,會(huì)降低用戶(hù)的操作效率。

三、字段控件的標(biāo)準(zhǔn)

字段控件的表達(dá)格式根據(jù)內(nèi)容不同而不同,字段控件由兩個(gè)部分構(gòu)成:標(biāo)題欄和輸入框,參見(jiàn)圖4:

界面設(shè)計(jì)方法 (2) — 4.界面設(shè)計(jì)的原則與標(biāo)準(zhǔn)

圖4 字段控件的長(zhǎng)度與數(shù)據(jù)位置

1. 標(biāo)題欄的長(zhǎng)度

標(biāo)題的字?jǐn)?shù)不要太多,因?yàn)闃?biāo)題長(zhǎng)到如同一句話(huà)時(shí)就不容易記憶了,最佳字?jǐn)?shù)在2~6個(gè)字之間(易于記憶與稱(chēng)呼的長(zhǎng)度);另外標(biāo)題中的文字位置可以參考:有背景框時(shí)居中,沒(méi)有時(shí)居左或居右,圖4中的標(biāo)題欄有背景色,所以采用了文字居中的形式。

注:這里的”標(biāo)題欄名稱(chēng)“指的是”字段名稱(chēng)“,不是4個(gè)業(yè)務(wù)功能中的”表單名稱(chēng)“,后者可以按照實(shí)際的名稱(chēng)寫(xiě),多少字都可以,不必要設(shè)置字?jǐn)?shù)。

2. 輸入框的長(zhǎng)度

輸入框的字段長(zhǎng)度是不一定的,建議輸入框的長(zhǎng)度與字?jǐn)?shù)相匹配不必統(tǒng)一,如圖4(a)的式樣,因?yàn)槿绻y(tǒng)一長(zhǎng)度就一定會(huì)以字?jǐn)?shù)最多的字段為準(zhǔn),那么字?jǐn)?shù)少的字段也用長(zhǎng)輸入框就不容易讀取,而且輸入框的長(zhǎng)度一樣時(shí)字段之間的辨識(shí)度就會(huì)降低,尋找某個(gè)字段的時(shí)間會(huì)增加。

比如:圖4(b)樣式的“工程月數(shù)”字段只有2個(gè)單位的長(zhǎng)度,如果采用和具有30個(gè)單位長(zhǎng)度的“項(xiàng)目名稱(chēng)”一樣長(zhǎng)的輸入框時(shí),則“工程月數(shù)”就會(huì)因?yàn)闃?biāo)題與數(shù)據(jù)的距離太遠(yuǎn)而不容易讀?。床粶?zhǔn))。

相比較而言,圖4(a)樣式中的“座機(jī)號(hào)碼”、“郵政編號(hào)”、”工程月數(shù)“的輸入框長(zhǎng)度比較短,就比較容易尋找和識(shí)別。

3. 數(shù)據(jù)的位置

輸入框內(nèi)數(shù)據(jù)的位置,根據(jù)內(nèi)容不同而不同,參見(jiàn)圖4(a):

  • ①文字型數(shù)據(jù):靠框的左端布置,如:名稱(chēng)、說(shuō)明文;
  • ②③數(shù)值型數(shù)據(jù)(長(zhǎng)度固定):居中布置,由于編號(hào)類(lèi)數(shù)據(jù)長(zhǎng)度是一定的,所以居中容易讀取,如:電話(huà)號(hào)碼,郵政編號(hào)、材料編號(hào),這樣做也容易與“文字類(lèi)”和“數(shù)值類(lèi)”數(shù)據(jù)進(jìn)行區(qū)分;
  • ④⑤數(shù)值型數(shù)據(jù)(長(zhǎng)度非標(biāo)):靠框的右端布置,如:金額、數(shù)量、長(zhǎng)度。

四、顏色與裝飾的原則

這里介紹的界面設(shè)計(jì)中雖然不涉及到美工的內(nèi)容,但是也希望作為設(shè)計(jì)師具有一些美學(xué)的意識(shí),因?yàn)樽罱K用戶(hù)的滿(mǎn)意度是個(gè)綜合的指標(biāo),這個(gè)指標(biāo)至少包括了下述內(nèi)容:

  • 業(yè)務(wù)正確:來(lái)自于業(yè)務(wù)設(shè)計(jì)(需求分析、架構(gòu)、功能、數(shù)據(jù)等)的成果,信息的分區(qū)等;
  • 易操作性:來(lái)自于功能應(yīng)用設(shè)計(jì)的成果(界面、控件),推送機(jī)制等;
  • 性能良好:來(lái)自于技術(shù)開(kāi)發(fā)測(cè)試等的成果;
  • 美觀易讀:來(lái)自于UI、美工設(shè)計(jì)等。

因?yàn)槠髽I(yè)管理系統(tǒng)不是宣傳用的網(wǎng)站、電商平臺(tái),界面風(fēng)格要具有以下的特點(diǎn)(僅供參考):

  • 界面的整體要做到簡(jiǎn)潔、明了,界面上的各種要素(控件)的擺放位置、顏色、是否使用3D形式都要思考,輔助的功能不要喧賓奪主;
  • 使用淡雅的色彩作為基調(diào)原色,不要大面積地使用原色,容易造成眼睛的疲勞;
  • 要給用戶(hù)以安靜的感受,不要用有炫酷和跳躍感的要素去分散用戶(hù)的注意力(電商平臺(tái)的界面希望不斷地帶給用戶(hù)新的發(fā)現(xiàn)、驚喜)。

五、小結(jié)

隨著計(jì)算機(jī)技術(shù)的發(fā)展,計(jì)算機(jī)的使用領(lǐng)域和用途越來(lái)越廣泛,界面風(fēng)格也隨之更加多樣化。

比如:互聯(lián)網(wǎng)風(fēng)格頁(yè)面、物聯(lián)網(wǎng)的界面,硬件技術(shù)的進(jìn)步也影響界面風(fēng)格的變化;比如:智能手機(jī)端、平板電腦端等,它們的設(shè)計(jì)內(nèi)容、風(fēng)格都有所不同,但是上述的基本理念、原則等還是適用的。

本文由 @李鴻君 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止轉(zhuǎn)載

題圖來(lái)自 Unsplash,基于 CC0 協(xié)議

蘭亭妙微(bouu.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶(hù)體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢(xún)、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì),以及相關(guān)的軟件開(kāi)發(fā)服務(wù),咨詢(xún)電話(huà):01063334945。我們建立了一個(gè)微信群,每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì),有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng),咨詢(xún)及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan

交互設(shè)計(jì):理解用戶(hù)思維,創(chuàng)造價(jià)值

天宇 交互設(shè)計(jì)及用戶(hù)體驗(yàn)

 

在交互設(shè)計(jì)的范疇里,對(duì)用戶(hù)的深入研究能夠?yàn)樵O(shè)計(jì)師提供關(guān)鍵的解決問(wèn)題的參考依據(jù)。本文旨在運(yùn)用一些成熟的方法,助力新人設(shè)計(jì)師更深入地理解用戶(hù),拓寬認(rèn)知視野,進(jìn)而創(chuàng)造出更多具有價(jià)值的設(shè)計(jì)。

在設(shè)計(jì)的廣袤領(lǐng)域中,對(duì)于眾多初入行業(yè)的設(shè)計(jì)新人來(lái)說(shuō),設(shè)計(jì)工作常常被誤解為純粹主觀且感性的行為。

他們往往認(rèn)為個(gè)人對(duì)美觀的評(píng)判即是設(shè)計(jì)的全部要義,似乎用戶(hù)理應(yīng)沉浸于設(shè)計(jì)師所營(yíng)造的美感之中。然而,設(shè)計(jì)的本質(zhì)遠(yuǎn)非如此表面。

實(shí)際上,設(shè)計(jì)是一項(xiàng)通過(guò)精心設(shè)想和精確計(jì)算來(lái)創(chuàng)造價(jià)值的工作,其真正的意義聚焦于是否具有價(jià)值以及能否切實(shí)解決特定的問(wèn)題。

一、錯(cuò)誤判斷背后的深度思考

首先,讓我們從一道看似簡(jiǎn)單的題目開(kāi)始:

一雙球鞋和一個(gè)籃球共計(jì) 1100 元,球鞋比籃球貴 1000 元,那么這個(gè)籃球究竟值多少錢(qián)?

許多人可能會(huì)在瞬間給出 100 元的答案,但經(jīng)過(guò)仔細(xì)斟酌后會(huì)發(fā)現(xiàn)正確答案其實(shí)是 50 元。

這種錯(cuò)誤判斷的根源在于大多數(shù)人所具有的兩種思考模式,即快思考和慢思考。它們也被稱(chēng)為“無(wú)意識(shí)思維和有意識(shí)受控思維”“感性和理性”等不同的表述方式。

每個(gè)人都同時(shí)擁有這兩種思考方式,然而通常情況下,慢思考會(huì)在接收快思考的估計(jì)和決策之后才開(kāi)始啟動(dòng)。人類(lèi)在漫長(zhǎng)的生存歷程中,不斷地處理著各種各樣的問(wèn)題,有復(fù)雜的難題,也有相對(duì)簡(jiǎn)單的情況??焖伎际菍?duì)眾多事情給出下意識(shí)的回應(yīng),是一種未經(jīng)充分大腦思考的快速處理方式,其主要目的在于降低大腦的能量消耗。人類(lèi)作為一種善于尋找規(guī)律的生物,快思考往往在以往的經(jīng)驗(yàn)中迅速找尋答案。只有當(dāng)問(wèn)題獲得反饋或者進(jìn)入需要慢思考的情境時(shí),人們才會(huì)察覺(jué)快思考中存在的疏漏。例如,我們時(shí)常會(huì)在未經(jīng)深思熟慮的情況下,脫口而出對(duì)某些問(wèn)題的回答,這正是快思考在發(fā)揮作用。

二、剖析用戶(hù)的感性與理性

正如前文所述,大多數(shù)人同時(shí)具備快思考和慢思考兩種模式,所以在未經(jīng)特殊訓(xùn)練的情況下,大多數(shù)用戶(hù)也同樣兼具感性和理性。在大多數(shù)情形下,用戶(hù)帶著感性的心態(tài)而來(lái),只有當(dāng)遭遇問(wèn)題或者涉及自身切實(shí)利益時(shí),才會(huì)啟動(dòng)慢思考,從而變得理性。對(duì)于商業(yè)領(lǐng)域而言,更傾向于快思考的用戶(hù)。

因?yàn)榭焖伎紩?huì)帶來(lái)感性和沖動(dòng),促使用戶(hù)迅速做出決策。這也正是為什么許多銷(xiāo)售人員熱衷于趁熱打鐵,讓用戶(hù)在快思考的狀態(tài)下被感性和沖動(dòng)所支配,進(jìn)而快速完成交易。在各類(lèi)電商以及活動(dòng)類(lèi)的運(yùn)營(yíng)活動(dòng)中,精心營(yíng)造氛圍的目的就是期望用戶(hù)在快思考的時(shí)候就完成決策,避免用戶(hù)進(jìn)入慢思考狀態(tài)后因猶豫不決而影響決策的達(dá)成。

三、讓用戶(hù)持續(xù)保持感性的深度策略

在交互設(shè)計(jì)中,有以下更為深入的常見(jiàn)做法可以讓用戶(hù)持續(xù)保持感性:

1、顯著地標(biāo)識(shí)狀態(tài)與當(dāng)前進(jìn)度

不僅僅是簡(jiǎn)單地顯示狀態(tài)和進(jìn)度,更要通過(guò)巧妙的設(shè)計(jì)讓用戶(hù)在第一時(shí)間就能直觀地理解其含義。例如,使用動(dòng)態(tài)的進(jìn)度條,配合清晰的數(shù)字顯示和簡(jiǎn)潔的文字說(shuō)明,讓用戶(hù)不僅知道自己所處的位置,還能預(yù)估完成任務(wù)所需的時(shí)間。同時(shí),根據(jù)不同的進(jìn)度階段,采用不同的顏色或圖標(biāo)進(jìn)行區(qū)分,增強(qiáng)用戶(hù)的視覺(jué)感知和心理預(yù)期。

在游戲設(shè)計(jì)中,常見(jiàn)的經(jīng)驗(yàn)條就是一個(gè)很好的例子。玩家可以通過(guò)經(jīng)驗(yàn)條的變化,清晰地了解自己距離升級(jí)還有多遠(yuǎn),這種明確的進(jìn)度展示能夠激發(fā)玩家繼續(xù)努力的動(dòng)力,保持他們?cè)谟螒蛑械耐度敫小?/p>

2、引導(dǎo)用戶(hù)完成他們的目標(biāo)

引導(dǎo)不僅僅是提供方向,更要深入理解用戶(hù)的心理需求和行為模式,以更加個(gè)性化的方式引導(dǎo)用戶(hù)。通過(guò)分析用戶(hù)的歷史行為數(shù)據(jù)和偏好,為用戶(hù)量身定制引導(dǎo)路徑。例如,在在線(xiàn)學(xué)習(xí)平臺(tái)上,根據(jù)用戶(hù)的學(xué)習(xí)進(jìn)度和能力水平,為其推薦適合的課程和學(xué)習(xí)資源,引導(dǎo)用戶(hù)逐步實(shí)現(xiàn)學(xué)習(xí)目標(biāo)。

利用智能助手或虛擬角色進(jìn)行引導(dǎo),增加互動(dòng)性和趣味性。例如,一些購(gòu)物 APP 中的虛擬導(dǎo)購(gòu)員,可以根據(jù)用戶(hù)的瀏覽記錄和購(gòu)買(mǎi)意向,為用戶(hù)提供個(gè)性化的購(gòu)物建議和推薦商品,讓用戶(hù)在購(gòu)物過(guò)程中感受到貼心的服務(wù)和引導(dǎo)。

3、明確無(wú)誤地告知用戶(hù)想了解的信息

信息的傳達(dá)要做到準(zhǔn)確、簡(jiǎn)潔、全面。除了基本的產(chǎn)品特點(diǎn)、功能和價(jià)格等信息外,還應(yīng)提供用戶(hù)可能關(guān)心的其他細(xì)節(jié)。例如,在電子產(chǎn)品的介紹頁(yè)面,除了列出產(chǎn)品的技術(shù)參數(shù)外,還可以提供使用教程、常見(jiàn)問(wèn)題解答、用戶(hù)評(píng)價(jià)等內(nèi)容,讓用戶(hù)能夠全面了解產(chǎn)品,做出更明智的決策。

采用多種信息傳達(dá)方式,滿(mǎn)足不同用戶(hù)的需求。例如,對(duì)于視覺(jué)型用戶(hù),可以提供圖片、視頻等直觀的信息展示;對(duì)于聽(tīng)覺(jué)型用戶(hù),可以提供語(yǔ)音介紹;對(duì)于閱讀型用戶(hù),可以提供詳細(xì)的文字說(shuō)明。同時(shí),利用信息分層和漸進(jìn)式披露的方式,讓用戶(hù)可以根據(jù)自己的需求逐步獲取更深入的信息。

4、不要讓用戶(hù)去診斷問(wèn)題

系統(tǒng)應(yīng)具備強(qiáng)大的自我診斷和故障排除能力,在問(wèn)題出現(xiàn)的第一時(shí)間自動(dòng)檢測(cè)并提供解決方案。例如,當(dāng)軟件出現(xiàn)故障時(shí),系統(tǒng)可以自動(dòng)彈出錯(cuò)誤提示窗口,同時(shí)提供可能的解決方案,如重新啟動(dòng)軟件、檢查網(wǎng)絡(luò)連接等。用戶(hù)只需按照提示進(jìn)行操作,無(wú)需自己去尋找問(wèn)題所在。

建立完善的用戶(hù)反饋機(jī)制,及時(shí)收集用戶(hù)遇到的問(wèn)題,并進(jìn)行快速響應(yīng)和解決。例如,在 APP 中設(shè)置反饋入口,用戶(hù)可以隨時(shí)提交問(wèn)題和建議,開(kāi)發(fā)團(tuán)隊(duì)可以及時(shí)跟進(jìn)處理,并將處理結(jié)果反饋給用戶(hù),增強(qiáng)用戶(hù)的信任感和滿(mǎn)意度。

5、盡量減少設(shè)置的數(shù)量和復(fù)雜度

進(jìn)行深入的用戶(hù)需求分析,去除不必要的設(shè)置選項(xiàng),簡(jiǎn)化操作流程。例如,在智能家居設(shè)備的設(shè)置中,通過(guò)智能化的默認(rèn)設(shè)置和自動(dòng)配置功能,減少用戶(hù)的手動(dòng)操作。同時(shí),對(duì)于一些復(fù)雜的設(shè)置,可以采用逐步引導(dǎo)的方式,讓用戶(hù)在需要的時(shí)候再進(jìn)行深入設(shè)置。

采用可視化的設(shè)置界面,讓用戶(hù)能夠直觀地了解設(shè)置選項(xiàng)的作用和效果。例如,在圖像編輯軟件中,通過(guò)實(shí)時(shí)預(yù)覽功能,讓用戶(hù)可以在調(diào)整設(shè)置參數(shù)的同時(shí)看到效果的變化,從而更加方便地進(jìn)行設(shè)置。

6、讓用戶(hù)感覺(jué)而不是去計(jì)算

設(shè)計(jì)要注重用戶(hù)的直覺(jué)和感受,通過(guò)巧妙的視覺(jué)設(shè)計(jì)、交互反饋和情感化元素,讓用戶(hù)在無(wú)需進(jìn)行復(fù)雜計(jì)算的情況下就能做出決策。例如,在酒店預(yù)訂網(wǎng)站上,通過(guò)展示酒店的圖片、評(píng)價(jià)和星級(jí)等信息,讓用戶(hù)能夠直觀地感受酒店的品質(zhì)和舒適度,從而更容易做出選擇。

利用大數(shù)據(jù)和人工智能技術(shù),為用戶(hù)提供個(gè)性化的推薦和決策支持。例如,音樂(lè)播放 APP 根據(jù)用戶(hù)的聽(tīng)歌歷史和偏好,為用戶(hù)推薦符合其口味的音樂(lè),讓用戶(hù)無(wú)需花費(fèi)時(shí)間去搜索和篩選。

7、讓描述更貼近用戶(hù)

深入了解用戶(hù)的語(yǔ)言習(xí)慣和文化背景,使用用戶(hù)熟悉的詞匯和表達(dá)方式進(jìn)行描述。例如,在面向年輕人的產(chǎn)品中,可以采用流行的網(wǎng)絡(luò)語(yǔ)言和表達(dá)方式,增強(qiáng)用戶(hù)的認(rèn)同感和親近感。在面向不同地區(qū)的用戶(hù)時(shí),要考慮到當(dāng)?shù)氐奈幕町?,采用合適的語(yǔ)言和表達(dá)方式。

進(jìn)行用戶(hù)測(cè)試和反饋收集,不斷優(yōu)化描述內(nèi)容。邀請(qǐng)用戶(hù)對(duì)產(chǎn)品的描述進(jìn)行評(píng)價(jià)和建議,根據(jù)用戶(hù)的反饋進(jìn)行調(diào)整和優(yōu)化,確保描述內(nèi)容能夠準(zhǔn)確傳達(dá)產(chǎn)品的特點(diǎn)和優(yōu)勢(shì),同時(shí)符合用戶(hù)的需求和期望。

8、在需要計(jì)算的內(nèi)容提前幫用戶(hù)計(jì)算好

利用自動(dòng)化計(jì)算和智能算法,為用戶(hù)提供準(zhǔn)確、及時(shí)的計(jì)算結(jié)果。例如,在理財(cái) APP 中,自動(dòng)計(jì)算用戶(hù)的收益和風(fēng)險(xiǎn),為用戶(hù)提供投資建議。在購(gòu)物網(wǎng)站上,自動(dòng)計(jì)算商品的總價(jià)、優(yōu)惠金額和運(yùn)費(fèi)等信息,讓用戶(hù)清楚知道自己需要支付的費(fèi)用。

提供多種計(jì)算方式和比較工具,讓用戶(hù)可以根據(jù)自己的需求進(jìn)行選擇。例如,在房貸計(jì)算器中,提供等額本金和等額本息兩種還款方式的計(jì)算結(jié)果,讓用戶(hù)可以比較不同還款方式的優(yōu)缺點(diǎn),做出更合適的選擇。

9、用情感帶給用戶(hù)細(xì)微的感受

通過(guò)情感化設(shè)計(jì),觸動(dòng)用戶(hù)的內(nèi)心深處,建立與用戶(hù)的情感連接。例如,在社交 APP 中,通過(guò)溫馨的提示和問(wèn)候,讓用戶(hù)感受到關(guān)懷和溫暖。在紀(jì)念日或特殊節(jié)日,為用戶(hù)送上個(gè)性化的祝福和禮物,增強(qiáng)用戶(hù)的忠誠(chéng)度。

利用故事和場(chǎng)景化設(shè)計(jì),讓用戶(hù)在使用產(chǎn)品的過(guò)程中產(chǎn)生情感共鳴。例如,在旅游 APP 中,通過(guò)展示美麗的風(fēng)景圖片和用戶(hù)的旅行故事,激發(fā)用戶(hù)的旅行欲望。在產(chǎn)品介紹中,以故事的形式講述產(chǎn)品的誕生和發(fā)展歷程,讓用戶(hù)更加了解產(chǎn)品的背后故事,增強(qiáng)用戶(hù)的認(rèn)同感。

四、設(shè)計(jì)的價(jià)值與目的之深度探討

許多新人設(shè)計(jì)師在初期往往喜歡站在個(gè)人和美學(xué)的角度來(lái)看待自己的設(shè)計(jì)。然而,隨著設(shè)計(jì)經(jīng)驗(yàn)的不斷積累和對(duì)行業(yè)的深入理解,他們會(huì)逐漸認(rèn)識(shí)到有價(jià)值、能解決問(wèn)題才是人類(lèi)發(fā)展的核心目的。在市場(chǎng)上存在眾多同類(lèi)型產(chǎn)品都具有價(jià)值、能解決問(wèn)題的情況下,才需要通過(guò)設(shè)計(jì)出不同的差異點(diǎn)來(lái)脫穎而出。但始終要牢記的前提是設(shè)計(jì)必須具有價(jià)值、能解決問(wèn)題,一旦拋棄了這個(gè)大前提,任何設(shè)計(jì)都會(huì)顯得空洞、索然無(wú)味。

設(shè)計(jì)與藝術(shù)雖然有一定的關(guān)聯(lián),但它們并不是一回事。設(shè)計(jì)更注重實(shí)用性和功能性,以滿(mǎn)足用戶(hù)的需求和解決實(shí)際問(wèn)題為主要目標(biāo)。而藝術(shù)則更強(qiáng)調(diào)審美價(jià)值和自我表達(dá),追求的是情感的共鳴和創(chuàng)造力的展現(xiàn)。設(shè)計(jì)師需要在設(shè)計(jì)過(guò)程中平衡好實(shí)用性和美觀性,既要確保設(shè)計(jì)能夠解決問(wèn)題,又要讓設(shè)計(jì)具有一定的審美價(jià)值,從而提升用戶(hù)的體驗(yàn)和滿(mǎn)意度。

總之,交互設(shè)計(jì)要深入理解用戶(hù)的思維方式,通過(guò)更為深入和有效的方法讓用戶(hù)持續(xù)保持感性,從而提高用戶(hù)的滿(mǎn)意度和忠誠(chéng)度。同時(shí),設(shè)計(jì)師要時(shí)刻牢記設(shè)計(jì)的價(jià)值和目的,不斷創(chuàng)造有價(jià)值、能解決問(wèn)題的設(shè)計(jì)作品,為人類(lèi)的發(fā)展和進(jìn)步做出貢獻(xiàn)。

以上觀點(diǎn)僅代表個(gè)人看法,如有不對(duì)之處,歡迎在評(píng)論區(qū)指正交流。謝謝!

本文由 @用戶(hù)體驗(yàn)王叔 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)作者許可,禁止轉(zhuǎn)載

題圖來(lái)自Unsplash,基于CC0協(xié)議

該文觀點(diǎn)僅代表作者本人,人人都是產(chǎn)品經(jīng)理平臺(tái)僅提供信息存儲(chǔ)空間服務(wù)

蘭亭妙微(bouu.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶(hù)體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢(xún)、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì),以及相關(guān)的軟件開(kāi)發(fā)服務(wù),咨詢(xún)電話(huà):01063334945。我們建立了一個(gè)微信群,每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì),有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng),咨詢(xún)及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan

如何設(shè)計(jì) B 端產(chǎn)品的頁(yè)面加載功能?

天宇 B端ui設(shè)計(jì)文章及欣賞

“B 端頁(yè)面加載,關(guān)乎用戶(hù)體驗(yàn)。” 在 B 端產(chǎn)品設(shè)計(jì)中,頁(yè)面加載功能不容小覷。如何讓用戶(hù)在等待中減少焦慮?怎樣使頁(yè)面加載邏輯清晰、策略得當(dāng)?本文將詳細(xì)闡述,為 B 端產(chǎn)品設(shè)計(jì)提供指引。

每一個(gè)用戶(hù)都不喜歡進(jìn)入頁(yè)面時(shí)需要長(zhǎng)時(shí)間的等待,并且對(duì)著一個(gè)空白的頁(yè)面。

因此在 iOS當(dāng)中會(huì)使用大量的動(dòng)效、情感化設(shè)計(jì)來(lái)引導(dǎo)用戶(hù)多停留一些時(shí)間等待加載;在較多 app 當(dāng)中,也會(huì)通過(guò)動(dòng)效設(shè)計(jì),優(yōu)化頁(yè)面信息的加載。

那既然頁(yè)面加載很重要,對(duì)于B端產(chǎn)品而言,我們也需要去考慮頁(yè)面的功能究竟要如何進(jìn)行設(shè)計(jì)。

今天我們會(huì)聊聊 頁(yè)面加載 功能的具體邏輯,以及B端產(chǎn)品的常見(jiàn)頁(yè)面加載策略,希望能夠?qū)Ω魑煌瑢W(xué)有所幫助~

一、頁(yè)面加載的邏輯

在系統(tǒng)當(dāng)中,頁(yè)面加載其實(shí)是用戶(hù)對(duì)系統(tǒng)界面進(jìn)行交互后,系統(tǒng)會(huì)將對(duì)應(yīng)的數(shù)據(jù)傳給服務(wù)器,而服務(wù)器又會(huì)將內(nèi)容反饋給用戶(hù)的整個(gè)過(guò)程。

比如在按鈕組件中,我們就需要去設(shè)定「當(dāng)用戶(hù)點(diǎn)擊了按鈕過(guò)后它需要長(zhǎng)時(shí)間加載的 Loading 狀態(tài)」

通過(guò)這樣的做法,其實(shí)就是緩解用戶(hù)等待所花費(fèi)的時(shí)間,減少焦慮。

在很多C端產(chǎn)品中,頁(yè)面加載是非常常見(jiàn)的。比如會(huì)有懶加載、預(yù)加載、異步加載等。

同時(shí)會(huì)使用非常多的 插畫(huà)設(shè)計(jì)、動(dòng)效設(shè)計(jì) 去降低用戶(hù)所使用的焦慮。但是在桌面端中,它的思考方式會(huì)有些許不同,我們將其分為四種不同的方式。

二、骨架圖/skeleton

骨架屏是較為常規(guī)的頁(yè)面模塊加載方式。

它主要適用于模塊當(dāng)中,加載內(nèi)容需要提供占位信息時(shí)進(jìn)行使用。通常會(huì)在 列表、卡片類(lèi) 圖文信息較多的頁(yè)面當(dāng)中進(jìn)行呈現(xiàn) 。

在用戶(hù)預(yù)期上,骨架圖能夠幫助我們展示當(dāng)中頁(yè)面的大體結(jié)構(gòu),以避免在頁(yè)面加載信息的過(guò)程當(dāng)中出現(xiàn)隨意跳動(dòng)、亂展示的情況。

特別是在很多頁(yè)面第一次加載時(shí),由于數(shù)據(jù)內(nèi)容較多,因此使用骨架圖填充會(huì)更為合理。比如在有贊當(dāng)中, 就會(huì)使用骨架圖的方式來(lái)進(jìn)行頁(yè)面信息的加載。而在B端后臺(tái)中也更多的適用于工作臺(tái)信息的加載,特別是在工作臺(tái)中有數(shù)據(jù)部分的內(nèi)容呈現(xiàn)的時(shí)候,需要格外去注意。

三、加載中/Spin

Spin 主要要于頁(yè)面和區(qū)塊當(dāng)中的信息加載,通過(guò)適當(dāng)?shù)膭?dòng)效,能夠保證頁(yè)面加載時(shí)緩解用戶(hù)的焦慮。

在 Spin 當(dāng)中,會(huì)有許多不同的類(lèi)型:基礎(chǔ)Loading、動(dòng)畫(huà)Loading、進(jìn)度Loading

基礎(chǔ)Loading 更適用于頁(yè)面當(dāng)中的組件類(lèi)級(jí)別的加載,像是在輸入框內(nèi)、按鈕中、下拉選擇… 的內(nèi)容加載。

動(dòng)畫(huà)Loading 則偏向于區(qū)塊、頁(yè)面級(jí)別的加載,比如在表格頁(yè)面中,就會(huì)經(jīng)常使用加載的方式展示目前正在相應(yīng)。

進(jìn)度Loading 則更像是進(jìn)度條的外露,想要更凸顯目前的真實(shí)進(jìn)度情況。目前在 Ant Design 5.18.0 版本當(dāng)中即可支持

四、長(zhǎng)時(shí)間加載

當(dāng)然,在系統(tǒng)當(dāng)中還會(huì)出現(xiàn)一些特殊的加載狀態(tài)。比如在針對(duì)數(shù)據(jù)量較大的情況下時(shí),我們會(huì)采取什么樣的加載策略?

比如在神策數(shù)據(jù)當(dāng)中,當(dāng)我們?cè)谌シ治龊笈_(tái)的行為數(shù)據(jù)時(shí),需要進(jìn)行大量的計(jì)算,因此在分析完一次過(guò)后所等待的時(shí)間也會(huì)更為長(zhǎng)久。這時(shí)候神策會(huì)給出一套更為復(fù)雜的加載策略。

首先在加載層面上,它會(huì)優(yōu)先告知用戶(hù)目前整體的加載進(jìn)度,這對(duì)于用戶(hù)的等待是非常有益的。

其次,如果你對(duì)于整體加載的時(shí)間進(jìn)度不夠滿(mǎn)意,那我可以給你相應(yīng)的解決策略,像是分批加載等等。

最后如果你在加載過(guò)程當(dāng)中有其他的分析任務(wù),也可以通過(guò)異步加載的方式,進(jìn)行后臺(tái)計(jì)算,等結(jié)果出來(lái)后會(huì)通過(guò)通知的方式進(jìn)行提示。當(dāng)然,在此過(guò)程中,你可以中斷、退出。

五、異步加載

異步加載也是針對(duì)長(zhǎng)時(shí)間加載的一種策略,比如我需要去上傳較大信息的時(shí)候,我需要耗費(fèi)特別多的時(shí)間。那這時(shí)候就可以采用異步加載的方式,滿(mǎn)足用戶(hù)的正常使用。

在飛書(shū)當(dāng)中,我要上傳飛書(shū)妙記,我要導(dǎo)入飛書(shū)成員,那都可以通過(guò)異步加載的方式來(lái)進(jìn)行呈現(xiàn)。

那在設(shè)計(jì)的時(shí)候需要去考慮異步加載整體的入口以及功能之間是如何實(shí)現(xiàn)的。

像是在飛書(shū)妙記中,它會(huì)將其作為一個(gè)上傳入口,進(jìn)行快速的展現(xiàn)。而在導(dǎo)入飛書(shū)成員的時(shí)候,則會(huì)展現(xiàn)是將其放在后臺(tái)進(jìn)行加載,等完成過(guò)后通過(guò)通知的方式來(lái)告知用戶(hù)(與神策相同)

關(guān)于加載,其實(shí)在設(shè)計(jì)上還會(huì)有很多細(xì)節(jié),我們也會(huì)在課程當(dāng)中,通過(guò) 功能設(shè)計(jì) 的方式給大家進(jìn)行梳理設(shè)計(jì)要點(diǎn)(肯定會(huì)比現(xiàn)在更為系統(tǒng)),后續(xù)有時(shí)間,再和大家分享~

本文由人人都是產(chǎn)品經(jīng)理作者【CE青年】,原創(chuàng)/授權(quán) 發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止轉(zhuǎn)載。

題圖來(lái)自Unsplash,基于 CC0 協(xié)議。

蘭亭妙微(bouu.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶(hù)體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢(xún)、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì),以及相關(guān)的軟件開(kāi)發(fā)服務(wù),咨詢(xún)電話(huà):01063334945。我們建立了一個(gè)微信群,每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì),有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng),咨詢(xún)及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan

2025 B端設(shè)計(jì)趨勢(shì)之風(fēng)格和質(zhì)感

天宇 B端ui設(shè)計(jì)文章及欣賞

從擬物風(fēng)格到扁平化,再到如今的多變色彩與微妙質(zhì)感,設(shè)計(jì)風(fēng)格的演變不僅反映了技術(shù)的進(jìn)步,也折射出用戶(hù)需求的轉(zhuǎn)變。本文結(jié)合釘釘近10年的B端設(shè)計(jì)經(jīng)驗(yàn),深入探討2025年B端設(shè)計(jì)的三大趨勢(shì):多變豐富的色彩、微妙克制的質(zhì)感以及清晰明了的圖形。揭示了如何在滿(mǎn)足企業(yè)高效、專(zhuān)業(yè)需求的同時(shí),為用戶(hù)帶來(lái)更具情感價(jià)值和科技感的視覺(jué)體驗(yàn)。

回溯互聯(lián)網(wǎng)的發(fā)展進(jìn)程,從桌面端的撥號(hào)上網(wǎng),到5G移動(dòng)互聯(lián)網(wǎng),再至人工智能的助力,科技領(lǐng)域正在經(jīng)歷著翻天覆地的變革。未來(lái)的數(shù)字世界,在沉浸感、參與度、個(gè)性化等維度對(duì)體驗(yàn)會(huì)提出更進(jìn)階的要求;與此同時(shí),B端企業(yè)對(duì)于高效、簡(jiǎn)便、用戶(hù)友好的界面需求與日俱增。在2025年的當(dāng)下,B端設(shè)計(jì)師唯有持續(xù)學(xué)習(xí),適應(yīng)新技術(shù)與新趨勢(shì),緊密?chē)@客戶(hù)的業(yè)務(wù)價(jià)值展開(kāi)設(shè)計(jì),進(jìn)一步注重實(shí)用性、包容性以及可定制化,方可為企業(yè)客戶(hù)塑造出卓越的產(chǎn)品與服務(wù)。

因此,我們結(jié)合釘釘近10年的B端產(chǎn)品設(shè)計(jì)經(jīng)驗(yàn),鑒于未來(lái)B端設(shè)計(jì)趨勢(shì)將展現(xiàn)出多元化、智能化和人性化的特質(zhì),從B端產(chǎn)品個(gè)性化、風(fēng)格與質(zhì)感、界面版式、圖標(biāo)、動(dòng)態(tài)交互等多維度設(shè)計(jì)展開(kāi)深度研究,與大家一道探討B(tài)端設(shè)計(jì)的本質(zhì)和趨勢(shì),期望在真正駕馭B端產(chǎn)品設(shè)計(jì)的這條道路上,帶來(lái)些許有益的啟迪。

上篇文章我們講述了B端產(chǎn)品的個(gè)性化趨勢(shì),如何利用個(gè)性化幫助個(gè)體提升用戶(hù)價(jià)值,打造個(gè)體形象、滿(mǎn)足個(gè)體情緒以及增強(qiáng)個(gè)體自信。

今天,我們要給大家分享的是B端產(chǎn)品風(fēng)格&質(zhì)感,為企業(yè)塑造品牌形象、為個(gè)人用戶(hù)提供情感價(jià)值。

一、從技術(shù)發(fā)展看UI設(shè)計(jì)風(fēng)格的演變

設(shè)計(jì)作為科技和藝術(shù)的結(jié)合,UI設(shè)計(jì)風(fēng)格的演變不僅與技術(shù)的發(fā)展密不可分,而且與藝術(shù)創(chuàng)作風(fēng)格的發(fā)展有著異曲同工之妙,都經(jīng)歷了抽象—具象—抽象的過(guò)程。

第一階段:萌芽風(fēng)格

20世紀(jì)70-80年代是計(jì)算機(jī)圖形界面的萌芽階段,就像繪畫(huà)藝術(shù)起源之時(shí)的那個(gè)茹毛飲血的年代,當(dāng)時(shí)的原始人所能利用的工具只有火堆熄滅后留下的木炭,圖像呈現(xiàn)的載體也只有山洞內(nèi)的墻壁和巖石。就像剛剛進(jìn)入計(jì)算機(jī)時(shí)代的設(shè)計(jì)師們,不僅缺少專(zhuān)業(yè)的繪圖軟件,而且當(dāng)時(shí)計(jì)算機(jī)本身的顯示能力也尚且不足。這個(gè)階段的UI設(shè)計(jì),能夠在顯示器上清晰地顯示并傳達(dá)明確的含義,比畫(huà)出風(fēng)格更加重要。觀察當(dāng)時(shí)的操作界面,不難猜測(cè)當(dāng)時(shí)的設(shè)計(jì)師,努力以具象的表現(xiàn)風(fēng)格來(lái)減少人們對(duì)計(jì)算機(jī)界面的陌生感,但由于工具和載體的限制無(wú)法完美實(shí)現(xiàn),雖然這種風(fēng)格無(wú)法被稱(chēng)為擬物風(fēng)格,但為后來(lái)真正的擬物風(fēng)格的出現(xiàn)和發(fā)展奠定了基礎(chǔ)。

第二階段:擬物風(fēng)格

1995年,家用計(jì)算機(jī)的顯示能力迎來(lái)了質(zhì)的飛躍,Windows95發(fā)布、對(duì)真色彩的支持、PhotoShop5.0的發(fā)布……技術(shù)進(jìn)步和專(zhuān)業(yè)軟件的加持讓設(shè)計(jì)師突破了過(guò)去創(chuàng)作工具和呈現(xiàn)載體的限制,就好像在山洞里用木炭繪畫(huà)的原始人,擁有了畫(huà)筆、顏料和畫(huà)布。設(shè)計(jì)師的創(chuàng)作空間和寫(xiě)實(shí)能力得到極大提升。

與此同時(shí),個(gè)人計(jì)算機(jī)和手機(jī)開(kāi)始普及,圖形化的操作界面不再是科研人員和專(zhuān)業(yè)人士的專(zhuān)屬,而是普通人工作學(xué)習(xí)中的一部分。為了讓沒(méi)有接觸過(guò)圖形化操作界面的用戶(hù)快速識(shí)別圖標(biāo)代表的功能,最好的方式就是在界面中對(duì)現(xiàn)實(shí)世界中的物體進(jìn)行還原,這便推動(dòng)了擬物風(fēng)格的發(fā)展。

擬物風(fēng)格的設(shè)計(jì)作品,通過(guò)模擬現(xiàn)實(shí)物品的造型和質(zhì)感,通過(guò)疊加、高光、紋理、材質(zhì)、陰影等效果對(duì)實(shí)物進(jìn)行再現(xiàn),讓用戶(hù)以極低的學(xué)習(xí)成本快速熟悉圖形化的操作界面和產(chǎn)品功能,并以符合日常習(xí)慣和直覺(jué)的方式引導(dǎo)用戶(hù)進(jìn)行交互。

例如在ios6中的相機(jī)icon,對(duì)鏡頭部分細(xì)節(jié)刻畫(huà)非常細(xì)致,用戶(hù)很容易聯(lián)想到使用真實(shí)相機(jī)時(shí)能夠做到的事情,這對(duì)用戶(hù)理解和熟悉某一個(gè)產(chǎn)品功能的幫助無(wú)疑是巨大的;再比如同樣在ios6中的書(shū)架icon設(shè)計(jì)也十分精彩,不僅對(duì)真實(shí)報(bào)刊架的結(jié)構(gòu)和質(zhì)感極度還原,而且對(duì)書(shū)架內(nèi)的雜志也進(jìn)行了展示,用戶(hù)甚至能像真的面對(duì)一個(gè)書(shū)架一樣看到書(shū)架中的內(nèi)容,小小的icon中信息含量極高。

第三階段:扁平化風(fēng)格

到2013年左右,智能手機(jī)在全球主要國(guó)家和地區(qū)的普及率大幅提高。根據(jù)統(tǒng)計(jì)數(shù)據(jù),許多發(fā)達(dá)國(guó)家的智能手機(jī)普及率超過(guò)了50%,發(fā)展中國(guó)家的智能手機(jī)普及率也在快速上升。大部分用戶(hù)已經(jīng)對(duì)圖形化的操作界面非常熟悉,無(wú)需那些極致寫(xiě)實(shí)的風(fēng)格也能快速理解圖形背后的含義和功能。同時(shí),越來(lái)越多的信息和應(yīng)用涌入智能設(shè)備,擬物風(fēng)格所推崇的肌理、質(zhì)感、光影……帶來(lái)精致效果的同時(shí),也讓細(xì)節(jié)變得冗余,如何處理爆炸的信息成為UI設(shè)計(jì)的首要問(wèn)題。就像19世紀(jì)攝影技術(shù)對(duì)傳統(tǒng)寫(xiě)實(shí)繪畫(huà)藝術(shù)的沖擊,讓藝術(shù)家們重新思考繪畫(huà)藝術(shù)的發(fā)展方向一樣,擬物風(fēng)格的極致具象化在達(dá)到巔峰之時(shí)也漸漸到達(dá)了轉(zhuǎn)折點(diǎn)。

2013年9月ios7發(fā)布,并且首次在UI設(shè)計(jì)中采用了扁平化的設(shè)計(jì)風(fēng)格。這種風(fēng)格摒棄了擬物設(shè)計(jì)風(fēng)格中的寫(xiě)實(shí)光影、肌理、冗余的細(xì)節(jié)、甚至放棄了體積的塑造以及一切可能會(huì)對(duì)識(shí)別產(chǎn)生干擾的元素,只保留對(duì)用戶(hù)最關(guān)鍵的信息,呈現(xiàn)出十分干凈整潔的視覺(jué)效果。

然而物極必反,扁平化設(shè)計(jì)的極致簡(jiǎn)潔,容易讓長(zhǎng)期使用的用戶(hù)感到冷淡和無(wú)趣,于是新擬物風(fēng)格應(yīng)運(yùn)而生。

新擬物融合了擬物和扁平兩種風(fēng)格的特點(diǎn),在光影和立體效果方面較為寫(xiě)實(shí),元素通常是凸起或凹陷于界面之上,視覺(jué)上錯(cuò)落有致,但是在色彩和造型方面則更偏向于扁平化風(fēng)格,圖形往往經(jīng)過(guò)一定的簡(jiǎn)化和抽象,并搭配少量簡(jiǎn)潔的主觀顏色。但是新擬物風(fēng)格過(guò)于依賴(lài)投影和立體效果對(duì)界面元素的區(qū)分,很難呈現(xiàn)復(fù)雜的信息層級(jí),而且微妙的對(duì)比度也不利于無(wú)障礙識(shí)別,所以這種風(fēng)格并未真正大面積流行和使用。

二、AI時(shí)代的B端設(shè)計(jì)風(fēng)格趨勢(shì)

2022年,ChatGPT發(fā)布,AI在自然語(yǔ)言處理方面達(dá)到了前所未有的高度,同年Midjourney和stablediffusion的出圈讓每個(gè)人看到了AI生圖的魅力。不僅各種AI應(yīng)用和網(wǎng)站如同雨后春筍般出現(xiàn),而且各行各業(yè)的APP都在爭(zhēng)前恐后的升級(jí)自己的AI能力。這樣的時(shí)代背景,為UI設(shè)計(jì)提出了一個(gè)新的命題:如何用設(shè)計(jì)展現(xiàn)應(yīng)用的AI能力以及企業(yè)的智能化心智。

趨勢(shì)1:多變豐富的色彩

色彩在B端設(shè)計(jì)風(fēng)格中占據(jù)著至關(guān)重要的地位,能夠帶給用戶(hù)非常強(qiáng)烈的直觀感受,是用戶(hù)對(duì)產(chǎn)品和品牌的第一印象。例如藍(lán)色就是過(guò)去對(duì)To B或科技產(chǎn)品的色彩印象,諸如英特爾、微軟、聯(lián)想、戴爾、IBM…這些品牌通過(guò)藍(lán)色來(lái)傳達(dá)簡(jiǎn)潔、未來(lái)感和高科技等視覺(jué)感受。但是這個(gè)標(biāo)準(zhǔn)并非是一成不變的,越來(lái)越多的B端設(shè)計(jì),選擇使用豐富的色彩來(lái)表達(dá)智能化千變?nèi)f化的特點(diǎn),科技感的表達(dá)不再是千篇一律的冷色,而有了更多的變化。

彌散漸變

彌散漸變是一種借助模糊效果將多種顏色進(jìn)行混合的特殊漸變形式,多種顏色的混合以及不規(guī)律的漸變走勢(shì),讓彌散漸變具有很強(qiáng)的氛圍烘托效果和表現(xiàn)力。暈開(kāi)的色彩仿佛在一片虛空之中慢慢彌散開(kāi)來(lái),細(xì)膩、柔和又夢(mèng)幻,很適合用來(lái)提升界面的局部氛圍。

優(yōu)秀的場(chǎng)景適用性

在B端設(shè)計(jì)中,屏效和識(shí)別尤為重要,利用圖形或插畫(huà)的形式烘托氛圍,往往需要占用更多的空間,并且在網(wǎng)頁(yè)端的適配過(guò)程中,容易產(chǎn)生圖文重疊帶來(lái)的識(shí)別的問(wèn)題。而彌散漸變由于其模糊和明度均勻的特點(diǎn),可以在為畫(huà)面貢獻(xiàn)豐富度的同時(shí),不產(chǎn)生視覺(jué)上的焦點(diǎn),所以在適配過(guò)程中也不會(huì)產(chǎn)生圖文重疊的問(wèn)題,具有很普遍的應(yīng)用場(chǎng)景。

高效的場(chǎng)景拓展

在調(diào)整漸變時(shí),通過(guò)保留一些相對(duì)清晰的輪廓,彌散漸變還能呈現(xiàn)出虛實(shí)結(jié)合的視覺(jué)體驗(yàn),讓畫(huà)面更具動(dòng)感和層次變化,就像一面磨砂玻璃后飄浮著一些真實(shí)的物體一樣,十分具有空間感。虛實(shí)的變化讓色彩有了具體的造型,可能是一段波浪、一個(gè)球體、或是一座山丘……這樣的背景配合一些簡(jiǎn)單的排版,便可以是一張海報(bào)、一張banner、一個(gè)推送封面……這無(wú)疑為高速迭代的B端設(shè)計(jì)提供了一個(gè)高效的解決方案。

動(dòng)態(tài)變化

根據(jù)資料顯示,手機(jī)軟件的AI生圖時(shí)長(zhǎng)一般在10秒至120秒之間,AI搜索平均時(shí)長(zhǎng)大致在2秒到15秒之間,專(zhuān)業(yè)的寫(xiě)作AI成文時(shí)間大致在3秒到30秒……

AI應(yīng)用伴隨著大量的等待時(shí)間。使用動(dòng)態(tài)變化的顏色能夠降低用戶(hù)在等待期間的焦慮感,并且不斷變化流動(dòng)的色彩也能暗示用戶(hù),當(dāng)前仍處在“生成中”的狀態(tài)下。例如用戶(hù)在等待釘釘AI助理回答的過(guò)程中,聊天氣泡會(huì)呈現(xiàn)出多彩的流光效果;用戶(hù)在與AI助理進(jìn)行語(yǔ)音交互時(shí),整個(gè)屏幕邊緣會(huì)呈現(xiàn)動(dòng)態(tài)的彩色光效,以表示當(dāng)前的AI激活狀態(tài)。

除此之外,全屏動(dòng)態(tài)的漸變背景還很適合用在信息不多的功能或應(yīng)用首頁(yè),例如在釘釘?shù)牡卿涰?yè)面,屏幕近三分之二的空間中只有簡(jiǎn)單的文字動(dòng)畫(huà),搭配全氛圍的動(dòng)態(tài)漸變背景,不僅清晰地傳達(dá)品牌的智能化心智,而且為“登錄”這一操作增添了滿(mǎn)滿(mǎn)的儀式感。類(lèi)似的還有釘釘AI搜索的功能首頁(yè),大面積涌動(dòng)的動(dòng)態(tài)漸變,充分在視覺(jué)層面展現(xiàn)了智能化的心智,而且大面積的留白也讓釘釘AI企業(yè)搜索的功能價(jià)值描述顯得格外突出。

趨勢(shì)2:微妙克制的質(zhì)感

雖然新擬態(tài)風(fēng)格并未大規(guī)模的使用和流行,但其衍生和沉寂的背后反映了設(shè)計(jì)的本質(zhì)就是一場(chǎng)功能和審美之間的角逐。B端設(shè)計(jì)更是如此,用戶(hù)側(cè)需要美的設(shè)計(jì)來(lái)愉悅工作中的心情,但又不想被花哨的色彩和裝飾干擾工作效率,企業(yè)側(cè)需要擺脫沉悶古板的刻板印象,但同時(shí)也需要呈現(xiàn)專(zhuān)業(yè)、科技的高大形象保持可信度。微妙克制的質(zhì)感表達(dá)為這種“平衡”的實(shí)現(xiàn)提供了解決思路。

玻璃擬態(tài)

玻璃擬態(tài)是2020年末開(kāi)始流行的設(shè)計(jì)風(fēng)格,顧名思義就是對(duì)玻璃這種材質(zhì)的一種擬物化設(shè)計(jì),玻璃擬態(tài)風(fēng)格相較于新擬物風(fēng)格最明顯的進(jìn)步在于,它巧妙地利用玻璃這種材質(zhì)解決了新擬物風(fēng)格中元素邊界不清晰、難以體現(xiàn)復(fù)雜層級(jí)等問(wèn)題。其風(fēng)格特點(diǎn)可以總結(jié)為以下特點(diǎn):

通透:

由于磨砂玻璃的通透性,在界面中存在多個(gè)層級(jí)時(shí),會(huì)呈現(xiàn)出一種虛實(shí)結(jié)合的美感。并且其透明的屬性,能夠很好的暗示用戶(hù)目前所處的位置,利用此特性,不僅能更沉浸的展現(xiàn)用戶(hù)當(dāng)前關(guān)注的信息,而且“疊加”而非“跳轉(zhuǎn)”的交互邏輯也極大減輕了用戶(hù)操作時(shí)的心理負(fù)擔(dān)。

懸?。?/p>

傳統(tǒng)的擬物風(fēng)格往往會(huì)塑造一個(gè)地面,再將圖標(biāo)“放置”在上面。而玻璃擬態(tài)風(fēng)格則更像是構(gòu)建了一個(gè)“無(wú)重力”的虛擬空間,界面中的元素有明顯的懸浮感,顯得十分輕盈,同時(shí)也非常適用于B端場(chǎng)景下對(duì)于科技感的體現(xiàn)。配合投影、虛實(shí)對(duì)比,用戶(hù)能夠清晰地感受到元素在空間上的高度差異,不僅保障了信息的可讀性,而且讓可交互元素更具點(diǎn)擊感。

微妙:

由于磨砂玻璃的物理特性,頁(yè)面背景在經(jīng)過(guò)“玻璃層”的模糊處理后會(huì)變得十分柔和,類(lèi)似上文所述的“彌散漸變”,呈現(xiàn)出一種明度均勻,沒(méi)有視覺(jué)焦點(diǎn)的狀態(tài),無(wú)論是動(dòng)態(tài)還是靜態(tài)都能很好的保障前景文字、UI控件等元素的可識(shí)別性。并且在玻璃擬態(tài)風(fēng)格中,常常使用輕薄微妙的邊框來(lái)強(qiáng)化物理質(zhì)感,這種既作為描邊,又作為“玻璃”的厚度的處理方式,讓卡片能夠以一個(gè)恰到好處的對(duì)比度呈現(xiàn)在界面中。

綜上所述,玻璃擬態(tài)風(fēng)格在擬物程度上找到了一個(gè)很好的平衡點(diǎn),既為枯燥的B端設(shè)計(jì)提供了真實(shí)感和趣味性,又保障了復(fù)雜信息情況下的識(shí)別度。并且由于玻璃光滑、透明等物理特性,也為“科技感”的視覺(jué)呈現(xiàn)提供了新的方向。

柔和光影+微質(zhì)感材質(zhì)

與C端設(shè)計(jì)中常用強(qiáng)烈的光影效果吸引用戶(hù)不同,b端設(shè)計(jì)相對(duì)更加沉穩(wěn)。對(duì)比阿里云、WPS、釘釘、騰訊云的官網(wǎng)首頁(yè),都不約而同地使用了非常柔和的環(huán)境光,這種光影設(shè)計(jì),在保障整體亮度的基礎(chǔ)上,不會(huì)產(chǎn)生明確的光照方向和陰影效果,并且在材質(zhì)選擇上,也都使用了高光、反光均不明顯的漫反射材質(zhì)或微質(zhì)感的毛玻璃材質(zhì),整體視覺(jué)感受十分沉靜和整潔。

趨勢(shì)3:清晰明了的圖形

圖形在設(shè)計(jì)中扮演著兩部分角色,一方面圖形作為頁(yè)面的裝飾需要保證審美的愉悅性,另一方面圖形也作為文字信息的補(bǔ)充,需要傳達(dá)某些特定的含義。好的圖形設(shè)計(jì)不僅能為整個(gè)頁(yè)面的氛圍添光加彩,而且能幫助用戶(hù)更好的理解文字信息。

規(guī)律感的幾何圖形

在b端場(chǎng)景下,常常需要借助圖形表達(dá)一些抽象的概念,例如PaaS、服務(wù)器、AI、用量、科技、流量……這類(lèi)含義并不直接對(duì)應(yīng)一個(gè)特定的造型,使用有規(guī)律的幾何圖形,似乎是一個(gè)不錯(cuò)的選擇。這些技術(shù)概念的背后來(lái)自于二進(jìn)制中0和1的組合,而將幾何元素有機(jī)地排列,甚至衍生出不同的形態(tài)的過(guò)程,不是正如代碼的編寫(xiě)嗎?

簡(jiǎn)潔高效的手繪元素

在當(dāng)下的B端設(shè)計(jì)領(lǐng)域,越來(lái)越重視情感關(guān)懷和個(gè)人用戶(hù)的體驗(yàn)。在頁(yè)面中使用具有手繪感的元素或使用直接使用手繪圖案作為配圖,不僅能夠快速拉近品牌和用戶(hù)之間的距離,塑造年輕化、有親和力的品牌形象,也能提升用戶(hù)在使用產(chǎn)品工作時(shí)的愉悅感。這類(lèi)充滿(mǎn)輕松感的圖形比起傳統(tǒng)的插畫(huà)或3d建模更加簡(jiǎn)潔,色彩鮮明,具有很強(qiáng)的表現(xiàn)力,并且設(shè)計(jì)成本也更低,十分適合作為一些小而美的產(chǎn)品配圖。

例如Google推出的Material design的設(shè)計(jì)語(yǔ)言就大量使用了抽象且配色艷麗的手繪元素作為配圖,這類(lèi)圖案更加強(qiáng)調(diào)色彩并不過(guò)多細(xì)化造型,穿插在文字之間,讓深色背景的頁(yè)面一下活躍了起來(lái)。與此類(lèi)似的還有figma的官網(wǎng),設(shè)計(jì)師將軟件內(nèi)的部分工具比如線(xiàn)條、線(xiàn)框、錨點(diǎn)、指針等元素抽象出來(lái)作為插圖,不僅簡(jiǎn)潔耐看,而且十分具有自身的品牌特色。

除此之外,利用手繪線(xiàn)條來(lái)表現(xiàn)hover的交互狀態(tài),圈畫(huà)重要的文字信息,或是進(jìn)行操作引導(dǎo),也具有極高的效率。簡(jiǎn)單的箭頭或者波浪線(xiàn),能夠非常直接地將用戶(hù)的注意力指引到重要信息處,就像學(xué)生時(shí)期在書(shū)本上圈畫(huà)重點(diǎn)一樣,感受上十分自然而親切。仿佛應(yīng)用的設(shè)計(jì)者悄悄在用戶(hù)耳邊說(shuō)了一句小tips,而不是粗暴地把信息丟到用戶(hù)眼前。

三、結(jié)語(yǔ)

無(wú)論是擬物風(fēng)格時(shí)期的極致寫(xiě)實(shí),還是扁平化風(fēng)格時(shí)期的極簡(jiǎn),又或是AI時(shí)代的多彩絢麗,設(shè)計(jì)風(fēng)格的發(fā)展始終圍繞著技術(shù)發(fā)展的主線(xiàn),其發(fā)展的目標(biāo),始終圍繞著如何讓當(dāng)前時(shí)代的用戶(hù)更好更便捷地享受到技術(shù)應(yīng)用帶來(lái)的便利。一個(gè)好的b端設(shè)計(jì)風(fēng)格,不僅能夠幫助企業(yè)展現(xiàn)品牌心智和技術(shù)上的先進(jìn)性;而且能夠讓個(gè)人用戶(hù)更高效且愉悅地完成工作任務(wù)。在未來(lái)的B端產(chǎn)品設(shè)計(jì)中,我們應(yīng)該始終堅(jiān)持形式服務(wù)于功能和以人為本的原則,探索更適合業(yè)務(wù)場(chǎng)景的設(shè)計(jì)風(fēng)格,為用戶(hù)帶來(lái)更加舒適自然的視覺(jué)體驗(yàn)。

以上是本期帶來(lái)的B端設(shè)計(jì)趨勢(shì)之個(gè)風(fēng)格篇。

本文由人人都是產(chǎn)品經(jīng)理作者【釘釘用戶(hù)體驗(yàn)】,原創(chuàng)/授權(quán) 發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止轉(zhuǎn)載。

題圖來(lái)自Unsplash,基于 CC0 協(xié)議。

蘭亭妙微(bouu.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶(hù)體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢(xún)、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì),以及相關(guān)的軟件開(kāi)發(fā)服務(wù),咨詢(xún)電話(huà):01063334945。我們建立了一個(gè)微信群,每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì),有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng),咨詢(xún)及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan

你的“優(yōu)秀”設(shè)計(jì),可能正在摧毀用戶(hù)價(jià)值

天宇 交互設(shè)計(jì)及用戶(hù)體驗(yàn)

多數(shù)產(chǎn)品經(jīng)理總是認(rèn)為很專(zhuān)業(yè),總會(huì)有一些異想天開(kāi)的想法;殊不知我們不少自以為是的“優(yōu)秀”設(shè)計(jì),并不符合用戶(hù)使用場(chǎng)景,還可能摧毀用戶(hù)價(jià)值。就像本文列舉的這幾個(gè)案例,你有注意到嗎?

產(chǎn)品經(jīng)理的專(zhuān)業(yè)視角與用戶(hù)視角,如同孿生兄弟,外表相似但內(nèi)在迥異。

有時(shí)我們說(shuō)誰(shuí)的產(chǎn)品專(zhuān)業(yè)能力過(guò)硬,可能是一句褒獎(jiǎng)的話(huà)。但專(zhuān)業(yè)能力若不能融合專(zhuān)家視角與用戶(hù)視角,便可能被視為局限而非優(yōu)點(diǎn)。

張小龍說(shuō)自己可以很快變小白,而馬化騰卻可以“一秒變小白”。

所謂“一秒變小白”是指快速?gòu)膶?zhuān)業(yè)視角切換到用戶(hù)視角,確保在設(shè)計(jì)產(chǎn)品和評(píng)估用戶(hù)價(jià)值時(shí),避免陷入專(zhuān)家思維,無(wú)意中損害用戶(hù)價(jià)值。

一、那些“優(yōu)秀”的設(shè)計(jì),正在摧毀你上廁所的體驗(yàn)

兩年前,我?guī)е鴰讉€(gè)“朋友”坐飛機(jī)回云南老家,到達(dá)長(zhǎng)水機(jī)場(chǎng)后,準(zhǔn)備去上廁所。其中一位女性朋友,徑直走進(jìn)男廁所,直至上完廁所出來(lái)后,我們提醒她才“恍然大悟”——進(jìn)錯(cuò)了廁所。

究其原因就在于一個(gè)“設(shè)計(jì)”:女廁所圖標(biāo)設(shè)計(jì)不明確,導(dǎo)致誤解。

目前在機(jī)場(chǎng)、商場(chǎng)(尤其是高級(jí)商場(chǎng))、寫(xiě)字樓等場(chǎng)所,設(shè)計(jì)者都采取一種精簡(jiǎn)設(shè)計(jì)方案,他們追求簡(jiǎn)潔的設(shè)計(jì)感。即只有一個(gè)非常簡(jiǎn)潔的圖標(biāo),有的是男和女的人物圖標(biāo),有的是煙斗和高跟鞋等??傊?,不會(huì)有任何一個(gè)漢字(或英文)描述。

好像一旦圖標(biāo)旁寫(xiě)上“男廁”、“女廁”后,它們就變成了一種“土”、“low”的設(shè)計(jì)方案。

同一個(gè)空間內(nèi),不僅僅是廁所圖標(biāo),還有扶梯、直梯、貨梯、嬰幼兒室、母嬰室等各類(lèi)圖標(biāo),甚至有時(shí)它們會(huì)同時(shí)出現(xiàn)在一個(gè)引導(dǎo)牌,讓你真正玩一把“猜猜猜”的圖像游戲。

結(jié)果是:你無(wú)法快速找到圖標(biāo);找到后,你需要仔細(xì)辨認(rèn)以及“揣摩”圖標(biāo)的含義,避免走錯(cuò);直至你走錯(cuò)后,才能“吃一塹,長(zhǎng)一智”。

同時(shí),某些商場(chǎng)或?qū)懽謽堑南词峙_(tái),為了追求設(shè)計(jì)感以及合理利用空間,把洗手液跟紙抽“融入”到鏡面里,表面看確實(shí)簡(jiǎn)潔,是一種優(yōu)秀設(shè)計(jì)方案。

但當(dāng)你伸手接洗手液洗手時(shí),卻無(wú)法精準(zhǔn)對(duì)接,需要反復(fù)嘗試2-3次。沒(méi)接到的洗手液,自然流就流落到洗手臺(tái)之上。

結(jié)果是:用戶(hù)體驗(yàn)差,浪費(fèi)洗手液,增加清潔成本

保潔阿姨發(fā)現(xiàn)這個(gè)問(wèn)題后,最后的解決方案就是:在洗手臺(tái)旁邊,直接放了一個(gè)自助式的洗手液。至此,那個(gè)“優(yōu)秀”的設(shè)計(jì)方案,從此成為了擺設(shè)。

你自以為的優(yōu)秀設(shè)計(jì),往往卻摧毀了用戶(hù)的價(jià)值。它肯定不是你的初心,而是你的專(zhuān)業(yè)視角所致,卻忽略了用戶(hù)視角(尤其是小白用戶(hù)視角)。

二、那些“優(yōu)秀”設(shè)計(jì),正在讓用戶(hù)“不明所以”,甚至“不知所措”

如下圖所示,用戶(hù)對(duì)發(fā)放工資條時(shí),選擇方案的設(shè)計(jì)進(jìn)行了“吐槽”。一般默認(rèn)勾選時(shí),顯示一個(gè)多選框,勾選即選中,反之不選,而設(shè)計(jì)升級(jí)后,期望讓選中效果更明顯,去掉勾選框,點(diǎn)擊列表選中,再次點(diǎn)擊取消。

結(jié)果是:用戶(hù)不知道如何勾選,“優(yōu)秀”設(shè)計(jì)摧毀了用戶(hù)體驗(yàn)。

我們?cè)倏匆粋€(gè)例子。

如下圖所示,它們都是新建班次的設(shè)置頁(yè)面,核心是約定員工的上下班時(shí)間跟打卡范圍,但它們代表兩種不同的設(shè)計(jì)風(fēng)格。

方案1采用平鋪直敘的用戶(hù)語(yǔ)言風(fēng)格,以對(duì)話(huà)感設(shè)計(jì)頁(yè)面元素,旨在增強(qiáng)用戶(hù)互動(dòng)體驗(yàn),但可能導(dǎo)致信息顯示冗余。比如最早可提前x分鐘打卡,晚于x分鐘打卡記為遲到;

方案2采用簡(jiǎn)潔設(shè)計(jì),避免冗余文字,以簡(jiǎn)潔頁(yè)面提升視覺(jué)效果,但可能增加用戶(hù)理解和使用難度(就像廁所圖標(biāo)的設(shè)計(jì)一樣)。比如上班卡當(dāng)天5:00-當(dāng)天12:00,用戶(hù)自行設(shè)置取卡范圍。

三、如何避免讓“優(yōu)秀”設(shè)計(jì)無(wú)意損害用戶(hù)價(jià)值?

第一,認(rèn)知層面。產(chǎn)品經(jīng)理的專(zhuān)業(yè)能力體現(xiàn)在創(chuàng)造用戶(hù)價(jià)值和商業(yè)價(jià)值,而非局限于單一專(zhuān)業(yè)領(lǐng)域。這種能力需同時(shí)滿(mǎn)足專(zhuān)業(yè)人士和小白用戶(hù)的需求,否則不能稱(chēng)之為真正的專(zhuān)業(yè)能力。

第二,設(shè)計(jì)語(yǔ)言。采用用戶(hù)語(yǔ)言/自然語(yǔ)言作為設(shè)計(jì)語(yǔ)言,而不是設(shè)計(jì)師或產(chǎn)品經(jīng)理的“專(zhuān)業(yè)”語(yǔ)言。比如晚于30分鐘打卡記為遲到,就好于“豁免30分鐘”;最早可提前120分鐘打卡,最晚可延后120分鐘打卡,就好于“上班卡范圍:當(dāng)天6:00-10:00”。

第三,設(shè)計(jì)“潛規(guī)則”。遵循行業(yè)“潛規(guī)則”設(shè)計(jì),避免過(guò)度自我創(chuàng)造(或創(chuàng)新),導(dǎo)致傷害了用戶(hù)價(jià)值。比如單選、多選、開(kāi)關(guān)等設(shè)計(jì)要素,遵循成熟的設(shè)計(jì)方式,而不是非要“獨(dú)樹(shù)一幟”。

四、彩蛋:如何解決家長(zhǎng)帶異性子女上廁所?

我們?cè)谏虉?chǎng)、機(jī)場(chǎng)等,比較常見(jiàn)的解決方案是:提供一個(gè)間親子衛(wèi)生間。

哈爾濱江北商場(chǎng)提供了一種創(chuàng)新的解決方案。即:在正常男女廁所旁邊,新建了一個(gè)開(kāi)放式的兒童廁所,配備了男孩和女孩專(zhuān)用的小便池及兒童洗手臺(tái)。

既解決了家長(zhǎng)帶異性子女上廁所的難題,也方便了兒童獨(dú)立使用,體現(xiàn)了對(duì)兒童和家長(zhǎng)需求的細(xì)致考慮,這是真正用戶(hù)視角下的產(chǎn)品設(shè)計(jì)。

專(zhuān)欄作家

邢小作,微信公眾號(hào):產(chǎn)品方法論集散地,人人都是產(chǎn)品經(jīng)理專(zhuān)欄作家。一枚在線(xiàn)教育的產(chǎn)品,關(guān)注互聯(lián)網(wǎng)教育,喜歡研究用戶(hù)心理。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載。

題圖來(lái)自 Unsplash,基于CC0協(xié)議

該文觀點(diǎn)僅代表作者本人,人人都是產(chǎn)品經(jīng)理平臺(tái)僅提供信息存儲(chǔ)空間服務(wù)。

蘭亭妙微(bouu.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶(hù)體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢(xún)、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì),以及相關(guān)的軟件開(kāi)發(fā)服務(wù),咨詢(xún)電話(huà):01063334945。我們建立了一個(gè)微信群,每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì),有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng),咨詢(xún)及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan

【交互設(shè)計(jì)】小白必看!手把手教你優(yōu)化設(shè)計(jì)原則

天宇 交互設(shè)計(jì)及用戶(hù)體驗(yàn)

在當(dāng)今數(shù)字化時(shí)代,交互設(shè)計(jì)不僅是產(chǎn)品成功的關(guān)鍵因素之一,更是連接用戶(hù)與產(chǎn)品之間的橋梁。交互設(shè)計(jì)的原則和方法雖然眾多,但本文將聚焦于產(chǎn)品交互設(shè)計(jì)的內(nèi)在邏輯和基本原理,探討什么樣的設(shè)計(jì)才是優(yōu)秀的,如何衡量其效果。

首先,我們需要明確“產(chǎn)品交互設(shè)計(jì)”的定義。產(chǎn)品交互設(shè)計(jì)是為了達(dá)成特定產(chǎn)品目標(biāo)而進(jìn)行的用戶(hù)與產(chǎn)品之間的交互流程設(shè)計(jì)和反饋設(shè)計(jì)。換句話(huà)說(shuō),它不僅關(guān)注用戶(hù)如何使用產(chǎn)品,還關(guān)注產(chǎn)品如何有效地反饋給用戶(hù)。值得注意的是,產(chǎn)品交互設(shè)計(jì)是圍繞產(chǎn)品目標(biāo)展開(kāi)的,而非單純圍繞用戶(hù)展開(kāi),用戶(hù)在這一過(guò)程中只是間接的服務(wù)對(duì)象。

這種思維方式可能與許多人的初始認(rèn)知有所不同。以宜家家居為例,作為一家大型購(gòu)物中心,宜家并不希望用戶(hù)能迅速找到想要的產(chǎn)品,而是希望用戶(hù)能在其店內(nèi)多做體驗(yàn)。盡管這種迂回而漫長(zhǎng)的購(gòu)物路徑可能讓人感到煩惱,但用戶(hù)卻很少對(duì)此抱怨。這正是成功的產(chǎn)品交互設(shè)計(jì)的體現(xiàn):雖然交互流程可能令人困擾,但良好的交互反饋(如各類(lèi)家具的試用體驗(yàn))卻能讓用戶(hù)感到滿(mǎn)意。

一、用戶(hù)體驗(yàn)流程設(shè)計(jì)

產(chǎn)品交互設(shè)計(jì)的核心在于用戶(hù)體驗(yàn)流程的設(shè)計(jì)。這一理念強(qiáng)調(diào),交互設(shè)計(jì)并非簡(jiǎn)單的按鈕、彈窗或功能的堆砌,而是為了實(shí)現(xiàn)產(chǎn)品目標(biāo)而有意設(shè)計(jì)的用戶(hù)與產(chǎn)品的互動(dòng)流程。在這個(gè)過(guò)程中,每一個(gè)交互環(huán)節(jié)都旨在滿(mǎn)足用戶(hù)需求,同時(shí)實(shí)現(xiàn)產(chǎn)品的獲益目標(biāo)。這種獲益不一定是金錢(qián)上的,可能還包括用戶(hù)的關(guān)注度和忠誠(chéng)度。

尼爾森可用性原則專(zhuān)業(yè)描述:

尼爾森可用性原則由人機(jī)交互學(xué)博士Jakob Nielsen提出,包括狀態(tài)可見(jiàn)性原則、貼近用戶(hù)真實(shí)環(huán)境原則、自由控制原則、一致性和標(biāo)準(zhǔn)化原則、防錯(cuò)原則等。這些原則提供了一套評(píng)估用戶(hù)體驗(yàn)好壞的標(biāo)準(zhǔn),幫助設(shè)計(jì)師和產(chǎn)品經(jīng)理進(jìn)行自查和優(yōu)化

理論支撐:

用戶(hù)體驗(yàn)地圖是一種以用戶(hù)為中心的可視化工具,用于描述和展示用戶(hù)在使用產(chǎn)品、服務(wù)或系統(tǒng)的過(guò)程中的整體體驗(yàn)和情感變化。它通過(guò)講故事的方式,描述用戶(hù)參與服務(wù)過(guò)程中的體驗(yàn)變化,并通過(guò)可視化的方式將信息予以呈現(xiàn)。用戶(hù)體驗(yàn)地圖關(guān)注用戶(hù)的行為接觸點(diǎn)、情緒曲線(xiàn)、痛點(diǎn)和機(jī)會(huì)點(diǎn),幫助團(tuán)隊(duì)更好地理解用戶(hù)需求,從而優(yōu)化產(chǎn)品設(shè)計(jì)

案例分析:

Netflix:Netflix通過(guò)用戶(hù)體驗(yàn)地圖分析用戶(hù)觀看習(xí)慣,發(fā)現(xiàn)用戶(hù)在選擇觀看內(nèi)容時(shí)往往會(huì)感到選擇困難。為此,Netflix優(yōu)化了推薦算法,提供個(gè)性化的內(nèi)容推薦,顯著提升了用戶(hù)的觀看體驗(yàn)和滿(mǎn)意度。

二、與用戶(hù)相互理解

交互設(shè)計(jì)的成功在于與用戶(hù)的有效溝通。正如俞軍所說(shuō),“產(chǎn)品經(jīng)理就是以產(chǎn)品當(dāng)筆,與世界對(duì)話(huà)”。在設(shè)計(jì)過(guò)程中,理解用戶(hù)的需求和情感是至關(guān)重要的。

理解用戶(hù)的方法

  1. 角色扮演:設(shè)計(jì)師假裝自己是用戶(hù),真實(shí)體驗(yàn)產(chǎn)品的使用流程,以此理解用戶(hù)的真實(shí)想法和需求。
  2. 用戶(hù)訪(fǎng)談:通過(guò)與真實(shí)用戶(hù)的對(duì)話(huà),了解他們使用同類(lèi)產(chǎn)品的目的、想法和感受,識(shí)別最需要優(yōu)化的環(huán)節(jié)。
  3. 特征抽取:分析目標(biāo)用戶(hù)的特征(如年齡、性別、心理特征等),從中推導(dǎo)出用戶(hù)的體驗(yàn)需求。
  4. 數(shù)據(jù)分析:利用數(shù)據(jù)分析工具,識(shí)別用戶(hù)在使用過(guò)程中的行為模式,幫助設(shè)計(jì)師更好地理解用戶(hù)需求。

KANO模型:由東京理工大學(xué)教授狩野紀(jì)昭(Noriaki Kano)發(fā)明,是一種對(duì)用戶(hù)需求進(jìn)行分類(lèi)和優(yōu)先排序的方法論。它將用戶(hù)需求分為基本型需求、期望型需求和興奮型需求,幫助企業(yè)識(shí)別不同層次的用戶(hù)需求,從而優(yōu)化產(chǎn)品功能。

馬斯洛需求層次理論專(zhuān)業(yè)描述: 馬斯洛需求層次理論由心理學(xué)家亞伯拉罕·馬斯洛提出,將人類(lèi)的需求劃分為五個(gè)主要層次,從最基本的生理需求到最高層次的自我實(shí)現(xiàn)需求逐級(jí)遞增。理解這些層次的需求有助于揭示人們行為的驅(qū)動(dòng)力及其生活的主要?jiǎng)訖C(jī)。

案例分析:

Dropbox:在早期,Dropbox通過(guò)用戶(hù)訪(fǎng)談和數(shù)據(jù)分析了解用戶(hù)對(duì)文件共享的需求,發(fā)現(xiàn)用戶(hù)希望能夠輕松分享文件而不必?fù)?dān)心復(fù)雜的設(shè)置?;谶@些反饋,Dropbox簡(jiǎn)化了分享流程,使得用戶(hù)可以一鍵分享文件,極大提升了用戶(hù)體驗(yàn)。

三、讓用戶(hù)理解我們的設(shè)計(jì)

設(shè)計(jì)的最終目標(biāo)是讓用戶(hù)理解我們的意圖。如果用戶(hù)無(wú)法理解設(shè)計(jì)表達(dá),那么所有的努力都將付諸東流。為了實(shí)現(xiàn)這一目標(biāo),我們需要遵循以下原則:

1. 按照用戶(hù)的思維習(xí)慣設(shè)計(jì):設(shè)計(jì)應(yīng)符合用戶(hù)的思維邏輯。例如,用戶(hù)在使用某些功能時(shí),往往會(huì)根據(jù)自己的經(jīng)驗(yàn)進(jìn)行操作,設(shè)計(jì)應(yīng)當(dāng)順應(yīng)這種習(xí)慣。
2. 使用用戶(hù)的習(xí)慣性語(yǔ)言:設(shè)計(jì)中使用用戶(hù)熟悉的術(shù)語(yǔ)和表達(dá)方式,以降低理解成本。例如,針對(duì)不同文化背景的用戶(hù),設(shè)計(jì)語(yǔ)言和符號(hào)應(yīng)有所不同。
3. **提供足夠的提示**:在設(shè)計(jì)中加入必要的提示和指導(dǎo),幫助用戶(hù)理解如何使用產(chǎn)品。例如,在注冊(cè)界面中,確保用戶(hù)能夠清晰地看到同意《用戶(hù)協(xié)議》的選項(xiàng)。

案例分析:

Slack:Slack在設(shè)計(jì)其用戶(hù)界面時(shí),充分考慮了用戶(hù)的習(xí)慣性語(yǔ)言和操作邏輯,使用了直觀的圖標(biāo)和清晰的提示,幫助用戶(hù)快速上手。用戶(hù)在使用Slack時(shí),能夠輕松找到所需功能,極大提升了用戶(hù)的滿(mǎn)意度。

四、讓用戶(hù)感覺(jué)越簡(jiǎn)單越好

簡(jiǎn)潔性是交互設(shè)計(jì)的重要原則,但這并不意味著界面內(nèi)容越少越好,而是要讓用戶(hù)在使用過(guò)程中感到輕松和自然。簡(jiǎn)潔的設(shè)計(jì)應(yīng)當(dāng)幫助用戶(hù)快速實(shí)現(xiàn)目標(biāo),而不是讓他們感到困惑。

實(shí)現(xiàn)簡(jiǎn)潔性的策略

  1. 提供捷徑:例如,在電商平臺(tái)上,允許用戶(hù)直接下單而不必經(jīng)過(guò)購(gòu)物車(chē),減少不必要的步驟。
  2. 減少深層思考:設(shè)計(jì)應(yīng)避免復(fù)雜的設(shè)置,讓用戶(hù)能夠快速上手。例如,工具類(lèi)產(chǎn)品應(yīng)盡量簡(jiǎn)化操作流程,讓用戶(hù)能夠迅速完成任務(wù)。

理論支撐:

諾曼的交互設(shè)計(jì)基本原則:諾曼提出的示能、意符、映射、反饋和概念模型等原則,為設(shè)計(jì)師提供了清晰的指導(dǎo),幫助他們創(chuàng)造出用戶(hù)友好的設(shè)計(jì)。

案例分析:

蘋(píng)果公司:蘋(píng)果在其產(chǎn)品設(shè)計(jì)中始終堅(jiān)持簡(jiǎn)潔性原則,通過(guò)直觀的界面和簡(jiǎn)單的操作流程,使用戶(hù)能夠輕松上手。無(wú)論是iPhone的操作系統(tǒng),還是Mac的桌面環(huán)境,用戶(hù)都能快速找到所需功能,享受流暢的使用體驗(yàn)。

五、讓用戶(hù)最終感到滿(mǎn)意

用戶(hù)體驗(yàn)的“峰-終”值原理表明,用戶(hù)的整體滿(mǎn)意度并不取決于每個(gè)環(huán)節(jié)的完美,而是關(guān)鍵時(shí)刻的滿(mǎn)意度。因此,設(shè)計(jì)師應(yīng)關(guān)注用戶(hù)在使用過(guò)程中的高峰體驗(yàn)和結(jié)束體驗(yàn)。

實(shí)現(xiàn)用戶(hù)滿(mǎn)意度的策略:

  1. 控制體驗(yàn)差的設(shè)計(jì):確保所有體驗(yàn)不超過(guò)用戶(hù)的預(yù)期底線(xiàn),避免給用戶(hù)帶來(lái)負(fù)面體驗(yàn)。
  2. 超越用戶(hù)的預(yù)期:在產(chǎn)品的優(yōu)勢(shì)和亮點(diǎn)方面,努力超越用戶(hù)的期望,提供驚喜。
  3. 優(yōu)化離開(kāi)觸點(diǎn):確保用戶(hù)在離開(kāi)產(chǎn)品時(shí)感到滿(mǎn)意,即使在使用過(guò)程中有些環(huán)節(jié)不盡如人意。

案例分析:

Zappos:Zappos以其卓越的客戶(hù)服務(wù)而聞名,尤其是在處理退貨和客戶(hù)投訴時(shí)。他們確保用戶(hù)在購(gòu)買(mǎi)后無(wú)論遇到什么問(wèn)題,都能得到及時(shí)和滿(mǎn)意的解決,從而提升了用戶(hù)的整體滿(mǎn)意度。

總結(jié)

綜上所述,產(chǎn)品交互設(shè)計(jì)的基本原則在于將設(shè)計(jì)視為一個(gè)整體流程,深入理解用戶(hù),確保設(shè)計(jì)能夠被用戶(hù)理解,并讓用戶(hù)感到簡(jiǎn)單和愉悅。最終,設(shè)計(jì)的成功與否應(yīng)通過(guò)是否幫助實(shí)現(xiàn)產(chǎn)品目標(biāo)來(lái)衡量。通過(guò)不斷迭代和優(yōu)化,我們可以創(chuàng)造出既滿(mǎn)足用戶(hù)需求又推動(dòng)產(chǎn)品發(fā)展的優(yōu)秀交互設(shè)計(jì)。設(shè)計(jì)師在這一過(guò)程中,應(yīng)始終保持對(duì)用戶(hù)的敏感度,關(guān)注用戶(hù)的反饋,以確保設(shè)計(jì)始終圍繞用戶(hù)的真實(shí)需求展開(kāi)。

作者:海鮮不設(shè)計(jì),微信公眾號(hào):海鮮不設(shè)計(jì)

本文由 @海鮮不設(shè)計(jì) 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)作者許可,禁止轉(zhuǎn)載。

題圖來(lái)自Unsplash,基于CC0協(xié)議

該文觀點(diǎn)僅代表作者本人,人人都是產(chǎn)品經(jīng)理平臺(tái)僅提供信息存儲(chǔ)空間服務(wù)。

蘭亭妙微(bouu.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶(hù)體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢(xún)、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì),以及相關(guān)的軟件開(kāi)發(fā)服務(wù),咨詢(xún)電話(huà):01063334945。我們建立了一個(gè)微信群,每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì),有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng),咨詢(xún)及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan

DeepSeek+交互設(shè)計(jì):B端產(chǎn)品退訂心理學(xué)的設(shè)計(jì)策略與實(shí)踐

天宇 B端ui設(shè)計(jì)文章及欣賞

 

在B端產(chǎn)品設(shè)計(jì)中,退訂是用戶(hù)對(duì)產(chǎn)品不滿(mǎn)的直接表現(xiàn),也是我們優(yōu)化產(chǎn)品的重要信號(hào)。作為UI設(shè)計(jì)師,如何通過(guò)交互設(shè)計(jì)降低退訂率,提升用戶(hù)留存,是一個(gè)值得深入探討的話(huà)題。本文將結(jié)合 DeepSeek(深度探索) 的設(shè)計(jì)理念,從用戶(hù)心理和交互設(shè)計(jì)的角度,分享B端產(chǎn)品退訂心理學(xué)的設(shè)計(jì)策略與實(shí)踐。

一、DeepSeek+交互設(shè)計(jì):理解用戶(hù)退訂的深層原因 DeepSeek

強(qiáng)調(diào)通過(guò)深度探索用戶(hù)行為和心理,找到問(wèn)題的本質(zhì)。在退訂場(chǎng)景中,用戶(hù)的行為背后往往隱藏著以下心理動(dòng)因:

  • 價(jià)值感知不足 用戶(hù)未感受到產(chǎn)品的核心價(jià)值,認(rèn)為投入與回報(bào)不成正比。
  • 操作體驗(yàn)不佳 復(fù)雜的操作流程或低效的功能設(shè)計(jì)讓用戶(hù)失去耐心。
  • 需求未被滿(mǎn)足 產(chǎn)品功能與用戶(hù)實(shí)際需求不匹配,導(dǎo)致用戶(hù)選擇離開(kāi)。
  • 缺乏情感連接 用戶(hù)對(duì)產(chǎn)品缺乏歸屬感或信任感,容易被競(jìng)品吸引。

二、DeepSeek+交互設(shè)計(jì)策略:降低退訂率的四大關(guān)鍵

1. 深度探索用戶(hù)行為,優(yōu)化退訂路徑

1)設(shè)計(jì)目標(biāo):通過(guò)數(shù)據(jù)分析,找到用戶(hù)退訂的高頻節(jié)點(diǎn),優(yōu)化交互路徑。

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

  • 在用戶(hù)退訂前增加“挽回節(jié)點(diǎn)”,如彈窗提示“您是否遇到問(wèn)題?我們可以幫您解決。”
  •  提供“暫停服務(wù)”或“降級(jí)套餐”選項(xiàng),而非直接退訂。

2. 強(qiáng)化價(jià)值感知,讓用戶(hù)看到“收益”

1)設(shè)計(jì)目標(biāo):通過(guò)設(shè)計(jì)手段,讓用戶(hù)直觀感受到產(chǎn)品的價(jià)值。

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

  • 在退訂頁(yè)面展示用戶(hù)使用產(chǎn)品的關(guān)鍵數(shù)據(jù)(如“您已節(jié)省XX小時(shí)”)。
  • 提供成功案例或用戶(hù)評(píng)價(jià),增強(qiáng)用戶(hù)信任感。

3. 簡(jiǎn)化操作流程,提升用戶(hù)體驗(yàn)

1)設(shè)計(jì)目標(biāo):降低用戶(hù)的操作成本,減少因體驗(yàn)不佳導(dǎo)致的退訂。

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

  • 提供清晰的操作指引和幫助文檔,降低學(xué)習(xí)成本。
  • 在關(guān)鍵操作節(jié)點(diǎn)增加即時(shí)反饋(如“操作成功”提示)。

4. 建立情感連接,增強(qiáng)用戶(hù)歸屬感

1)設(shè)計(jì)目標(biāo):通過(guò)設(shè)計(jì)讓用戶(hù)感受到被重視,增強(qiáng)對(duì)產(chǎn)品的情感依賴(lài)。

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

  • 在退訂頁(yè)面增加個(gè)性化挽留信息(如“我們會(huì)想念您”)。
  • 提供專(zhuān)屬優(yōu)惠或免費(fèi)試用機(jī)會(huì),讓用戶(hù)感受到被重視。

三、DeepSeek+設(shè)計(jì)案例:某B端 SaaS 產(chǎn)品的退訂優(yōu)化實(shí)踐

以某B端 SaaS 產(chǎn)品為例,通過(guò) DeepSeek+交互設(shè)計(jì)策略,退訂率降低了20%。

具體優(yōu)化包括:

  • 在退訂頁(yè)面增加“您可能錯(cuò)過(guò)的功能”模塊,強(qiáng)化價(jià)值感知。
  • 提供“聯(lián)系客戶(hù)經(jīng)理”按鈕,方便用戶(hù)咨詢(xún)和解決問(wèn)題。

四、總結(jié)

退訂是用戶(hù)對(duì)產(chǎn)品的“最后反饋”,也是我們優(yōu)化產(chǎn)品的重要機(jī)會(huì)。通過(guò) DeepSeek+交互設(shè)計(jì),我們可以深度探索用戶(hù)心理,優(yōu)化交互路徑,強(qiáng)化價(jià)值感知,簡(jiǎn)化操作流程,并建立情感連接,從而有效降低退訂率。希望本文的設(shè)計(jì)策略與實(shí)踐能為B端產(chǎn)品的優(yōu)化提供啟發(fā),讓我們的產(chǎn)品更好地服務(wù)于用戶(hù),提升用戶(hù)留存與滿(mǎn)意度。

本文由 @劉萍 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)作者許可,禁止轉(zhuǎn)載

題圖來(lái)自Unsplash,基于CC0協(xié)議

該文觀點(diǎn)僅代表作者本人,人人都是產(chǎn)品經(jīng)理平臺(tái)僅提供信息存儲(chǔ)空間服務(wù)

蘭亭妙微(bouu.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶(hù)體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢(xún)、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì),以及相關(guān)的軟件開(kāi)發(fā)服務(wù),咨詢(xún)電話(huà):01063334945。我們建立了一個(gè)微信群,每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì),有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng),咨詢(xún)及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan

善用設(shè)計(jì)洞見(jiàn),提升設(shè)計(jì)效用

天宇 設(shè)計(jì)思維

在當(dāng)今設(shè)計(jì)行業(yè),設(shè)計(jì)師不僅需要具備專(zhuān)業(yè)技能,更要與業(yè)務(wù)目標(biāo)緊密結(jié)合,以提升設(shè)計(jì)的實(shí)際效用。本文探討了如何通過(guò)設(shè)計(jì)洞見(jiàn)來(lái)識(shí)別客戶(hù)需求,進(jìn)而優(yōu)化設(shè)計(jì)過(guò)程。

好的設(shè)計(jì)師不僅僅要有專(zhuān)業(yè)能力,更重要的是與產(chǎn)品達(dá)到同頻,最終更好賦能業(yè)務(wù)指標(biāo)達(dá)成。

目前設(shè)計(jì)行業(yè)的現(xiàn)狀,大部分設(shè)計(jì)師還停留在設(shè)計(jì)思維的角度,存在一些和業(yè)務(wù)格格不入的情況,只關(guān)注好不好看,做一個(gè)交互原型的美化者…

自己做了很多,但是與實(shí)際脫節(jié)。出了很多個(gè)方案,產(chǎn)品(或運(yùn)營(yíng)/商務(wù)伙伴)覺(jué)得沒(méi)什么變化;打磨了很多細(xì)節(jié)和創(chuàng)新點(diǎn),產(chǎn)品卻只想快速上線(xiàn)……

設(shè)計(jì)師自己的工作被各種“非專(zhuān)業(yè)”的指導(dǎo)意見(jiàn)干擾;而其他職崗伙伴眼里,我們的付出,卻變成了一種“設(shè)計(jì)師的自High”。

究其原因,還是把以用戶(hù)思維去進(jìn)行設(shè)計(jì)。

想要改變這樣的狀態(tài),最核心的是思維轉(zhuǎn)變,從技能導(dǎo)向的思考方式變?yōu)閮r(jià)值導(dǎo)向的思考方式。

本文主要從講述,如何通過(guò)方法,在項(xiàng)目進(jìn)入期獲得有效設(shè)計(jì)洞見(jiàn),提高設(shè)計(jì)效用,帶來(lái)客戶(hù)價(jià)值(用戶(hù)價(jià)值)。

一、什么是設(shè)計(jì)洞見(jiàn)?

先舉一個(gè)例子:如何做一個(gè)新款剃須刀產(chǎn)品?

飛利浦這些大公司,給出的答案是 更好的刀頭,更貼合面部,更安全和更容易清洗,一個(gè)黑灰塑料材質(zhì)、工業(yè)風(fēng)格的“更好用”的剃須刀確實(shí)誕生了。

但是有一個(gè)很有意思的公司,給出了另一份答案:極簡(jiǎn)造型、合金材質(zhì)、超 mini 尺寸和豐富配色,最重要的是:

于是 2019 年,這個(gè)疫情開(kāi)始的時(shí)間,這家剃須刀橫空出世。

這款產(chǎn)品獲得成功的原因,本質(zhì)上就是產(chǎn)品的設(shè)計(jì)者帶著更高、更廣的視角,洞見(jiàn)了“剃須刀不僅是一個(gè)工具,它更可以成為一種禮物”這個(gè)更深層次的客戶(hù)需求,打破現(xiàn)有市場(chǎng)概念,獲得成功。

——如果說(shuō),設(shè)計(jì)洞察是發(fā)現(xiàn)和理解問(wèn)題的能力,是設(shè)計(jì)師在研究和解決問(wèn)題時(shí)所產(chǎn)生的觀察力和創(chuàng)造力。那么設(shè)計(jì)洞見(jiàn)可以幫助設(shè)計(jì)師更好地識(shí)別問(wèn)題、提出創(chuàng)新解決方案,并為設(shè)計(jì)師提供思考問(wèn)題和做出決策的指導(dǎo)。

Brown.Tim在《設(shè)計(jì)思考改造世界》中說(shuō):”未來(lái)的設(shè)計(jì)師將扮演科技的詮釋者(洞見(jiàn)能力),人性的引領(lǐng)者(觀察能力),感性的創(chuàng)造者與品位的營(yíng)造者(同理心)的角色”。

通過(guò)設(shè)計(jì)洞見(jiàn),可以讓我們看更高、想更全, 與業(yè)務(wù)貼合更緊密,讓設(shè)計(jì)得到認(rèn)可,產(chǎn)生業(yè)務(wù)共鳴,賦予用戶(hù)/客戶(hù)價(jià)值,才能讓設(shè)計(jì)變的更有價(jià)值。

二、如何獲得設(shè)計(jì)洞見(jiàn)?

接下來(lái)我們將通過(guò)一一探索獲得洞見(jiàn)的三個(gè)階段。

第一階段:設(shè)計(jì)洞察

洞察階段的核心,是獲得現(xiàn)象背后的動(dòng)因。是一個(gè)獲得信息與問(wèn)題的階段

產(chǎn)品的設(shè)計(jì)產(chǎn)出是一個(gè)抽象到具象化的過(guò)程,在設(shè)計(jì)和迭代的過(guò)程中,會(huì)經(jīng)歷非常多的流程。而大多數(shù)的設(shè)計(jì)洞見(jiàn)有效過(guò)去在更前置的節(jié)點(diǎn),才能產(chǎn)生更有效的價(jià)值。

所以我們首先做的是:“提升設(shè)計(jì)的主動(dòng)性”,在項(xiàng)目的進(jìn)入期最大化實(shí)現(xiàn)設(shè)計(jì)洞見(jiàn)的價(jià)值。

項(xiàng)目進(jìn)入期通常會(huì)有一個(gè)通病,即問(wèn)題泛化,無(wú)法具象。在一個(gè)比較“泛”的問(wèn)題下,挖掘目的/目標(biāo),找到問(wèn)題最簡(jiǎn)單的辦法就是“調(diào)查分析”:了解行業(yè)生態(tài)與業(yè)務(wù)背景,確定或推測(cè)自身產(chǎn)品的發(fā)展方向,分析定位與關(guān)注指向-Pointer(即當(dāng)下會(huì)產(chǎn)生哪些具有指向性的任務(wù)方向)。

這個(gè)階段,我們的主要目的是通過(guò)最初始的源頭數(shù)據(jù),正確的了解業(yè)務(wù)或者項(xiàng)目的背景,避免因信息傳遞所產(chǎn)生的認(rèn)知誤差,以免發(fā)生“指向”偏差。而要做到這一點(diǎn),洞察就不能僅僅停留在表面的觀察,詢(xún)問(wèn),記錄和數(shù)據(jù)分析,而要隨時(shí)通過(guò)聯(lián)想和反思來(lái)回歸本質(zhì)——客戶(hù)(用戶(hù))和場(chǎng)景。調(diào)查中獲得的數(shù)據(jù)只有放在合適的情境中才能獲得準(zhǔn)確的解讀。

1)知識(shí)準(zhǔn)備

了解各種市場(chǎng)調(diào)研的方法與過(guò)程,對(duì)調(diào)研方法進(jìn)行分類(lèi)。

如下圖所示,(戴力農(nóng)《設(shè)計(jì)調(diào)研》)橫軸區(qū)分了該方法得到的數(shù)據(jù)是客觀的(人們的行為)還是主觀的(人們的目標(biāo)和觀點(diǎn)),縱軸區(qū)分了該方法的類(lèi)型是定性的還是定量的。

2)選擇正確的調(diào)研辦法

不同的產(chǎn)品生命周期,對(duì)應(yīng)不同的調(diào)研方法,根據(jù)產(chǎn)品的不同時(shí)期選擇合適屬性的調(diào)研辦法。

互聯(lián)網(wǎng)設(shè)計(jì)師的常規(guī)調(diào)研手法,受困于資源,多是在桌面進(jìn)行。我們通過(guò)二手資料研究、競(jìng)品和線(xiàn)上走查獲得問(wèn)題,進(jìn)行虛擬對(duì)象的研究,極易發(fā)生偏差。

拓新場(chǎng)景和成長(zhǎng)初期,通常資源緊張且缺乏具象客戶(hù),很難進(jìn)行大樣本調(diào)研數(shù)據(jù)挖掘。對(duì)于設(shè)計(jì)師來(lái)說(shuō),在了解業(yè)務(wù)信息,對(duì)稱(chēng)業(yè)務(wù)方向時(shí)可以依賴(lài)其他職崗提供的資料進(jìn)行研究;但是對(duì)于設(shè)計(jì)息息相關(guān)的關(guān)鍵點(diǎn),建議還是通過(guò)自己實(shí)地考察、焦點(diǎn)實(shí)驗(yàn)去獲取真實(shí)的體驗(yàn)信息。

成長(zhǎng)后期與成熟期,關(guān)鍵在于保證和提高產(chǎn)品質(zhì)量,縮短與頭部產(chǎn)品之間的差距,實(shí)現(xiàn)產(chǎn)品的高增長(zhǎng) 。大樣本的用戶(hù)與競(jìng)品調(diào)研可以幫助我們更可觀的看到真實(shí)的客戶(hù)需求。再輸入到我們的日常桌面研究中去。

3)掌握信息收集、數(shù)據(jù)統(tǒng)計(jì)分析方面的知識(shí)

4)了解調(diào)研的流程

確定調(diào)研目標(biāo) → 制定調(diào)研計(jì)劃 → 準(zhǔn)備調(diào)研材料&環(huán)境 → 邀請(qǐng)調(diào)研對(duì)象&執(zhí)行調(diào)研過(guò)程 → 分析整理信息與數(shù)據(jù) → 輸出調(diào)研結(jié)果。

調(diào)研的實(shí)際操作流程在數(shù)據(jù)采集和調(diào)研分析方法中已經(jīng)涉及的比較多了,也有很多好的執(zhí)行案例可供我們學(xué)習(xí)與參考。

得到大量信息,進(jìn)行吸收、理解和處理后,我們將收獲大量的問(wèn)題。接下來(lái)就是如何解決問(wèn)題。

第二階段:定位價(jià)值

定位價(jià)值是洞見(jiàn)的關(guān)鍵階段,是能給業(yè)務(wù)帶來(lái)價(jià)值的核心,是可以改變客戶(hù)(用戶(hù))習(xí)慣和行為的關(guān)鍵博弈。

那么如何定位價(jià)值呢?

1)問(wèn)題整合,提煉與確認(rèn)指向

將調(diào)研獲得的問(wèn)題進(jìn)行歸納與整理,如簡(jiǎn)單的 Card Sorting ,確認(rèn)所有問(wèn)題的核心指向(Pointer)。

接下來(lái)就需要不停的切換指向,并深入每個(gè)關(guān)鍵 key 下進(jìn)一步拆解,確定你收獲的是否是一個(gè)真正且重要的 Pointer。

EG海底撈▽

餐廳高峰期經(jīng)常人滿(mǎn)為患,排隊(duì)體驗(yàn)差。常規(guī)餐廳的做法:約束更快的出餐、收臺(tái),拆分更多的餐位,引導(dǎo)拼桌服務(wù)等等等等..短期可能會(huì)帶來(lái)改變,但是達(dá)到一個(gè)極限點(diǎn)以后,就很難再提升了。

類(lèi)似的場(chǎng)景還有曾經(jīng)的外賣(mài)小哥:30 分鐘以?xún)?nèi)還能更快嗎?答案是:很難。

那怎么讓客人愿意多等待一點(diǎn),或者不覺(jué)得“等待完全是無(wú)價(jià)值無(wú)意義的”?

海底撈選擇在你排隊(duì)等待的時(shí)候,提供免費(fèi)美甲、護(hù)手、零食等等各種周到服務(wù),讓客人等待的過(guò)程中不至于無(wú)事可做。獲得了認(rèn)可,贏得了口碑。

如果你留心觀察,你會(huì)發(fā)現(xiàn)海底撈的標(biāo)志也是用了一個(gè)打招呼的氣泡Hi,來(lái)強(qiáng)調(diào)服務(wù)為先的品牌定位,解決的是情感需求中的「過(guò)程體驗(yàn)」。

2)PDS(問(wèn)題-檢測(cè)-研究)調(diào)查分析

PSD 調(diào)查分析的核心思想,是調(diào)查客戶(hù)(用戶(hù))與預(yù)期(行為/認(rèn)知)的偏差,或不滿(mǎn)與問(wèn)題來(lái)發(fā)現(xiàn)洞見(jiàn)。

EG BBDO反煙推廣 ▽

BBDO 的英國(guó)公司層接到過(guò)這樣一個(gè)推廣任務(wù):是讓年輕人,特別是十幾歲的小女孩兒戒煙。

其實(shí)這個(gè)問(wèn)題特別棘手。一方面,吸煙是一個(gè)生理上癮的事情,要戒掉很困難;另一方面,吸煙最大的問(wèn)題是有害健康,但是對(duì)于年輕人來(lái)說(shuō)在這個(gè)角度的感觸不深,很難起到效果。用常態(tài)的思考模式似乎很難找到正確的解決方案,但是借助洞見(jiàn)以后就不一樣了。

通過(guò)了解更多事實(shí),看目標(biāo)群體關(guān)注什么,哪些問(wèn)題對(duì)我們要實(shí)現(xiàn)的目標(biāo)有影響。在這個(gè)案例里,BBDO的做法是派了一個(gè)年輕的女助理在購(gòu)物區(qū)找了一家咖啡館,連著5天坐在那里聽(tīng)那里的女孩兒在聊些什么。

結(jié)果這5天內(nèi)她就發(fā)現(xiàn),這些十幾歲的女生大部分聊的是買(mǎi)衣服、做頭發(fā)、選什么樣的指甲油和減肥藥,怎么整容等等。當(dāng)女助理把這些內(nèi)容列在自己的本子上的時(shí)候,洞見(jiàn)就自己呼之欲出了:原來(lái)對(duì)于這些無(wú)所事事,十幾歲的年輕女孩而言,沒(méi)有什么比她們看起來(lái)漂亮更重要了。

因此,你不需要告訴她吸煙可能縮短壽命,你只要告訴她一件事情:“吸煙會(huì)讓你變得難看”,就足夠讓她戒煙了。

所以,想要獲得洞見(jiàn),就去調(diào)研目標(biāo)群體真正關(guān)注的事情。當(dāng)你通過(guò)調(diào)研發(fā)現(xiàn)真正的問(wèn)題時(shí),洞見(jiàn)往往就會(huì)產(chǎn)生。

3)規(guī)避技能導(dǎo)向

設(shè)計(jì)的職崗角色是單薄的。我們一定要帶著指針與方案,多職崗評(píng)估價(jià)值與可執(zhí)行度,這是一個(gè)設(shè)計(jì)前期任務(wù)的過(guò)程。它的輸出可能為設(shè)計(jì)Demo、簡(jiǎn)單的筆記、方案的列表,或者是一個(gè)說(shuō)明效果的故事版……不一定具備完整的落地性,但是可以讓伙伴更好的理解你的觀點(diǎn)。

第三階段:系統(tǒng)輸出

設(shè)計(jì)的解決方案要從起心動(dòng)念、貫穿至產(chǎn)、研、運(yùn)營(yíng)甚至上市宣傳的全路徑方案。

在分析階段我們通過(guò)“3步走”的視角思維,明確了任務(wù)重點(diǎn)同時(shí)幫助我們明確不同指針的優(yōu)先級(jí)。

設(shè)計(jì)師要考慮的維度不僅僅在用戶(hù)體驗(yàn)層面,更應(yīng)在執(zhí)行時(shí)候要考慮業(yè)務(wù)的實(shí)際需求,考慮上下游不同職能的工作內(nèi)容,始終保持全局與系統(tǒng)的思維,要從客戶(hù)價(jià)值出發(fā),回落到企業(yè)成本中去。

通過(guò)設(shè)計(jì)洞見(jiàn),從更本質(zhì)的層面去洞悉問(wèn)題,重新定義和設(shè)計(jì)任務(wù)。

與業(yè)務(wù)產(chǎn)生共鳴才是好的設(shè)計(jì)。

讓你的設(shè)計(jì)方案保持在更高、更廣、更全局的維度。真正融入和助力業(yè)務(wù),提升設(shè)計(jì)的效用。讓“提升體驗(yàn)”這件事真正落地。

改變我們看世界的方式,亦改變世界看待我們的方式。

作者:張一

本文由 @群核科技用戶(hù)體驗(yàn)設(shè)計(jì) 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止轉(zhuǎn)載

題圖由作者提供

該文觀點(diǎn)僅代表作者本人,人人都是產(chǎn)品經(jīng)理平臺(tái)僅提供信息存儲(chǔ)空間服務(wù)。

蘭亭妙微(bouu.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶(hù)體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢(xún)、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì),以及相關(guān)的軟件開(kāi)發(fā)服務(wù),咨詢(xún)電話(huà):01063334945。我們建立了一個(gè)微信群,每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì),有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng),咨詢(xún)及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan

日歷

鏈接

個(gè)人資料

存檔