發(fā)布時(shí)間:2024-04-11 20:34:14 瀏覽量:154次
編輯導(dǎo)語:作為一名設(shè)計(jì)師,在日常工作時(shí)除了完成設(shè)計(jì)需求以外,更要對(duì)設(shè)計(jì)中的情感做研究;很多時(shí)候用戶在用產(chǎn)品時(shí)對(duì)視覺方面會(huì)有很多感覺,所以設(shè)計(jì)師需要合理的運(yùn)用情感層面的原理進(jìn)行改變和設(shè)計(jì),我們一起來了解一下。
好的設(shè)計(jì)不僅能解決問題,還能為用戶帶來積極的情感,并通過三個(gè)層面產(chǎn)生情感:
作為設(shè)計(jì)師除了要掌握基本的設(shè)計(jì)原則外,還需要對(duì)每個(gè)層面的情感以及創(chuàng)造情感的心理學(xué)原理有更深入的了解。
人的眼睛會(huì)把具有相似特征的元素當(dāng)成一個(gè)整體,認(rèn)為這些元素具有相同的作用。
界面中的綠色圖標(biāo)具有相同的功能,方便用戶快速認(rèn)知和操作;因此在設(shè)計(jì)具有相同功能或內(nèi)容的界面元素時(shí),應(yīng)該保持一致性。
應(yīng)用位置:導(dǎo)航、鏈接、按鈕、內(nèi)容頁。
用戶傾向于把連續(xù)排列的元素視為一個(gè)整體,這條原則與對(duì)稱性和相似性密切相關(guān);通過在序列上創(chuàng)建相似且重復(fù)的元素,引導(dǎo)用戶的視線方向,使操作更加連貫和清晰。
只露出一部分的卡片會(huì)向用戶發(fā)出信號(hào),表示滑動(dòng)可以查看更多的書。
應(yīng)用位置:菜單和子菜單、列表、產(chǎn)品頁、輪播頁。
當(dāng)看到不完整的圖像時(shí),我們會(huì)依據(jù)已有的經(jīng)驗(yàn)把不完全封閉的圖像當(dāng)成一個(gè)統(tǒng)一的整體,這是在平面或logo設(shè)計(jì)中常用到的原則。
盡管頁面右上方的餅圖只顯示了一部分,我們?nèi)匀荒軌蜉p松地識(shí)別出來。
應(yīng)用位置:圖標(biāo)、加載、數(shù)據(jù)可視化。
人們會(huì)將彼此相鄰的元素視為一組。在設(shè)計(jì)時(shí)要注意使用間距將元素組合在一起;使用較大的間距來分隔大的內(nèi)容組,再使用較小的間距來分隔大內(nèi)容組中的小內(nèi)容組。
頁面上的每個(gè)卡片中都含有4組信息,很難快速識(shí)別具體的內(nèi)容。通過調(diào)整間距,可以將這些信息清楚地分為2組。
應(yīng)用位置:導(dǎo)航、卡片、橫幅、列表頁、分頁。
我們喜歡看到對(duì)稱且平衡的事物,它是所設(shè)計(jì)領(lǐng)域中最常用和最安全的原則,有助于營造一種穩(wěn)定感和秩序感。
對(duì)稱的布局不僅增強(qiáng)了用戶的印象,還強(qiáng)調(diào)了中間的視頻播放按鈕。
應(yīng)用位置:產(chǎn)品展示頁、列表、導(dǎo)航以及任何內(nèi)容豐富的頁面。
通過信息分組和內(nèi)容組織,實(shí)現(xiàn)內(nèi)容的組合,有助于提升內(nèi)容的層次結(jié)構(gòu)和可掃描性。
卡片式UI有助于將信息分組并創(chuàng)建內(nèi)容的層級(jí)深度。
應(yīng)用位置:卡片、內(nèi)容、服務(wù)、摘要。
向同一方向移動(dòng)的元素被認(rèn)為比靜止或向另一個(gè)方向上移動(dòng)的元素更相關(guān),這個(gè)原則有利于建立不同分組或狀態(tài)之間的關(guān)系。
頁面右側(cè)的3個(gè)圖形方向相同,有利于展示信息并讓用戶了解它們的功能。
應(yīng)用位置:導(dǎo)航/下拉、折疊條目、工具提示、產(chǎn)品滑塊、滾動(dòng)條。
看東西時(shí),我們的視線往往會(huì)首先關(guān)注最突出的元素。理解這種行為有助于我們?cè)谠O(shè)計(jì)中創(chuàng)建一個(gè)“錨點(diǎn)”,從而引導(dǎo)用戶按照我們?cè)O(shè)計(jì)的場(chǎng)景查看內(nèi)容。
通過人物插畫將用戶的注意力引導(dǎo)到賬單和人數(shù)等主要信息上。
應(yīng)用位置:內(nèi)容、登錄頁、產(chǎn)品頁。
又稱隔離效應(yīng),相對(duì)于普通事件或物體,獨(dú)特、有特色的事件或物體更容易被人記住;應(yīng)用此原則的元素通常獨(dú)立存在,不需要向用戶導(dǎo)航額外的信息。
中間的升級(jí)插畫部分在整個(gè)頁面上是獨(dú)立存在的,并且吸引注意力是號(hào)召性用語或轉(zhuǎn)化的關(guān)鍵。
應(yīng)用位置:價(jià)格表、促銷頁、圖標(biāo)入口。
根據(jù)現(xiàn)實(shí)中的用戶行為創(chuàng)建視覺上引人入勝的體驗(yàn)。例如看幽默類視頻的時(shí)候,如果在視頻的高潮伴有笑聲音效,我們也會(huì)更容易跟著笑起來。
如果能讓用戶感覺良好和舒適,他們也會(huì)更喜歡我們的設(shè)計(jì)。
應(yīng)用位置:產(chǎn)品圖、插圖、攝影。
許多研究表明,顏色對(duì)我們的潛意識(shí)有特殊的影響;性別、宗教和文化對(duì)顏色的理解也有所不同。
關(guān)于顏色的運(yùn)用,這張色彩心理學(xué)海報(bào)介紹了豐富的方法。同時(shí)也要記住最廣泛使用的系統(tǒng)顏色:紅色代表錯(cuò)誤;綠色代表成功;藍(lán)色代表進(jìn)行中;黃色代表警告。
同顏色一樣,人們的潛意識(shí)對(duì)不同的形狀也有不同的反應(yīng):
這個(gè)理論解釋了人類需要視覺和語言信息來盡快處理信息,為了最大限度地提高設(shè)計(jì)的有效性,不應(yīng)該刪除必要的說明性文字。
大多數(shù)App的底部導(dǎo)航欄都利用圖標(biāo)與文字相結(jié)合的方式讓用戶快速知道功能。
另一個(gè)好的設(shè)計(jì)案例:
人眼傾向于看到平行因素比其他因素更相關(guān),這一原理經(jīng)常用來對(duì)同一頁面中的兩組不同內(nèi)容進(jìn)行分類。
使用垂直排列的卡片代表相同的問題,水平排列的卡片代表不同的問題。
這一原理類似于格式塔原則中的相似原則。公共區(qū)域通過使用線、形狀或顏色劃分的方式創(chuàng)建。
如果頁面需要用戶不斷滾動(dòng)來查看內(nèi)容,可以考慮使用顏色來更清楚地劃分這些內(nèi)容,而不僅僅是使用間距。
根據(jù)NNGroup、UXPin等設(shè)計(jì)團(tuán)體的研究,最常用的兩種掃描模式是“F型”和“Z型”:
關(guān)于掃描模式更詳細(xì)的內(nèi)容可以查看我之前的文章:如何構(gòu)建直觀有效的導(dǎo)航結(jié)構(gòu)?
了解如何使用這些模式后,我們就可以有效地選擇布局和安排元素來實(shí)現(xiàn)設(shè)計(jì)目標(biāo)。
第一印象是最令人難忘的,好的體驗(yàn)可以在用戶與產(chǎn)品之間建立持久的聯(lián)系。
慢慢來比較快,希望對(duì)你有幫助~
作者:Clippp,微信公眾號(hào):Clip設(shè)計(jì)夾。每周精選設(shè)計(jì)文章,專注分享關(guān)于產(chǎn)品、交互、UI視覺上的設(shè)計(jì)思考。
本文由 @Clippp 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)作者許可,禁止轉(zhuǎn)載。
題圖來自Unsplash,基于CC0協(xié)議。
熱門資訊
1. 室內(nèi)設(shè)計(jì)師必備靈感網(wǎng)站推薦,快來獲取作品、模型、素材源吧!
小D整理了一些室內(nèi)設(shè)計(jì)師常用的網(wǎng)站,包括作品、模型、搜索、軟裝等,快來獲取靈感和素材吧!
2. 前沿AI工具,涵蓋全流程建筑設(shè)計(jì)和施工
Forma AI: 一款全流程建筑設(shè)計(jì)和施工工具,驅(qū)動(dòng)規(guī)劃方案設(shè)計(jì)。原為挪威產(chǎn)品SpaceMaker,被改進(jìn)為涵蓋室內(nèi)和景觀設(shè)計(jì)的工具。非常推薦給建筑和室內(nèi)設(shè)計(jì)師使用,試試看Maket!
3. 室內(nèi)設(shè)計(jì)師必收藏的網(wǎng)站有哪些?
室內(nèi)設(shè)計(jì)師必收藏的網(wǎng)站有哪些?
4. 什么是現(xiàn)代簡(jiǎn)約風(fēng)?它有什么特點(diǎn)?在空間布局上應(yīng)該怎么搭配?
現(xiàn)代簡(jiǎn)約風(fēng)是一種注重功能性和實(shí)用性的室內(nèi)設(shè)計(jì)風(fēng)格,強(qiáng)調(diào)簡(jiǎn)潔明了的線條和基本形狀,融合實(shí)用性和時(shí)尚感,營造出一個(gè)整潔、舒適的居住空間。它常常采用...
5. 6款易上手的裝修軟件推薦,小白也能快速設(shè)計(jì)
想要快速上手裝修軟件,但CAD、3D max太專業(yè)?不用擔(dān)心!這里推薦6款操作簡(jiǎn)單的裝修軟件,讓小白也能快速設(shè)計(jì)家居。
6. 12款必備的環(huán)境藝術(shù)設(shè)計(jì)軟件,了解多少?
以下是12款必備的環(huán)境藝術(shù)設(shè)計(jì)軟件,助你完成各種設(shè)計(jì)任務(wù)。 1. AutoCAD:用于建筑室內(nèi)設(shè)計(jì)等領(lǐng)域的二維和三維模型創(chuàng)建。 2. SketchUp:直觀易用的三維建模軟件,幫助設(shè)計(jì)出精美的室內(nèi)外環(huán)境。 3. Revit:專業(yè)級(jí)建筑信息模型軟件,可協(xié)助設(shè)計(jì)全方位的環(huán)境布局。 4. Rhino:強(qiáng)大的幾何造型工具,用于設(shè)計(jì)復(fù)雜的建筑結(jié)構(gòu)和景觀元素。 5. Lumion:實(shí)時(shí)渲染引擎,可將設(shè)計(jì)作品以生動(dòng)的方式展示給客戶。 6. Photoshop:廣泛應(yīng)用的圖像處理軟件,能夠增強(qiáng)和編輯設(shè)計(jì)方案。 7. 3ds Max:出色的三維建模和渲染軟件,可創(chuàng)造逼真的環(huán)境效果。 8. Sketch: 優(yōu)秀的矢量繪圖工具,支持設(shè)計(jì)師實(shí)時(shí)協(xié)作和共享創(chuàng)意。 9. Illustrator:專業(yè)級(jí)矢量圖形軟件,用于創(chuàng)作精美的插圖和圖標(biāo)。 10. InDesign:行業(yè)標(biāo)準(zhǔn)的頁面設(shè)計(jì)和排版軟件,適用于創(chuàng)作室內(nèi)設(shè)計(jì)方案。 11. ArchiCAD:面向建筑師的BIM軟件,可實(shí)現(xiàn)設(shè)計(jì)數(shù)據(jù)的協(xié)作和管理。 12. V-Ray:強(qiáng)大的渲染引擎插件,可為設(shè)計(jì)師呈現(xiàn)出逼真的光影效果。
7. 科普 | 建筑聲學(xué)基礎(chǔ)知識(shí)(一):淺談室內(nèi)聲學(xué)設(shè)計(jì)的重要性
室內(nèi)聲學(xué)設(shè)計(jì)主要針對(duì)家庭影院、視聽室、錄音室、演播室等需要具有較高聲學(xué)設(shè)計(jì)的空間,由于室內(nèi)空間的特殊原因,聲音在其中的傳播規(guī)律與劇院等大型專...
8. 裝修前期設(shè)計(jì),設(shè)計(jì)師收費(fèi)情況一覽,別被“免費(fèi)設(shè)計(jì)”忽悠了
裝修前期設(shè)計(jì)的重要性,免費(fèi)設(shè)計(jì)的真實(shí)情況揭秘,裝修設(shè)計(jì)師費(fèi)用等相關(guān)內(nèi)容。
9. 中國十大軟裝設(shè)計(jì)公司排名 軟裝設(shè)計(jì)公司哪家好
中國十大軟裝設(shè)計(jì)公司排名 軟裝設(shè)計(jì)公司哪家好
10. 男孩子適合學(xué)室內(nèi)設(shè)計(jì)嗎?未來機(jī)會(huì)怎樣?
男孩子可以學(xué)習(xí)室內(nèi)設(shè)計(jì),這是一個(gè)既有前途又有挑戰(zhàn)的職業(yè)。室內(nèi)設(shè)計(jì)是一門與建筑、藝術(shù)和工程密切相關(guān)的學(xué)科,它需要學(xué)生具備一定的專業(yè)知識(shí)和技能,同時(shí)還需要藝術(shù)天賦和審美能力。
最新文章
同學(xué)您好!