淄博阎囤工贸有限公司

首頁(yè)

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

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

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


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

蘭亭妙微(m.ibut.com.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ì)方法論 I 超全面的頁(yè)面分割設(shè)計(jì)指南

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

 
設(shè)計(jì)方法論 I 超全面的頁(yè)面分割設(shè)計(jì)指南
 
當(dāng)你打開(kāi)一個(gè)頁(yè)面,首先映入眼簾的是豐富多樣的內(nèi)容和信息。如何在有限的空間內(nèi),既保證內(nèi)容的完整性,又讓用戶(hù)能夠輕松理解和瀏覽,這背后的奧秘就在于頁(yè)面分割。今天,我們就來(lái)一起
探討頁(yè)面分割的藝術(shù)與技巧,看看它是如何為你的設(shè)計(jì)增添魅力,提升用戶(hù)體驗(yàn)的。
 
在設(shè)計(jì)中,頁(yè)面分割不僅僅是一種技術(shù)手段,更是一種藝術(shù)表現(xiàn)。它如同一位細(xì)心的畫(huà)師,巧妙地運(yùn)用線(xiàn)條、色彩、空白等元素,將頁(yè)面內(nèi)容劃分為一個(gè)個(gè)清晰、有序的區(qū)域。
通過(guò)這些分割,用戶(hù)能夠更快速地找到所需信息,更輕松地理解頁(yè)面內(nèi)容,從而享受到更加愉悅的閱讀體驗(yàn)。
頁(yè)面分割的魅力在于其多樣性和靈活性。不同的頁(yè)面可以采用不同的分割方式,如線(xiàn)條分割、卡片分割、留白分割等,以滿(mǎn)足不同的設(shè)計(jì)需求和用戶(hù)習(xí)慣。同時(shí),頁(yè)面分割也需要根據(jù)內(nèi)容的實(shí)際情況進(jìn)行合理調(diào)整,既要保證信息的完整性,又要避免過(guò)度分割帶來(lái)的混亂感。
 
在本文中,我們將一起探討頁(yè)面分割的原則、技巧和應(yīng)用實(shí)例。我們將學(xué)習(xí)如何運(yùn)用不同的分割方式來(lái)優(yōu)化頁(yè)面布局,提升用戶(hù)體驗(yàn)。同時(shí),我們還將分享一些成功的頁(yè)面分割案例,以激發(fā)你的設(shè)計(jì)靈感,為你的界面設(shè)計(jì)注入新的活力。
 
分享目錄:
一、分割的常見(jiàn)樣式
二、線(xiàn)性分割
三、卡片分割
四、留白分割
五、總結(jié)
設(shè)計(jì)方法論 I 超全面的頁(yè)面分割設(shè)計(jì)指南
 
 
線(xiàn)性分割:通過(guò)使用線(xiàn)條來(lái)劃分頁(yè)面的不同區(qū)域,以達(dá)到組織內(nèi)容、引導(dǎo)用戶(hù)視線(xiàn)和提升整體美觀度的目的。這種分割方式簡(jiǎn)單明了,能夠清晰地展現(xiàn)出頁(yè)面內(nèi)容的層次和結(jié)構(gòu)。
 
卡片分割:卡片式設(shè)計(jì)是一種流行的界面分割方法,通過(guò)將內(nèi)容劃分為獨(dú)立的卡片或區(qū)塊,使用戶(hù)能夠更清晰地理解信息。每個(gè)卡片通常包含相關(guān)的內(nèi)容,如文本、圖片或按鈕,以便用戶(hù)快速瀏覽和交互。
 
留白分割:主要通過(guò)增加間距的方式,利用人的視知覺(jué)原理(接近法則:人的大腦會(huì)傾向于把彼此靠近的元素視為一組),自然地將信息進(jìn)行分組。這種留白的方式能夠?yàn)轫?yè)面增加呼吸感,降低視覺(jué)噪音,使設(shè)計(jì)看起來(lái)更簡(jiǎn)潔。
設(shè)計(jì)方法論 I 超全面的頁(yè)面分割設(shè)計(jì)指南
 
 
近年來(lái),設(shè)計(jì)趨勢(shì)從“卡片式設(shè)計(jì)”轉(zhuǎn)向了“去線(xiàn)化設(shè)計(jì)”,即傾向于使用留白分割而非過(guò)多的線(xiàn)條分割,以實(shí)現(xiàn)更為簡(jiǎn)潔清晰的界面效果。設(shè)計(jì)師在選擇分割方式時(shí),應(yīng)優(yōu)先考慮留白分割,其次是線(xiàn)性分割,最后是卡片分割。這個(gè)選擇順序反映了設(shè)計(jì)界的一般原則,即在不影響信息傳達(dá)的前提下,盡可能保持設(shè)計(jì)的簡(jiǎn)潔性。
設(shè)計(jì)方法論 I 超全面的頁(yè)面分割設(shè)計(jì)指南
 
 
線(xiàn)性分割的定義:
線(xiàn)性分割設(shè)計(jì)是一種在視覺(jué)設(shè)計(jì)中使用的技巧,它使用線(xiàn)條、邊框或細(xì)線(xiàn)等元素來(lái)劃分、區(qū)分或連接頁(yè)面上的不同內(nèi)容區(qū)域。這種設(shè)計(jì)手法主要用于提高頁(yè)面內(nèi)容的可讀性和組織性,幫助用戶(hù)更好地理解和瀏覽頁(yè)面信息。
 
線(xiàn)性分割設(shè)計(jì)具有以下優(yōu)勢(shì):
 
1.劃分區(qū)域:線(xiàn)性分割可以將頁(yè)面劃分為不同的區(qū)域或模塊,使得每個(gè)區(qū)域的內(nèi)容更加清晰、有序。這有助于用戶(hù)快速定位和瀏覽所需的信息,提高閱讀效率。
 
2.區(qū)分內(nèi)容:線(xiàn)性分割可以用來(lái)區(qū)分不同類(lèi)型的內(nèi)容,如文本、圖片、圖表等。通過(guò)線(xiàn)性分割,可以將這些內(nèi)容進(jìn)行分組或歸類(lèi),使得頁(yè)面更加整潔、有序。
 
3.引導(dǎo)視線(xiàn):線(xiàn)性分割可以引導(dǎo)用戶(hù)的視線(xiàn),幫助他們更好地理解頁(yè)面內(nèi)容。通過(guò)合理的線(xiàn)性分割設(shè)計(jì),可以突出顯示重要的信息或元素,引導(dǎo)用戶(hù)關(guān)注到關(guān)鍵內(nèi)容。
 
4.增強(qiáng)層次感:線(xiàn)性分割可以增強(qiáng)頁(yè)面的層次感,使得頁(yè)面內(nèi)容更加豐富、有深度。通過(guò)不同樣式的線(xiàn)性分割,可以區(qū)分不同的信息層級(jí),幫助用戶(hù)更好地理解頁(yè)面結(jié)構(gòu)和內(nèi)容關(guān)系。
 
使用原則:在使用分割線(xiàn)時(shí),我們應(yīng)遵循一些原則,以確保其有效地幫助用戶(hù)理解頁(yè)面的組成,同時(shí)避免過(guò)度使用帶來(lái)的視覺(jué)干擾。
 
1.分割線(xiàn)應(yīng)當(dāng)微妙而不過(guò)于顯眼。
它們?cè)诓季种袘?yīng)該容易被用戶(hù)注意到,但又不應(yīng)成為焦點(diǎn),以免分散用戶(hù)的注意力。
 
2.分割線(xiàn)應(yīng)被視為次要的元素。
只有在留白等其他設(shè)計(jì)手法無(wú)法有效起到分割作用時(shí),才考慮使用分割線(xiàn)。它們應(yīng)當(dāng)是布局中的輔助工具,而不是主導(dǎo)元素。
 
3.謹(jǐn)慎使用分割線(xiàn)。
過(guò)度使用分割線(xiàn)可能會(huì)導(dǎo)致頁(yè)面顯得混亂和復(fù)雜。相反,我們應(yīng)該用分割線(xiàn)來(lái)創(chuàng)建信息分組,而不是簡(jiǎn)單地分割每一個(gè)條目。通過(guò)審慎而恰當(dāng)?shù)厥褂梅指罹€(xiàn),我們可以有效地提升頁(yè)面的可讀性和用戶(hù)體驗(yàn)。
圖片來(lái)源于參考文章
圖片來(lái)源于參考文章
 
線(xiàn)性分割三種類(lèi)型:
通欄分割線(xiàn)、內(nèi)嵌分割線(xiàn)和中間分割線(xiàn)。
 
1.通欄分割線(xiàn)(Full-bleed Dividers):通欄分割線(xiàn)通常橫跨整個(gè)頁(yè)面寬度,用于分隔彼此完全獨(dú)立的內(nèi)容區(qū)域。這種分割線(xiàn)在視覺(jué)上非常顯著,能夠清晰地劃分出不同的內(nèi)容區(qū)塊,使用戶(hù)能夠迅速區(qū)分不同部分的信息。通欄分割線(xiàn)通常用于區(qū)分文章、產(chǎn)品列表、服務(wù)介紹等獨(dú)立的內(nèi)容區(qū)域。
 
2.內(nèi)嵌分割線(xiàn)(Inset Dividers):內(nèi)嵌分割線(xiàn)通常位于內(nèi)容區(qū)域內(nèi)部,用于分隔有錨點(diǎn)(如頭像、圖標(biāo)等)的相關(guān)內(nèi)容。這些錨點(diǎn)可以是圖片、符號(hào)或小的圖形元素,它們與分割線(xiàn)一起,幫助用戶(hù)更好地理解和區(qū)分內(nèi)容。內(nèi)嵌分割線(xiàn)常用于列表、卡片式布局、時(shí)間線(xiàn)等場(chǎng)景中,用于展示有關(guān)聯(lián)但不同類(lèi)別的信息。
 
3.中間分割線(xiàn)(Middle Dividers):中間分割線(xiàn)位于兩個(gè)內(nèi)容區(qū)域之間,用于分隔無(wú)錨點(diǎn)的相關(guān)內(nèi)容。這種分割線(xiàn)通常比通欄分割線(xiàn)更細(xì),更注重于在視覺(jué)上劃分空間,而不是強(qiáng)調(diào)內(nèi)容的獨(dú)立性。中間分割線(xiàn)常用于文本段落之間、列表項(xiàng)之間或不同功能區(qū)域之間,以提供清晰的結(jié)構(gòu)和層次。
設(shè)計(jì)方法論 I 超全面的頁(yè)面分割設(shè)計(jì)指南
 
 
在大多數(shù)情況下,當(dāng)信息層級(jí)較為簡(jiǎn)單(即信息層級(jí)≤2)時(shí),使用分割線(xiàn)進(jìn)行信息分割是一種有效的方法。然而,實(shí)際上,如果留白間距足夠大,我們也可以使用留白來(lái)達(dá)到類(lèi)似的效果。通過(guò)增大留白間距,我們可以創(chuàng)造出清晰的視覺(jué)區(qū)域劃分,使得信息之間的界限更加明確。
 
與分割線(xiàn)相比,足夠大的留白間距可以避免多余的線(xiàn)性元素干擾,讓整體視覺(jué)效果更加清爽。這樣的設(shè)計(jì)選擇有助于提升用戶(hù)的閱讀體驗(yàn),使用戶(hù)更加輕松地理解和消化信息。
 
因此,在信息層級(jí)較簡(jiǎn)單的情況下,我們可以靈活地選擇使用分割線(xiàn)或留白來(lái)進(jìn)行信息分割。通過(guò)調(diào)整留白間距,我們可以達(dá)到與分割線(xiàn)相似的效果,同時(shí)保持整體設(shè)計(jì)的簡(jiǎn)潔和清晰。
設(shè)計(jì)方法論 I 超全面的頁(yè)面分割設(shè)計(jì)指南
 
 
為了提升屏效,我們希望在一屏內(nèi)展示盡可能多的信息。在這種情況下,分割線(xiàn)的設(shè)計(jì)顯得尤為重要,因?yàn)樗鼈兡軌蛴行У貏澐中畔^(qū)域,使內(nèi)容更加清晰、易于理解。
 
通過(guò)使用分割線(xiàn),我們可以將較多的信息條理化,使得用戶(hù)能夠更快速地找到所需的內(nèi)容。與沒(méi)有分割線(xiàn)的布局相比,使用分割線(xiàn)能夠顯著提高信息的可讀性和可理解性。
 
在相同的信息布局下,分割線(xiàn)能夠?qū)⑿畔^(qū)域明確地劃分開(kāi)來(lái),防止信息之間產(chǎn)生混淆或交叉。這種劃分不僅使得每個(gè)信息塊更加獨(dú)立,而且提高了信息之間的對(duì)比度,使用戶(hù)能夠更輕松地識(shí)別和區(qū)分不同的信息。
 
因此,當(dāng)我們的目標(biāo)是提高屏效并展示大量信息時(shí),分割線(xiàn)的設(shè)計(jì)是一個(gè)關(guān)鍵要素。通過(guò)合理地使用分割線(xiàn),我們可以確保信息布局更加清晰、有序,從而提高用戶(hù)的閱讀效率和滿(mǎn)意度。(如下圖)
設(shè)計(jì)方法論 I 超全面的頁(yè)面分割設(shè)計(jì)指南
 
 
線(xiàn)性分割在移動(dòng)端頁(yè)面設(shè)計(jì)中的應(yīng)用場(chǎng)景廣泛,尤其是在需要清晰劃分信息模塊時(shí)。如微信的聊天列表中,線(xiàn)性分割被用來(lái)區(qū)分不同的消息條目。每條消息之間通過(guò)一條細(xì)線(xiàn)進(jìn)行分隔,使得每條消息清晰可辨,方便用戶(hù)快速瀏覽和定位到特定的消息。
 
線(xiàn)性分割還常用在各類(lèi)App的信息提示中,如果有多條消息需要展示,線(xiàn)性分割可以用來(lái)
區(qū)分不同的消息組。例如招商銀行APP中,當(dāng)用戶(hù)收到多條未讀消息時(shí),每條消息之間可以通過(guò)線(xiàn)性分割進(jìn)行區(qū)分,使得每條消息清晰可辨,方便用戶(hù)逐一查看和處理。
 
在APP需要用戶(hù)填寫(xiě)信息和設(shè)置的表單頁(yè)面中,線(xiàn)性分割可以用來(lái)區(qū)分不同的輸入字段或信息區(qū)域。這有助于用戶(hù)更清晰地了解需要填寫(xiě)的信息,提高表單的填寫(xiě)效率和準(zhǔn)確性,比如站酷的設(shè)置頁(yè)面(如下圖)
設(shè)計(jì)方法論 I 超全面的頁(yè)面分割設(shè)計(jì)指南
 
 
設(shè)計(jì)方法論 I 超全面的頁(yè)面分割設(shè)計(jì)指南
 
 
設(shè)計(jì)方法論 I 超全面的頁(yè)面分割設(shè)計(jì)指南
 
 
卡片分割的定義:卡片分割設(shè)計(jì)主要通過(guò)將內(nèi)容或功能區(qū)域劃分成獨(dú)立的“卡片”來(lái)進(jìn)行信息展示和組織。每個(gè)卡片通常包含相關(guān)的內(nèi)容或功能,并且與其他卡片通過(guò)一定的間距或線(xiàn)性分隔進(jìn)行區(qū)分。
 
卡片分割設(shè)計(jì)具有以下優(yōu)勢(shì):
 
1.內(nèi)容封裝:卡片分割設(shè)計(jì)將相關(guān)內(nèi)容或功能封裝在一個(gè)獨(dú)立的卡片內(nèi),使得每個(gè)卡片成為一個(gè)獨(dú)立的信息單元。這有助于保持頁(yè)面內(nèi)容的清晰和整潔,方便用戶(hù)瀏覽和理解。
 
2.明確邊界:每個(gè)卡片通常具有明確的邊界,通過(guò)邊框、陰影或間距等元素來(lái)區(qū)分不同的卡片。這種邊界的存在使得每個(gè)卡片在視覺(jué)上相對(duì)獨(dú)立,方便用戶(hù)進(jìn)行區(qū)分和識(shí)別。
 
3.靈活布局:卡片分割設(shè)計(jì)具有很高的靈活性,可以根據(jù)需要自由調(diào)整卡片的大小、位置和排列方式。這使得設(shè)計(jì)師可以根據(jù)不同的設(shè)計(jì)需求和用戶(hù)習(xí)慣來(lái)靈活調(diào)整卡片的布局,以達(dá)到最佳的視覺(jué)效果。
 
4.強(qiáng)調(diào)重點(diǎn):通過(guò)不同的視覺(jué)處理手法,如改變卡片的顏色、大小或樣式等,可以突出顯示重要的卡片或內(nèi)容。這有助于吸引用戶(hù)的注意力,引導(dǎo)他們關(guān)注到關(guān)鍵信息。
 
卡片的基本構(gòu)成:卡片是一個(gè)獨(dú)立的主題性容器,旨在將內(nèi)容和操作組合在一起。它可以包含多種元素,如容器、縮略圖、標(biāo)題、副標(biāo)題、富媒體、輔助文字、按鈕和圖標(biāo)按鈕等。這些元素并非必須全部存在,而是根據(jù)具體需求進(jìn)行選擇和配置。無(wú)論選擇哪些元素,它們都會(huì)以易于掃描和操作的形式整齊地放置在卡片上。這種設(shè)計(jì)使得卡片成為一個(gè)靈活且高效的信息展示工具,適用于各種場(chǎng)景和應(yīng)用。
設(shè)計(jì)方法論 I 超全面的頁(yè)面分割設(shè)計(jì)指南
 
 
卡片分割常見(jiàn)的類(lèi)型:卡片分割可分為、通欄卡片和非通欄卡片
 
1、通欄卡片:其特點(diǎn)是卡片占據(jù)整個(gè)頁(yè)面寬度,沒(méi)有左右邊距。通欄卡片的設(shè)計(jì)可以提高布局的靈活性,使得頁(yè)面內(nèi)容更加寬敞和大氣。同時(shí),通欄卡片也可以更好地突出展示單條內(nèi)容,引導(dǎo)用戶(hù)的視線(xiàn),提高閱讀效率。
 
2.非通欄卡片:與通欄卡片相比,它會(huì)在卡片的左右兩側(cè)留有邊距,不完全占據(jù)整個(gè)頁(yè)面寬度。這種設(shè)計(jì)方式可以使得頁(yè)面內(nèi)容更加有層次感和組織性,同時(shí)也有利于突出顯示某些關(guān)鍵信息。
設(shè)計(jì)方法論 I 超全面的頁(yè)面分割設(shè)計(jì)指南
 
 
通欄卡片
通欄卡片相較于非通欄卡片,其設(shè)計(jì)特點(diǎn)在于去除了左右兩端的留白,僅保留上下邊距,從而提供了更大的展示空間。這種設(shè)計(jì)使得卡片內(nèi)的內(nèi)容能夠占據(jù)整個(gè)頁(yè)面寬度,進(jìn)一步增強(qiáng)了內(nèi)容的視覺(jué)沖擊力。在通欄卡片中,卡片與背景的關(guān)系通常通過(guò)一條背景色塊來(lái)抽象表現(xiàn),這種簡(jiǎn)潔的處理方式避免了過(guò)多的視覺(jué)元素干擾,使得頁(yè)面整體看起來(lái)更加整潔和統(tǒng)一。
 
通欄卡片可以被視為在極簡(jiǎn)列表式和傳統(tǒng)卡片式設(shè)計(jì)之間的一種折中選擇。它繼承了卡片式的分層方式和強(qiáng)交互性,使得用戶(hù)能夠輕松地瀏覽和交互頁(yè)面內(nèi)容。如下圖微博“關(guān)注”、微信“發(fā)現(xiàn)”頁(yè)面。
設(shè)計(jì)方法論 I 超全面的頁(yè)面分割設(shè)計(jì)指南
 
 
非通欄卡片
非通欄卡片通常采用帶圓角的設(shè)計(jì)形式,這種設(shè)計(jì)不僅賦予卡片一種柔和、圓潤(rùn)的視覺(jué)效果,還增強(qiáng)了用戶(hù)的視覺(jué)舒適度。結(jié)合陰影效果以及四周的邊距,非通欄卡片巧妙地形成頁(yè)面留白,使得整體設(shè)計(jì)層次感更加豐富。
 
通過(guò)巧妙的投影設(shè)計(jì)以及前后顏色的精準(zhǔn)設(shè)定,非通欄卡片成功地讓內(nèi)容與背景之間產(chǎn)生視覺(jué)空間感,進(jìn)一步強(qiáng)化了內(nèi)容的立體感和層次感。這種設(shè)計(jì)技巧不僅提升了卡片的視覺(jué)吸引力,還使得用戶(hù)在瀏覽頁(yè)面時(shí)能夠更加輕松地區(qū)分和聚焦關(guān)鍵信息。
 
在頁(yè)面設(shè)計(jì)中,非通欄卡片的應(yīng)用范圍十分廣泛。無(wú)論是用于展示文章、產(chǎn)品、圖片還是其他類(lèi)型的內(nèi)容,非通欄卡片都能夠通過(guò)其獨(dú)特的視覺(jué)效果和設(shè)計(jì)元素,為用戶(hù)帶來(lái)更加舒適、美觀的視覺(jué)體驗(yàn)。同時(shí),非通欄卡片還具有良好的適應(yīng)性和靈活性,可以根據(jù)不同的設(shè)計(jì)需求和用戶(hù)習(xí)慣進(jìn)行定制和調(diào)整,滿(mǎn)足不同場(chǎng)景下的應(yīng)用需求。如下圖夸克“夸克日?qǐng)?bào)”、APP Store“首頁(yè)”
設(shè)計(jì)方法論 I 超全面的頁(yè)面分割設(shè)計(jì)指南
 
 
選擇使用通欄分割線(xiàn)還是卡片分割,主要取決于你的設(shè)計(jì)目標(biāo)和內(nèi)容需求。以下是三個(gè)參考建議,幫助你做出更好的選擇:
 
1.當(dāng)內(nèi)容已有自然分割線(xiàn)時(shí):如果你的主題內(nèi)容本身就已經(jīng)有明確的分割線(xiàn),比如列表項(xiàng)、段落分隔等,那么采用非通欄分割會(huì)是一個(gè)好選擇??ㄆ梢郧逦亟缍總€(gè)內(nèi)容塊,使主題信息層次更加分明,提高用戶(hù)的閱讀效率。
 
2.當(dāng)內(nèi)容類(lèi)型多樣且占據(jù)較大空間時(shí):如果單個(gè)主題內(nèi)部包含了多種類(lèi)型的內(nèi)容,如文字、圖片、視頻等,且這些內(nèi)容在垂直方向上占據(jù)了較大的空間(例如,內(nèi)容長(zhǎng)度超過(guò)屏幕高度的一半),使用非通欄分割會(huì)更加合適??ㄆ軌蛴行У厝Χ▋?nèi)容范圍,為用戶(hù)提供一個(gè)明確的視覺(jué)邊界,幫助他們更好地理解和消化信息。
 
3.當(dāng)需要增強(qiáng)橫向空間感時(shí):如果你希望擴(kuò)展頁(yè)面的橫向空間,或者暗示用戶(hù)可以橫向滑動(dòng)頁(yè)面查看更多內(nèi)容,那么非通欄卡片會(huì)是更好的選擇。非通欄卡片的設(shè)計(jì)能夠利用橫向內(nèi)容連續(xù)性原則,幫助用戶(hù)建立頁(yè)面可以橫向滑動(dòng)的意識(shí),從而提升頁(yè)面的互動(dòng)性和用戶(hù)體驗(yàn)。如下圖知乎“發(fā)現(xiàn)”、站酷“推薦”。
設(shè)計(jì)方法論 I 超全面的頁(yè)面分割設(shè)計(jì)指南
 
 
卡片分割更適合圖文混排
卡片分割設(shè)計(jì)以其獨(dú)特的布局方式,成為圖文混排中的理想選擇。它能夠巧妙地將不同大小、媒介的內(nèi)容統(tǒng)一呈現(xiàn)在一個(gè)界面中,實(shí)現(xiàn)了內(nèi)容的多樣性與統(tǒng)一性的結(jié)合。這種設(shè)計(jì)不僅讓單屏區(qū)域能夠顯示更多內(nèi)容,還通過(guò)合理的空間劃分,確保了文字和圖片之間的和諧共存,既維持了視覺(jué)的一致性,又巧妙地平衡了文字和圖片的視覺(jué)強(qiáng)度。因此,在需要同時(shí)呈現(xiàn)多種內(nèi)容和媒介的場(chǎng)景中,卡片分割無(wú)疑是一種高效且美觀的解決方案。如下圖知乎“想法”、站酷“首頁(yè)”
設(shè)計(jì)方法論 I 超全面的頁(yè)面分割設(shè)計(jì)指南
 
 
設(shè)計(jì)方法論 I 超全面的頁(yè)面分割設(shè)計(jì)指南
 
 
設(shè)計(jì)方法論 I 超全面的頁(yè)面分割設(shè)計(jì)指南
 
 
留白分割的定義:留白分割是目前設(shè)計(jì)的主流趨勢(shì),越來(lái)越多的產(chǎn)品在使用留白分割設(shè)計(jì)。留白分割主要通過(guò)增加間距的方式,利用人的視知覺(jué)原理(接近法則:人的大腦會(huì)傾向于把彼此靠近的元素視為一組),將信息進(jìn)行自然的視覺(jué)分組。
 
留白分割具有以下優(yōu)勢(shì):
 
1.突出重點(diǎn)信息:通過(guò)增加間距,可以將關(guān)鍵信息與其他內(nèi)容區(qū)分開(kāi)來(lái),使用戶(hù)更容易注意到。
 
2.提高可讀性:適當(dāng)?shù)牧舭卓梢允刮淖只驁D形元素之間的界限更清晰,減少視覺(jué)干擾,從而提高用戶(hù)的閱讀效率。
 
3.增強(qiáng)設(shè)計(jì)感:留白可以為設(shè)計(jì)增加呼吸感,避免元素過(guò)于擁擠,使整體布局更加和諧、美觀。
 
當(dāng)元素之間的間距保持均勻時(shí),整個(gè)視覺(jué)呈現(xiàn)會(huì)顯得平衡且協(xié)調(diào),大腦默認(rèn)為一個(gè)整體。然而,一旦元素的橫向和縱向間距發(fā)生變化,我們的大腦會(huì)基于接近性法則,本能地將距離較近的元素視為一個(gè)整體或群組,這就是留白分割。(如下圖)
設(shè)計(jì)方法論 I 超全面的頁(yè)面分割設(shè)計(jì)指南
 
 
留白分割在
有規(guī)律且卡片樣式較多的頁(yè)面中表現(xiàn)尤為突出,在有大量卡片樣式的頁(yè)面中,每個(gè)卡片通常都包含一定的信息。通過(guò)留白分割,可以清晰地劃分每個(gè)卡片的信息區(qū)域,使用戶(hù)更容易區(qū)分和閱讀每個(gè)卡片的內(nèi)容,增加呼吸感,避免元素過(guò)于擁擠,從而提高整體的可讀性。例如下圖中主流的音樂(lè)類(lèi)App
設(shè)計(jì)方法論 I 超全面的頁(yè)面分割設(shè)計(jì)指南
 
 
相反,如果在沒(méi)有規(guī)律且頁(yè)面內(nèi)容較多的情況使用留白分割,則會(huì)使頁(yè)面雜亂無(wú)章。比如下圖咸魚(yú)的“廣場(chǎng)”界面feed流中,圖片從1~9張都有的情況下,使用留白分割,頁(yè)面就會(huì)變得雜亂,影響視覺(jué)效果。而脈脈則采用了卡片式分割樣式,頁(yè)面模塊則相對(duì)清晰很多。
設(shè)計(jì)方法論 I 超全面的頁(yè)面分割設(shè)計(jì)指南
 
 
設(shè)計(jì)方法論 I 超全面的頁(yè)面分割設(shè)計(jì)指南
 
 
在我們界面設(shè)計(jì)中,我們應(yīng)充分考慮信息條目的復(fù)雜度。當(dāng)信息較為簡(jiǎn)單時(shí),利用留白分割,能夠創(chuàng)造出清爽且不受干擾的視覺(jué)體驗(yàn)。但隨著信息復(fù)雜度的增加,留白分割可能不足以清晰地展現(xiàn)信息層次,此時(shí),引入線(xiàn)性分割是一個(gè)有效策略,它能提升屏幕的利用效率,使信息條理更加清晰。
 
當(dāng)信息復(fù)雜度進(jìn)一步升級(jí),例如已經(jīng)運(yùn)用了線(xiàn)性分割或涉及更多操作時(shí),我們需要進(jìn)一步強(qiáng)化信息條目之間的邊界感。這時(shí),卡片分割是一個(gè)理想的選擇,它不僅能增強(qiáng)信息的視覺(jué)層次,還能提升條目的可操作性。
 
重要的是,選擇信息分割方式時(shí),我們要明確:分割本身不是目的,而是為了構(gòu)建清晰的版面邏輯
,通過(guò)悅目的信息秩序來(lái)更好地突出內(nèi)容,實(shí)現(xiàn)最佳的信息傳達(dá)效果。因此,在決策時(shí),除了考慮上述細(xì)節(jié)因素,還需全面評(píng)估整體版面效果和信息傳達(dá)效率。感謝閱讀,希望對(duì)您有用。
設(shè)計(jì)方法論 I 超全面的頁(yè)面分割設(shè)計(jì)指南

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

蘭亭妙微(m.ibut.com.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ì)師如何做產(chǎn)品需求分析:先聊聊兩個(gè)“價(jià)值”

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

近兩年出現(xiàn)了不少“解放設(shè)計(jì)師雙手”的設(shè)計(jì)工具、AI工具,我們似乎能很快輸出N種流程方案、N種布局方案、N種UI風(fēng)格等等。問(wèn)題是:這樣窮舉設(shè)計(jì)方案的工作方式當(dāng)真有效嗎?
 
請(qǐng)警惕“莫得感情”的出圖機(jī)器!具備競(jìng)爭(zhēng)力的設(shè)計(jì)師必須有自主意識(shí),包括清晰的思維邏輯、果敢的決策力。而體現(xiàn)這一意識(shí)和能力的重要環(huán)節(jié)之一,就是產(chǎn)品生產(chǎn)鏈路中的首個(gè)環(huán)節(jié)“需求分析”。
 
需求分析并不僅僅是產(chǎn)品經(jīng)理的事兒。從共同目標(biāo)的角度來(lái)看,互聯(lián)網(wǎng)企業(yè)在崗位劃分上區(qū)分了產(chǎn)品經(jīng)理、設(shè)計(jì)師、開(kāi)發(fā)工程師等,是順應(yīng)人的精力時(shí)間有限、術(shù)業(yè)有專(zhuān)攻的自然規(guī)律,但是從業(yè)務(wù)目標(biāo)來(lái)說(shuō),每一個(gè)崗位都應(yīng)該對(duì)“最佳用戶(hù)體驗(yàn)和最大化商業(yè)利益的平衡”負(fù)責(zé),確保這艘船在正確的航道上。所以,如果每個(gè)“船員”都具備主人翁意識(shí)和需求分析的能力,航程必然更健康穩(wěn)健。
設(shè)計(jì)師如何做產(chǎn)品需求分析:先聊聊兩個(gè)“價(jià)值”
 
對(duì)設(shè)計(jì)師來(lái)說(shuō),需求分析不僅僅是“這個(gè)功能要不要做”的問(wèn)題,也會(huì)影響后續(xù)的設(shè)計(jì)方案決策。每一次的功能增刪或調(diào)整,都是在改變用戶(hù)接收產(chǎn)品界面信息的整體效用,那么每一個(gè)產(chǎn)品需求的分析都要評(píng)估這個(gè)功能在整個(gè)信息架構(gòu)、用戶(hù)體驗(yàn)鏈路的位置孰輕孰重,也就必然會(huì)影響你的設(shè)計(jì)方案決策。
 
產(chǎn)品需求從哪里來(lái)?
 
“有用戶(hù)反饋說(shuō)……"
“國(guó)慶節(jié)快到了,我們策劃了一個(gè)活動(dòng)……”
“這個(gè)付費(fèi)轉(zhuǎn)化率很低,達(dá)不到預(yù)期。我們想……”
……
產(chǎn)品需求的來(lái)源多種多樣,可能來(lái)自產(chǎn)品經(jīng)理、用戶(hù)反饋、產(chǎn)品數(shù)據(jù)、市場(chǎng)風(fēng)向、技術(shù)革新等等。當(dāng)然,還有來(lái)自作為設(shè)計(jì)師的”我自己“。當(dāng)我靈光一閃想到一個(gè)很炫酷的小創(chuàng)意,情感上免不了自以為是地想”咱們產(chǎn)品這么不做這個(gè)“——這個(gè)時(shí)候我也會(huì)用需求分析的框架來(lái)質(zhì)問(wèn)自己:
“值不值得做(價(jià)值評(píng)估)”、“應(yīng)當(dāng)先做什么(優(yōu)先級(jí))”、“用戶(hù)需求要滿(mǎn)足到什么程度(核心體驗(yàn)鏈路)”這三個(gè)問(wèn)題。
 
做需求分析,要想什么?
我們常說(shuō)產(chǎn)品需求要“洞察用戶(hù)真正的需求”,要明確“用戶(hù)價(jià)值”。剛?cè)胄械臅r(shí)候,我們都會(huì)點(diǎn)點(diǎn)頭,心想“對(duì)哦”??墒鞘裁词?ldquo;真正的”、什么是“假的”、什么是“價(jià)值”?說(shuō)實(shí)話(huà),這些概念都挺虛的。只有當(dāng)理論落到某個(gè)用戶(hù)場(chǎng)景去分析,我們才能理解其深意。
 
先說(shuō)點(diǎn)虛的,什么是“價(jià)值”?
 
價(jià)值是多維度的概念,在不同的學(xué)科中都會(huì)在“價(jià)值”前加一個(gè)表范圍的定語(yǔ),比如“勞動(dòng)價(jià)值”、“經(jīng)濟(jì)價(jià)值”、”社會(huì)價(jià)值”。隨著互聯(lián)網(wǎng)的發(fā)展,我們出現(xiàn)了兩個(gè)重要的新詞“用戶(hù)價(jià)值”和“產(chǎn)品價(jià)值”。
 
對(duì)于用戶(hù)而言,他們購(gòu)買(mǎi)或使用產(chǎn)品或服務(wù)是為了滿(mǎn)足特定的需求,比如提升效率、獲得愉悅、獲取經(jīng)濟(jì)收益等。那么我們說(shuō)這個(gè)產(chǎn)品具有“用戶(hù)價(jià)值”。
 
所以需求分析首先是“評(píng)估價(jià)值”,而價(jià)值評(píng)估則拆分為“用戶(hù)價(jià)值”和“商業(yè)價(jià)值”兩部分。即使當(dāng)下的需求目標(biāo)是提升用戶(hù)規(guī)模(拉新、促活、挽留等),并不需要用戶(hù)掏錢(qián),也是為了實(shí)現(xiàn)長(zhǎng)遠(yuǎn)的商業(yè)價(jià)值。當(dāng)然,這僅適用于以盈利為目標(biāo)的企業(yè),非盈利組織還有“社會(huì)影響力”的目標(biāo),不在本文討論范圍內(nèi)。
 
下面我們進(jìn)一步拆解價(jià)值評(píng)估:“用戶(hù)價(jià)值評(píng)估”和“商業(yè)價(jià)值評(píng)估”。
設(shè)計(jì)師如何做產(chǎn)品需求分析:先聊聊兩個(gè)“價(jià)值”
 
 
1、用戶(hù)價(jià)值評(píng)估
解決哪些用戶(hù)在什么場(chǎng)景下的什么問(wèn)題?
 
這個(gè)問(wèn)題越具體到“人”,就越容易分析。如果需求來(lái)自于用戶(hù)反饋,我們溯源到具體的用戶(hù)。
 
有一個(gè)朋友出去創(chuàng)業(yè),想做一個(gè)“找飯搭子”的同城陌生人交友軟件。他說(shuō),偶爾看到微信朋友圈有人召喚“有沒(méi)有人一起探店”的動(dòng)態(tài),去網(wǎng)絡(luò)社區(qū)搜索“飯搭子”、“同城探店”等詞匯也能看到不少帖子。而且探店吃飯這件事直接關(guān)聯(lián)消費(fèi),商業(yè)模式很清晰。他想通過(guò)他的產(chǎn)品解決“用戶(hù)|在探店場(chǎng)景中|無(wú)法及時(shí)找到飯友”的問(wèn)題。——“找飯友”是一個(gè)行為動(dòng)作,沒(méi)有切入到用戶(hù)的內(nèi)在需求。
 
定義用戶(hù)價(jià)值不能只停留在“行為上”,可以嘗試找到目標(biāo)用戶(hù)做定性訪(fǎng)談,進(jìn)一步深挖問(wèn)題。比如,我們想進(jìn)一步把問(wèn)題下鉆,可能會(huì)問(wèn)到這些問(wèn)題:
 
● 用戶(hù)為什么要找飯友?不能一個(gè)人探店?
● 用戶(hù)為什么找不到“飯友”?
● ……
 
我們進(jìn)一步細(xì)化“用戶(hù)-場(chǎng)景-問(wèn)題”的價(jià)值定義:
解決 一線(xiàn)城市年輕用戶(hù)(尤其是剛遷移新城市的年輕人)|通過(guò)約伴探店|解決 同好交友(社群需求)、 “量大”餐館均攤成本(省錢(qián)需求)、獲得更愉悅的吃飯氛圍 (情緒需求)的問(wèn)題。
設(shè)計(jì)師如何做產(chǎn)品需求分析:先聊聊兩個(gè)“價(jià)值”
 
 
那有了這個(gè)用戶(hù)價(jià)值定義是不是就可以順利立項(xiàng)呢?——看這個(gè)文章的篇幅,你只讀了不到一半,當(dāng)然還有更多需要推敲的問(wèn)題,請(qǐng)繼續(xù)閱讀。
 
這個(gè)需求接觸不到真實(shí)用戶(hù)怎么辦?
 
有時(shí)候我們的需求來(lái)源可能是市場(chǎng)風(fēng)向、技術(shù)革新帶來(lái)的未知變化。我們無(wú)法直觀地獲知“具體的用戶(hù)是誰(shuí)”、“TA在什么場(chǎng)景遇到什么問(wèn)題”。
——這種情況,我們則需要反向思考:這個(gè)需求如果做了,獲益的用戶(hù)是誰(shuí)?滿(mǎn)足了他們?cè)谑裁磮?chǎng)景下的需求?如果不做,用戶(hù)會(huì)不會(huì)因此棄用我們的產(chǎn)品?可能流失的用戶(hù),大盤(pán)占比可能是多少?是不是高價(jià)值用戶(hù)?
設(shè)計(jì)師如何做產(chǎn)品需求分析:先聊聊兩個(gè)“價(jià)值”
 
 
用上面的思路去層層推敲,可能會(huì)否定原來(lái)的產(chǎn)品策劃,可能會(huì)挖掘出新的需求,可能會(huì)改變需求的優(yōu)先級(jí)。
 
值得一提的是,有時(shí)候經(jīng)過(guò)層層推敲,最終得到的決策可能會(huì)與市面上的競(jìng)品有所雷同。也就是我們經(jīng)常會(huì)問(wèn)的一個(gè)問(wèn)題:為什么A產(chǎn)品已經(jīng)做了這件事,B產(chǎn)品還要做同樣的事情?
 
有的功能或服務(wù)是順應(yīng)用戶(hù)需求而產(chǎn)生的,如果有所缺失,就無(wú)法達(dá)成用戶(hù)目標(biāo)。比如短視頻產(chǎn)品都會(huì)做點(diǎn)贊和評(píng)論,因?yàn)橐曨l創(chuàng)作者和消費(fèi)者分別有“獲得認(rèn)可”的被尊重訴求、”表達(dá)意見(jiàn)“的掌控欲等心理需要。而產(chǎn)品則需要這些點(diǎn)贊和評(píng)論數(shù)據(jù)去評(píng)判內(nèi)容熱度和豐富個(gè)性化標(biāo)簽,以?xún)?yōu)化內(nèi)容的推送機(jī)制。很多同一賽道的產(chǎn)品會(huì)有雷同的功能,雖然常常被調(diào)侃為”相互抄“,但是真正做需求分析才能看清“什么是無(wú)腦抄”、“什么是必然如此”。
 
2、商業(yè)價(jià)值評(píng)估
用戶(hù)會(huì)為你這個(gè)新產(chǎn)品/新功能買(mǎi)單嗎?
 
我們找到一個(gè)有用的需求點(diǎn)是簡(jiǎn)單的,因?yàn)樾枨蟮膩?lái)源真的太多太多,但是當(dāng)我們發(fā)現(xiàn),用戶(hù)不一定會(huì)為我們的新產(chǎn)品或新功能買(mǎi)單。
請(qǐng)注意,這里的“買(mǎi)單”不限于用戶(hù)掏錢(qián),還包括用戶(hù)決定使用哪個(gè)產(chǎn)品的決策成本、用戶(hù)愿意花費(fèi)在某個(gè)產(chǎn)品的時(shí)間和學(xué)習(xí)成本等。
 
那我們?cè)趺搭A(yù)判用戶(hù)會(huì)不會(huì)買(mǎi)單呢?或者,如何提升用戶(hù)的買(mǎi)單意愿呢?
 
如前面所言,“用戶(hù)價(jià)值”就是通過(guò)你的產(chǎn)品獲得了預(yù)期的效用。效用可以是省了時(shí)間、省了錢(qián)、省了學(xué)習(xí)成本、獲得情緒價(jià)值、獲得安全感等。而用戶(hù)對(duì)效用的感知,往往是對(duì)比過(guò)去經(jīng)驗(yàn)的解決方案得到的。所以,我們首先要看用戶(hù)之前是怎么解決這個(gè)問(wèn)題的,然后是用戶(hù)遷移到新的解決方案(使用新產(chǎn)品或新功能)要付出多少成本。
 
繼續(xù)用上面“飯搭子”的案例:
設(shè)計(jì)師如何做產(chǎn)品需求分析:先聊聊兩個(gè)“價(jià)值”
 
 
——我們從這個(gè)案例可以看到,當(dāng)我們做成本對(duì)比,不能簡(jiǎn)單地說(shuō)新舊方案哪個(gè)成本更高。用戶(hù)付出的“成本”是多維度,包括“時(shí)間成本”、“經(jīng)濟(jì)成本”、“安全風(fēng)險(xiǎn)”等維度。
“飯搭子”這個(gè)新方案,對(duì)比舊方案,并沒(méi)有沒(méi)有壓倒性的成本優(yōu)勢(shì)。我們雖然可以通過(guò)產(chǎn)品設(shè)計(jì)和運(yùn)營(yíng)降低當(dāng)中的用戶(hù)成本,比如通過(guò)用戶(hù)歷史參與數(shù)據(jù)(參與飯局次數(shù)、飯友評(píng)價(jià)、真實(shí)職業(yè)信息等)提供用戶(hù)靠譜度評(píng)分,以降低安全成本。但消除用戶(hù)成本,需要花費(fèi)較大的資源投入,我們可以預(yù)判這不是一個(gè)高ROI的產(chǎn)品項(xiàng)目。
有趣的是,人不是完全理性的。有的場(chǎng)景,只要其中一項(xiàng)成本感知強(qiáng)烈,人就可能選擇棄用這個(gè)產(chǎn)品。比如“飯搭子”這個(gè)案例中,女性用戶(hù)對(duì)安全風(fēng)險(xiǎn)更為敏感,女性用戶(hù)更不愿意嘗試陌生社區(qū)。
設(shè)計(jì)師如何做產(chǎn)品需求分析:先聊聊兩個(gè)“價(jià)值”
 
 
如果我做的是一個(gè)非常創(chuàng)新的項(xiàng)目,真的沒(méi)辦法找到“舊方案”做對(duì)比呢?或者我無(wú)法獲知舊方案的用戶(hù)成本呢?——我們依然建議盡可能地接近用戶(hù)、收集足夠多的信息,以輔助判斷。如果依然非常不明朗,可以通過(guò)MVP的方案去預(yù)估。關(guān)于MVP實(shí)踐的書(shū)籍和網(wǎng)絡(luò)資料很多,大家可以自行搜索。
 
多少用戶(hù)會(huì)買(mǎi)單呢?
? 確認(rèn)了這個(gè)需求有用戶(hù)價(jià)值
? 確認(rèn)了有XX需求的用戶(hù)很可能會(huì)買(mǎi)單
——接下來(lái)可以開(kāi)干了嗎?
 
不夠,還需要預(yù)判收入規(guī)模。因?yàn)椋菏杖?客單價(jià)x支付用戶(hù)數(shù)=客單價(jià)x訪(fǎng)問(wèn)用戶(hù)數(shù)x支付轉(zhuǎn)化率。
這個(gè)等式適用于一般的to C產(chǎn)品,不同的產(chǎn)品可能有差異,比如視頻用戶(hù)的使用時(shí)長(zhǎng)可能與產(chǎn)品收入掛鉤,那么用戶(hù)時(shí)長(zhǎng)也需要作為一個(gè)變量放入到你的產(chǎn)品收入公式中。
當(dāng)我們要開(kāi)發(fā)一個(gè)新的付費(fèi)互動(dòng)功能,我們需要做數(shù)據(jù)預(yù)估:這個(gè)互動(dòng)功能放在這個(gè)位置,每天的曝光可能是多少?按照此頁(yè)面同樣位置的點(diǎn)擊轉(zhuǎn)化和其他功能的付費(fèi)轉(zhuǎn)化,能否預(yù)估這個(gè)新功能的收入?這個(gè)收入規(guī)模值得投入X天的開(kāi)發(fā)人力嗎?
如果這個(gè)需求的直接目標(biāo)不是收入,而是獲取更大用戶(hù)規(guī)模。我們也同樣用“等式”這個(gè)思考方式來(lái)去做數(shù)據(jù)估算,只是把“收入”理解為用戶(hù)量或其他目標(biāo)數(shù)值、而非金錢(qián)收入。
當(dāng)然,通過(guò)歷史數(shù)據(jù)估算收入是比較理想的情況。如果身處一個(gè)數(shù)據(jù)體系建設(shè)落后的企業(yè)中,我無(wú)法獲取足夠的數(shù)據(jù)支持,怎么辦呢?或者,這是一個(gè)絕對(duì)的革新體驗(yàn)(比如AI輔助內(nèi)容創(chuàng)作),我無(wú)法用過(guò)往的數(shù)據(jù)或經(jīng)驗(yàn)評(píng)估收入規(guī)模,怎么辦呢?
那么,至少解答“解決哪些用戶(hù)在什么場(chǎng)景下的什么問(wèn)題”,來(lái)看看這個(gè)需求的用戶(hù)場(chǎng)景覆蓋是否足夠廣;再權(quán)衡為了獲得這個(gè)新產(chǎn)品/新功能帶來(lái)的新體驗(yàn),用戶(hù)要投入哪些成本,以此做需求的排除法——跟創(chuàng)業(yè)一樣,做產(chǎn)品本身就存在了諸多不確定性,并非所有的決策都能通過(guò)公式去論證。
我們只能在有限條件下盡量選擇做正確的事,排除那些大概率不能成功的事。然后嘗試MVP,或直接交給市場(chǎng)和時(shí)間驗(yàn)證。
此外,如果設(shè)計(jì)師想作為初創(chuàng)成員加入新產(chǎn)品,還要跑通可持續(xù)的盈利模式。這里又是一大塊學(xué)問(wèn),比如了解這個(gè)企業(yè)做這件事的資源優(yōu)勢(shì)等等,本文作者的知識(shí)域和本文篇幅都有限,建議感興趣的朋友翻看商業(yè)分析相關(guān)書(shū)籍。但是新舊方案的用戶(hù)成本對(duì)比、收入公式的拆解,依然是重要且可行的商業(yè)價(jià)值視角。
 
3、優(yōu)先級(jí)
“優(yōu)先級(jí)”可以分為兩層理解,一層是產(chǎn)品需求之間的優(yōu)先級(jí)排序,另一層則是功能范圍層的優(yōu)先級(jí),也就是我們聊需求經(jīng)常會(huì)問(wèn)的問(wèn)題:我們明確了這個(gè)產(chǎn)品需求當(dāng)下就要啟動(dòng),但是當(dāng)前要做到什么程度呢?
前者,對(duì)比不同需求的產(chǎn)品價(jià)值大小,再結(jié)合開(kāi)發(fā)實(shí)現(xiàn)成本和耗時(shí)、是否需要追趕某個(gè)時(shí)間節(jié)點(diǎn)等,產(chǎn)品需求之間優(yōu)先級(jí)不難得出。而設(shè)計(jì)師更多要思考的是后者。
舉個(gè)例子:開(kāi)學(xué)季馬上要到了,產(chǎn)品經(jīng)理了解到學(xué)校有類(lèi)似“語(yǔ)文朗誦作業(yè)打卡”的作業(yè)打卡訴求。我們希望搶時(shí)間窗去滿(mǎn)足這個(gè)大規(guī)模的家校場(chǎng)景,即“如何最快地滿(mǎn)足每日/周重復(fù)的信息收集需求”?作業(yè)打卡場(chǎng)景可否延伸到其他打卡場(chǎng)景,不同的打卡有何共性或差異?
其中“最快”暗含的意思是“這個(gè)功能至少要做到什么程度才能滿(mǎn)足最核心的用戶(hù)需求”。這個(gè)時(shí)候,我們拉了一個(gè)表格,快速梳理不同用戶(hù)角色(比如區(qū)分“打卡創(chuàng)建者”和“參與打卡者”)的體驗(yàn)鏈路,再?zèng)Q策各個(gè)體驗(yàn)環(huán)節(jié)的功能復(fù)雜度要到哪里。
從全盤(pán)中抽取出體驗(yàn)閉環(huán)的最小集
從全盤(pán)中抽取出體驗(yàn)閉環(huán)的最小集
 
不要忽視商業(yè)競(jìng)爭(zhēng)中的時(shí)間差,因?yàn)閾屜日碱I(lǐng)市場(chǎng)的產(chǎn)品實(shí)際上是提升用戶(hù)遷移到競(jìng)爭(zhēng)對(duì)手的成本。過(guò)去我們提倡匠人精神,不放過(guò)每一個(gè)細(xì)節(jié)。而當(dāng)前激烈的市場(chǎng)競(jìng)爭(zhēng)環(huán)境下,“有的放矢”比“摳細(xì)節(jié)”更加重要。
 
小結(jié)
我們歸納一下需求分析的思路,多問(wèn)問(wèn)這些問(wèn)題:
設(shè)計(jì)師如何做產(chǎn)品需求分析:先聊聊兩個(gè)“價(jià)值”
 
 
需求分析是比較考驗(yàn)全局觀、邏輯性、數(shù)理分析和共情能力的。工作中可以通過(guò)拉表格、思維導(dǎo)圖、白板等工具梳理思路。如果你喜歡寫(xiě)文字,那就用寫(xiě)的方式。總之,切忌接到產(chǎn)品需求就動(dòng)手出界面方案。
最后,小作者想留一個(gè)開(kāi)放性問(wèn)題:“AI能替代人類(lèi)做產(chǎn)品需求分析嗎?”期待大家的評(píng)論區(qū)留言~
 

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

產(chǎn)品設(shè)計(jì)如何利用心理學(xué)

ui設(shè)計(jì)分享達(dá)人 設(shè)計(jì)思維

產(chǎn)品設(shè)計(jì)的成功除了依賴(lài)設(shè)計(jì)方案和技術(shù)實(shí)現(xiàn),還與用戶(hù)的心理密切相關(guān)。用戶(hù)心里決定了我們用怎樣的設(shè)計(jì)策略解決問(wèn)題。我們常認(rèn)為人們做決策時(shí)是理性的,但其實(shí)用戶(hù)行為經(jīng)常是非理性,會(huì)受到情緒、習(xí)慣和社交環(huán)境的影響。了解這些心理學(xué)規(guī)律能幫助我們更好地的預(yù)測(cè)和引導(dǎo)用戶(hù)行為,優(yōu)化產(chǎn)品體驗(yàn),提高用戶(hù)的粘性、留存率和轉(zhuǎn)化率,從而產(chǎn)品商業(yè)價(jià)值最大化。
產(chǎn)品設(shè)計(jì)如何利用心理學(xué)
 
 
產(chǎn)品設(shè)計(jì)如何利用心理學(xué)
 
 
產(chǎn)品設(shè)計(jì)如何利用心理學(xué)
 
 
產(chǎn)品設(shè)計(jì)如何利用心理學(xué)
 
 
產(chǎn)品設(shè)計(jì)如何利用心理學(xué)
 
 
產(chǎn)品設(shè)計(jì)如何利用心理學(xué)
 
 
產(chǎn)品設(shè)計(jì)如何利用心理學(xué)
 
 
產(chǎn)品設(shè)計(jì)如何利用心理學(xué)
 
 
產(chǎn)品設(shè)計(jì)如何利用心理學(xué)
 
 
產(chǎn)品設(shè)計(jì)如何利用心理學(xué)
 
 
產(chǎn)品設(shè)計(jì)如何利用心理學(xué)
 
 
產(chǎn)品設(shè)計(jì)如何利用心理學(xué)
 
 
產(chǎn)品設(shè)計(jì)如何利用心理學(xué)


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

蘭亭妙微(m.ibut.com.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

貨幣符號(hào)視覺(jué)設(shè)計(jì):體驗(yàn)、要素與趨勢(shì)

ui設(shè)計(jì)分享達(dá)人 設(shè)計(jì)思維

引言:貨幣符號(hào)在數(shù)字時(shí)代的設(shè)計(jì)挑戰(zhàn)
貨幣符號(hào)是金融界面設(shè)計(jì)中的核心元素之一,它不僅傳遞著貨幣信息,還承擔(dān)著用戶(hù)交互的關(guān)鍵角色。從電子支付到電商平臺(tái),從投資界面到全球化交易,不同的行業(yè)和應(yīng)用場(chǎng)景對(duì)貨幣符號(hào)的設(shè)計(jì)有著各自的需求和挑戰(zhàn)。本文將從設(shè)計(jì)的角度出發(fā),探討貨幣符號(hào)在不同行業(yè)中的應(yīng)用,分析其在功能性、可讀性與美觀性上的平衡,幫助設(shè)計(jì)師更好地應(yīng)對(duì)多樣化的設(shè)計(jì)需求。
 
一、
貨幣符號(hào):標(biāo)準(zhǔn)化與多樣性的平衡
1、平衡標(biāo)準(zhǔn)化與多樣性
國(guó)際標(biāo)準(zhǔn)化組織(ISO)為各國(guó)貨幣制定了統(tǒng)一的三位字母代碼和數(shù)字代碼,同時(shí)也規(guī)定了一些常見(jiàn)貨幣的符號(hào)表示方法。例如:人民幣的符號(hào)為“¥”,美元的符號(hào)為“$”,歐元的符號(hào)為“€”。
貨幣符號(hào)視覺(jué)設(shè)計(jì):體驗(yàn)、要素與趨勢(shì)
 
 
雖然標(biāo)準(zhǔn)化是貨幣符號(hào)設(shè)計(jì)的基礎(chǔ),但多樣性也是不可忽視的因素。不同國(guó)家和地區(qū)的文化、語(yǔ)言和歷史背景影響著貨幣符號(hào)的設(shè)計(jì)風(fēng)格和使用場(chǎng)景。例如,阿拉伯國(guó)家在貨幣符號(hào)上通常會(huì)使用不同的書(shū)寫(xiě)方向,而拉丁美洲的一些國(guó)家則可能采用略有不同的符號(hào)變體。
在貨幣符號(hào)設(shè)計(jì)中,平衡標(biāo)準(zhǔn)化與多樣性需要考慮功能性和用戶(hù)體驗(yàn)的結(jié)合。一方面,標(biāo)準(zhǔn)化確保了全球用戶(hù)的識(shí)別度和信任感;另一方面,多樣性則為不同文化背景下的用戶(hù)提供了更加個(gè)性化和貼近的體驗(yàn)。設(shè)計(jì)師在開(kāi)發(fā)全球產(chǎn)品時(shí),可以通過(guò)使用靈活的設(shè)計(jì)系統(tǒng),將標(biāo)準(zhǔn)化的貨幣符號(hào)與本地化元素相結(jié)合。
2、主要貨幣符號(hào)一覽
貨幣符號(hào)視覺(jué)設(shè)計(jì):體驗(yàn)、要素與趨勢(shì)
 
 
二、用戶(hù)體驗(yàn)中的貨幣符號(hào):認(rèn)知、引導(dǎo)與品牌塑造
貨幣符號(hào),在用戶(hù)體驗(yàn)設(shè)計(jì)中,不僅用于標(biāo)記金額,還在認(rèn)知、引導(dǎo)和品牌塑造中扮演重要角色。合理的符號(hào)設(shè)計(jì)可以提升用戶(hù)的識(shí)別速度,同時(shí)增強(qiáng)品牌的辨識(shí)度。
1、降低認(rèn)知負(fù)荷,貼近用戶(hù)習(xí)慣
常見(jiàn)的貨幣符號(hào)如 "¥"、"$"、"€" 等,因其頻繁使用而被用戶(hù)廣泛認(rèn)知,認(rèn)知負(fù)荷較低,能快速被識(shí)別和處理。相比之下,較少見(jiàn)的符號(hào)如 "?"(尼日利亞奈拉)或 "?"(哈薩克斯坦堅(jiān)戈)則可能增加用戶(hù)的認(rèn)知負(fù)擔(dān)。設(shè)計(jì)師應(yīng)優(yōu)先選擇用戶(hù)熟悉的符號(hào),并在界面設(shè)計(jì)中確保這些符號(hào)的清晰可見(jiàn),避免用戶(hù)因不熟悉而感到困惑。
貨幣符號(hào)視覺(jué)設(shè)計(jì):體驗(yàn)、要素與趨勢(shì)
 
 
2、視覺(jué)引導(dǎo)與用戶(hù)行為驅(qū)動(dòng)
貨幣符號(hào)的視覺(jué)呈現(xiàn)會(huì)直接影響用戶(hù)的注意力和交互行為。設(shè)計(jì)師通過(guò)調(diào)整符號(hào)的大小、顏色和位置,可以引導(dǎo)用戶(hù)聚焦關(guān)鍵信息,避免錯(cuò)誤操作。在支付或結(jié)賬頁(yè)面,突出顯示貨幣符號(hào)不僅能區(qū)分不同幣種,還能幫助用戶(hù)快速確認(rèn)金額,提升交互的安全感和效率。
貨幣符號(hào)視覺(jué)設(shè)計(jì):體驗(yàn)、要素與趨勢(shì)
 
 
3、品牌塑造中的符號(hào)一致性
貨幣符號(hào)在品牌塑造中也有著潛在的影響力。通過(guò)統(tǒng)一的字體選擇、配色方案和視覺(jué)風(fēng)格,設(shè)計(jì)師可以將貨幣符號(hào)與品牌整體形象融為一體,增強(qiáng)品牌的一致性和專(zhuān)業(yè)性。特別是在全球化背景下,不同貨幣符號(hào)的統(tǒng)一設(shè)計(jì)能夠提高品牌的全球辨識(shí)度,強(qiáng)化用戶(hù)對(duì)品牌的信任與依賴(lài)。
貨幣符號(hào)視覺(jué)設(shè)計(jì):體驗(yàn)、要素與趨勢(shì)
 
 
三、貨幣符號(hào)的視覺(jué)設(shè)計(jì)要素:從位置到配色
貨幣符號(hào)作為金融界面中的核心元素,其視覺(jué)設(shè)計(jì)不僅關(guān)系到符號(hào)的選擇,還涉及布局、字體、大小、顏色等多個(gè)方面。通過(guò)優(yōu)化這些視覺(jué)要素,設(shè)計(jì)師可以提高貨幣符號(hào)的易讀性與信息傳達(dá)的效率。以下是幾個(gè)關(guān)鍵的設(shè)計(jì)要素:
1、
位置與間距:緊密關(guān)聯(lián),確保閱讀流暢
符號(hào)前置:
在大多數(shù)文化和書(shū)寫(xiě)規(guī)范中,貨幣符號(hào)通常放置在金額數(shù)字的前方,如"¥100"、"$50"。這種布局方式符合用戶(hù)的認(rèn)知習(xí)慣,使得貨幣種類(lèi)一目了然。
貨幣符號(hào)視覺(jué)設(shè)計(jì):體驗(yàn)、要素與趨勢(shì)
 
 
間距適中:
貨幣符號(hào)與數(shù)字之間需要保持合適的間距,避免過(guò)于緊湊或分散。最佳間距通常在幾個(gè)像素之間,并在響應(yīng)式設(shè)計(jì)中根據(jù)屏幕大小進(jìn)行調(diào)整,確保不同設(shè)備上的閱讀體驗(yàn)流暢。
貨幣符號(hào)視覺(jué)設(shè)計(jì):體驗(yàn)、要素與趨勢(shì)
 
 
2、
字體選擇:兼顧一致性與可讀性
無(wú)襯線(xiàn)字體:
無(wú)襯線(xiàn)字體具有簡(jiǎn)潔、現(xiàn)代的特質(zhì),且可讀性強(qiáng),適用于屏幕和印刷。將貨幣符號(hào)與無(wú)襯線(xiàn)字體搭配能保持信息清晰度,尤其適合需要快速讀取價(jià)格的金融界面。
貨幣符號(hào)視覺(jué)設(shè)計(jì):體驗(yàn)、要素與趨勢(shì)
 
 
等寬字體:
在需要對(duì)齊的文本中,等寬字體能確保貨幣符號(hào)和數(shù)字排列整齊,提升信息的可讀性和對(duì)比性,使用戶(hù)更容易比較數(shù)據(jù)。
貨幣符號(hào)視覺(jué)設(shè)計(jì):體驗(yàn)、要素與趨勢(shì)
 
 
3、大小與比例:突出層次感
貨幣符號(hào)通常設(shè)計(jì)得略小于數(shù)字部分,以確保視覺(jué)上的平衡感。如果符號(hào)過(guò)大,可能喧賓奪主,削弱數(shù)字的關(guān)注度;過(guò)小則容易被忽略。根據(jù)不同應(yīng)用場(chǎng)景,設(shè)計(jì)師可靈活調(diào)整貨幣符號(hào)和數(shù)字的大小比例,特別是在促銷(xiāo)或價(jià)格展示中,符號(hào)和數(shù)字可以接近,以突出價(jià)格信息。
貨幣符號(hào)視覺(jué)設(shè)計(jì):體驗(yàn)、要素與趨勢(shì)
 
 
4、
顏色搭配:強(qiáng)調(diào)對(duì)比與和諧
突出重點(diǎn)
:設(shè)計(jì)師可以通過(guò)顏色來(lái)強(qiáng)調(diào)貨幣符號(hào),尤其是在電商或支付界面中,使用如紅色等醒目的顏色吸引用戶(hù)注意。然而,應(yīng)避免過(guò)多的顏色切換,以防止混亂或干擾用戶(hù)體驗(yàn)。
貨幣符號(hào)視覺(jué)設(shè)計(jì):體驗(yàn)、要素與趨勢(shì)
 
 
保持協(xié)調(diào)
:貨幣符號(hào)的顏色應(yīng)與界面整體配色保持一致,避免沖突。一般建議采用與文本顏色相近或具有適度對(duì)比的顏色,以保持界面和諧,避免過(guò)度突兀。
貨幣符號(hào)視覺(jué)設(shè)計(jì):體驗(yàn)、要素與趨勢(shì)
 
 
5、
元素搭配:增強(qiáng)視覺(jué)引導(dǎo)
與按鈕搭配
:在支付或結(jié)算等功能按鈕上增加貨幣符號(hào),能夠強(qiáng)化操作的貨幣屬性。例如,在"支付"按鈕上加入貨幣符號(hào),能夠清晰傳達(dá)該操作與付款相關(guān)。
貨幣符號(hào)視覺(jué)設(shè)計(jì):體驗(yàn)、要素與趨勢(shì)
 
 
與其他元素搭配:
貨幣符號(hào)也可以與錢(qián)包等金融圖標(biāo)結(jié)合使用,增強(qiáng)表意性。設(shè)計(jì)時(shí)應(yīng)注意符號(hào)與圖標(biāo)風(fēng)格的統(tǒng)一性,以保持整體設(shè)計(jì)的視覺(jué)一致性。
貨幣符號(hào)視覺(jué)設(shè)計(jì):體驗(yàn)、要素與趨勢(shì)
 
 
6、對(duì)齊方式:確保界面整齊有序
貨幣符號(hào)與數(shù)字的對(duì)齊方式也是影響視覺(jué)效果的關(guān)鍵因素。左對(duì)齊、右對(duì)齊或居中對(duì)齊各有優(yōu)劣,具體選擇應(yīng)根據(jù)界面的整體布局而定。一般來(lái)說(shuō),左對(duì)齊適用于文本較多的界面,右對(duì)齊則更適合數(shù)字和金額為主的界面,有助于保持?jǐn)?shù)值列的整齊性,從而提升界面信息的易讀性。
右對(duì)齊
:在涉及金額顯示的界面中,貨幣符號(hào)通常與數(shù)字右對(duì)齊,這種方式可以確保金額列表整齊排列,提升界面的易讀性。
貨幣符號(hào)視覺(jué)設(shè)計(jì):體驗(yàn)、要素與趨勢(shì)
 
 
元素對(duì)齊
:貨幣符號(hào)應(yīng)與其他界面元素,如標(biāo)簽、按鈕等保持一致的對(duì)齊方式。例如,在價(jià)格標(biāo)簽旁邊的按鈕上,符號(hào)的位置應(yīng)與按鈕對(duì)齊,避免視覺(jué)上的不協(xié)調(diào)。
貨幣符號(hào)視覺(jué)設(shè)計(jì):體驗(yàn)、要素與趨勢(shì)
 
 
通過(guò)合理地設(shè)計(jì)貨幣符號(hào)的布局、字體、顏色和對(duì)齊方式,設(shè)計(jì)師可以有效提升界面中的視覺(jué)層次感和信息傳達(dá)效率。在實(shí)際應(yīng)用中,這些視覺(jué)要素必須根據(jù)用戶(hù)需求和場(chǎng)景變化做出精細(xì)調(diào)整,從而優(yōu)化用戶(hù)體驗(yàn)。
 
四、行業(yè)視角下的貨幣符號(hào)設(shè)計(jì):多場(chǎng)景應(yīng)用
在金融和電商等不同行業(yè)中,貨幣符號(hào)的設(shè)計(jì)不僅需要滿(mǎn)足基礎(chǔ)的可讀性和美觀性,還需要根據(jù)不同的場(chǎng)景進(jìn)行靈活調(diào)整。
1、電子支付與移動(dòng)支付場(chǎng)景
在移動(dòng)支付的界面中,貨幣符號(hào)的設(shè)計(jì)必須簡(jiǎn)單明確,能夠讓用戶(hù)在瞬間識(shí)別金額,確保交易順暢。由于移動(dòng)設(shè)備屏幕有限,設(shè)計(jì)上應(yīng)注重符號(hào)的簡(jiǎn)潔性與高對(duì)比度,確保在小尺寸屏幕上仍然具備良好的可見(jiàn)性和清晰度。例如,在支付寶或微信支付中,貨幣符號(hào)通常與金額保持較為緊密的視覺(jué)聯(lián)系,以確保用戶(hù)不會(huì)混淆支付金額。
貨幣符號(hào)視覺(jué)設(shè)計(jì):體驗(yàn)、要素與趨勢(shì)
 
 
2、投資與股票交易界面
投資和股票交易平臺(tái)往往展示大量的數(shù)字?jǐn)?shù)據(jù),界面密度高。為了確保用戶(hù)能夠快速處理信息,貨幣符號(hào)必須足夠醒目但不喧賓奪主。在這種場(chǎng)景下,字體選擇尤為關(guān)鍵,符號(hào)應(yīng)與數(shù)字保持一致的風(fēng)格和比例,避免視覺(jué)干擾。同時(shí),色彩的應(yīng)用也需要足夠謹(jǐn)慎,以紅綠等傳統(tǒng)的漲跌配色為主,貨幣符號(hào)應(yīng)保持中性色調(diào),確保與其他視覺(jué)元素相協(xié)調(diào)。
貨幣符號(hào)視覺(jué)設(shè)計(jì):體驗(yàn)、要素與趨勢(shì)
 
 
3、電商與零售平臺(tái)
在電商平臺(tái)上,定價(jià)信息是用戶(hù)決策的重要因素,貨幣符號(hào)的設(shè)計(jì)需要既突出價(jià)格信息,又不顯得過(guò)于突兀。設(shè)計(jì)師可以根據(jù)不同的定價(jià)策略,調(diào)整符號(hào)的位置、大小和顏色。比如,在促銷(xiāo)場(chǎng)景下,貨幣符號(hào)與金額常常會(huì)被設(shè)計(jì)得更大、更顯眼,以吸引用戶(hù)注意力;而在常規(guī)商品頁(yè)面,符號(hào)則更為簡(jiǎn)約,以便用戶(hù)迅速瀏覽多款商品。
貨幣符號(hào)視覺(jué)設(shè)計(jì):體驗(yàn)、要素與趨勢(shì)
 
 
五、未來(lái)展望:數(shù)字貨幣時(shí)代的符號(hào)設(shè)計(jì)趨勢(shì)
隨著數(shù)字貨幣的興起,貨幣符號(hào)設(shè)計(jì)正面臨新的挑戰(zhàn)與機(jī)遇。在未來(lái),貨幣符號(hào)的設(shè)計(jì)不再局限于傳統(tǒng)的紙幣和硬幣表達(dá)方式,而是逐步進(jìn)入更為抽象的數(shù)字化范疇。
1、多貨幣共存:增強(qiáng)識(shí)別性
未來(lái)的金融體系將可能出現(xiàn)多種不同形式的貨幣同時(shí)存在,如法定數(shù)字貨幣、加密貨幣等。在這種環(huán)境下,貨幣符號(hào)需要具有更強(qiáng)的辨識(shí)性,以幫助用戶(hù)快速區(qū)分不同類(lèi)型的貨幣。例如,比特幣(?)、以太坊(Ξ)等加密貨幣的符號(hào)設(shè)計(jì),已經(jīng)有別于傳統(tǒng)貨幣符號(hào)。未來(lái),設(shè)計(jì)師可能需要?jiǎng)?chuàng)造更多具有獨(dú)特視覺(jué)特征的符號(hào),以適應(yīng)多元貨幣并存的需求,同時(shí)保證用戶(hù)能在復(fù)雜的金融界面中迅速識(shí)別出各類(lèi)貨幣。
貨幣符號(hào)視覺(jué)設(shè)計(jì):體驗(yàn)、要素與趨勢(shì)
 
 
2、動(dòng)態(tài)設(shè)計(jì):適應(yīng)不同設(shè)備與場(chǎng)景
隨著金融交易場(chǎng)景的日益多樣化,貨幣符號(hào)的設(shè)計(jì)可能不再是靜態(tài)的。未來(lái),數(shù)字貨幣符號(hào)或許會(huì)以動(dòng)態(tài)、互動(dòng)的形式呈現(xiàn),以適應(yīng)不同設(shè)備屏幕和使用場(chǎng)景。例如,在智能手表、增強(qiáng)現(xiàn)實(shí)設(shè)備或虛擬現(xiàn)實(shí)場(chǎng)景中,貨幣符號(hào)可能根據(jù)界面需求進(jìn)行實(shí)時(shí)調(diào)整。這種動(dòng)態(tài)設(shè)計(jì)可以確保符號(hào)在不同大小、不同分辨率的屏幕上保持一致的辨識(shí)度和清晰度。
貨幣符號(hào)視覺(jué)設(shè)計(jì):體驗(yàn)、要素與趨勢(shì)
 
 
3、統(tǒng)一標(biāo)準(zhǔn)與全球化適應(yīng)
數(shù)字貨幣的全球化使用趨勢(shì)意味著符號(hào)設(shè)計(jì)必須具有全球通用性和跨文化適應(yīng)能力。隨著跨國(guó)交易的頻繁,設(shè)計(jì)師需要考慮不同地區(qū)用戶(hù)的文化背景和語(yǔ)言習(xí)慣,確保貨幣符號(hào)在全球范圍內(nèi)都能被廣泛接受和理解。這可能需要一個(gè)統(tǒng)一的標(biāo)準(zhǔn),類(lèi)似于現(xiàn)有的ISO貨幣代碼標(biāo)準(zhǔn)(如USD、EUR),為數(shù)字貨幣符號(hào)設(shè)計(jì)提供指導(dǎo)。未來(lái),全球化標(biāo)準(zhǔn)可能不僅限于編碼,還會(huì)擴(kuò)展到視覺(jué)符號(hào)設(shè)計(jì)領(lǐng)域。
貨幣符號(hào)視覺(jué)設(shè)計(jì):體驗(yàn)、要素與趨勢(shì)
 
 
4、安全性與可信度的視覺(jué)傳達(dá)
數(shù)字貨幣與傳統(tǒng)貨幣最大的不同在于其依賴(lài)于虛擬網(wǎng)絡(luò)進(jìn)行交易,這使得安全性成為用戶(hù)最關(guān)心的問(wèn)題之一。未來(lái)的貨幣符號(hào)設(shè)計(jì)將不僅僅是傳達(dá)貨幣的價(jià)值,還需要在視覺(jué)上表達(dá)出交易的安全性與可信度。通過(guò)更直觀的視覺(jué)設(shè)計(jì),用戶(hù)可以一眼判斷出該交易是否安全可信。例如,未來(lái)的貨幣符號(hào)可能會(huì)融入更多與安全、認(rèn)證相關(guān)的視覺(jué)提示或反饋機(jī)制,幫助用戶(hù)在數(shù)字化環(huán)境中建立信任。
貨幣符號(hào)視覺(jué)設(shè)計(jì):體驗(yàn)、要素與趨勢(shì)
 
 
結(jié)語(yǔ)
隨著數(shù)字化的迅速發(fā)展,貨幣符號(hào)設(shè)計(jì)面臨新的挑戰(zhàn)與機(jī)遇,不僅要在標(biāo)準(zhǔn)化和多樣化之間找到平衡,還要通過(guò)合理的視覺(jué)設(shè)計(jì),提升符號(hào)在不同場(chǎng)景中的適應(yīng)性和可識(shí)別性。無(wú)論是在電子支付、投資交易,還是電商平臺(tái)上,精致的貨幣符號(hào)設(shè)計(jì)不僅能優(yōu)化用戶(hù)體驗(yàn),還能強(qiáng)化品牌形象,提升用戶(hù)信任。
展望未來(lái),隨著數(shù)字貨幣的普及和全球化的推進(jìn),貨幣符號(hào)的設(shè)計(jì)將更加注重多樣化與安全性。設(shè)計(jì)需要不斷適應(yīng)變化的技術(shù)和用戶(hù)需求,推動(dòng)貨幣符號(hào)在不同設(shè)備和文化背景下的統(tǒng)一性與普遍適用性。


作者:西子小宇宙
鏈接:https://www.zcool.com.cn/article/ZMTYzOTAyNA==.html
來(lái)源:站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。

蘭亭妙微(m.ibut.com.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è)設(shè)計(jì)思考選擇

ui設(shè)計(jì)分享達(dá)人 設(shè)計(jì)思維

這些設(shè)計(jì)選擇題你會(huì)怎么做?
 
 
 
 
一、你更傾向于哪個(gè)設(shè)計(jì)布局?
 
思考方向:1、從業(yè)務(wù)屬性的角度思考布局結(jié)構(gòu);2、從創(chuàng)建內(nèi)容量來(lái)思考;3、通過(guò)添加交互切換來(lái)自定義結(jié)構(gòu)布局等。
這些設(shè)計(jì)選擇題你會(huì)怎么做?
 
 
 
 
二、你更喜歡哪個(gè)設(shè)計(jì)方案?
 
思考方向:1、金剛區(qū)功能的重要性和是否存在主次關(guān)系來(lái)思考;2、Banner 設(shè)計(jì)的獨(dú)立性和沉浸感方面思考;3、界面設(shè)計(jì)視覺(jué)張力層面的思考等。
這些設(shè)計(jì)選擇題你會(huì)怎么做?
 
 
 
 
三、你會(huì)選擇哪種設(shè)計(jì)效果?
 
思考方向:1、是否需要添加背景圖或者背景色;2、視覺(jué)效果帶來(lái)的沉浸感層面思考;3、突出界面上層還是下層內(nèi)容方向來(lái)思考;4、卡片式效果的選擇角度等。
這些設(shè)計(jì)選擇題你會(huì)怎么做?
 
 
 
 
四、你覺(jué)得哪種交互體驗(yàn)更好?
 
思考方向:1、全部篩選條件的權(quán)重和是否存在主推條件;2、用戶(hù)對(duì)進(jìn)一步篩選條件的需求度;3、篩選條件的數(shù)量等角度思考。
這些設(shè)計(jì)選擇題你會(huì)怎么做?
 
 
 
 
五、你覺(jué)得哪種布局方案更合理?
 
思考方向:1、熟人社區(qū)還是陌生人社區(qū)方面思考;2、突出內(nèi)容還是突出發(fā)布者;3、圖片的重要性和圖片數(shù)量等方面思考。
這些設(shè)計(jì)選擇題你會(huì)怎么做?
 
 
 
 
六、你覺(jué)得哪種視覺(jué)感官度更好?
 
思考方向:1、品牌色的突出程度;2、信息之間的對(duì)比度強(qiáng)度大小來(lái)思考;3、整體界面的視覺(jué)焦點(diǎn)突出位置等思考。
這些設(shè)計(jì)選擇題你會(huì)怎么做?
 
 
 
 
七、你更傾向于哪種展示模式?
 
思考方向:1、產(chǎn)品和內(nèi)容屬性等方面思考;2、內(nèi)容的動(dòng)靜屬性層面思考;3、信息分發(fā)突出篩選邏輯還是推薦邏輯等。
這些設(shè)計(jì)選擇題你會(huì)怎么做?
 
 
 
 
八、瀏覽文章時(shí)需要顯示標(biāo)題嗎?
 
思考方向:1、結(jié)合大部分標(biāo)題的字?jǐn)?shù)分析;2、標(biāo)題對(duì)文章內(nèi)容的干擾度層面思考;3、標(biāo)題和文章內(nèi)容的關(guān)聯(lián)程度等。
這些設(shè)計(jì)選擇題你會(huì)怎么做?
 
 
 
 
九、哪種設(shè)計(jì)布局體驗(yàn)度更好?
 
思考方向:1、強(qiáng)化品牌的程度和品牌量等角度綜合分析;2、推薦信息的密度與上下結(jié)構(gòu)的差異性等方面思考;3、視覺(jué)張力與強(qiáng)化欄目的焦點(diǎn)選擇角度等思考:4、布局結(jié)構(gòu)是否過(guò)度自然等。
這些設(shè)計(jì)選擇題你會(huì)怎么做?
 
 
 
 
十、這兩個(gè)設(shè)計(jì)方案你會(huì)怎么選?
 
思考方向:1、圖片的孤立性和沉浸感等角度分析;2、空間感和信息層級(jí)感等角度思考;3、界面設(shè)計(jì)感官的整體性思考;4、局部功能的關(guān)聯(lián)性等分析。
這些設(shè)計(jì)選擇題你會(huì)怎么做?
 
 
 
 
小結(jié)
 
通過(guò)這些案例設(shè)計(jì)的對(duì)比,可以訓(xùn)練我們多方面的思考和分析能力,從不同角度思考設(shè)計(jì)方案的合理性。希望本欄目可以帶給大家更多思考,案例與觀點(diǎn)屬于個(gè)人理解,不足之處歡迎大家留言指正。
這些設(shè)計(jì)選擇題你會(huì)怎么做?
 

作者:黑馬青年
鏈接:https://www.zcool.com.cn/article/ZMTY0ODQ3Ng==.html
來(lái)源:站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。
這些B端交互案例,你就偷著學(xué)吧

信息架構(gòu)優(yōu)化 | 如何設(shè)計(jì)產(chǎn)品中的列表項(xiàng)?

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

本次關(guān)于“列表項(xiàng)”的規(guī)范化設(shè)計(jì)是在整個(gè)產(chǎn)品 信息架構(gòu)優(yōu)化 (Information Architecture Optimization) 背景下進(jìn)行的。把列表項(xiàng)做得更具通用性,從開(kāi)發(fā)的角度,能更好地完成項(xiàng)目落地,以及降低后期維護(hù)的成本。從用戶(hù)的角度,產(chǎn)品交互的一致性能讓用戶(hù)快速熟悉產(chǎn)品,從而提升產(chǎn)品的 易用性。

UI設(shè)計(jì)中的信息層級(jí)設(shè)計(jì)的重要性

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

在設(shè)計(jì)中,我們通常會(huì)用到很多設(shè)計(jì)法則,而對(duì)于這些法則的由來(lái)總是一知半解。這次我整理了這些法則的概念和一些簡(jiǎn)單的運(yùn)用。設(shè)計(jì)法則來(lái)源于生活又運(yùn)用于生活~

如何設(shè)計(jì)讓人一看就明白的說(shuō)明書(shū)?

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

你有一些東西需要向別人說(shuō)明或解釋?zhuān)坎灰f(shuō)出來(lái),而是展現(xiàn)出來(lái)!

掌握尼爾森十大可用性原則,從小白快速進(jìn)階產(chǎn)品大神!

ui設(shè)計(jì)分享達(dá)人

 
無(wú)論是剛剛?cè)胄械男“祝€是已經(jīng)積累了一定經(jīng)驗(yàn)的產(chǎn)品經(jīng)理,都有一個(gè)共識(shí):用戶(hù)體驗(yàn)是產(chǎn)品成功的關(guān)鍵。而說(shuō)到用戶(hù)體驗(yàn),就不得不提尼爾森十大可用性原則,這些原則為產(chǎn)品設(shè)計(jì)提供了清晰的方向和實(shí)用的方法,讓產(chǎn)品的用戶(hù)滿(mǎn)意度直接拉滿(mǎn)!
本文將帶你系統(tǒng)了解尼爾森十大可用性原則,并通過(guò)實(shí)際案例幫你真正掌握它。無(wú)論是優(yōu)化現(xiàn)有產(chǎn)品,還是構(gòu)思新的創(chuàng)意,這些原則都能助你少走彎路,快速掌握可用性設(shè)計(jì)的精髓,真正向“產(chǎn)品大神”邁進(jìn)!
 
1、系統(tǒng)可見(jiàn)性原則
用戶(hù)在與產(chǎn)品交互時(shí),必須隨時(shí)“可見(jiàn)”當(dāng)前的系統(tǒng)狀態(tài),這種狀態(tài)反饋可以通過(guò)視覺(jué)、聲音或其他形式呈現(xiàn),確保用戶(hù)對(duì)操作的結(jié)果心中有數(shù)。
簡(jiǎn)單說(shuō),就是產(chǎn)品得隨時(shí)告訴你 “我在干嘛”。
比如,你點(diǎn)了個(gè)下載視頻按鈕,要是幾秒鐘內(nèi)卻沒(méi)有任何響應(yīng),你肯定會(huì)著急,覺(jué)得是不是點(diǎn)了沒(méi)反應(yīng)?但如果它顯示下載進(jìn)度條,或者給個(gè)簡(jiǎn)單的“加載中”提示,你心里就踏實(shí)多了。
再比如,逛淘寶時(shí),點(diǎn)擊“提交訂單”后,頁(yè)面會(huì)立即彈出“訂單提交成功”的確認(rèn)信息,同時(shí)附帶訂單編號(hào)和預(yù)計(jì)送達(dá)時(shí)間。這不僅明確了用戶(hù)的操作成功,還通過(guò)下一步指引(如“查看訂單詳情”或“返回首頁(yè)”)引導(dǎo)用戶(hù)繼續(xù)操作。
以上這些設(shè)計(jì)細(xì)節(jié),都屬于系統(tǒng)可見(jiàn)性原則,別小看這點(diǎn),它能大大提升用戶(hù)體驗(yàn)!如果產(chǎn)品不及時(shí)把信息呈現(xiàn)給用戶(hù),用戶(hù)就像在黑暗中摸索,容易煩躁甚至放棄使用。所以,好的產(chǎn)品都得把這個(gè)原則拿捏到位。
掌握尼爾森十大可用性原則,從小白快速進(jìn)階產(chǎn)品大神!
 
 
 
2、貼近場(chǎng)景原則
該原則強(qiáng)調(diào)設(shè)計(jì)得貼近用戶(hù)熟悉的場(chǎng)景,包括使用用戶(hù)常用的語(yǔ)言、概念和邏輯,而不是讓人費(fèi)解的專(zhuān)業(yè)術(shù)語(yǔ)、抽象設(shè)計(jì)。這樣,用戶(hù)可以自然地理解系統(tǒng)功能,而無(wú)需額外的學(xué)習(xí)成本。
一個(gè)典型例子是“文件夾”的設(shè)計(jì),大多數(shù)操作系統(tǒng)和產(chǎn)品會(huì)以真實(shí)辦公環(huán)境中的文件夾為原型,用直觀的圖標(biāo)告訴用戶(hù)這是做什么的,讓用戶(hù)輕松上手使用。如果改用抽象符號(hào)代替文件夾的圖標(biāo),用戶(hù)可能需要額外的時(shí)間去學(xué)習(xí)和適應(yīng),甚至?xí)械矫曰蟆?/span>
此外,現(xiàn)實(shí)世界的流程也可以被巧妙地運(yùn)用到產(chǎn)品設(shè)計(jì)中。拿在線(xiàn)支付舉個(gè)例子,許多平臺(tái)會(huì)模擬現(xiàn)實(shí)中的結(jié)賬體驗(yàn):將商品“添加到購(gòu)物車(chē)”,然后進(jìn)入“結(jié)賬”頁(yè)面,再完成付款。這非常符合線(xiàn)下購(gòu)物的習(xí)慣,用戶(hù)可以快速上手完成操作。
總之,產(chǎn)品設(shè)計(jì)要盡可能地降低用戶(hù)理解和操作的門(mén)檻,這樣不僅能更好地契合用戶(hù)的需求,還能讓產(chǎn)品的實(shí)用性和易用性蹭蹭往上漲!
掌握尼爾森十大可用性原則,從小白快速進(jìn)階產(chǎn)品大神!
 
 
這里推薦一個(gè)原型模板社區(qū):
https://www.mockplus.cn/example/rp
,不僅涵蓋了各個(gè)領(lǐng)域的精美模板,還有熱門(mén)產(chǎn)品的實(shí)際案例。這些模板案例都很好地運(yùn)用了尼爾森的可用性原則,交互完善、體驗(yàn)流暢,非常值得產(chǎn)品經(jīng)理和設(shè)計(jì)師借鑒~
 
3、
可控性原則
用戶(hù)必須要隨時(shí)掌控自己的操作,如果不小心點(diǎn)錯(cuò)了,要能輕松撤銷(xiāo),給人一種“無(wú)論做錯(cuò)了什么,都能改回來(lái)”的安全感。
比如,你正在編輯一份文檔,不小心刪掉了一段關(guān)鍵內(nèi)容,如果系統(tǒng)沒(méi)有“撤銷(xiāo)”功能,直接就會(huì)崩潰。這也是大多數(shù)編輯工具都會(huì)在顯眼的地方放一個(gè)“撤銷(xiāo)”按鈕,或者提供快捷鍵組合,幫用戶(hù)一鍵恢復(fù)誤操作。這就是可控性原則的典型應(yīng)用。
再比如,購(gòu)物網(wǎng)站的“清空購(gòu)物車(chē)”按鈕,往往會(huì)在你點(diǎn)擊后彈出確認(rèn)框:“你確定要清空購(gòu)物車(chē)嗎?注意操作不可撤銷(xiāo)!”雖然只是多一步確認(rèn),卻極大地降低了誤刪的風(fēng)險(xiǎn)。
簡(jiǎn)單說(shuō),這條原則的精髓在于讓用戶(hù)始終覺(jué)得是自己說(shuō)了算。無(wú)論是提供撤銷(xiāo)功能、設(shè)置確認(rèn)提示,還是簡(jiǎn)化退出流程等,都能減少用戶(hù)的焦慮感,提升產(chǎn)品的使用體驗(yàn)。
 
4、一致性與
標(biāo)準(zhǔn)化
原則
產(chǎn)品設(shè)計(jì)必須保持所有界面的一致性,讓用戶(hù)在使用時(shí)不會(huì)被不同的風(fēng)格、術(shù)語(yǔ)或功能邏輯搞得一頭霧水,最好讓用戶(hù)“見(jiàn)過(guò)一次就會(huì)用”,而不是每次都得重新學(xué)習(xí)。
像現(xiàn)在很多產(chǎn)品通常會(huì)將“返回”按鈕固定在左上角,如果某個(gè)頁(yè)面的“返回”按鈕突然出現(xiàn)在右上角,用戶(hù)的第一反應(yīng)可能就是:咦,這個(gè)怎么跟別的頁(yè)面不一樣?這種不一致就會(huì)讓用戶(hù)操作不便。
還有一種常見(jiàn)場(chǎng)景是網(wǎng)站或APP的術(shù)語(yǔ)使用,保持統(tǒng)一的語(yǔ)言和表述,可以顯著降低用戶(hù)的理解成本,讓產(chǎn)品更直觀。
總的來(lái)說(shuō),一致性與標(biāo)準(zhǔn)化原則就像用戶(hù)體驗(yàn)中的“基本法”,讓產(chǎn)品變得更簡(jiǎn)單易用。遵循這個(gè)原則,用戶(hù)可以“少想一點(diǎn)”,快速上手。而違背它,則容易讓人摸不著頭腦,甚至放棄使用產(chǎn)品。
掌握尼爾森十大可用性原則,從小白快速進(jìn)階產(chǎn)品大神!
 
 
 
5、
防錯(cuò)原則
好的產(chǎn)品從不讓用戶(hù)為“操作失誤”買(mǎi)單,而是用細(xì)致的設(shè)計(jì)提前為用戶(hù)保駕護(hù)航。在設(shè)計(jì)中,我們應(yīng)盡可能減少用戶(hù)犯錯(cuò)的機(jī)會(huì),或者在錯(cuò)誤發(fā)生前提供明確的警示。
說(shuō)白了,就是“防患于未然”,讓用戶(hù)操作得更順暢、更安心。
比如,表單設(shè)計(jì)中,很多時(shí)候用戶(hù)可能會(huì)漏填信息或者格式不正確。如果沒(méi)有即時(shí)提示,用戶(hù)提交后才發(fā)現(xiàn)錯(cuò)誤,不僅浪費(fèi)時(shí)間,還會(huì)覺(jué)得體驗(yàn)很糟。而一個(gè)實(shí)時(shí)的提示功能就能完美解決這個(gè)問(wèn)題,當(dāng)用戶(hù)填寫(xiě)郵箱時(shí),如果格式不對(duì),系統(tǒng)立刻彈出“郵箱格式有誤”,這種設(shè)計(jì)就既貼心,又能幫助用戶(hù)快速完成任務(wù)。
還有一種場(chǎng)景是刪除操作,用戶(hù)點(diǎn)擊“刪除”按鈕時(shí),會(huì)彈出一個(gè)確認(rèn)框,“您確定要?jiǎng)h除嗎?此操作無(wú)法撤銷(xiāo)。”雖然只是簡(jiǎn)單的一步確認(rèn),但卻能有效避免用戶(hù)因誤操作而造成的損失。這種設(shè)計(jì),不僅讓用戶(hù)更有安全感,也提升了產(chǎn)品的可靠性。
總之,防止錯(cuò)誤原則的關(guān)鍵在于站在用戶(hù)角度思考,提前預(yù)見(jiàn)可能出錯(cuò)的地方,并通過(guò)智能設(shè)計(jì)減少或避免錯(cuò)誤的發(fā)生。
 
6、
協(xié)助記憶原則
產(chǎn)品設(shè)計(jì)應(yīng)盡量減少用戶(hù)需要記住的信息,而是通過(guò)界面或功能的設(shè)計(jì),讓用戶(hù)“看一眼就明白”,更容易找到所需信息。
就像瀏覽器的歷史記錄功能,用戶(hù)想要回到之前訪(fǎng)問(wèn)過(guò)的網(wǎng)頁(yè),如果需要憑記憶輸入網(wǎng)址,那對(duì)大多數(shù)人來(lái)說(shuō)無(wú)疑是個(gè)挑戰(zhàn)。而通過(guò)查看歷史記錄,用戶(hù)只需簡(jiǎn)單點(diǎn)擊即可回到目標(biāo)頁(yè)面。
再比如,電商網(wǎng)站的分類(lèi)導(dǎo)航,用戶(hù)進(jìn)入頁(yè)面后,可以清晰地看到“男裝”“女裝”“數(shù)碼”“家電”等分類(lèi)標(biāo)簽,無(wú)需花費(fèi)更多時(shí)間查找。
歸根結(jié)底,協(xié)助記憶原則的目是減輕用戶(hù)的心理負(fù)擔(dān),讓他們高效完成交互,同時(shí)還能感覺(jué)“操作很輕松”。
掌握尼爾森十大可用性原則,從小白快速進(jìn)階產(chǎn)品大神!
 
 
 
7、
靈活高效原則
產(chǎn)品設(shè)計(jì)應(yīng)同時(shí)滿(mǎn)足新手和老用戶(hù)的需求,就是讓新手易上手,讓高手更省時(shí),讓不同層次的用戶(hù)都能靈活高效地達(dá)成目標(biāo)。
就像手機(jī)攝影APP的“自動(dòng)模式”和“專(zhuān)業(yè)模式”,對(duì)于普通用戶(hù),直接使用“自動(dòng)模式”拍照就能獲得不錯(cuò)的效果。而對(duì)于攝影愛(ài)好者,產(chǎn)品還提供了“專(zhuān)業(yè)模式”,允許他們調(diào)整快門(mén)速度、光圈大小、ISO等參數(shù)。這種靈活性不僅滿(mǎn)足了不同用戶(hù)的需求,還提升了產(chǎn)品的適用性和用戶(hù)黏性。
靈活高效原則的核心在于給用戶(hù)選擇權(quán),因?yàn)橐粋€(gè)好產(chǎn)品,就是讓每個(gè)人都能找到最適合自己的使用方式。
 
8、
審美和簡(jiǎn)約設(shè)計(jì)原則
設(shè)計(jì)既要美觀,又要簡(jiǎn)潔,避免堆砌不必要的元素。復(fù)雜冗余的設(shè)計(jì)不僅影響視覺(jué)體驗(yàn),還可能讓用戶(hù)分心,甚至阻礙他們完成任務(wù)。而簡(jiǎn)約的設(shè)計(jì)則能直擊用戶(hù)需求,讓界面既賞心悅目又高效實(shí)用。
蘋(píng)果的設(shè)計(jì)就是這一原則的典范,產(chǎn)品設(shè)計(jì)干凈利落,沒(méi)有多余的裝飾元素。包括蘋(píng)果網(wǎng)站上,產(chǎn)品圖片和文字內(nèi)容排列有序,重點(diǎn)信息一目了然。這樣的設(shè)計(jì)不僅讓人覺(jué)得“高級(jí)感滿(mǎn)滿(mǎn)”,還避免了用戶(hù)被無(wú)關(guān)內(nèi)容分散注意力,能夠快速找到自己需要的信息。
要注意,美學(xué)與簡(jiǎn)約原則并不是簡(jiǎn)單地“刪減內(nèi)容”,而是通過(guò)設(shè)計(jì)取舍,讓界面更清晰、更有邏輯。
掌握尼爾森十大可用性原則,從小白快速進(jìn)階產(chǎn)品大神!
 
 
 
9、
容錯(cuò)原則
容錯(cuò)原則的重點(diǎn)是,當(dāng)用戶(hù)犯錯(cuò)時(shí),系統(tǒng)不僅要清楚地告知錯(cuò)誤發(fā)生的原因,還要提供有效的解決方法。
舉個(gè)例子,當(dāng)用戶(hù)在填寫(xiě)表單時(shí),如果密碼設(shè)置不符合要求(比如少于8位或缺少特殊字符),系統(tǒng)應(yīng)該明確提示“密碼長(zhǎng)度至少8位,需包含一個(gè)特殊字符”。這種直白、清晰的錯(cuò)誤提示能讓用戶(hù)快速明白問(wèn)題出在哪里,而不是模棱兩可地彈出“輸入無(wú)效”的錯(cuò)誤信息,讓用戶(hù)摸不著頭腦。
再比如,很多電商網(wǎng)站在用戶(hù)提交付款時(shí),如果網(wǎng)絡(luò)問(wèn)題導(dǎo)致支付失敗,系統(tǒng)會(huì)彈出“支付失敗,請(qǐng)檢查網(wǎng)絡(luò)連接”的提示,并提供“重新支付”或“聯(lián)系客服”的按鈕。這種設(shè)計(jì)不僅讓用戶(hù)知道錯(cuò)誤原因,還引導(dǎo)他們下一步該怎么做,避免因?yàn)闊o(wú)從下手而流失用戶(hù)。
總之,這條原則強(qiáng)調(diào)的是在用戶(hù)犯錯(cuò)時(shí),產(chǎn)品設(shè)計(jì)要有“救場(chǎng)”的能力。清晰的錯(cuò)誤提示和有效的解決方案,既能減少用戶(hù)的挫敗感,又能提高整體的產(chǎn)品體驗(yàn)。
 
10、
人性化幫助原則
盡管優(yōu)秀的設(shè)計(jì)應(yīng)該盡量讓用戶(hù)無(wú)需查閱說(shuō)明就能使用,但在某些情況下,提供清晰的幫助文檔或指引是必要的。
所以產(chǎn)品中的“幫助中心”功能必不可少,用戶(hù)可以快速定位到自己關(guān)心的內(nèi)容,同時(shí)加上搜索功能進(jìn)一步提升了幫助的可用性,用戶(hù)只需輸入關(guān)鍵詞,就能立即獲取相關(guān)答案。
還有,操作復(fù)雜的產(chǎn)品(如視頻剪輯軟件)通常會(huì)附帶新手教程,甚至直接在功能界面上提供懸浮提示,這種方式比傳統(tǒng)的文字說(shuō)明更直觀,也更容易讓用戶(hù)接受。
人性化幫助原則的意義在于,當(dāng)用戶(hù)面臨困惑時(shí),產(chǎn)品能夠及時(shí)提供有價(jià)值的指導(dǎo),讓用戶(hù)對(duì)產(chǎn)品充滿(mǎn)信任。
 
通過(guò)深入了解尼爾森十大可用性原則,你會(huì)發(fā)現(xiàn),優(yōu)化用戶(hù)體驗(yàn)并不是靠靈光一現(xiàn)的創(chuàng)意,而是建立在科學(xué)設(shè)計(jì)和用戶(hù)心理學(xué)基礎(chǔ)上的細(xì)致打磨。每一條原則看似簡(jiǎn)單,但在實(shí)際應(yīng)用中,只有將它們深刻融入到產(chǎn)品的每個(gè)細(xì)節(jié)中,才能真正提升用戶(hù)的滿(mǎn)意度和產(chǎn)品競(jìng)爭(zhēng)力。
如果你是產(chǎn)品設(shè)計(jì)的小白,尼爾森十大可用性原則將是你快速進(jìn)階的捷徑;如果你已經(jīng)是經(jīng)驗(yàn)豐富的產(chǎn)品經(jīng)理,這些原則依然是不可或缺的準(zhǔn)則,它們會(huì)提醒你在優(yōu)化產(chǎn)品時(shí)抓住核心,少走彎路。
做好設(shè)計(jì)不易,但只要你掌握了這些關(guān)鍵原則,距離“產(chǎn)品大神”的目標(biāo)就不遠(yuǎn)了。應(yīng)用起來(lái),讓你的產(chǎn)品脫穎而出吧!

作者:摹客設(shè)計(jì)云
鏈接:https://www.zcool.com.cn/article/ZMTY1MDA3Mg==.html
來(lái)源:站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。

蘭亭妙微(m.ibut.com.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è)人資料

存檔

咸宁市| 全椒县| 凤城市| 德令哈市| 抚宁县| 四子王旗| 太康县| 和田县| 合江县| 京山县| 永平县| 南城县| 合肥市| 香港 | 宣汉县| 襄汾县| 梁平县| 彰武县| 始兴县| 营口市| 梅州市| 若尔盖县| 漳平市| 固始县| 当阳市| 汶上县| 阳信县| 井冈山市| 昌都县| 邵东县| 壶关县| 涪陵区| 清流县| 三都| 武陟县| 土默特右旗| 涿鹿县| 咸宁市| 南江县| 子长县| 苏尼特右旗|