首頁

以用戶為中心的交互設(shè)計思維

天宇 交互設(shè)計及用戶體驗

 
聊聊關(guān)于設(shè)計思維的內(nèi)容,會從產(chǎn)品設(shè)計、體驗設(shè)計、交互設(shè)計三個方面入手。
目前是第三篇,關(guān)于交互設(shè)計思維的內(nèi)容。到這里設(shè)計思維的內(nèi)容全部結(jié)束了。
感謝
以用戶為中心的交互設(shè)計思維
 
 
以用戶為中心的交互設(shè)計思維
 
 
以用戶為中心的交互設(shè)計思維
 
 
以用戶為中心的交互設(shè)計思維
 
 
以用戶為中心的交互設(shè)計思維
 
 
以用戶為中心的交互設(shè)計思維
 
 
以用戶為中心的交互設(shè)計思維
 
 
以用戶為中心的交互設(shè)計思維
 
 
以用戶為中心的交互設(shè)計思維
 
 
以用戶為中心的交互設(shè)計思維
 
 
以用戶為中心的交互設(shè)計思維
 
 
以用戶為中心的交互設(shè)計思維
 
 
以用戶為中心的交互設(shè)計思維
 
 
以用戶為中心的交互設(shè)計思維
 
 
以用戶為中心的交互設(shè)計思維
 
 
以用戶為中心的交互設(shè)計思維


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

設(shè)計的意義

藍(lán)藍(lán)設(shè)計的小編 設(shè)計思維

保羅·蘭德說:“設(shè)計是一種行為,是想象力馳騁的過程和產(chǎn)物。”

作為設(shè)計師,設(shè)計是我們的專業(yè),也是我們用來解決商業(yè)問題的工具。

我們過去也許都曾思考過類似設(shè)計的價值、意義或是本質(zhì)之類的問題。思考這類問題在某種意義上或許都是為了當(dāng)我們遇到困難、沖突、低谷或是不確定性的時候給自己找一些能夠堅持下去的理由。

設(shè)計師在從業(yè)的不同階段,對設(shè)計的理解不同。從追求工具技能到表現(xiàn)力、方法論、風(fēng)格到影響行業(yè)甚至社會審美意識等等。不斷的錘煉之后,對設(shè)計意義也會有不同理解。

我們奉為的大師,都擅長用自己的知識架構(gòu)定義對設(shè)計的理解。

保羅·蘭德就是一位我們公認(rèn)的設(shè)計大師、藝術(shù)家。他是當(dāng)今美國乃至世界上最杰出的圖形設(shè)計師、思想家及設(shè)計教育家之一。他最出名的企業(yè)標(biāo)志設(shè)計,包括IBM,UPS,ABC標(biāo)志以及為史蒂夫·喬布斯設(shè)計NeXT.那段經(jīng)典橋段。

去研究這些前輩們?nèi)绾慰创O(shè)計、理解設(shè)計以及如何與設(shè)計相處一生,是另一種設(shè)計哲學(xué)的思辨。

保羅·蘭德說:

“設(shè)計是一種行為,是想象力馳騁的過程和產(chǎn)物。”

設(shè)計表現(xiàn)可能看似是簡單的組裝、排序或是美化的過程,但設(shè)計的過程也是賦予信息意義的過程。不斷的簡化、厘清、修飾甚至可能去說服、去取悅過后,設(shè)計就是把散文變成詩歌的過程。

設(shè)計師是孤獨的,大部分時候他們是一個人在戰(zhàn)斗。

設(shè)計是個人行為,即便在設(shè)計成熟度較高的國家、企業(yè)或是大型團隊,設(shè)計師仍需在一線才能真正掌控在這場戰(zhàn)斗中可能遇到的極其細(xì)節(jié)的變化和給人傳達(dá)的感受。

設(shè)計需要沖突來加深傳達(dá)的“戲劇性”。但設(shè)計過程也面臨種種沖突。這是設(shè)計的商業(yè)價值與藝術(shù)價值平衡的過程。正是因為這種關(guān)心很難平衡,才會出現(xiàn)雇主與設(shè)計師之間的沖突。

企業(yè)的目標(biāo)是達(dá)到商業(yè)、經(jīng)濟、政治甚至社會性目的。對設(shè)計師而言,設(shè)計是一種創(chuàng)造和實驗行為。通過這種行為來平衡之前的目標(biāo)。

設(shè)計品質(zhì)最終決定設(shè)計師與核心決策者之間的關(guān)系。關(guān)心越是緊密,設(shè)計的產(chǎn)出就越有可能出彩。這其實并不難理解,對設(shè)計完成度有高追求的企業(yè),CEO也大多都跟設(shè)計團隊或是設(shè)計咨詢公司有較為緊密的往來。就比如蘋果的喬布斯與喬納森是我們都公認(rèn)的CEO與設(shè)計師高緊密度關(guān)系的典范。

當(dāng)今社會,市面上依然存在太多糟糕的設(shè)計。

一來,核心的決策者對設(shè)計專業(yè)的理解度不夠。

二來,很多決策依賴于市場調(diào)研,既得利益的權(quán)重大于長遠(yuǎn)利益。

再就是我們回避不開的話題,設(shè)計師在某種意義上話語權(quán)不夠。

抉擇者很多時候不了解或是存在對某類元素特定的喜好偏見,他們有評價權(quán),但卻缺乏對設(shè)計專業(yè)知識的儲備。所以就會普遍出現(xiàn)外行指導(dǎo)內(nèi)行的情況。過往(現(xiàn)在好一些),他們將設(shè)計師看做一套繪圖工具,一個合作供應(yīng)商而不是一個業(yè)務(wù)團隊里重要的組成部門。

體系完整的企業(yè)可能會引入市場調(diào)研團隊,調(diào)研團隊為營銷提供定位信息,設(shè)計師來解讀和演繹那些信息。如果調(diào)研團隊能理解設(shè)計師的工作過程與其產(chǎn)生共鳴,就有可能促成正確決策甚至產(chǎn)生驚喜的創(chuàng)意作品。

但很多時候,我們聽到了太多這樣的回復(fù):

 

我喜歡它;

我不喜歡它;

它太簡單了;

它太復(fù)雜了;

它讓我想起某某...

常常一句“我不喜歡”就可以終結(jié)任何設(shè)計作品。就像當(dāng)初一位IBM的主管第一次看到這個條紋logo時嘲弄到說“這東西讓我想起格魯吉亞的鎖鏈囚犯”。

每個人所能感知的信息都不盡相同。

有人既看不到logo的意義,也看不到它的功能。也正因為過于用喜好而不是專業(yè)去評判,才讓糟糕的設(shè)計一直留存于我們的世界。而大眾對糟糕的設(shè)計要比對好設(shè)計更加熟悉,于是大家習(xí)慣于選擇不好的設(shè)計,因為和他們朝夕相處。

新事物讓人感受到威脅,而舊事物讓人安心。

要判斷一個設(shè)計的內(nèi)在價值,決定性因素不是使用期,而是它所設(shè)定的“品質(zhì)預(yù)期”。這是設(shè)計師的價值,也是設(shè)計師該練就的“知覺”。

何為知覺?

我們可以把知覺暫定為“瞬間的洞悉”。設(shè)計師在做設(shè)計決策的時候大部分都是依賴過往的知識儲備以及慣性技能。不斷的嘗試,都是通過瞬間對各方向的可能性判斷。

本能、預(yù)感、沖動、洞悉之后的綜合“洞悉”,這就是知覺。

說到logo,我們常把logo當(dāng)成品牌價值傳遞的重要符號。

它是一面旗幟、一個簽名、一個路標(biāo)。大部分時候,雇主期待logo能描述一個行業(yè),但歷史上最成功的logo都沒能做到。蘋果、勞斯萊斯、可口可樂、或是IBM等等...不可否認(rèn)的是它們都是歷史上最成功的logo,但它們卻無法做到能傳遞它們的行業(yè)屬性。因為logo遠(yuǎn)不如它所代表的產(chǎn)品重要,它所代表的比它看起來的樣子更重要。


因為只有l(wèi)ogo與它所屬的公司、產(chǎn)品、服務(wù)聯(lián)系起來時,它才具備真正的意義。一流的產(chǎn)品和公司的logo傳遞出一流的形象。反之一個公司如果是二流的,那么它的logo最終也會被歸為二流。

 

 

logo首先要告訴人們“是誰”,而不是“是什么”。這才是它最基礎(chǔ)且最重要的功能。它所扮演的角色就是“指示”。“簡潔”是達(dá)成指示的手段。所以設(shè)計過程中的特點、好記以及清楚都是需要設(shè)計師在打磨細(xì)節(jié)前首先要做好的決策。一個復(fù)雜、挑剔、模糊的設(shè)計潛藏著自我毀滅性的風(fēng)險。

 

“好的設(shè)計帶來好的生意”。但不可否認(rèn),即使不好的設(shè)計,也可能帶來好的生意(比如下圖)。如果這樣,還需要好的設(shè)計么?

好的設(shè)計可以增添額外的附加價值,很多時候,也許光看著它就能給人們帶來快樂。它們更尊重感官,并通過這種友好的感官體驗,給企業(yè)帶來回報。人們更容易記得精美而不是一團糟的形象。它折射出一個考慮周全,目標(biāo)明確的企業(yè),反映了它的產(chǎn)品或者服務(wù)的品質(zhì)。所以,這個世界需要好的設(shè)計,設(shè)計師要做的就是用設(shè)計向世界傳遞一些更有價值的觀點。這是設(shè)計師的工作,也是設(shè)計該有的意義。

「大寶推薦閱讀書單之《設(shè)計的意義》」



作者:大寶頻道
鏈接:https://www.zcool.com.cn/article/ZMTQ3ODQzMg==.html
來源:站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請注明出處。

 

優(yōu)秀的設(shè)計就是帶給用戶驚喜!

藍(lán)藍(lán)設(shè)計的小編 設(shè)計思維

優(yōu)秀的產(chǎn)品設(shè)計是能帶給用戶驚喜的,在不經(jīng)意間讓用戶感受到溫度,也是提升用戶體驗的關(guān)鍵。
 
隨著行業(yè)的進步,產(chǎn)品設(shè)計師也在不斷優(yōu)化體驗,輸出一個一個優(yōu)秀的解決方案。近期黑馬哥也發(fā)現(xiàn)了一些比較驚喜的設(shè)計,來和大家一起欣賞一下吧!
優(yōu)秀的設(shè)計就是帶給用戶驚喜!
 
 
 
 
體驗?zāi)夸?/div>
一、降落傘帶來的營銷廣告
二、動效反饋商家備餐過程
三、這個廣告驚不驚喜意不意外
四、Banner 廣告的視覺沉浸感
五、待機狀態(tài)下的實時動態(tài)
六、小圖標(biāo)里的細(xì)節(jié)反思
七、輪播式的懸浮設(shè)計
八、氛圍熱烈的底部標(biāo)簽欄
九、收縮式交互設(shè)計
十、形象化的進度設(shè)計
 
 
一、降落傘帶來的營銷廣告
在這個廣告滿天飛的年代,用戶已經(jīng)逐步開啟廣告免疫模式,如何提高用戶對廣告的關(guān)注度至關(guān)重要。
 
近期在體驗餓了么時,等待送餐界面中空降一個降落傘,從左上角飄到右側(cè)懸浮,彈出紅包懸浮廣告。降落傘飄浮的動態(tài)過程吸引了用戶的關(guān)注度,進而提高了營銷廣告的點擊率,雖然廣告大家都比較反感,但是一個伴隨著驚喜的廣告也會讓你放下戒備心理。
優(yōu)秀的設(shè)計就是帶給用戶驚喜!
 
 
 
 
二、動效反饋商家備餐過程
提升等待過程對于用戶體驗來說尤為重要,降低用戶等待過程中的焦慮感,才能讓用戶愿意為此停留。
 
通過餓了么點餐之后,商家需要一定的時間完成餐飲的制作,必然需要用戶等待一些時間。在這個備餐過程中,當(dāng)前界面以一個翻炒動效表達(dá),情感化的動效不僅提示用戶當(dāng)前狀態(tài),也提升了設(shè)計表達(dá)的感官體驗。
優(yōu)秀的設(shè)計就是帶給用戶驚喜!
 
 
 
 
三、這個廣告驚不驚喜意不意外
意料之外的廣告是帶給你驚喜還是反感呢?平臺為了提高變現(xiàn)能力,各種層出不窮的廣告玩法也讓你猝不及防。
 
之前在體驗騰訊視頻 App 時,從閃屏廣告過度到 Banner 圖的過程中,經(jīng)歷了多個廣告新花樣。首先從閃屏切換到自動輪播的彈窗模式,再演變到放大版的多個廣告切片(占 Banner 位呈現(xiàn)),最后再恢復(fù)到 Banner 的正常布局中。這個過程無疑是把廣告的存在感拉滿了,讓你對廣告的記憶形成硬性要求。
 
無論這個廣告設(shè)計方案是否讓用戶反感,但是這個呈現(xiàn)的互動方式還是比較新穎的,相信廣告的點擊率必然有所提升。
優(yōu)秀的設(shè)計就是帶給用戶驚喜!
 
 
 
 
四、Banner 廣告的視覺沉浸感
Banner 圖在產(chǎn)品中是非常普及的,各類形式的演變也層出不窮,產(chǎn)品設(shè)計師都在探索更多可能性。
 
在騰訊視頻 App 動漫欄目中,發(fā)現(xiàn)一例很有想法的 Banner 表現(xiàn)。Banner 上面新增了一個懸浮的火焰燃燒的動效,提升了整體的氛圍感,動效與 Banner 畫面完美貼合,視覺沉浸感十足。
優(yōu)秀的設(shè)計就是帶給用戶驚喜!
 
 
 
 
五、待機狀態(tài)下的實時動態(tài)
隨時讓用戶感受到你的存在,才能讓人感到安心,服務(wù)過程中狀態(tài)實時可見至關(guān)重要。
 
通過餓了么點餐之后,就算處于待機狀態(tài)時,只要點亮屏幕即可看到當(dāng)前出餐狀態(tài)??梢暬膱D形結(jié)合時間提醒,讓狀態(tài)一目了然,使得點餐到用餐之間的過程更有用戶可控性。
優(yōu)秀的設(shè)計就是帶給用戶驚喜!
 
 
 
 
六、小圖標(biāo)里的細(xì)節(jié)反思
產(chǎn)品中有很多輔助功能/信息等表達(dá)的圖標(biāo),既要能準(zhǔn)確表達(dá)主題,也要讓用戶易于理解。
 
在汽車之家 App 發(fā)現(xiàn)了一個值得反思的圖標(biāo)案例,在掃一掃的圖標(biāo)中結(jié)合了汽車外形輪廓,不僅不會影響掃描的功能表達(dá),也進一步表達(dá)了該功能的差異。和別的產(chǎn)品掃描功能不同,這個是對準(zhǔn)汽車進行掃描,體現(xiàn)出了業(yè)務(wù)的差異化。一枚小小的圖標(biāo)體現(xiàn)出了設(shè)計師的能力,用最簡單的方式表現(xiàn)自身產(chǎn)品的差異,以此提升用戶的操作體驗。
優(yōu)秀的設(shè)計就是帶給用戶驚喜!
 
 
 
 
七、輪播式的懸浮設(shè)計
懸浮設(shè)計非常普及,因為占比小和滑動頁面會隱藏,對用戶的干擾比較小。
 
最近在芒果 TV 首頁發(fā)現(xiàn)了懸浮窗口的輪播式表達(dá),芒果卡和活動中心會自動輪播顯示(也能手動切換)。讓我們對懸浮窗口的設(shè)計又多了一種設(shè)計理解,可以呈現(xiàn)更多不同內(nèi)容的表達(dá),提升了窗口的利用率。
優(yōu)秀的設(shè)計就是帶給用戶驚喜!
 
 
 
 
八、氛圍熱烈的底部標(biāo)簽欄
底部標(biāo)簽欄的設(shè)計在圖標(biāo)創(chuàng)意層面發(fā)揮較多,各類風(fēng)格的圖標(biāo)讓該欄目更加豐富多彩,除此之外也有在背景層渲染氛圍的案例。
 
近期恰逢芒果 TV 十周年之際,在底部標(biāo)簽欄背景層也加強了氛圍感。豐富多彩的元素和配色,結(jié)合主題化的圖標(biāo)設(shè)計,使得整體氛圍感拉滿。
優(yōu)秀的設(shè)計就是帶給用戶驚喜!
 
 
 
 
九、收縮式交互設(shè)計
通過交互方式應(yīng)對用戶操作過程,特別是在滑動界面時,交互方式的優(yōu)化可以降低干擾,提高當(dāng)前界面的利用率。
 
在 Blurrr App 創(chuàng)作界面,默認(rèn)以 3D 動態(tài)圖標(biāo)展示“開始創(chuàng)作”按鈕,當(dāng)滑動界面時按鈕會收縮展示。通過收縮式的交互設(shè)計,讓界面可以展示更多內(nèi)容,也不會影響用戶點擊按鈕進行創(chuàng)作。即通過 3D 動效加強了功能的曝光度,又通過收縮式交互提高了內(nèi)容的展示空間,可謂是一舉多得的設(shè)計解決方案。
優(yōu)秀的設(shè)計就是帶給用戶驚喜!
 
 
 
 
十、形象化的進度設(shè)計
進度設(shè)計是反饋狀態(tài)變化的關(guān)鍵,通過可視化的表達(dá)讓用戶一目了然,提高用戶對服務(wù)過程的把控。
 
當(dāng)用戶通過攜程旅行 App 訂票后,在行程訂單界面可以看到列車行駛狀態(tài)的進度提示。通過可視化的列車形象的表達(dá)了行駛狀態(tài),讓用戶清晰的看到行駛方向和抵達(dá)站點示意。不僅信息傳遞高效,形象的表達(dá)也使得感官體驗更佳。
優(yōu)秀的設(shè)計就是帶給用戶驚喜!
 
 
 
 
小結(jié)
優(yōu)秀的產(chǎn)品總能在細(xì)微之處帶給你驚喜,讓你感受到產(chǎn)品服務(wù)的情感化和溫度。本文觀點僅代表個人體會,希望可以和大家一起共勉。
 
作者:黑馬青年
本文由 @黑馬青年 原創(chuàng)發(fā)布。未經(jīng)許可,禁止轉(zhuǎn)載。


作者:黑馬青年
鏈接:https://www.zcool.com.cn/article/ZMTYxODE4MA==.html
來源:站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請注明出處。

精通B端界面設(shè)計:揭秘7大彈窗類型及其實戰(zhàn)案例分析

藍(lán)藍(lán)設(shè)計的小編 B端ui設(shè)計文章及欣賞

 
 
 
面向企業(yè)用戶、注重效率與管理、解決企業(yè)痛點、技術(shù)與服務(wù)并重、決策過程復(fù)雜
B端關(guān)注的是如何通過技術(shù)手段賦能企業(yè),提升其業(yè)務(wù)處理能力和管理效能,是企業(yè)間或企業(yè)內(nèi)部運作不可或缺的工具和服務(wù)。
彈窗-聚焦任務(wù)處理與即時提醒的高效交互工具;作為一種常見的交互設(shè)計元素,在提升用戶體驗和效率方面扮演著重要角色。
精通B端界面設(shè)計:揭秘7大彈窗類型及其實戰(zhàn)案例分析
 
 
精通B端界面設(shè)計:揭秘7大彈窗類型及其實戰(zhàn)案例分析
 
 
精通B端界面設(shè)計:揭秘7大彈窗類型及其實戰(zhàn)案例分析
 
 
精通B端界面設(shè)計:揭秘7大彈窗類型及其實戰(zhàn)案例分析
 
 
精通B端界面設(shè)計:揭秘7大彈窗類型及其實戰(zhàn)案例分析
 
 
精通B端界面設(shè)計:揭秘7大彈窗類型及其實戰(zhàn)案例分析
 
 
精通B端界面設(shè)計:揭秘7大彈窗類型及其實戰(zhàn)案例分析
 
 
精通B端界面設(shè)計:揭秘7大彈窗類型及其實戰(zhàn)案例分析
 
 
精通B端界面設(shè)計:揭秘7大彈窗類型及其實戰(zhàn)案例分析
 
 
精通B端界面設(shè)計:揭秘7大彈窗類型及其實戰(zhàn)案例分析
 
 
精通B端界面設(shè)計:揭秘7大彈窗類型及其實戰(zhàn)案例分析
 
 
精通B端界面設(shè)計:揭秘7大彈窗類型及其實戰(zhàn)案例分析
 
 
精通B端界面設(shè)計:揭秘7大彈窗類型及其實戰(zhàn)案例分析
 
 
精通B端界面設(shè)計:揭秘7大彈窗類型及其實戰(zhàn)案例分析
 
 
精通B端界面設(shè)計:揭秘7大彈窗類型及其實戰(zhàn)案例分析
 
 
精通B端界面設(shè)計:揭秘7大彈窗類型及其實戰(zhàn)案例分析
 
 
精通B端界面設(shè)計:揭秘7大彈窗類型及其實戰(zhàn)案例分析
 
 
精通B端界面設(shè)計:揭秘7大彈窗類型及其實戰(zhàn)案例分析
 
 
精通B端界面設(shè)計:揭秘7大彈窗類型及其實戰(zhàn)案例分析
 
 
精通B端界面設(shè)計:揭秘7大彈窗類型及其實戰(zhàn)案例分析
 
 
精通B端界面設(shè)計:揭秘7大彈窗類型及其實戰(zhàn)案例分析
 
 
精通B端界面設(shè)計:揭秘7大彈窗類型及其實戰(zhàn)案例分析
 
 
精通B端界面設(shè)計:揭秘7大彈窗類型及其實戰(zhàn)案例分析
 
 
 


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

每個設(shè)計都讓你感受到個性化

藍(lán)藍(lán)設(shè)計的小編 設(shè)計思維

隨著同類型產(chǎn)品越來越多,更有體驗感和個性化的設(shè)計才能打動用戶,成為被選擇的對象。作為產(chǎn)品設(shè)計師我們在不斷探索和創(chuàng)新,希望以更好的設(shè)計表達(dá)來解決業(yè)務(wù)場景,為提升用戶體驗而助力。
 
本期以個性化設(shè)計為出發(fā)點,給大家?guī)硎畟€不錯的設(shè)計方案,希望可以帶給大家更多設(shè)計靈感。
每個設(shè)計都讓你感受到個性化
 
 
 
 
體驗?zāi)夸?/div>
一、讓你感受溫暖的年度報告
二、趣味性的圖標(biāo)設(shè)計
三、通過 AI 重新定義搜索體驗
四、動態(tài)化功能引導(dǎo)產(chǎn)品升級
五、動態(tài)優(yōu)惠券更有吸引力
六、人性化的溫馨提示設(shè)計
七、自定義形象的年度報告
八、個性化的主界面設(shè)置
九、情感化的表情設(shè)置
十、空間感的 Banner 輪播體驗
 
 
 
一、讓你感受溫暖的年度報告
這段時間相信大家經(jīng)常使用的產(chǎn)品都曬出了年度報告,設(shè)計風(fēng)格與互動形式也層出不窮,哪一個產(chǎn)品的設(shè)計風(fēng)格最打動你呢?
 
在我刷到的年度報告中,攜程旅行的年度旅行報告印象最深刻。毛茸茸的設(shè)計風(fēng)格在寒冷的冬季顯得格外溫暖,圖標(biāo)、字體、背景、按鈕等都以此風(fēng)格進行設(shè)計,整體效果非常細(xì)膩柔軟,你也去體驗感受一下吧!
每個設(shè)計都讓你感受到個性化
 
 
 
 
二、趣味性的圖標(biāo)設(shè)計
圖標(biāo)在產(chǎn)品中主要以各種設(shè)計風(fēng)格形成差異,打造出匹配品牌風(fēng)格的個性設(shè)計,除此以外,我們也要多在圖形創(chuàng)意表達(dá)層面進行探索。
 
最近在使用極兔速遞小程序時,除了圖標(biāo)設(shè)計的風(fēng)格獨特以外,多個場景的圖形創(chuàng)意也很有意思。比如下單寄件、掃碼寄件和個人中心的圖標(biāo)等,趣味性的設(shè)計表達(dá)讓人印象深刻,以個性化的圖形創(chuàng)意吸引用戶的注意力。
每個設(shè)計都讓你感受到個性化
 
 
 
 
三、通過 AI 重新定義搜索體驗
AI 化已經(jīng)成為眾多行業(yè)未來需要對接的方向,任何行業(yè)都可以通過 AI 進行重新定義,帶給用戶 AI 化的體驗。
 
以前在騰訊視頻 App 搜索時都是以關(guān)鍵詞為主,現(xiàn)在可以通過 AI 搜與騰訊元寶 AI 助手交流,以對話式的方式找到感興趣的影片。通過 AI 重新定義了搜索方式,讓用戶感受到屬于 AI 化的體驗感。
每個設(shè)計都讓你感受到個性化
 
 
 
 
四、動態(tài)化功能引導(dǎo)產(chǎn)品升級
引導(dǎo)用戶升級產(chǎn)品才能帶來新的功能和服務(wù)升級,如何吸引用戶進行升級變得至關(guān)重要。
 
高德地圖為了引導(dǎo)用戶點擊升級,以升級后帶來的更優(yōu)功能和服務(wù)為吸引點,通過動態(tài)輪播的形式表現(xiàn)升級彈窗。動態(tài)化的功能引導(dǎo)可以讓用戶提前了解新版本的信息,提高用戶升級的選擇性。
每個設(shè)計都讓你感受到個性化
 
 
 
 
五、動態(tài)優(yōu)惠券更有吸引力
各種優(yōu)惠券、打折券、新人紅包等讓用戶開始有點麻木,也不一定會領(lǐng)取和使用,如何增加其吸引力就變得越來越重要了。
 
近期高德地圖打車欄目的營銷活動中,為了展示更多類型的打車券、打車金等,通過動態(tài)輪播的方式進行設(shè)計表達(dá)。相較于靜態(tài)展示而言,不僅解決了內(nèi)容展示的數(shù)量問題,動態(tài)的方式也更有吸引力,增加用戶的參與概率。
每個設(shè)計都讓你感受到個性化
 
 
 
 
六、人性化的溫馨提示設(shè)計
溫馨提示雖然不一定管用,但是依然可以讓用戶感受到人性化的服務(wù),增加用戶對產(chǎn)品的好感度。
 
在比較晚的時間段使用洪恩識字 App 時,會出現(xiàn)溫馨提示的彈窗,勸導(dǎo)用戶注意休息時間。人性化的設(shè)計可以輔助家長管理孩子的使用習(xí)慣,提醒注意時間管理和作息規(guī)律。
每個設(shè)計都讓你感受到個性化
 
 
 
 
七、自定義形象的年度報告
年度報告的形式豐富多樣,都是以用戶個人數(shù)據(jù)生成,如何才能更加個性化,成為了設(shè)計表達(dá)的重點。
 
網(wǎng)易云音樂的年度聽歌報告可以自定義形象,可以針對身體的上中下三個部分進行定制,以個性化的形象開啟專屬的聽歌報告。整體表達(dá)很有設(shè)計感,圖形、排版與配色都很不錯,快去生成屬于你的聽歌報告吧!
每個設(shè)計都讓你感受到個性化
 
 
 
 
八、個性化的主界面設(shè)置
對于感官體驗每個人的喜好各不相同,為了滿足各自的選擇需求,個性化的設(shè)置變得尤為重要。
 
體重小本 App 的主界面,可以通過主題皮膚設(shè)置背景、配色等,提供了煥彩粉和清爽藍(lán)的多款選擇,用戶也可以自定義圖片進行設(shè)置。通過個性化的設(shè)置帶給用戶更多選擇性,滿足不同的感官體驗需求。
每個設(shè)計都讓你感受到個性化
 
 
 
 
九、情感化的表情設(shè)置
通過表情設(shè)計輔助可視化表達(dá),其中表情符號的運用較為常見,豐富多樣的表情選擇更能滿足用戶需求。
 
體重小本 App 體重數(shù)據(jù)展示中,以不同表情來體現(xiàn)體重數(shù)據(jù)的變化,情感化的表達(dá)讓變化的呈現(xiàn)更加貼切。產(chǎn)品提供了多款表情供用戶選擇,用戶也可以設(shè)置自定義表情,情感化的設(shè)置讓體驗感變得更加豐富。
每個設(shè)計都讓你感受到個性化
 
 
 
 
十、空間感的 Banner 輪播體驗
輪播 Banner 圖在設(shè)計表達(dá)、布局結(jié)構(gòu)、輪播形式等層面都可以進行創(chuàng)意發(fā)揮,有特點的形式更能吸引注意力,以此提高 Banner 的點擊率。
 
最近在體驗芒果 TV 時,發(fā)現(xiàn)首頁 Banner 的表現(xiàn)形式以分層式表達(dá),輪播過程中更有空間感。將人物與背景進行分層設(shè)計,輪播時分前后入場,伴隨著縮放等動效表達(dá),營造出更強的空間感。
每個設(shè)計都讓你感受到個性化
 
 
 
 
小結(jié)
設(shè)計思維的轉(zhuǎn)變離不開大量優(yōu)秀案例的輔助,對于產(chǎn)品設(shè)計師來說,體驗和總結(jié)的訓(xùn)練至關(guān)重要。希望本期的分享可以帶給大家一些啟發(fā),觀點屬于個人見解,不足之處歡迎大家留言補充。
 
本文由 @黑馬青年 原創(chuàng)發(fā)布。未經(jīng)許可,禁止轉(zhuǎn)載。
 


作者:黑馬青年
鏈接:https://www.zcool.com.cn/article/ZMTY1MDA0OA==.html
來源:站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請注明出處。

B端基礎(chǔ) | 52000余字總結(jié) B 端基礎(chǔ)設(shè)計知識

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

最近看汪曾祺的《嘆息橋》中的一句話,我必須分享給你。緣起我在人群中看見你,緣散我看見你在人群中。是的我想你在人群中看到我。這就是最初我分享這系列設(shè)計文章的初衷。
 
慢慢發(fā)現(xiàn)其實分享也是一件快樂的事情、而且在分享的過程中我自己也收獲了很多。而且對設(shè)計的理解也更深了。更快樂的是收獲了一群一起同行的小伙伴、這個還挺開心。和他們一起在群里吹水、一起吐槽。一起討論問題、那真的是快樂無邊。哈哈哈
 
上面扯多了。我們開始今天的內(nèi)容。今天內(nèi)容分三部分、第一部分內(nèi)容總結(jié)是對我寫的這個系列文章每一篇文章內(nèi)容和核心的小總結(jié)。第二部分這個系列的文章頁算是告一段落了、下一階段我會做些什么。第三部分分享一些我寫文章的感受、然后煽煽情。
 
1、內(nèi)容總結(jié)
因為在寫這個系列的文章時我加入了很多擴展知識。希望告訴你更多。這里我會把主要的這個系列的知識總結(jié)一下讓你盡量一次看完。
B端基礎(chǔ) | 52000余字總結(jié) B 端基礎(chǔ)設(shè)計知識
 
 
1.1、登陸頁面
 
最近就在做我們系統(tǒng)的登陸頁面優(yōu)化?;仡^我會寫一個項目總結(jié)給你們看。這里介紹一下B端登陸頁面該怎么去做。其實還挺簡單了。因為現(xiàn)在主流的布局就那幾個。
B端基礎(chǔ) | 52000余字總結(jié) B 端基礎(chǔ)設(shè)計知識
 
 
登陸頁面:布局分為三種;居左、居右、居中
頁面元素:導(dǎo)航、登錄框、背景(裝飾元素)、互聯(lián)網(wǎng)信息。
導(dǎo)航高度:68px或48px、文字大?。?4(大部分)16(也可以)
登錄框大小:大小尺寸不統(tǒng)一、沒有固定的尺寸??梢愿鶕?jù)自己和領(lǐng)導(dǎo)的喜好決定。對還有要承載的內(nèi)容多少。
登錄方式:掃碼、手機號、賬號、第三方
標(biāo)題切換字號:我喜歡用26px(也要其他的16、/18、/20)
輸入框高度:48px
按鈕文字和高度:16px、和輸入框高度一直就行。
背景可以是配的插畫(這種最簡單)、一般都是科技風(fēng)
底部要不就是單純的互聯(lián)網(wǎng)信息。要不就是快捷入口、聯(lián)系方式什么。這個就不多說了正常排版就行。
 
1.2、篩選
 
篩選相對是很簡單的部分把、因為你直接用規(guī)范里的組件。雖然不會很優(yōu)秀、但是剛重要的是不會出什么錯誤。主要是就大廠規(guī)范能夠快速的幫你解決問題。
B端基礎(chǔ) | 52000余字總結(jié) B 端基礎(chǔ)設(shè)計知識
 
 
篩選的意義:定位數(shù)據(jù)、縮短查詢路徑、數(shù)據(jù)內(nèi)容分類
 
篩選類型:基礎(chǔ)篩選組件(就是我們常見的頁面頂部的篩選)、高級篩選(就是那些需要你定義想一想的篩選部分)
 
篩選布局:頂部和左側(cè)
 
篩選樣式:平鋪;折疊;Tab篩選;單側(cè)選擇;表頭;綜合
 
1.3、柵格
 
這里其實還簡單的、首先你要明白柵格在我們的設(shè)計里面很重要。你不用當(dāng)然也可以呀。但是你想要做的更好那就用起來你會有意外的收獲。
B端基礎(chǔ) | 52000余字總結(jié) B 端基礎(chǔ)設(shè)計知識
 
 
怎么用:直接看ant design、TDesign、阿科desing的規(guī)范就行、寫的很清楚。
 
注意點:不要硬套、我們要根據(jù)自己的系統(tǒng)去自己定制。比如我們系統(tǒng)、用的是ant design的框架、但是我們的網(wǎng)格系統(tǒng)是自己定制的。因而我們的邊距不是24px、我們是20px
 
1.4、顏色
 
這部分相對來說是我自己的弱項、在寫當(dāng)時的文章的時候也是收獲頗多的。明白了大廠規(guī)范是怎么確定自己色彩設(shè)計規(guī)范的。也清楚了自己應(yīng)該怎么去規(guī)定自己的設(shè)計規(guī)范。
B端基礎(chǔ) | 52000余字總結(jié) B 端基礎(chǔ)設(shè)計知識
 
 
主色確定:常見的方法、1、用自己品牌logo的顏色;2、用行業(yè)色
 
配色確定:我一般是找競品、或者優(yōu)秀的配色方案、來確定自己的。多參考大廠的配色方案。雖然不全是好的。但是好的還是站大多數(shù)的。
 
大廠色彩:這里我分享了大廠的色彩是怎么去確定的、如何去確定。可以去看看。我在自己的工作中色彩的應(yīng)用就參考了ant Design的色彩應(yīng)用方式定制的。
 
1.5、字體
 
字體部分我覺得最有意思是的是分享了、我們宋體、楷體、隸屬、甲骨的發(fā)展歷史和由來。還有就是如何去設(shè)計一款自己的字體。還有后臺字體規(guī)范的制定
B端基礎(chǔ) | 52000余字總結(jié) B 端基礎(chǔ)設(shè)計知識
 
 
中國文字:這里中國文字的發(fā)展歷史、所有字體的產(chǎn)生都是有自己發(fā)展的歷史原因的。很有意思。建議你看看、可以當(dāng)做你喝酒吹水的談資。
 
字體規(guī)范:我們大部分的字體會采用黑體、可讀性強、親和、現(xiàn)代、清晰。
 
字號:最新的字體12px、正文、14px、通過+2, +4,+8,+12,+16 的步數(shù)增長規(guī)律
 
行高:通過邏輯得到這樣一個公式:「 行高 = 字號 + n 」,8 作為變量正好同時滿足與 1.5 倍的「 14px & 16px 」常用字號行高保持一致,總體文字間隙穩(wěn)定呼吸,行高空間較一致得出計算公式:「line-height = font size+8」
 
字重(就是字粗):建議使用兩種常規(guī)和加粗(在前端里一般就是400和500)
 
顏色:我是主張帶有色彩傾向的顏色應(yīng)用的。根據(jù)字體樣式的設(shè)計原則,制定了簡易好記的透明度數(shù)值區(qū)間并且將該字色與界面系統(tǒng)的色彩系統(tǒng)結(jié)合,文字顯示色彩對比滿足至少1:4.5( AA級別)。且驗證了其中的實用性,共分為亮暗兩種模式,4 個色階。
 
1.6、ICON(圖標(biāo))
 
你要統(tǒng)一風(fēng)格成套的去找參考和應(yīng)用。在我們的系統(tǒng)里我是自己畫icon的然后傳到阿里巴巴矢量圖庫讓開發(fā)直接引用。這個是自己累點、但是可以保障實現(xiàn)效果。
B端基礎(chǔ) | 52000余字總結(jié) B 端基礎(chǔ)設(shè)計知識
 
 
設(shè)計原則:準(zhǔn)確、簡單、節(jié)奏、愉悅。
 
設(shè)計實戰(zhàn):采用柵格
我是用的阿里巴巴矢量圖庫的設(shè)計規(guī)范、因為我要傳到這個平臺應(yīng)用
 
ICON分類:交互性圖標(biāo)、裝飾性圖標(biāo)、說明性圖標(biāo)
 
1.7、按鈕
 
按鈕我覺得這部分是相對簡單的、也是要做到風(fēng)格的統(tǒng)一。直接用大廠組件然后根據(jù)自己平臺的風(fēng)格、不如圓角的大小其他的倒是沒什么了。
B端基礎(chǔ) | 52000余字總結(jié) B 端基礎(chǔ)設(shè)計知識
 
 
常規(guī)按鈕:次要按鈕、主要按鈕、文字按鈕、圖標(biāo)按鈕
 
按鈕狀態(tài):可用、禁用、加載、懸浮
 
尺寸:把按鈕分成:迷你、小、中、大,四種尺寸。高度分別為:24px/28px/32px/36px。推薦及默認(rèn)為尺寸「中」。
 
樣式:各個規(guī)范對按鈕形狀的規(guī)范基本都一樣。提供長方形、正方形、圓角長方形、圓形四種形狀。
 
 
布局:這里分享了兩個概念、古登堡法則、費茨定律、告訴你我們?yōu)槭裁催@么排版。對產(chǎn)品和甲方很有用、哈哈、這是我的秘訣。
 
1.8、彈窗
 
后臺彈窗是一個很復(fù)雜的內(nèi)容、但是也是一個相對很好處理的部分。只要你做好規(guī)范這部分、簡直就是一點開胃小菜。
B端基礎(chǔ) | 52000余字總結(jié) B 端基礎(chǔ)設(shè)計知識
 
 
彈窗是一個我頭痛的問題因為不太好規(guī)范。但是我還是把這個彈窗系統(tǒng)、在我們的體系中形成了一個小的規(guī)范。感謝領(lǐng)導(dǎo)、感謝前段端的龍哥。
 
我們把前段粗略的分為400px、600、800、1000、最大、廣告。業(yè)務(wù)里我們會采用4、/6、/8、/1、最大、推廣和通知我們就統(tǒng)一的尺寸。
 
1.9、表單
 
什么是表單:我理解表單就是系統(tǒng)為和用戶進行交互、所要收集用戶信息的或獲得用戶反饋的一種方式的載體。在后臺產(chǎn)品中對我們數(shù)據(jù)做的增、刪、改、查、驗都可以通過表單完成。
B端基礎(chǔ) | 52000余字總結(jié) B 端基礎(chǔ)設(shè)計知識
 
 
我們在后臺系統(tǒng)中、大部分的場景都會使用上表單。信息采集呀、編輯數(shù)據(jù)呀等。在表單設(shè)計時要遵循的原則、簡潔明了、清晰高效、適應(yīng)業(yè)務(wù)、即時反饋。
 
表單的構(gòu)成結(jié)構(gòu)、基本都是由、標(biāo)簽、域、提示、操作按鈕這四個部分構(gòu)成的。
 
表單布局在表單中我們采用多種布局方式。信息分組、內(nèi)容列表、標(biāo)簽頁、分步驟。
 
1.10、表格
 
B端設(shè)計中,對數(shù)據(jù)瀏覽、操作、過濾、展示是最高效的。這你就不用質(zhì)疑了。因為結(jié)構(gòu)簡單、精準(zhǔn)高效、數(shù)據(jù)形式豐富。
 
B端基礎(chǔ) | 52000余字總結(jié) B 端基礎(chǔ)設(shè)計知識
 
 
表格是用來收集、整理、組織、分析數(shù)據(jù)的二維矩陣。它由內(nèi)、外兩部分組成。其中,內(nèi)部包含表頭、表體、底欄等。外部包含標(biāo)題、篩選區(qū)、操作按鈕區(qū)等。
 
表格的類型:基礎(chǔ)表格、樹形、子表格、交叉表格、圖表表格、卡片表格
 
表格的樣式:網(wǎng)格型、水平線型、斑馬紋、自由形式
 
進階的一些知識就是表格數(shù)據(jù)的優(yōu)化和表格的交互知識了。想了解去看更詳細(xì)的我的文章11表格設(shè)計和12表格優(yōu)化項目實戰(zhàn)。
 
1.11、大廠規(guī)范
 
如果你是一個小廠B端設(shè)計師、剛好沒有自己平臺的設(shè)計規(guī)范。那就去直接用的場的設(shè)計規(guī)范。去用沒問題的。大廠那么多的牛逼設(shè)計給你做好了你不用。都塞到嘴巴上、不吃就不給面了。
B端基礎(chǔ) | 52000余字總結(jié) B 端基礎(chǔ)設(shè)計知識
 
 
在使用大廠的設(shè)計規(guī)范時然后慢慢的積累自己平臺的設(shè)計規(guī)范。逐漸的你就會形成一個屬于你們自己平臺業(yè)務(wù)的高質(zhì)量設(shè)計規(guī)范了。
 
2、計劃
 
這個基礎(chǔ)系列的文章就這樣寫結(jié)束掉吧、希望可以對你的B端設(shè)計有所幫助。之后我會寫二個系列的文章、去分享我理解的B端設(shè)計。
 
B端基礎(chǔ) | 52000余字總結(jié) B 端基礎(chǔ)設(shè)計知識
 
 
第一個系列是B端基礎(chǔ)設(shè)計的加強版、B端高手。B端高手是會寫我的實戰(zhàn)里是怎么去做的。其實就是我的設(shè)計項目復(fù)盤。
 
第二個系列就隨便的去分享一些設(shè)計知識。比如哪些什么什么原理呀、什么什么法則呀、在設(shè)計里的應(yīng)用。而且會提出和討論一些設(shè)計問題。
 
3、寫在最后
 
分別是為了更好的相見、我一直希望我的文章可以幫到你。慢慢來路還很長、總是要一步一步的來。很快我們會再次相見。我是KING(國王)
 
B端基礎(chǔ) | 52000余字總結(jié) B 端基礎(chǔ)設(shè)計知識
 
 
新的開始見.......
 
注解:標(biāo)題的40000余字也好、50000字也好都是說的我這個系列總計的字?jǐn)?shù)、因為想讓你們看到。

作者:彪形大漢pro
鏈接:https://www.zcool.com.cn/article/ZMTYyMTEyNA==.html
來源:站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請注明出處。

UI 設(shè)計的 10 個細(xì)節(jié)

天宇

俗話說:“細(xì)節(jié)決定成敗”,細(xì)節(jié)的把控至關(guān)重要,這也是設(shè)計師能力的代表。隨著項目經(jīng)驗的積累和專業(yè)能力的成熟,我們對于設(shè)計原則、設(shè)計細(xì)節(jié)和設(shè)計經(jīng)驗的沉淀也會越來越多,設(shè)計輸出也會因為這些細(xì)節(jié)而顯得更優(yōu)秀。
 
黑馬哥結(jié)合職場經(jīng)驗和教學(xué)經(jīng)驗,總結(jié)了 120+ 設(shè)計原則、設(shè)計細(xì)節(jié)和設(shè)計經(jīng)驗的案例分析。案例內(nèi)容涉及布局、圖標(biāo)、按鈕、文本、配色、配圖、規(guī)范、交互和設(shè)計經(jīng)驗等,目的是為了讓我們的設(shè)計更規(guī)范、更專業(yè)、有細(xì)節(jié)、有亮點、有思維。
 
今天先挑選其中的 10 個案例和大家一起交流一下。
UI 設(shè)計的 10 個細(xì)節(jié)
 
 
 
 
分享目錄
 
1. 圓角圖片對齊時不要完全左對齊
2. 同屬性版塊統(tǒng)一圖標(biāo)設(shè)計規(guī)范
3. 數(shù)據(jù)表達(dá)特殊化
4. 預(yù)估好信息呈現(xiàn)的最大值
5. 慎用高飽和度的顏色
6. 通過蒙版降低信息干擾度
7. 利用背景色突出小圖標(biāo)的空間占比
8. 漸變最好選擇近似色
9. 保持按鈕可讀性
10. 淺色背景不適合添加投影
 
 
 
1. 圓角圖片對齊時不要完全左對齊
 
設(shè)計中遇到圖片帶有圓角時,文字排版不適合完全基于圖片左對齊,視覺上會顯得文字太靠左,失去視覺平衡度。適當(dāng)預(yù)留間距視覺上更平衡,版面結(jié)構(gòu)也會更穩(wěn)重。
UI 設(shè)計的 10 個細(xì)節(jié)
 
 
 
 
2. 同屬性版塊統(tǒng)一圖標(biāo)設(shè)計規(guī)范
 
同屬性版塊需要統(tǒng)一圖標(biāo)設(shè)計規(guī)范,不要出現(xiàn)風(fēng)格混搭,遵循圖標(biāo)設(shè)計的十大統(tǒng)一性:風(fēng)格、大小、粗細(xì)、圓角、比例、透視、角度、疏密、間距、正負(fù)形。
UI 設(shè)計的 10 個細(xì)節(jié)
 
 
 
 
3. 數(shù)據(jù)表達(dá)特殊化
 
在可視化的場景中,針對一些特殊數(shù)據(jù)展示的時候,可以選擇特殊字體增加設(shè)計感。再通過字體大小對比、字重對比、顏色深淺對比等來突出數(shù)據(jù)。
UI 設(shè)計的 10 個細(xì)節(jié)
 
 
 
 
4. 預(yù)估好信息呈現(xiàn)的最大值
 
在進行 UI 設(shè)計時,需要預(yù)估好當(dāng)前位置所能承載的最大值,不能只在理想化的狀態(tài)內(nèi)設(shè)計。雖然簡化的內(nèi)容看起來更美觀,但是最大值下的設(shè)計思考才能避免上線后的誤差。
UI 設(shè)計的 10 個細(xì)節(jié)
 
 
 
 
5. 慎用高飽和度的顏色
 
界面設(shè)計配色需要考慮用戶長時間的預(yù)覽體驗,高飽和度的配色不適合長時間觀看,容易造成視覺疲勞。適當(dāng)降低飽和度使得配色更加舒適,有利于提升用戶預(yù)覽體驗度。
UI 設(shè)計的 10 個細(xì)節(jié)
 
 
 
 
6. 通過蒙版降低信息干擾度
 
在圖片上面展示文案時,需要考慮圖片對于文案信息的干擾度。為了防止復(fù)雜場景的圖片干擾信息傳遞,需要在信息區(qū)域添加漸變蒙版,以此來降低對于信息的干擾度。
UI 設(shè)計的 10 個細(xì)節(jié)
 
 
 
 
7. 利用背景色突出小圖標(biāo)的空間占比
 
需要突出圖標(biāo)的空間占比時,放大圖標(biāo)會顯得視覺焦點太強,也容易暴露圖標(biāo)繪制的缺點而顯得粗糙。添加統(tǒng)一的造型和背景色,可以突出小圖標(biāo)的空間占比,提升感官體驗。
UI 設(shè)計的 10 個細(xì)節(jié)
 
 
 
 
8. 漸變最好選擇近似色
 
在主界面或者一些特殊場景中,需要對按鈕添加漸變色時,最好選擇近似色等鄰近范圍的配色,會使得視覺效果更加和諧、舒適。
UI 設(shè)計的 10 個細(xì)節(jié)
 
 
 
 
9. 保持按鈕可讀性
 
按鈕設(shè)計需要考慮在不同環(huán)境下的適應(yīng)度,確保用戶可以一目了然的發(fā)現(xiàn)它。在白色背景、淺色背景、深色背景中都要形成配色對比,始終保持按鈕與背景的高對比度和可讀性。
UI 設(shè)計的 10 個細(xì)節(jié)
 
 
 
 
10. 淺色背景不適合添加投影
 
淺色背景的卡片、按鈕、標(biāo)簽、圖片或者其他元素等,在白色背景中都不適合添加投影。投影使得視覺效果對比模糊,畫面表現(xiàn)不夠干凈、通透,去掉投影反而更加清晰自然。
UI 設(shè)計的 10 個細(xì)節(jié)
 
 
 
 
小結(jié)
 
以上案例屬于 120+ 案例中隨機挑選的 10 個作為示意,該系列案例也會持續(xù)更新。希望大家可以從這些案例中獲得一些設(shè)計經(jīng)驗,助力設(shè)計輸出,能夠做出更好的設(shè)計作品。經(jīng)驗屬于個人職場和教學(xué)中的沉淀,如有不足歡迎留言補充。


作者:黑馬青年
鏈接:https://www.zcool.com.cn/article/ZMTYyNjg0NA==.html
來源:站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請注明出處。

如何從產(chǎn)品角度發(fā)起交互設(shè)計?

天宇

本文從產(chǎn)品角度出發(fā),深入探討了如何發(fā)起交互設(shè)計。通過明確產(chǎn)品目標(biāo)與用戶需求、進行用戶研究、構(gòu)建信息架構(gòu)、設(shè)計流程與界面、進行原型測試以及持續(xù)優(yōu)化等關(guān)鍵步驟,闡述了如何打造出滿足用戶期望、提升用戶體驗并實現(xiàn)產(chǎn)品目標(biāo)的交互設(shè)計。
 
一、引言
 
在當(dāng)今數(shù)字化的時代,產(chǎn)品的成功不僅僅取決于其功能的強大,更在于能否為用戶提供流暢、愉悅且富有價值的交互體驗。從產(chǎn)品角度發(fā)起交互設(shè)計,意味著將用戶置于核心,以實現(xiàn)產(chǎn)品的商業(yè)目標(biāo)和用戶需求的完美融合。
如何從產(chǎn)品角度發(fā)起交互設(shè)計?
 
 
二、明確產(chǎn)品目標(biāo)與用戶需求
 
(一)定義產(chǎn)品目標(biāo)
產(chǎn)品目標(biāo)是交互設(shè)計的起點,它決定了設(shè)計的方向和重點。產(chǎn)品經(jīng)理需要與團隊共同明確產(chǎn)品的定位、市場需求以及預(yù)期的商業(yè)成果。例如,是旨在提高用戶活躍度,還是增加用戶轉(zhuǎn)化率,或者是提升品牌形象。
如何從產(chǎn)品角度發(fā)起交互設(shè)計?
 
 
 
(二)挖掘用戶需求
通過市場調(diào)研、用戶反饋、競品分析等手段,深入了解目標(biāo)用戶的行為習(xí)慣、痛點和期望。這不僅包括對用戶顯性需求的捕捉,還包括對潛在需求的挖掘。
如何從產(chǎn)品角度發(fā)起交互設(shè)計?
 
 
 
三、進行用戶研究
 
(一)用戶畫像創(chuàng)建
基于收集到的數(shù)據(jù),構(gòu)建詳細(xì)的用戶畫像,包括用戶的年齡、性別、職業(yè)、教育背景、使用場景等特征,以便更精準(zhǔn)地理解用戶的行為和需求。
如何從產(chǎn)品角度發(fā)起交互設(shè)計?
 
 
 
(二)用戶場景分析
模擬用戶在不同場景下與產(chǎn)品的交互過程,發(fā)現(xiàn)可能存在的問題和優(yōu)化點。
舉例說明:
我們要知道,地鐵周邊美食,這是一個解決方案。真正的需求是什么?一個字一個字地找需求,地鐵=快速方便出行,美食=和朋友一起吃飯/自己一人吃飯。這是一個和線下場景很相關(guān)的項目,我們要把不同目的核心用戶的主要使用場景寫出來。經(jīng)過分析,我們得出了用戶會選擇我們產(chǎn)品,且產(chǎn)品未來可能存在的各種場景A、B、C、D、E。如下圖所示:
如何從產(chǎn)品角度發(fā)起交互設(shè)計?
 
 
如果按照目標(biāo)人群所在場景分類,進行細(xì)分,則為下圖:
如何從產(chǎn)品角度發(fā)起交互設(shè)計?
 
 
乘地鐵去地鐵站和附近地鐵站區(qū)別:前為用戶會乘坐地鐵去目的地尋找美食;后為用戶不用地鐵/吃完后使用地鐵,地鐵邊美食沒有其他美食團購產(chǎn)品有競爭力。
上班族和普通大眾區(qū)別:上班族工作日使用固定地鐵站上下班,時間可能緊急,快速獲取食物;普通找美食吃的大眾不使用固定地鐵站,目的是通過地鐵快速到達(dá)某目的地,就近享受目的地美食。
朋友們和個人區(qū)別:朋友們一起吃飯,容易出現(xiàn)喝多、吃過點等異常行為,并且在選擇地鐵旁吃飯地點時需要考慮朋友們家的位置就近選目的地。個人均不需要考慮以上,較為自由。
 
市場定位
經(jīng)過領(lǐng)域場景的分析,我們知道了真場景都是用戶有目的乘坐地鐵去到某地鐵站出站口尋找美食的。那么我們對這么一群大眾進行用戶人口統(tǒng)計學(xué)類的細(xì)分:
如何從產(chǎn)品角度發(fā)起交互設(shè)計?
 
 
  • 上圖為前期定位的目標(biāo)大眾用戶群,依靠地鐵的工具屬性,我們得出了具體的兩個影響因素:時間+美食熱愛程度。同時我們把直接競品和間接競品一同進行用戶群比較??梢钥吹胶痛竺缊F有相同和不同維度,這就是產(chǎn)品最初冷啟動時期的差異化!也就是我們的前、中期場景的主要目標(biāo)用戶類型。
  • 紅色部分即種子用戶群,以這些群體為冷啟動階段,可以更快的向四周擴張。因為他們有使用地鐵的時間屬性,同時有較高的美食熱愛程度,有利于帶動其他時間+熱愛程度的用戶加入產(chǎn)品,實現(xiàn)快速并有質(zhì)量的拉新、活躍的目標(biāo)。
  • 低端直接競品即用戶群工具屬性明顯,只是搜地鐵站,選擇美食的用戶,無明顯其他行為;高端競品即注重社交、ugc為起點,逼格高的搜尋美食工具。這部分開始很難,工作量巨大,且較脫離大眾主流群體。
 
結(jié)合上圖和要做的場景,我們得出了產(chǎn)品具體目標(biāo)用戶:乘坐地鐵快速到達(dá)并尋找目的地美食的大眾用戶(上班族休息日,大學(xué)生,個人或一起),要求在地鐵站附近便能方便享受目的地美食。且對美食有一定熱愛程度。
 
(三)用戶測試
邀請真實用戶進行產(chǎn)品試用,觀察他們的操作行為,收集反饋意見,為后續(xù)的設(shè)計提供依據(jù)。
1、需求接受
需求很有可能是在線上接到的,并不是面對面交流傳遞的,并且還會遇到很多坑,例如需求本身不具體,或者自己理解有偏差,因此在接到需求后,最好和交互、產(chǎn)品等同事進行面對面的交流和溝通。
詳細(xì)了解測試目的和關(guān)鍵點,確定用戶配比。
最好是讓交互帶著跑一下整個程序(半成品demo也好,交互稿也行),這樣能在頭腦中快速形成操作流程的認(rèn)知,并把相應(yīng)關(guān)鍵點對應(yīng)上去。同時把大致的用戶配比情況敲定一下,后續(xù)就可以直接招募用戶了。
了解demo的完成進度,相應(yīng)確定具體測試時間。
交互、視覺等完成demo的時間具有太多不確定因素,因此我們需要及時了解整個demo的完成進度,在盡可能快的情況下保險安排測試時間,如果邀請的是外部用戶,結(jié)果用戶到了而demo還沒出來,那也是夠了。
2、方案撰寫和確定
讓交互稿幫助自己。在完成測試方案撰寫的過程中demo還未誕生,具體程序細(xì)節(jié)記憶又很模糊,不好寫測試方案,怎么辦?不要慌,去看交互稿吧。
及時溝通。在方案撰寫過程中,如果有一些疑問,例如在看交互稿的時候還不是很理解某個具體操作過程,或者自己對產(chǎn)品有疑問的也可以跟交互等溝通,因為自己會遇到的問題,很有可能在測試用用戶也會遇到,這樣子用戶如果問到了,就可以相應(yīng)作出解釋。
核實確定方案。完成方案后,可以在公司溝通交流工具上和交互及產(chǎn)品等同事再確認(rèn)一下,是否有什么地方遺漏或有不妥之處。
3、用戶招募
這是一個大多數(shù)人都頭疼的一個過程,希望看完了以下幾點,可以稍微緩解一下大家的癥狀。再次確定測試時間。
方案定下來后,再跟交互確認(rèn)測試時間,了解是否有變動和調(diào)整,盡量避免用戶來了demo或者測試環(huán)境還不ok的情況。
 
撰寫招募文案。需要把用戶要求、測試日期和地點、報酬、大致的測試時長、用戶需要在測試中做什么,以及報名方式等表達(dá)清楚。有以下幾點可以注意一下,方便我們自己招募:
  • 詳細(xì)列出測試安排的時間段。例如10:30-11:15、13:30-14:15,讓用戶自己挑選合適的時間段,這樣就不用事后再協(xié)調(diào)不同用戶測試時間了;
  • 優(yōu)先人力、信息管理、行政等崗位同事。盡量避免相關(guān)產(chǎn)品人員、設(shè)計崗等同事。
  • 制作簡單的招募海報,并檢查??梢允孪葘?ldquo;海報”用word或者ppt做好,然后保存成圖片格式,記得檢查核實一下是否有錯。因為在公司IM群上直接黏貼確實方便,但是其排版往往不利于閱讀,導(dǎo)致用戶會遺漏重要信息。而制作成圖片格式,可以更好地去避免這個問題,同時還可以顯得整個招募過程比較正式,突出了對用戶的尊重,也能在一定程度上體現(xiàn)我們用研工作的規(guī)范性。
 
多渠道投放招募海報。內(nèi)部用戶可以嘗試先在公司IM群組上招募,之前招募樣本量比較小,因此很快可以招到,其他途徑暫時未嘗試,公司論壇應(yīng)該也可以,不過隱約感覺效率會比較低。外部用戶可以在朋友圈試試,效果還不錯,大家都很熱情幫忙轉(zhuǎn)發(fā),群眾的力量大無窮。也可以相應(yīng)去搜索一些QQ群,加入并發(fā)布招募信息。另外還有一些社交論壇什么的,都可以嘗試一下。方法很多,針對具體招募情況,大家就盡情發(fā)揮吧~
 
用戶多了留到下次用。海報發(fā)出去后,有時也會出乎意料用戶數(shù)量超過預(yù)期了,這是好事,不要擔(dān)心,也不要急著拒絕,平和的跟對方說明情況,強調(diào)下次還會有測試,把用戶相應(yīng)信息了解一下做個記錄,下次招募的時候可以直接先聯(lián)系這幾名用戶。當(dāng)然前提是你真的有下次測試需求,如果沒有那還是老老實實說明情況。
 
確保自己和用戶能彼此聯(lián)系上。跟用戶強調(diào)測試時間和地點,尤其是外部用戶,如果招募和正式測試隔了幾天,最好在測試前一天再通知一下。給出自己的聯(lián)系電話,同時詢問用戶的聯(lián)系電話。
 
第一個用戶盡量安排公司內(nèi)部同事。很多時候demo的完成情況會出現(xiàn)意外,到了測試時間demo還不能用,內(nèi)部用戶可以方便取消或者更換。另外,在第一次測試前誰都不確定用戶會有什么反應(yīng),第一個測試是可以起到試水效果,而外部用戶成本高,用來試水太奢侈。
4、測試準(zhǔn)備
 
材料準(zhǔn)備。需要準(zhǔn)備的內(nèi)容有:量表、報酬簽收表、記錄筆記本、錄音筆、會議室借用,以及記錄表格,如果是外部用戶過來,相應(yīng)準(zhǔn)備一杯水,人家大老遠(yuǎn)過來也不容易。
 
測試內(nèi)容準(zhǔn)備。其實每次訪談用戶自己都會挺緊張的,不知道用戶是不是也很緊張(PS:好想當(dāng)一回用戶,體驗一下被訪的感覺)。為了消除這種緊張,同時也是為了更好的完成訪談,可以有嘗試以下幾點:
  • 盡可能多的去了解所需測試的產(chǎn)品。有時候demo出來的晚,下午要測試,demo中午才出來,自己都沒玩過,測試還怎么搞?之前也說了,那就使勁去看交互稿吧,雖然比不上實際操作來的真實,但是也能有不小幫助,但也要給自己留足熟悉demo的時間。
  • 按照模塊來列提綱。其實相當(dāng)于組塊策略,把同一個模塊的問題放到一起更方便記憶,并且也在訪談中也方便自己和其他同事發(fā)現(xiàn)遺漏點。但模塊不要太大,如果太大了就相應(yīng)拆分一下。例如,在考拉新版測試的時候,有“首頁”、“活動”、“購物車”等測試,但是光是首頁內(nèi)容也很多,作為一個模塊還是太大了,可以拆分成“首頁整體感知”、“商品詳情”等幾個方面來整理提綱。
  • 根據(jù)任務(wù)演練提綱。有了提綱后,按照任務(wù)大致過一下所有列出來的問題,這個過程會打亂按照模塊列好的提綱,有一次這樣的排練,在測試的時候更不容易漏掉題目,而且也相當(dāng)于模擬了一下測試,自己心里會更踏實一點,在實際測試過程中也能有更好的應(yīng)對。
 
相關(guān)人員通知。通知交互和產(chǎn)品的同事具體測試時間和地點,邀請他們一起參與。不建議交互和產(chǎn)品只是后期測試查閱報告,如果他們參與到測試中,能更近距離和用戶接觸,并能更加深刻感受到產(chǎn)品存在的問題,也能更好的推動產(chǎn)品的改進。
5、正式測試
主持人需要注意的點:
  • 劃分我們和產(chǎn)品的關(guān)系。在測試之前跟用戶說明清楚,我們并不是產(chǎn)品的設(shè)計者和開發(fā)者,我們只是受產(chǎn)品方委托來進行測試,以免用戶不好意思當(dāng)面如實評價產(chǎn)品。
  • 強調(diào)測試的是產(chǎn)品,而不是用戶。要跟用戶說明產(chǎn)品尚處于不完善階段,因此邀請用戶過來進行測試,幫助發(fā)現(xiàn)問題和改進產(chǎn)品設(shè)計,但請注意不是為了評價產(chǎn)品。
  • 注意訪談技巧。這個就不用多說了。
  • 盡可能深入的去挖掘用戶的需求。不要停留在用戶話述表面,更進一步去追問,用戶為什么會這么說或這么問,例如,很多時候在測試中會碰到用戶說“哦,原來這個按鈕是xx功能,我還以為是xx功能“,這個時候可以再推進一步,了解用戶為什么會這么認(rèn)為。
  • 給其他在場的同時發(fā)言的機會。主持人如果覺得自己訪談的差不多了,可以詢問一下記錄者以及交互、產(chǎn)品等同事,了解他們是否還有問題需要補充。
  • 記得量表評分和報酬簽收。長時間的測試和訪談后容易忘記量表評分和報酬簽收,可以把這兩份東西放在顯眼的地方,另外可以讓記錄的同事打個招呼,幫忙提醒自己。
 
記錄人員需要注意的點:
  • 仔細(xì)觀察用戶行為并記錄。記錄不僅僅是用戶的觀點、想法等,更重要的是記錄用戶的實際行為。
  • 按照模塊記錄。記錄者可以按照測試方案中的模塊來相應(yīng)記錄用戶的行為和言語表述。
  • 查漏補缺。主持人可能會遺漏一些點,記錄者作為旁觀者需要提醒主持人遺漏了什么,或者自己有什么新的內(nèi)容需要補充。
 
6、測試結(jié)束歡送用戶。對用戶表示感謝,并開門送一下用戶,對于外部用戶,最好能送到大樓外面可以看見出口的地方。
測試后及時討論。這個是重點!
在每一名用戶測試后及時和交互、產(chǎn)品等同事快速過一下主要發(fā)現(xiàn)的問題點,這樣做有以下優(yōu)點:
  • 有效達(dá)成共識,確定解決方案。剛訪談結(jié)束印象最深刻,因此能快速有效達(dá)成對主要問題的共識,并討論確定相應(yīng)的解決方案。
  • 體現(xiàn)敏捷優(yōu)勢。確定了一些比較嚴(yán)重的問題后,交互和產(chǎn)品的同事就可以相應(yīng)去改進產(chǎn)品設(shè)計,做到了邊測邊改,加快迭代速度。
  • 幫助優(yōu)化訪談提綱,和測試用戶安排。有些問題在事先撰寫方案的時候可能沒涉及到,在討論后可以補充進去,而有些問題確定后則不需要再測。另外,也可以通過討論對事先安排的測試用戶進行相應(yīng)調(diào)整,例如增刪用戶,或者調(diào)整新老用戶測試順序等。
  •  
    事后幫助我們自己快速撰寫方案。通過討論確定了關(guān)鍵問題,并且,交互和產(chǎn)品的同事也相應(yīng)清楚了,因此在最后可以快速形成報告。
再次感謝用戶。所有用戶測試結(jié)束后,可以花幾分鐘時間簡單感謝一下用戶。
 
7、報告撰寫
針對不同大小項目的用戶測試,在完成報告撰寫過程中有兩種具體方式:
  • 小測試項目簡單快速撰寫報告。對于那些1-2天的小測試項目,由于在每次測試后都有討論,已對主要問題達(dá)成共識,因此在報告撰寫的時候就可以快速地將主要的問題和風(fēng)險點呈現(xiàn)出來。
  • 大測試項目每天總結(jié)并反饋主要問題。大的測試項目持續(xù)時間比較久,針對每天的測試及討論,簡單總結(jié)一下主要發(fā)現(xiàn)的問題,并反饋給相關(guān)人員,如果到了最后再總結(jié),容易遺忘掉一些內(nèi)容,并且這樣子也方便自己最后撰寫報告。
 
四、構(gòu)建信息架構(gòu)
思考信息架構(gòu)有三個核心關(guān)鍵詞:用戶角色、產(chǎn)品價值、使用場景。
1、明確用戶角色
用戶角色清晰揭示用戶目標(biāo),幫助我們把握關(guān)鍵需求、關(guān)鍵任務(wù)、關(guān)鍵流程,看到產(chǎn)品哪些是主要的事,哪些是次要的事。我們應(yīng)該盡可能豐富、形象化我們的用戶角色,讓它在設(shè)計決策過程中發(fā)揮作用,設(shè)計出更符合用戶場景的產(chǎn)品。
2、了解產(chǎn)品的目標(biāo)價值
作為產(chǎn)品的設(shè)計師一定要理解產(chǎn)品的價值,知道用戶想要什么,把最重要的優(yōu)先級提到最高,盡量移除無關(guān)緊要的信息,或降低其他優(yōu)先級的權(quán)重,以免對用戶造成干擾。
3、提煉產(chǎn)品的使用場景
要了解產(chǎn)品的業(yè)務(wù)流程,比如目標(biāo)用戶是誰、什么場景、如何使用,要把產(chǎn)品業(yè)務(wù)流程上的節(jié)點一個一個梳理出來,還要考慮這個產(chǎn)品對用戶的價值是什么,不要僅僅考慮界面的元素規(guī)范、設(shè)計細(xì)節(jié)等等,要知道產(chǎn)品的目標(biāo)價值體系。
4、信息架構(gòu)優(yōu)先級
基于三個核心點(用戶角色、產(chǎn)品價值、使用場景)分析,把目標(biāo)用戶人群核心價值的功能點業(yè)務(wù)流程梳理出來,分清主次關(guān)系,切忌功能堆砌,具體方法可以把所有功能業(yè)務(wù)邏輯的主線列出來,然后根據(jù)業(yè)務(wù)的優(yōu)先級做評級,分清楚這些功能哪些是主要的,哪些是次要的,然后通過數(shù)字做排序,這樣我們就知道哪些功能設(shè)計需要明顯,哪些功能設(shè)計需要低調(diào)。
5、信息歸類及整合
從整體上思考信息類產(chǎn)品的分類及整合,比如用戶資料相關(guān)的產(chǎn)品會有用戶信息、資料、等邏輯,這樣就要把所有跟用戶相關(guān)的信息都?xì)w在同一個分類菜單下,不要讓他們分散在各個頁面中。也就是所謂的一級菜單、二級產(chǎn)品的處理邏輯。
6、要定期審視與迭代
隨著產(chǎn)品規(guī)模與復(fù)雜度的提升,要隨時關(guān)注信息架構(gòu)是否滿足當(dāng)前的產(chǎn)品框架,不要等需要時候再去孤注一擲的全盤優(yōu)化,這樣會讓項目陷入被動的局面,可以逐漸增強,循序漸進的優(yōu)化,從小的細(xì)節(jié)對信息架構(gòu)進行調(diào)整,提升產(chǎn)品的易用性。
 
六、進行原型測試
1、制作原型
使用快速原型工具制作可交互的原型,以便更直觀地展示設(shè)計方案。
 
(二)內(nèi)部測試
團隊內(nèi)部進行初步測試,檢查功能的完整性和流程的合理性。
 
(三)用戶測試
邀請外部用戶進行測試,收集他們的意見和建議,發(fā)現(xiàn)潛在的問題和改進空間。
 
七、持續(xù)優(yōu)化
 
(一)數(shù)據(jù)分析
通過收集和分析用戶的使用數(shù)據(jù),了解用戶的行為路徑和偏好,為優(yōu)化提供數(shù)據(jù)支持。
 
(二)用戶反饋處理
及時響應(yīng)用戶的反饋,將有價值的建議融入到后續(xù)的優(yōu)化工作中。
 
(三)迭代更新
根據(jù)數(shù)據(jù)分析和用戶反饋,不斷對交互設(shè)計進行迭代更新,以適應(yīng)市場和用戶需求的變化。
 
八、結(jié)論
 
從產(chǎn)品角度發(fā)起交互設(shè)計是一個綜合性的過程,需要充分考慮產(chǎn)品目標(biāo)、用戶需求、信息架構(gòu)、流程界面、測試優(yōu)化等多個方面。只有以用戶為中心,不斷追求卓越的用戶體驗,才能打造出具有競爭力的產(chǎn)品,在激烈的市場競爭中脫穎而出。
 
在未來的產(chǎn)品開發(fā)中,隨著技術(shù)的不斷進步和用戶需求的不斷變化,交互設(shè)計也將面臨新的挑戰(zhàn)和機遇。產(chǎn)品團隊?wèi)?yīng)保持敏銳的洞察力和創(chuàng)新精神,持續(xù)探索和優(yōu)化交互設(shè)計,為用戶創(chuàng)造更多的價值。
 


作者:Charlotte的嘻醬
鏈接:https://www.zcool.com.cn/article/ZMTYyNzM1Mg==.html
來源:站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請注明出處。

用戶體驗一致性思考

天宇

前言
在團隊內(nèi)部,我們已確立了一套設(shè)計規(guī)范,在日常項目中使用設(shè)計規(guī)范輸出變的高效、統(tǒng)一。然而,在實際操作中,不可避免地會遇到一些特殊情況:某些客戶提出的個性化需求并不完全契合既定的設(shè)計規(guī)范,這些促使我們不得不在保持設(shè)計一致性的基礎(chǔ)上進行靈活調(diào)整。因此,深入反思并優(yōu)化一致性原則的應(yīng)用策略顯得尤為重要。我們需要探索如何在堅守設(shè)計規(guī)范核心精神的同時,靈活應(yīng)對多變的需求,確保設(shè)計既保持統(tǒng)一和諧,又能滿足特定場景下的獨特需求,從而實現(xiàn)用戶體驗與品牌價值的雙重提升。
 
用戶體驗一致性思考
 
 
用戶體驗一致性思考
 
 
在UI/UX設(shè)計中,雅各布·尼爾森的十條可用性原則中,一致性(Consistency and standards)位列第四。這一原則強調(diào)在界面和交互設(shè)計上需要遵循既定的規(guī)則,無論是在應(yīng)用內(nèi)部還是跨平臺之間。
背后的心理學(xué)原理——重復(fù)定律,強調(diào)了信息重復(fù)對于鞏固記憶的重要性。正如赫爾曼·艾賓浩斯通過“遺忘曲線”所揭示的,信息的有效保留離不開重復(fù)接觸。一致性的應(yīng)用正是這一原理的生動實踐,通過不斷重復(fù)統(tǒng)一的設(shè)計元素與模式,強化用戶對產(chǎn)品的認(rèn)知與記憶,從而提升整體的用戶滿意度與忠誠度。
艾賓浩斯遺忘曲線
艾賓浩斯遺忘曲線
 
用戶體驗一致性思考
 
 
用戶側(cè)
1、用戶學(xué)習(xí)曲線:
一致的UI/UX設(shè)計可以降低用戶的學(xué)習(xí)曲線。當(dāng)用戶在應(yīng)用程序或網(wǎng)站中遇到一致的元素、布局和交互方式時,他們可以快速理解并準(zhǔn)確預(yù)測如何與界面進行交互。這減少了用戶的混淆和困惑,提高了他們的效率和滿意度。
2、提升可用性:
一致性使用戶界面更加易于使用。當(dāng)用戶在不同的頁面或功能之間找到相似的設(shè)計元素和交互模式時,他們可以輕松地將已有的知識和經(jīng)驗應(yīng)用于新的情境中。這種一致性幫助用戶快速完成任務(wù),減少錯誤和迷失,提供更好的導(dǎo)航和流暢的體驗。
3、品牌認(rèn)可度:
一致的UI/UX設(shè)計有助于樹立品牌形象和增強品牌認(rèn)可度。通過在不同的渠道和平臺上保持一致的設(shè)計元素、標(biāo)識和視覺風(fēng)格,品牌可以建立起獨特而可識別的形象。用戶在不同的觸點上都能感受到品牌的一致性,從而增加品牌的信任和忠誠度。
4、用戶滿意度:
一致性直接影響用戶的滿意度。當(dāng)用戶在使用應(yīng)用程序或網(wǎng)站時感受到一致的設(shè)計和交互方式時,他們會感到更加舒適和自信。一致性傳遞了專業(yè)和質(zhì)量的信號,讓用戶感到被關(guān)注和重視。這種積極的用戶體驗有助于提升用戶滿意度,并促使他們持續(xù)使用和推薦你的產(chǎn)品或服務(wù)。
 
用戶體驗一致性思考
 
 
產(chǎn)研側(cè)
1. 降低設(shè)計成本,提高開發(fā)效率
無論是設(shè)計還是開發(fā),復(fù)用已有的組件資源,保持界面的一致性可以有效地減少設(shè)計的投入,避免不必要的設(shè)計分歧點。
而在開發(fā)階段,可以避免重復(fù)造輪子,提高開發(fā)的效率,保證落地效果,也可以減少上線前設(shè)計走查、測試的工作量。
2. 形成一致的設(shè)計風(fēng)格
根據(jù)原子設(shè)計理論,通過原子組件的一致性,可以構(gòu)建出統(tǒng)一的界面框架、布局,形成統(tǒng)一風(fēng)格和用戶交互認(rèn)知,從而更好地保證用戶體驗質(zhì)量。
 
用戶體驗一致性思考
 
 
色彩
色彩作為一種兼具物理屬性與感官享受的復(fù)雜現(xiàn)象,其本質(zhì)在于光波在人體視網(wǎng)膜上的特定波長被反射或吸收后,所引發(fā)的視覺感知結(jié)果。在設(shè)計領(lǐng)域,色彩的選擇與運用不僅是視覺藝術(shù)的展現(xiàn),更是品牌身份與個性的直接體現(xiàn)。諸如餓了么標(biāo)志性的藍(lán)色、美團鮮明的黃色、以及京東熱情的紅色等,這些品牌專屬色彩不僅構(gòu)成了品牌識別系統(tǒng)的重要組成部分,還通過其高度的一致性,在視覺層面上構(gòu)建起強烈的品牌認(rèn)知,營造出統(tǒng)一和諧的視覺體驗。
色彩的一致性策略在品牌塑造中發(fā)揮著不可估量的作用,它能夠有效增強品牌的記憶度與辨識度,深化品牌形象在消費者心中的烙印,進而提升產(chǎn)品的市場吸引力和用戶忠誠度。同時,這種策略還促進了設(shè)計元素間的和諧共存,包括按鈕、圖標(biāo)、字體、標(biāo)簽、背景、以及關(guān)鍵視覺元素如Banner等,均能在統(tǒng)一的色彩體系下實現(xiàn)視覺上的連貫與流暢,極大地提升了產(chǎn)品的可用性、無障礙性,以及用戶在使用過程中的整體滿意度與交互體驗。
 
用戶體驗一致性思考
 
 
字體
字體作為設(shè)計中不可或缺的核心要素,其獨特性在于能夠精準(zhǔn)地塑造文字的視覺形象,涵蓋形狀、尺寸、粗細(xì)、字間距等多維度特征。這些特征共同構(gòu)建了一種獨特的文字風(fēng)格,不僅承載著信息的傳遞功能,更在無形中引導(dǎo)著用戶的視覺流程,影響著信息的接收與理解深度。因此,在設(shè)計過程中,合理選擇與應(yīng)用字體顯得尤為關(guān)鍵。
 
字體類型的多樣性,如有襯線字體與無襯線字體的對比,不僅體現(xiàn)了風(fēng)格上的差異,還隱含了不同的閱讀體驗與情感表達(dá)。字體的粗細(xì)變化(如細(xì)體、常規(guī)、粗體等)更是能夠強調(diào)文本的重要性層級,增強信息的層次感與可讀性。此外,字重的調(diào)整也是塑造視覺焦點、引導(dǎo)視線流動的有效手段,對于提升設(shè)計的整體美觀度和信息傳達(dá)效率具有不可小覷的作用。
 
然而,在實際的開發(fā)與實現(xiàn)過程中,若不加節(jié)制地使用多種字體,不僅會顯著增加頁面的加載時間,影響用戶體驗的流暢性,還可能因風(fēng)格不統(tǒng)一而導(dǎo)致頁面顯得雜亂無章,破壞整體設(shè)計的和諧感。因此,制定一套統(tǒng)一、規(guī)范的字體使用策略顯得尤為重要。這不僅有助于提升開發(fā)效率,減少后期更新迭代的復(fù)雜度,還能有效避免資源浪費,確保設(shè)計作品在視覺上的一致性與專業(yè)性。
 
用戶體驗一致性思考
 
 
圖標(biāo)
 
圖標(biāo)作為用戶界面設(shè)計中至關(guān)重要的元素,風(fēng)格直接影響到用戶的使用體驗與對產(chǎn)品的整體印象。圖標(biāo)以其簡潔、直觀且富有表現(xiàn)力的特點,在快速傳達(dá)信息、引導(dǎo)用戶操作方面發(fā)揮著不可替代的作用。在設(shè)計中,圖標(biāo)的設(shè)計與應(yīng)用更是需要精心考量,以確保其既能夠準(zhǔn)確傳達(dá)信息,又能夠與整體設(shè)計風(fēng)格保持一致,從而營造出專業(yè)、和諧且易于使用的界面環(huán)境。
 
設(shè)計中視覺上保持統(tǒng)一包括圖標(biāo)的大小、形狀、色彩以及設(shè)計風(fēng)格等多個方面,能夠增強用戶的認(rèn)知連貫性,降低學(xué)習(xí)成本,提升使用效率。相反,如果圖標(biāo)風(fēng)格混雜,不僅會讓界面顯得雜亂無章,還會給用戶帶來困惑和不安,進而影響其對產(chǎn)品專業(yè)性和安全性的信任。
用戶體驗一致性思考
 
 
按鈕
按鈕設(shè)計應(yīng)統(tǒng)一于項目風(fēng)格,無論是圓形、矩形、圓角矩形還是特定形狀,保持一致性是關(guān)鍵。統(tǒng)一的按鈕樣式不僅彰顯專業(yè)性,還能增強用戶信任,確保體驗連貫。過多變化的按鈕樣式會擾亂用戶界面,降低操作直觀性,甚至讓用戶誤以為自己已離開應(yīng)用環(huán)境。因此,精心設(shè)計的統(tǒng)一按鈕樣式對提升用戶體驗至關(guān)重要。
 
排版
設(shè)計中的排版一致性對于構(gòu)建高效、用戶友好的界面至關(guān)重要。一致的排版不僅能夠讓用戶快速適應(yīng)和理解界面的整體結(jié)構(gòu),大幅降低學(xué)習(xí)成本,還能在用戶心中激發(fā)強烈的歸屬感和安全感。這種熟悉感使得內(nèi)容更加易讀,用戶能夠自然地依照既定的視覺動線流暢地瀏覽頁面,迅速定位并獲取所需信息,從而顯著提升信息獲取的效率。因此,在設(shè)計過程中,注重并維護排版的一致性,是提升用戶體驗和界面有效性的重要策略之一。
 
 
用戶體驗一致性思考
 
 
 
操作流程的一致性
標(biāo)準(zhǔn)化流程:確保用戶在執(zhí)行相似任務(wù)時,如購買商品、搜索信息或提交表單等,能夠遵循相同的操作流程。這有助于用戶快速適應(yīng)并高效完成任務(wù)。
邏輯清晰:操作流程的每一步都應(yīng)符合用戶的認(rèn)知習(xí)慣和行為邏輯,避免讓用戶感到困惑或不知所措。
用戶體驗一致性思考
 
 
交互元素的一致性
按鈕和控件:確保按鈕、輸入框、下拉菜單等交互元素的樣式、位置和操作方式在整個應(yīng)用或網(wǎng)站中保持一致。例如,所有按鈕都應(yīng)具有相同的視覺風(fēng)格和觸發(fā)機制。
導(dǎo)航和菜單:導(dǎo)航欄和菜單的設(shè)計也應(yīng)保持一致,使用戶能夠輕松地在不同頁面或功能之間切換。
 
用戶體驗一致性思考
 
 
反饋機制的一致性
操作反饋:當(dāng)用戶執(zhí)行某個操作時,應(yīng)用或網(wǎng)站應(yīng)提供一致且及時的反饋,如加載動畫、成功提示或錯誤消息等。這有助于用戶了解操作結(jié)果并采取相應(yīng)的行動。
狀態(tài)提示:對于長時間運行的操作或需要用戶等待的場景,應(yīng)提供明確的狀態(tài)提示(如進度條),以減輕用戶的不確定感和焦慮感。
 
 
 
 
 
 
在任何維度上,一致性不應(yīng)成為設(shè)計的唯一導(dǎo)向。設(shè)計,這一融合了藝術(shù)與科學(xué)的復(fù)雜領(lǐng)域,要求我們在用戶體驗的細(xì)膩雕琢、功能需求的精準(zhǔn)滿足、美學(xué)價值的深刻體現(xiàn)及技術(shù)可行性的嚴(yán)格考量間游走。
 
“一致性”作為設(shè)計策略,其核心使命在于優(yōu)化用戶路徑,降低認(rèn)知門檻,確保用戶在多元界面中穿梭時仍能感受到連貫與和諧。當(dāng)我們在與設(shè)計團隊(包括工程師、產(chǎn)品經(jīng)理等)溝通時,僅僅提及“一致性”可能并不足以說明其必要性和價值。我們需要更深入地闡述為什么需要保持一致性,以及它如何具體幫助減少用戶困惑、提高用戶滿意度和忠誠度。
 
同時,我們應(yīng)清醒認(rèn)識到,“一致性”并不是萬能的。在某些情況下,為了追求極致的用戶體驗或解決特定的設(shè)計問題,可能需要打破傳統(tǒng)的一致性規(guī)則。因此,設(shè)計師需要在保持一致性和創(chuàng)新之間找到平衡點,根據(jù)具體情況靈活調(diào)整設(shè)計方案。
 
實際落地執(zhí)行時,要根據(jù)產(chǎn)品定位、用戶場景,結(jié)合業(yè)務(wù)功能來確定設(shè)計方案,不能為了一致而一致。
當(dāng)我們遇到一致性問題時,還是需要從以下3個方面深入思考,做出準(zhǔn)確合理的設(shè)計決策。
用戶體驗一致性思考
 
 
真實項目
真實項目
 
在SaaS產(chǎn)品設(shè)計中,特別是面向B/G端(企業(yè)用戶)時,滿足不同用戶角色(如普通用戶與高權(quán)限領(lǐng)導(dǎo))的需求是至關(guān)重要的。
管理端布局設(shè)計
普通簡潔明了:為普通用戶設(shè)計的管理界面應(yīng)簡潔直觀,聚焦于日常操作,如數(shù)據(jù)查看、統(tǒng)計和下載。
功能分區(qū):通過清晰的導(dǎo)航欄或側(cè)邊欄將功能區(qū)域劃分開,如“數(shù)據(jù)概覽”、“報表下載”、“任務(wù)管理”等,便于用戶快速定位所需功能。
操作便捷:確保常用操作(如搜索、篩選、排序)易于觸達(dá),減少用戶點擊次數(shù)和頁面跳轉(zhuǎn)。
 
首頁版心定寬設(shè)計
固定寬度:為首頁設(shè)定一個合適的固定寬度(如1200px、1440px等),以保證內(nèi)容在大多數(shù)屏幕上都能保持一致的閱讀體驗。
信息模塊化:將首頁內(nèi)容劃分為多個卡片,每個卡片承載一個獨立的信息單元(如數(shù)據(jù)報表、通知公告、項目進展等)。
視覺層次:通過顏色、大小、陰影等設(shè)計元素區(qū)分卡片的重要性,引導(dǎo)用戶視線,提高信息獲取效率。
交互性:為卡片添加交互元素,如點擊展開、滑動查看更多等,增加用戶參與度和頁面活躍度。
 
用戶體驗一致性思考
 
 
位置差異性分析
根據(jù)「認(rèn)知負(fù)荷>視覺負(fù)荷>動作負(fù)荷」理論,在頁面中我們首先要讓用戶能夠找到按鈕,然后完成操作。
相對于彈窗,頁面的空間更大,邊界感偏弱,用戶的視覺重心更容易停留在左側(cè)表單內(nèi)容區(qū)域。所以按鈕應(yīng)該緊隨搜索條件,便于用戶快速發(fā)現(xiàn)按鈕。
區(qū)域用戶已經(jīng)形成下意識操作習(xí)慣,雖然區(qū)別于規(guī)范,只能打破,遵循客戶需求
用戶體驗一致性思考
 
 
一致性是規(guī)則
“一致性”作為規(guī)則或手段,服務(wù)于提升用戶體驗的原則。規(guī)則與原則一致時,促進業(yè)務(wù)共識與用戶價值;沖突時,原則優(yōu)先。用戶體驗原則指導(dǎo)下的一致性,要超越表面控件統(tǒng)一,更在于產(chǎn)品決策與價值取向的一致。必要時,為更好的用戶體驗,可在規(guī)則上讓步以實現(xiàn)原則統(tǒng)一。打破規(guī)則需慎重權(quán)衡,確保用戶便利足以彌補理解成本,需長期全局考量。規(guī)則非僵化教條,而是引導(dǎo)我們謹(jǐn)慎創(chuàng)新的框架。
 
一致性的底線
無論從哪個角度,一致性存在的必要性都是毋庸置疑的。
對于關(guān)鍵的設(shè)計元素,如專有名詞和顏色體系,保持一致性至關(guān)重要。這不僅有助于維護品牌形象,還能減少用戶的困惑。
特定設(shè)計語言在特定場景下的變體應(yīng)用,雖然可能帶來一定的視覺新鮮感或針對性優(yōu)化,但往往需要謹(jǐn)慎評估其潛在風(fēng)險。一旦變體打破了整體設(shè)計的一致性,可能會破壞用戶對品牌的熟悉感和信任感,甚至引發(fā)誤解。因此,在追求設(shè)計創(chuàng)新的同時,必須確保這種創(chuàng)新是基于一致性的原則之上,以維持品牌的整體性和用戶的良好體驗。
 
擁抱復(fù)雜性
一致性確實不應(yīng)成為設(shè)計師的避風(fēng)港或限制創(chuàng)新的枷鎖,而應(yīng)是基于對業(yè)務(wù)深刻理解和多樣化設(shè)計能力之上的價值選擇。設(shè)計師的核心任務(wù)始終是滿足用戶的多樣化需求和偏好,這需要他們細(xì)致入微地觀察、理解并解決每個用戶的獨特問題。
 
在追求一致性的同時,設(shè)計師應(yīng)保持“第一性思考”的能力,即回歸問題的本質(zhì),從用戶需求出發(fā)進行創(chuàng)新設(shè)計。多樣性頁面的產(chǎn)出,不僅體現(xiàn)了設(shè)計師的創(chuàng)造力和靈活性,也是提升用戶體驗、增強產(chǎn)品吸引力的關(guān)鍵。
 
一致性與創(chuàng)新設(shè)計并非相互排斥,而是相輔相成的關(guān)系。真正的一致性不應(yīng)導(dǎo)致單調(diào)或拒絕創(chuàng)新,而應(yīng)是在遵循品牌或產(chǎn)品核心價值的前提下,鼓勵設(shè)計師在細(xì)節(jié)和體驗上不斷探索和突破。當(dāng)設(shè)計師感到被既定規(guī)則束縛時,應(yīng)勇于質(zhì)疑并重新評估當(dāng)前的規(guī)范,確保所謂的“一致性”不是刻板的偽命題,而是真正符合用戶需求和品牌發(fā)展的價值導(dǎo)向。
 
因此,設(shè)計師應(yīng)時刻保持開放的心態(tài)和敏銳的洞察力,不斷探索和嘗試新的設(shè)計方法和理念,以更加靈活和創(chuàng)新的方式實現(xiàn)一致性與用戶需求的完美融合。
 
用戶體驗一致性思考
 
 
重要的設(shè)計原則
「一致性」作為設(shè)計領(lǐng)域中的一項基礎(chǔ)性原則,其重要性不言而喻。它不僅為設(shè)計過程提供了穩(wěn)固的基石,還顯著促進了開發(fā)效率與產(chǎn)品體驗的全面升級。在設(shè)計實踐中,一致性確保了界面元素的統(tǒng)一性和連貫性,使得用戶能夠迅速熟悉并掌握產(chǎn)品的使用方式,降低了學(xué)習(xí)成本,增強了操作的直觀性和便捷性。
靈活變通使用
一致性原則并非一成不變的強制規(guī)定,而是需要根據(jù)產(chǎn)品的具體定位和市場環(huán)境進行靈活變通的應(yīng)用。不同的產(chǎn)品可能面向不同的用戶群體,擁有獨特的品牌調(diào)性和功能需求,因此在追求一致性的同時,也需充分考慮這些因素,確保設(shè)計既符合品牌特色,又能滿足用戶的實際需求。
 
提升用戶體驗是價值所在
一致性的真正價值在于其能夠顯著提升用戶體驗。通過遵循用戶的認(rèn)知和習(xí)慣,設(shè)計師能夠創(chuàng)造出更加自然、流暢的操作流程,使用戶在享受產(chǎn)品功能的同時,也能感受到品牌所傳遞的舒適與和諧。因此,在追求設(shè)計一致性的過程中,我們始終應(yīng)以人為本,將用戶的體驗和感受放在首位。建設(shè)有兼容性和長期價值的的一致性框架,在一致性中做到有用戶價值的設(shè)計,是設(shè)計師應(yīng)該不斷探索的命題。

作者:cheny米魚
鏈接:https://www.zcool.com.cn/article/ZMTYzNTAzNg==.html
來源:站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請注明出處。

日歷

鏈接

個人資料

存檔