首頁

交互設(shè)計太燒腦?學(xué)會模式思維,助你效率狂飆 300%

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

在互聯(lián)網(wǎng)領(lǐng)域中,人機之間的互動過程就是交互。交互也有一些可預(yù)測的、重復(fù)出現(xiàn)的規(guī)律,作者總結(jié)了其中常見的七種C端交互模式,可以提高大家的工作效率,分享給大家。

前段時間有個產(chǎn)品童鞋,他剛加我就問了一大串問題。

什么是模式(Pattern)?什么是模版(Template)?這兩個概念有什么區(qū)別?

作為一個熱心好學(xué)、樂于助人的產(chǎn)品仔,我當(dāng)然和他暢聊了一個多小時,順便總結(jié)下聊天內(nèi)容。

你是不是也經(jīng)常在生活工作中,碰到類似“行為模式、設(shè)計模式、語言模式、文檔模版、表格模版”等名詞。

但又搞不清它們有什么區(qū)別,搞懂了又有什么用?

別急,我們花幾分鐘,先來嘮嘮什么是模式。

一、什么是模式?

可預(yù)測、重復(fù)出現(xiàn)的現(xiàn)象或規(guī)律,通過歸納總結(jié),就變成了某一種模式。

我們的生活中,就有許多模式的影子。

比如常見的商業(yè)模式、營銷模式、行為模式、數(shù)學(xué)模式、語言模式等。

舉個例子:

簡單說下行為模式,它分為了“習(xí)慣模式、消費模式、學(xué)習(xí)模式”等等。

苦逼打工仔普遍的消費模式,一般是工作日花錢少,到了周末都愛到商場逛街和購物。

但又有特例,我有個朋友就特別宅,他只喜歡在上班的時候,摸魚逛淘寶下單,簡直離譜~

掌握模式,有什么用?

當(dāng)你掌握了模式的概念,并嘗試在生活中使用,相信你一定能感受到這 7 個好處。

  1. 信息壓縮:把信息精簡成特定的模式,記憶傳播更容易了,教給別人更是輕輕松松;
  2. 知識萃?。和ㄟ^學(xué)習(xí)模式,掌握系統(tǒng)化的知識,就像搭樂高拼積木,簡單易懂、一學(xué)就會、舉一反三;
  3. 簡化問題:用模式來解決問題,意味著它不再是一團(tuán)亂麻,成為了可分割的部分,原來苦惱的事,現(xiàn)在輕松搞定;
  4. 識別規(guī)律:當(dāng)你摸清了模式的現(xiàn)象規(guī)律,就像旅游帶著地圖,走到哪里都不慌;
  5. 提高效率:把模式進(jìn)行泛化使用,可以大大提高你的工作產(chǎn)出,蓋章可比畫圖快太多了;
  6. 組合創(chuàng)新:試著把你學(xué)會的各種模式,打亂排序、重新組合,說不定會拼出一些新玩意;
  7. 預(yù)測未來:搞懂了特定領(lǐng)域的模式,意味著你熟知并能運用自如,自然而然學(xué)會了推演未來。

二、C 端交互設(shè)計的 7 種常見模式

我們試著再舉個例子,加深下對模式的理解,順便學(xué)學(xué)交互設(shè)計。

什么是交互?

簡單來說,交互指的是在互聯(lián)網(wǎng)領(lǐng)域中,人、機之間的一系列互動過程。

我還提煉了 3 種常見模式(簡單反饋、數(shù)據(jù)操作、業(yè)務(wù)判斷),比較粗糙湊合也能用。

現(xiàn)在試著再系統(tǒng)總結(jié)下,我常用的 7 種 C 端交互模式,主要有:導(dǎo)航模式、搜索模式、反饋模式、輸入模式、編輯模式、分享模式、引導(dǎo)模式。

學(xué)完就能用,趕緊卷起來~

有人就問了,還有更多交互模式嗎?

確實可以有,等我有時間再編幾個。。

話說回來,如果是一些特別復(fù)雜的業(yè)務(wù)規(guī)則,可能會涉及到 N 個交互模式的任意組合。

1. 導(dǎo)航模式

常見的導(dǎo)航模式有按鈕組合、標(biāo)簽菜單、宮格布局、列表視圖等。

導(dǎo)航模式的主要作用是,告知用戶當(dāng)前在網(wǎng)站的位置,以及接下來到哪些頁面,這有點像地圖 APP。

上面這張圖中,包含了幾種導(dǎo)航組件呢?

2. 搜索模式

搜索,是各大電商 APP 常見的交互模式。

搜索模式允許用戶輸入關(guān)鍵詞,然后系統(tǒng)返回搜索結(jié)果。

打個比方,這有點像在 Navicat 中寫了一段 SQL 查詢。

SELECT id, name, age
FROM users
WHERE age > 18

這段 SQL 的作用是,查詢大于 18 歲的用戶信息,包含序號、名稱、年齡。

3. 反饋模式

常見的反饋模式組件,涉及了對話框、吐司提示、氣泡提示等。

反饋模式用的比較多的場景是,告知用戶一些信息或提示,比如“輸入密碼錯了、展示訂單取消的注意事項”等。

4. 輸入模式

輸入模式主要用于新數(shù)據(jù)創(chuàng)建,例如淘寶下單時,你新增了一個收貨地址。

打開美團(tuán)叫個外賣,整個訂單創(chuàng)建流程,也是輸入模式。

5. 編輯模式

有很多人可能會把輸入模式和編輯模式搞混。

區(qū)別它們的一個方法是,交互流程涉及新數(shù)據(jù)創(chuàng)建,還是改舊數(shù)據(jù)。

改數(shù)據(jù)的話,那就是編輯模式。

6. 分享模式

我們在看到一些干貨文章,或好用的小程序想要轉(zhuǎn)發(fā)給朋友,那就要用到分享模式。

分享模式可以很簡單,也可以往復(fù)雜了做,看產(chǎn)品階段去實現(xiàn)。

7. 引導(dǎo)模式

引導(dǎo)模式和反饋模式有點像,都是展示特定的內(nèi)容。

那怎么分辨它們呢?

以設(shè)計師視角來看,反饋模式需要用戶觸發(fā),系統(tǒng)被動顯示。

而要讓用戶特別關(guān)注的信息,那就是引導(dǎo)模式。

三、總結(jié)

模式,即抽象的規(guī)律。——好夕雷

說了這么多概念和例子,你是不是對模式的認(rèn)知更清晰了呢?

模式運用在產(chǎn)品領(lǐng)域,就有了這 7 種交互模式,分別是“導(dǎo)航模式、搜索模式、反饋模式、輸入模式、編輯模式、分享模式、引導(dǎo)模式”。

如果學(xué)會了模式,那么無論生活還是工作,相信你一定能輕松應(yīng)對、事半功倍。

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

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

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

 

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

交互思維與產(chǎn)品設(shè)計思維、體驗設(shè)計思維、視覺設(shè)計思維的融合

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

在前面的文章中,我們定義了交互思維和流程、目標(biāo),接下來我們分享交互設(shè)計思維與我們常說的產(chǎn)品思維、體驗思維等的融合。

一、交互思維與產(chǎn)品設(shè)計思維的融合

在現(xiàn)代產(chǎn)品開發(fā)中,交互思維產(chǎn)品設(shè)計思維的融合已經(jīng)成為提升用戶體驗的關(guān)鍵。兩者看似獨立,卻可以在實際設(shè)計過程中形成互補,打造出更加契合用戶需求的產(chǎn)品。本文將從兩者的特點、融合的價值,以及實際應(yīng)用場景中如何落地等角度出發(fā),深入探討它們的結(jié)合。

1. 交互思維與產(chǎn)品設(shè)計思維的區(qū)別

交互思維:聚焦人與界面的連接
交互思維的核心在于用戶與產(chǎn)品的互動體驗。它關(guān)注的是:

  • 效率:用戶是否能快速找到功能并完成操作?
  • 體驗:操作過程是否流暢、愉悅?
  • 反饋:用戶的操作是否能即時獲得明確反饋?

交互思維傾向于優(yōu)化用戶的操作路徑,將復(fù)雜的技術(shù)邏輯隱藏在背后,讓用戶感受到簡單和直觀。

例子:在淘寶購物車中,“全選”功能按鈕被設(shè)計在靠近商品列表的頂部,方便用戶快速選中所有商品;而刪除操作則以批量和單選兩種方式提供,提升操作靈活性。

產(chǎn)品設(shè)計思維:關(guān)注用戶價值與商業(yè)目標(biāo)

產(chǎn)品設(shè)計思維則是更全局的,它關(guān)注的是產(chǎn)品能否滿足用戶需求并實現(xiàn)商業(yè)價值。核心問題包括:

  • 需求洞察:用戶真正需要什么?
  • 功能取舍:哪些功能是核心,哪些功能是輔助?
  • 商業(yè)目標(biāo):如何在滿足用戶需求的同時,實現(xiàn)盈利或增長目標(biāo)?

產(chǎn)品設(shè)計思維更偏向戰(zhàn)略層面,要求對市場、用戶和商業(yè)有全局的理解,并制定產(chǎn)品的發(fā)展方向。

例子:微信從“即時通訊”入手,以簡單的聊天功能切入市場,但通過持續(xù)擴(kuò)展支付、朋友圈、公眾號等模塊,構(gòu)建了一個完善的生態(tài)系統(tǒng)。

2. 交互思維與產(chǎn)品設(shè)計思維的融合點

兩種思維的結(jié)合,能夠更好地兼顧用戶體驗和商業(yè)價值。以下是幾種主要的融合方式:

1)以用戶為中心,兼顧商業(yè)目標(biāo)

交互思維: 設(shè)計流暢、直觀的操作流程,提升用戶體驗。

產(chǎn)品設(shè)計思維: 在流暢體驗的基礎(chǔ)上,引導(dǎo)用戶完成關(guān)鍵行為(如購買、注冊等),實現(xiàn)商業(yè)目標(biāo)。

案例:美團(tuán)外賣的下單流程

  • 交互層面:在選餐、結(jié)算、支付的每一步,用戶體驗都清晰、順滑,沒有任何卡頓。
  • 產(chǎn)品設(shè)計層面:通過優(yōu)惠券推送、推薦菜品等設(shè)計,提升訂單金額和用戶粘性。

2)用戶需求與技術(shù)限制的平衡

交互思維: 關(guān)注用戶直觀感受,簡化復(fù)雜操作,讓用戶專注于目標(biāo)任務(wù)。

產(chǎn)品設(shè)計思維: 在技術(shù)和資源限制內(nèi),找到實現(xiàn)用戶需求的最佳方案。

案例:滴滴出行的“一鍵叫車”功能

  • 交互層面:用戶只需輸入目的地,一鍵發(fā)單,系統(tǒng)會自動分配司機。
  • 產(chǎn)品層面:背后整合了定位技術(shù)、調(diào)度算法、司機匹配邏輯等復(fù)雜功能,但這些復(fù)雜性被完全隱藏,用戶只需看到簡潔的界面和高效的結(jié)果。

3)數(shù)據(jù)驅(qū)動與用戶體驗的結(jié)合

交互思維: 基于用戶行為數(shù)據(jù)優(yōu)化界面和流程,提升操作效率。

產(chǎn)品設(shè)計思維: 基于數(shù)據(jù)分析判斷用戶需求的優(yōu)先級,調(diào)整產(chǎn)品功能布局。

案例:淘寶推薦算法與界面設(shè)計

淘寶的個性化推薦系統(tǒng)通過AI分析用戶瀏覽和購買行為,推薦相關(guān)商品。交互設(shè)計確保推薦商品的展示方式簡潔、直觀,不打擾用戶正常瀏覽,增強購物體驗的同時提升成交轉(zhuǎn)化率。

4)感性設(shè)計與理性分析的結(jié)合

交互思維: 關(guān)注情感體驗,設(shè)計讓用戶愉悅的互動。

產(chǎn)品設(shè)計思維: 從用戶行為和反饋中提煉需求,找到情感體驗的落地點。

案例:支付寶的“年度賬單”功能

  • 交互層面:炫酷的動效和圖表展示,給用戶帶來儀式感和滿足感。
  • 產(chǎn)品層面:通過賬單展示增強用戶的消費行為意識,并潛移默化地推廣其理財功能。

3. 交互思維與產(chǎn)品設(shè)計思維融合的關(guān)鍵原則

  • 優(yōu)先關(guān)注用戶需求:兩者融合的首要任務(wù)是以用戶需求為核心,所有設(shè)計決策都應(yīng)服務(wù)于用戶的目標(biāo)和體驗。
  • 注重全局與細(xì)節(jié)的平衡:產(chǎn)品設(shè)計思維關(guān)注全局策略,而交互思維則深入到細(xì)節(jié)優(yōu)化。兩者需緊密配合,既要設(shè)計好產(chǎn)品的整體框架,也要關(guān)注用戶的每一次點擊和滑動。
  • 數(shù)據(jù)與創(chuàng)意并重:以數(shù)據(jù)為基礎(chǔ)驗證產(chǎn)品方向,以創(chuàng)意設(shè)計激發(fā)用戶的情感共鳴,實現(xiàn)理性與感性的結(jié)合。

4. 未來展望:AI與交互/產(chǎn)品思維的深度融合

隨著AI技術(shù)的深入發(fā)展,交互思維與產(chǎn)品設(shè)計思維的融合將進(jìn)一步進(jìn)化:

  • 智能推薦與場景化設(shè)計: AI可以通過用戶數(shù)據(jù)精準(zhǔn)預(yù)測需求,設(shè)計更貼合場景的互動。
  • 個性化界面: 產(chǎn)品的界面和交互將更加動態(tài),根據(jù)用戶習(xí)慣實時調(diào)整。
  • 自動化與人性化的平衡: 利用AI簡化操作的同時,保留關(guān)鍵環(huán)節(jié)的人性化設(shè)計,讓用戶感到關(guān)懷與尊重。

案例展望:

在未來的外賣App中,AI不僅能推薦菜品,還能根據(jù)天氣、飲食偏好提供動態(tài)優(yōu)惠,讓用戶感到“被理解”。同時,界面交互會變得更加智能,比如直接通過語音完成點餐和支付。

二、交互思維與用戶體驗設(shè)計思維的融合

在數(shù)字產(chǎn)品開發(fā)中,交互思維用戶體驗設(shè)計思維(UX Design Thinking)常常交織在一起,共同塑造出令人滿意的產(chǎn)品體驗。兩者的融合不僅能提升產(chǎn)品的使用效率,還能激發(fā)用戶的情感共鳴,最終實現(xiàn)用戶目標(biāo)與商業(yè)價值的雙贏。

1. 交互思維與用戶體驗設(shè)計思維的核心概念

1)交互思維:聚焦人與界面的高效互動

交互思維主要關(guān)注用戶與產(chǎn)品之間的操作過程,旨在通過直觀的界面設(shè)計高效的交互方式,幫助用戶輕松完成任務(wù)。其核心要素包括:

  • 清晰性: 讓用戶知道該怎么操作。
  • 反饋性: 用戶的每一次操作都能獲得及時的反饋。
  • 效率性: 操作路徑最短、操作負(fù)擔(dān)最小。

2)用戶體驗設(shè)計思維:以用戶為中心的全局視角

用戶體驗設(shè)計思維是以用戶需求用戶感受為核心的一種方法論,涉及產(chǎn)品從設(shè)計到使用的整個生命周期。其重點在于:

  • 需求洞察: 通過調(diào)研理解用戶真正的需求。
  • 情感連接: 不僅滿足功能需求,還要讓用戶感到愉悅、舒適。
  • 全流程體驗: 關(guān)注用戶從進(jìn)入產(chǎn)品到離開的每一個接觸點。

簡單類比:

交互思維像是一位專注于修路的工程師,確保路徑筆直流暢;而用戶體驗設(shè)計思維更像是一位城市規(guī)劃師,考慮如何讓整個城市的交通系統(tǒng)高效且宜居。

2. 交互思維與用戶體驗設(shè)計思維的融合點

1)從細(xì)節(jié)到全局,滿足用戶操作與體驗的雙重需求

交互思維注重細(xì)節(jié),優(yōu)化每一個交互動作;而用戶體驗設(shè)計思維關(guān)注全局,確保整個使用流程的流暢性和一致性。兩者結(jié)合能讓用戶在每個環(huán)節(jié)都感到舒適且順暢。

案例:微信的語音消息功能

  • 交互思維: 長按錄音鍵時,提供實時的錄音狀態(tài)提示;松手后,自動發(fā)送語音,減少用戶額外的操作。
  • 用戶體驗思維: 通過語音功能,解決了用戶在手忙或不方便打字時的溝通需求,增強場景適配性和易用性。

2)情感設(shè)計與功能設(shè)計的結(jié)合

交互思維解決“怎么用”的問題,用戶體驗設(shè)計思維則深入到“為什么用”和“用后感受如何”。情感設(shè)計是兩者融合的一個關(guān)鍵點,既提升用戶滿意度,又增強產(chǎn)品粘性。

案例:支付寶的完成支付動畫

  • 交互思維: 支付完成時的動態(tài)反饋,讓用戶明確支付已完成。
  • 用戶體驗思維: 支付后展示“支付成功”字樣并配以動畫,不僅提供信息,還讓用戶感到完成任務(wù)的愉悅。

3)用戶需求與設(shè)計約束的平衡

交互思維幫助優(yōu)化操作路徑,而用戶體驗設(shè)計思維則考慮設(shè)計的合理性和場景適配性。在技術(shù)和資源的限制下,兩者需要共同探索最佳方案。

案例:滴滴出行的路線規(guī)劃與確認(rèn)

  • 交互思維: 用戶輸入起點和終點后,系統(tǒng)快速規(guī)劃出最佳路線,并提供簡單確認(rèn)按鈕。
  • 用戶體驗思維: 考慮用戶可能存在對價格敏感的需求,提供多種車型選擇,同時展示每種選擇的價格和預(yù)估時間。

4)數(shù)據(jù)驅(qū)動與用戶感知的結(jié)合

數(shù)據(jù)分析是用戶體驗設(shè)計思維的重要部分,而交互思維則利用這些數(shù)據(jù)優(yōu)化每一次用戶操作。兩者的結(jié)合能實現(xiàn)功能的個性化和體驗的精準(zhǔn)化。

案例:淘寶的商品推薦系統(tǒng)

  • 交互思維: 推薦商品以卡片形式展示,用戶可以快速滑動瀏覽、添加購物車或直接購買。
  • 用戶體驗思維: 推薦邏輯基于用戶的瀏覽和購買行為,推送最相關(guān)的商品,減少用戶決策時間,提升購物體驗。

3. 交互思維與用戶體驗設(shè)計思維的融合策略

  • 以用戶為核心,構(gòu)建全流程體驗:兩者的融合應(yīng)始終圍繞用戶需求展開。在每一個用戶接觸點上,既要確保交互的流暢性,也要關(guān)注用戶的情感感受。
  • 簡化操作路徑,優(yōu)化信息傳達(dá):用戶體驗設(shè)計需要通過交互設(shè)計,減少用戶完成任務(wù)的步驟,同時以視覺化、圖形化的方式傳遞信息,讓用戶一目了然。
  • 動態(tài)優(yōu)化,保持體驗的一致性:基于數(shù)據(jù)分析,實時調(diào)整交互設(shè)計和體驗設(shè)計,確保用戶在產(chǎn)品生命周期內(nèi)始終獲得一致且優(yōu)秀的體驗。

4. 實踐案例:抖音的交互與體驗設(shè)計

抖音作為短視頻平臺,在交互與用戶體驗設(shè)計的結(jié)合上表現(xiàn)得尤為出色:

  • 交互思維: 用戶只需上下滑動即可瀏覽視頻,操作簡單直觀;同時每次滑動都有即時的視覺反饋,增強流暢感。
  • 用戶體驗思維: 推薦算法通過用戶興趣分析,持續(xù)推送個性化視頻內(nèi)容,提升用戶粘性;視頻結(jié)束時還配有引導(dǎo)互動的按鈕(如點贊、評論),鼓勵用戶參與互動。

5. 未來展望:AI技術(shù)推動交互與用戶體驗的升級

隨著AI的普及,交互思維與用戶體驗設(shè)計思維的融合將進(jìn)入新的階段:

  • 智能交互: 通過語音、手勢等自然交互方式,進(jìn)一步簡化操作。
  • 個性化體驗: AI根據(jù)用戶行為預(yù)測需求,動態(tài)調(diào)整界面和推薦內(nèi)容。
  • 情感化設(shè)計: AI捕捉用戶情緒,提供更貼心的交互反饋和情感關(guān)懷。

案例展望:智能客服系統(tǒng)

未來的智能客服不僅能準(zhǔn)確理解用戶問題,還能根據(jù)情緒識別調(diào)整對話語氣,同時提供即時解決方案與友好的互動體驗。

三、交互思維與界面設(shè)計思維的融合

交互思維界面設(shè)計思維的融合,是現(xiàn)代產(chǎn)品設(shè)計中的核心命題。二者分別專注于用戶操作路徑和界面視覺呈現(xiàn),彼此互補,共同打造出功能性與美觀性兼具的產(chǎn)品體驗。本文將從兩者的概念、融合的價值以及實際案例中剖析如何實現(xiàn)這種深度結(jié)合。

1. 交互思維與界面設(shè)計思維的核心概念

1)交互思維:聚焦操作路徑與用戶效率

交互思維的核心在于優(yōu)化用戶操作的每一步,降低操作復(fù)雜度,提升使用效率。

其關(guān)注的主要問題包括:

  • 用戶如何完成某項任務(wù)?
  • 操作的反饋是否清晰?
  • 整體路徑是否流暢高效?

特點:邏輯性強,重在用戶的操作行為,強調(diào)功能可達(dá)性和可用性。

2)界面設(shè)計思維:聚焦視覺呈現(xiàn)與情感體驗

界面設(shè)計思維則以視覺表現(xiàn)為中心,關(guān)注界面的美感和信息傳達(dá)的有效性。其關(guān)注點包括:

  • 信息是否清晰易讀?
  • 視覺元素是否吸引人且統(tǒng)一?
  • 是否通過視覺傳遞了情感和品牌理念?

特點:更注重感性表達(dá),強調(diào)用戶的情感體驗和對產(chǎn)品的第一印象。

簡單類比:

交互思維像是設(shè)計產(chǎn)品的操作說明書,確保邏輯清晰易懂;而界面設(shè)計思維則為產(chǎn)品包裝,讓它看起來有吸引力且直觀。

2. 交互思維與界面設(shè)計思維的融合價值

  • 兼顧功能性與美觀性:用戶既需要能夠快速完成任務(wù),也希望在使用過程中感到愉悅。交互思維和界面設(shè)計思維的結(jié)合,可以讓產(chǎn)品在邏輯清晰的基礎(chǔ)上,通過視覺傳達(dá)提供更佳體驗。
  • 提升用戶認(rèn)知效率:交互邏輯清晰但界面復(fù)雜,會增加用戶認(rèn)知成本;界面美觀卻缺乏交互合理性,會讓操作變得困難。融合兩者可以提升用戶對信息的識別和理解效率。
  • 構(gòu)建品牌感與用戶粘性:交互設(shè)計讓用戶留下“好用”的印象,而界面設(shè)計則通過視覺元素讓用戶感到“好看”。這種結(jié)合不僅能滿足短期功能需求,還能通過美學(xué)設(shè)計強化品牌認(rèn)知,提升用戶長期粘性。

3. 交互思維與界面設(shè)計思維的融合方式

1)信息分層與視覺引導(dǎo)的結(jié)合

交互思維: 根據(jù)用戶操作邏輯,對信息進(jìn)行層級劃分,優(yōu)先展示關(guān)鍵信息,隱藏次要內(nèi)容。

界面設(shè)計思維: 通過顏色、字體大小、對比等視覺元素,強化信息的層級感和用戶的關(guān)注點。

案例:支付寶首頁的布局

交互層面: 核心功能(如轉(zhuǎn)賬、收付款)被放置在顯眼的首屏區(qū)域,次要功能(如理財推薦)隱藏在二級頁面。

界面層面: 不同模塊的背景顏色和按鈕樣式有明顯區(qū)分,用戶一眼就能找到核心功能。

2)動效與反饋設(shè)計的結(jié)合

交互思維: 動效作為用戶操作的反饋機制,提示操作結(jié)果或狀態(tài)變化。

界面設(shè)計思維: 動效的風(fēng)格和節(jié)奏與界面整體視覺風(fēng)格保持一致,增強整體體驗的連貫性。

案例:抖音的點贊動效

交互層面: 用戶雙擊屏幕后,出現(xiàn)心形動畫,明確提示“點贊成功”。

界面層面: 動效的色彩與抖音的品牌風(fēng)格一致,給用戶帶來視覺和情感上的滿足感。

3)視覺布局與操作路徑的優(yōu)化

交互思維: 確保核心操作路徑最短,減少用戶不必要的點擊和跳轉(zhuǎn)。

界面設(shè)計思維: 通過對頁面布局的優(yōu)化,讓用戶在操作路徑中感到界面簡潔且層次分明。

案例:京東購物車的設(shè)計

交互層面: 重要操作(如全選、去結(jié)算)被放置在用戶觸手可及的位置,減少多余步驟。

界面層面: 清晰的分組、直觀的價格信息展示,讓用戶輕松理解購物車內(nèi)容。

4)情感設(shè)計與功能優(yōu)化的結(jié)合

交互思維: 通過優(yōu)化功能滿足用戶需求,讓操作過程簡單高效。

界面設(shè)計思維: 在視覺設(shè)計中融入情感化元素,讓用戶感到愉悅或被關(guān)懷。

案例:網(wǎng)易云音樂的“聽歌識曲”功能

交互層面: 用戶只需點擊一個按鈕,系統(tǒng)即可快速識別歌曲,操作簡單高效。

界面層面: 啟動時有動態(tài)音波效果,識別成功后展示專輯封面和歌詞,增強情感連接。

4. 交互思維與界面設(shè)計思維融合的關(guān)鍵原則

  • 優(yōu)先滿足用戶需求:任何設(shè)計決策的出發(fā)點都應(yīng)是用戶需求,確保用戶能夠快速完成目標(biāo)任務(wù)。
  • 強調(diào)一致性與連貫性:界面視覺風(fēng)格和交互邏輯需要保持一致,避免用戶因切換頁面或操作而感到困惑。
  • 數(shù)據(jù)驅(qū)動優(yōu)化設(shè)計:通過用戶行為數(shù)據(jù)分析,發(fā)現(xiàn)交互邏輯和界面設(shè)計中的問題點,并不斷優(yōu)化。
  • 保持創(chuàng)新但不偏離預(yù)期:界面美觀或交互新穎可以吸引用戶,但要確保設(shè)計符合用戶的心理模型和習(xí)慣,避免過度創(chuàng)新導(dǎo)致理解困難。

5. 實踐案例:微信的朋友圈功能

微信的朋友圈功能是交互思維與界面設(shè)計思維結(jié)合的經(jīng)典案例:

交互設(shè)計:

用戶可以通過簡單的下滑操作瀏覽動態(tài),上滑時加載更多內(nèi)容,操作自然流暢。

點贊和評論的交互邏輯簡單,長按可以刪除自己的評論,符合用戶直覺。

界面設(shè)計:

動態(tài)展示以卡片形式分隔,保持視覺整潔。

文本和圖片的排版統(tǒng)一,評論區(qū)域的縮進(jìn)樣式使信息層級清晰。

總結(jié)

交互思維與產(chǎn)品思維、體驗思維、視覺設(shè)計思維的融合,是用戶體驗優(yōu)化的基礎(chǔ)。在實際設(shè)計中,我們既需要從全局出發(fā),規(guī)劃產(chǎn)品戰(zhàn)略,也需要關(guān)注用戶的每一步操作細(xì)節(jié)。

通過兩者的互相補充,我們能設(shè)計出既符合用戶需求,又實現(xiàn)商業(yè)價值的產(chǎn)品,更精準(zhǔn)地滿足用戶需求,讓產(chǎn)品不僅好用,還能打動人心。為用戶和企業(yè)帶來雙贏的結(jié)果。

未來,隨著技術(shù)的進(jìn)步和用戶需求的多樣化,這種融合將持續(xù)推動數(shù)字產(chǎn)品體驗的升級,成為提升產(chǎn)品競爭力的核心動力。

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

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

交互思維與產(chǎn)品設(shè)計思維、體驗設(shè)計思維、視覺設(shè)計思維的融合

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

在前面的文章中,我們定義了交互思維和流程、目標(biāo),接下來我們分享交互設(shè)計思維與我們常說的產(chǎn)品思維、體驗思維等的融合。

一、交互思維與產(chǎn)品設(shè)計思維的融合

在現(xiàn)代產(chǎn)品開發(fā)中,交互思維產(chǎn)品設(shè)計思維的融合已經(jīng)成為提升用戶體驗的關(guān)鍵。兩者看似獨立,卻可以在實際設(shè)計過程中形成互補,打造出更加契合用戶需求的產(chǎn)品。本文將從兩者的特點、融合的價值,以及實際應(yīng)用場景中如何落地等角度出發(fā),深入探討它們的結(jié)合。

1. 交互思維與產(chǎn)品設(shè)計思維的區(qū)別

交互思維:聚焦人與界面的連接
交互思維的核心在于用戶與產(chǎn)品的互動體驗。它關(guān)注的是:

  • 效率:用戶是否能快速找到功能并完成操作?
  • 體驗:操作過程是否流暢、愉悅?
  • 反饋:用戶的操作是否能即時獲得明確反饋?

交互思維傾向于優(yōu)化用戶的操作路徑,將復(fù)雜的技術(shù)邏輯隱藏在背后,讓用戶感受到簡單和直觀。

例子:在淘寶購物車中,“全選”功能按鈕被設(shè)計在靠近商品列表的頂部,方便用戶快速選中所有商品;而刪除操作則以批量和單選兩種方式提供,提升操作靈活性。

產(chǎn)品設(shè)計思維:關(guān)注用戶價值與商業(yè)目標(biāo)

產(chǎn)品設(shè)計思維則是更全局的,它關(guān)注的是產(chǎn)品能否滿足用戶需求并實現(xiàn)商業(yè)價值。核心問題包括:

  • 需求洞察:用戶真正需要什么?
  • 功能取舍:哪些功能是核心,哪些功能是輔助?
  • 商業(yè)目標(biāo):如何在滿足用戶需求的同時,實現(xiàn)盈利或增長目標(biāo)?

產(chǎn)品設(shè)計思維更偏向戰(zhàn)略層面,要求對市場、用戶和商業(yè)有全局的理解,并制定產(chǎn)品的發(fā)展方向。

例子:微信從“即時通訊”入手,以簡單的聊天功能切入市場,但通過持續(xù)擴(kuò)展支付、朋友圈、公眾號等模塊,構(gòu)建了一個完善的生態(tài)系統(tǒng)。

2. 交互思維與產(chǎn)品設(shè)計思維的融合點

兩種思維的結(jié)合,能夠更好地兼顧用戶體驗和商業(yè)價值。以下是幾種主要的融合方式:

1)以用戶為中心,兼顧商業(yè)目標(biāo)

交互思維: 設(shè)計流暢、直觀的操作流程,提升用戶體驗。

產(chǎn)品設(shè)計思維: 在流暢體驗的基礎(chǔ)上,引導(dǎo)用戶完成關(guān)鍵行為(如購買、注冊等),實現(xiàn)商業(yè)目標(biāo)。

案例:美團(tuán)外賣的下單流程

  • 交互層面:在選餐、結(jié)算、支付的每一步,用戶體驗都清晰、順滑,沒有任何卡頓。
  • 產(chǎn)品設(shè)計層面:通過優(yōu)惠券推送、推薦菜品等設(shè)計,提升訂單金額和用戶粘性。

2)用戶需求與技術(shù)限制的平衡

交互思維: 關(guān)注用戶直觀感受,簡化復(fù)雜操作,讓用戶專注于目標(biāo)任務(wù)。

產(chǎn)品設(shè)計思維: 在技術(shù)和資源限制內(nèi),找到實現(xiàn)用戶需求的最佳方案。

案例:滴滴出行的“一鍵叫車”功能

  • 交互層面:用戶只需輸入目的地,一鍵發(fā)單,系統(tǒng)會自動分配司機。
  • 產(chǎn)品層面:背后整合了定位技術(shù)、調(diào)度算法、司機匹配邏輯等復(fù)雜功能,但這些復(fù)雜性被完全隱藏,用戶只需看到簡潔的界面和高效的結(jié)果。

3)數(shù)據(jù)驅(qū)動與用戶體驗的結(jié)合

交互思維: 基于用戶行為數(shù)據(jù)優(yōu)化界面和流程,提升操作效率。

產(chǎn)品設(shè)計思維: 基于數(shù)據(jù)分析判斷用戶需求的優(yōu)先級,調(diào)整產(chǎn)品功能布局。

案例:淘寶推薦算法與界面設(shè)計

淘寶的個性化推薦系統(tǒng)通過AI分析用戶瀏覽和購買行為,推薦相關(guān)商品。交互設(shè)計確保推薦商品的展示方式簡潔、直觀,不打擾用戶正常瀏覽,增強購物體驗的同時提升成交轉(zhuǎn)化率。

4)感性設(shè)計與理性分析的結(jié)合

交互思維: 關(guān)注情感體驗,設(shè)計讓用戶愉悅的互動。

產(chǎn)品設(shè)計思維: 從用戶行為和反饋中提煉需求,找到情感體驗的落地點。

案例:支付寶的“年度賬單”功能

  • 交互層面:炫酷的動效和圖表展示,給用戶帶來儀式感和滿足感。
  • 產(chǎn)品層面:通過賬單展示增強用戶的消費行為意識,并潛移默化地推廣其理財功能。

3. 交互思維與產(chǎn)品設(shè)計思維融合的關(guān)鍵原則

  • 優(yōu)先關(guān)注用戶需求:兩者融合的首要任務(wù)是以用戶需求為核心,所有設(shè)計決策都應(yīng)服務(wù)于用戶的目標(biāo)和體驗。
  • 注重全局與細(xì)節(jié)的平衡:產(chǎn)品設(shè)計思維關(guān)注全局策略,而交互思維則深入到細(xì)節(jié)優(yōu)化。兩者需緊密配合,既要設(shè)計好產(chǎn)品的整體框架,也要關(guān)注用戶的每一次點擊和滑動。
  • 數(shù)據(jù)與創(chuàng)意并重:以數(shù)據(jù)為基礎(chǔ)驗證產(chǎn)品方向,以創(chuàng)意設(shè)計激發(fā)用戶的情感共鳴,實現(xiàn)理性與感性的結(jié)合。

4. 未來展望:AI與交互/產(chǎn)品思維的深度融合

隨著AI技術(shù)的深入發(fā)展,交互思維與產(chǎn)品設(shè)計思維的融合將進(jìn)一步進(jìn)化:

  • 智能推薦與場景化設(shè)計: AI可以通過用戶數(shù)據(jù)精準(zhǔn)預(yù)測需求,設(shè)計更貼合場景的互動。
  • 個性化界面: 產(chǎn)品的界面和交互將更加動態(tài),根據(jù)用戶習(xí)慣實時調(diào)整。
  • 自動化與人性化的平衡: 利用AI簡化操作的同時,保留關(guān)鍵環(huán)節(jié)的人性化設(shè)計,讓用戶感到關(guān)懷與尊重。

案例展望:

在未來的外賣App中,AI不僅能推薦菜品,還能根據(jù)天氣、飲食偏好提供動態(tài)優(yōu)惠,讓用戶感到“被理解”。同時,界面交互會變得更加智能,比如直接通過語音完成點餐和支付。

二、交互思維與用戶體驗設(shè)計思維的融合

在數(shù)字產(chǎn)品開發(fā)中,交互思維用戶體驗設(shè)計思維(UX Design Thinking)常常交織在一起,共同塑造出令人滿意的產(chǎn)品體驗。兩者的融合不僅能提升產(chǎn)品的使用效率,還能激發(fā)用戶的情感共鳴,最終實現(xiàn)用戶目標(biāo)與商業(yè)價值的雙贏。

1. 交互思維與用戶體驗設(shè)計思維的核心概念

1)交互思維:聚焦人與界面的高效互動

交互思維主要關(guān)注用戶與產(chǎn)品之間的操作過程,旨在通過直觀的界面設(shè)計高效的交互方式,幫助用戶輕松完成任務(wù)。其核心要素包括:

  • 清晰性: 讓用戶知道該怎么操作。
  • 反饋性: 用戶的每一次操作都能獲得及時的反饋。
  • 效率性: 操作路徑最短、操作負(fù)擔(dān)最小。

2)用戶體驗設(shè)計思維:以用戶為中心的全局視角

用戶體驗設(shè)計思維是以用戶需求用戶感受為核心的一種方法論,涉及產(chǎn)品從設(shè)計到使用的整個生命周期。其重點在于:

  • 需求洞察: 通過調(diào)研理解用戶真正的需求。
  • 情感連接: 不僅滿足功能需求,還要讓用戶感到愉悅、舒適。
  • 全流程體驗: 關(guān)注用戶從進(jìn)入產(chǎn)品到離開的每一個接觸點。

簡單類比:

交互思維像是一位專注于修路的工程師,確保路徑筆直流暢;而用戶體驗設(shè)計思維更像是一位城市規(guī)劃師,考慮如何讓整個城市的交通系統(tǒng)高效且宜居。

2. 交互思維與用戶體驗設(shè)計思維的融合點

1)從細(xì)節(jié)到全局,滿足用戶操作與體驗的雙重需求

交互思維注重細(xì)節(jié),優(yōu)化每一個交互動作;而用戶體驗設(shè)計思維關(guān)注全局,確保整個使用流程的流暢性和一致性。兩者結(jié)合能讓用戶在每個環(huán)節(jié)都感到舒適且順暢。

案例:微信的語音消息功能

  • 交互思維: 長按錄音鍵時,提供實時的錄音狀態(tài)提示;松手后,自動發(fā)送語音,減少用戶額外的操作。
  • 用戶體驗思維: 通過語音功能,解決了用戶在手忙或不方便打字時的溝通需求,增強場景適配性和易用性。

2)情感設(shè)計與功能設(shè)計的結(jié)合

交互思維解決“怎么用”的問題,用戶體驗設(shè)計思維則深入到“為什么用”和“用后感受如何”。情感設(shè)計是兩者融合的一個關(guān)鍵點,既提升用戶滿意度,又增強產(chǎn)品粘性。

案例:支付寶的完成支付動畫

  • 交互思維: 支付完成時的動態(tài)反饋,讓用戶明確支付已完成。
  • 用戶體驗思維: 支付后展示“支付成功”字樣并配以動畫,不僅提供信息,還讓用戶感到完成任務(wù)的愉悅。

3)用戶需求與設(shè)計約束的平衡

交互思維幫助優(yōu)化操作路徑,而用戶體驗設(shè)計思維則考慮設(shè)計的合理性和場景適配性。在技術(shù)和資源的限制下,兩者需要共同探索最佳方案。

案例:滴滴出行的路線規(guī)劃與確認(rèn)

  • 交互思維: 用戶輸入起點和終點后,系統(tǒng)快速規(guī)劃出最佳路線,并提供簡單確認(rèn)按鈕。
  • 用戶體驗思維: 考慮用戶可能存在對價格敏感的需求,提供多種車型選擇,同時展示每種選擇的價格和預(yù)估時間。

4)數(shù)據(jù)驅(qū)動與用戶感知的結(jié)合

數(shù)據(jù)分析是用戶體驗設(shè)計思維的重要部分,而交互思維則利用這些數(shù)據(jù)優(yōu)化每一次用戶操作。兩者的結(jié)合能實現(xiàn)功能的個性化和體驗的精準(zhǔn)化。

案例:淘寶的商品推薦系統(tǒng)

  • 交互思維: 推薦商品以卡片形式展示,用戶可以快速滑動瀏覽、添加購物車或直接購買。
  • 用戶體驗思維: 推薦邏輯基于用戶的瀏覽和購買行為,推送最相關(guān)的商品,減少用戶決策時間,提升購物體驗。

3. 交互思維與用戶體驗設(shè)計思維的融合策略

  • 以用戶為核心,構(gòu)建全流程體驗:兩者的融合應(yīng)始終圍繞用戶需求展開。在每一個用戶接觸點上,既要確保交互的流暢性,也要關(guān)注用戶的情感感受。
  • 簡化操作路徑,優(yōu)化信息傳達(dá):用戶體驗設(shè)計需要通過交互設(shè)計,減少用戶完成任務(wù)的步驟,同時以視覺化、圖形化的方式傳遞信息,讓用戶一目了然。
  • 動態(tài)優(yōu)化,保持體驗的一致性:基于數(shù)據(jù)分析,實時調(diào)整交互設(shè)計和體驗設(shè)計,確保用戶在產(chǎn)品生命周期內(nèi)始終獲得一致且優(yōu)秀的體驗。

4. 實踐案例:抖音的交互與體驗設(shè)計

抖音作為短視頻平臺,在交互與用戶體驗設(shè)計的結(jié)合上表現(xiàn)得尤為出色:

  • 交互思維: 用戶只需上下滑動即可瀏覽視頻,操作簡單直觀;同時每次滑動都有即時的視覺反饋,增強流暢感。
  • 用戶體驗思維: 推薦算法通過用戶興趣分析,持續(xù)推送個性化視頻內(nèi)容,提升用戶粘性;視頻結(jié)束時還配有引導(dǎo)互動的按鈕(如點贊、評論),鼓勵用戶參與互動。

5. 未來展望:AI技術(shù)推動交互與用戶體驗的升級

隨著AI的普及,交互思維與用戶體驗設(shè)計思維的融合將進(jìn)入新的階段:

  • 智能交互: 通過語音、手勢等自然交互方式,進(jìn)一步簡化操作。
  • 個性化體驗: AI根據(jù)用戶行為預(yù)測需求,動態(tài)調(diào)整界面和推薦內(nèi)容。
  • 情感化設(shè)計: AI捕捉用戶情緒,提供更貼心的交互反饋和情感關(guān)懷。

案例展望:智能客服系統(tǒng)

未來的智能客服不僅能準(zhǔn)確理解用戶問題,還能根據(jù)情緒識別調(diào)整對話語氣,同時提供即時解決方案與友好的互動體驗。

三、交互思維與界面設(shè)計思維的融合

交互思維界面設(shè)計思維的融合,是現(xiàn)代產(chǎn)品設(shè)計中的核心命題。二者分別專注于用戶操作路徑和界面視覺呈現(xiàn),彼此互補,共同打造出功能性與美觀性兼具的產(chǎn)品體驗。本文將從兩者的概念、融合的價值以及實際案例中剖析如何實現(xiàn)這種深度結(jié)合。

1. 交互思維與界面設(shè)計思維的核心概念

1)交互思維:聚焦操作路徑與用戶效率

交互思維的核心在于優(yōu)化用戶操作的每一步,降低操作復(fù)雜度,提升使用效率。

其關(guān)注的主要問題包括:

  • 用戶如何完成某項任務(wù)?
  • 操作的反饋是否清晰?
  • 整體路徑是否流暢高效?

特點:邏輯性強,重在用戶的操作行為,強調(diào)功能可達(dá)性和可用性。

2)界面設(shè)計思維:聚焦視覺呈現(xiàn)與情感體驗

界面設(shè)計思維則以視覺表現(xiàn)為中心,關(guān)注界面的美感和信息傳達(dá)的有效性。其關(guān)注點包括:

  • 信息是否清晰易讀?
  • 視覺元素是否吸引人且統(tǒng)一?
  • 是否通過視覺傳遞了情感和品牌理念?

特點:更注重感性表達(dá),強調(diào)用戶的情感體驗和對產(chǎn)品的第一印象。

簡單類比:

交互思維像是設(shè)計產(chǎn)品的操作說明書,確保邏輯清晰易懂;而界面設(shè)計思維則為產(chǎn)品包裝,讓它看起來有吸引力且直觀。

2. 交互思維與界面設(shè)計思維的融合價值

  • 兼顧功能性與美觀性:用戶既需要能夠快速完成任務(wù),也希望在使用過程中感到愉悅。交互思維和界面設(shè)計思維的結(jié)合,可以讓產(chǎn)品在邏輯清晰的基礎(chǔ)上,通過視覺傳達(dá)提供更佳體驗。
  • 提升用戶認(rèn)知效率:交互邏輯清晰但界面復(fù)雜,會增加用戶認(rèn)知成本;界面美觀卻缺乏交互合理性,會讓操作變得困難。融合兩者可以提升用戶對信息的識別和理解效率。
  • 構(gòu)建品牌感與用戶粘性:交互設(shè)計讓用戶留下“好用”的印象,而界面設(shè)計則通過視覺元素讓用戶感到“好看”。這種結(jié)合不僅能滿足短期功能需求,還能通過美學(xué)設(shè)計強化品牌認(rèn)知,提升用戶長期粘性。

3. 交互思維與界面設(shè)計思維的融合方式

1)信息分層與視覺引導(dǎo)的結(jié)合

交互思維: 根據(jù)用戶操作邏輯,對信息進(jìn)行層級劃分,優(yōu)先展示關(guān)鍵信息,隱藏次要內(nèi)容。

界面設(shè)計思維: 通過顏色、字體大小、對比等視覺元素,強化信息的層級感和用戶的關(guān)注點。

案例:支付寶首頁的布局

交互層面: 核心功能(如轉(zhuǎn)賬、收付款)被放置在顯眼的首屏區(qū)域,次要功能(如理財推薦)隱藏在二級頁面。

界面層面: 不同模塊的背景顏色和按鈕樣式有明顯區(qū)分,用戶一眼就能找到核心功能。

2)動效與反饋設(shè)計的結(jié)合

交互思維: 動效作為用戶操作的反饋機制,提示操作結(jié)果或狀態(tài)變化。

界面設(shè)計思維: 動效的風(fēng)格和節(jié)奏與界面整體視覺風(fēng)格保持一致,增強整體體驗的連貫性。

案例:抖音的點贊動效

交互層面: 用戶雙擊屏幕后,出現(xiàn)心形動畫,明確提示“點贊成功”。

界面層面: 動效的色彩與抖音的品牌風(fēng)格一致,給用戶帶來視覺和情感上的滿足感。

3)視覺布局與操作路徑的優(yōu)化

交互思維: 確保核心操作路徑最短,減少用戶不必要的點擊和跳轉(zhuǎn)。

界面設(shè)計思維: 通過對頁面布局的優(yōu)化,讓用戶在操作路徑中感到界面簡潔且層次分明。

案例:京東購物車的設(shè)計

交互層面: 重要操作(如全選、去結(jié)算)被放置在用戶觸手可及的位置,減少多余步驟。

界面層面: 清晰的分組、直觀的價格信息展示,讓用戶輕松理解購物車內(nèi)容。

4)情感設(shè)計與功能優(yōu)化的結(jié)合

交互思維: 通過優(yōu)化功能滿足用戶需求,讓操作過程簡單高效。

界面設(shè)計思維: 在視覺設(shè)計中融入情感化元素,讓用戶感到愉悅或被關(guān)懷。

案例:網(wǎng)易云音樂的“聽歌識曲”功能

交互層面: 用戶只需點擊一個按鈕,系統(tǒng)即可快速識別歌曲,操作簡單高效。

界面層面: 啟動時有動態(tài)音波效果,識別成功后展示專輯封面和歌詞,增強情感連接。

4. 交互思維與界面設(shè)計思維融合的關(guān)鍵原則

  • 優(yōu)先滿足用戶需求:任何設(shè)計決策的出發(fā)點都應(yīng)是用戶需求,確保用戶能夠快速完成目標(biāo)任務(wù)。
  • 強調(diào)一致性與連貫性:界面視覺風(fēng)格和交互邏輯需要保持一致,避免用戶因切換頁面或操作而感到困惑。
  • 數(shù)據(jù)驅(qū)動優(yōu)化設(shè)計:通過用戶行為數(shù)據(jù)分析,發(fā)現(xiàn)交互邏輯和界面設(shè)計中的問題點,并不斷優(yōu)化。
  • 保持創(chuàng)新但不偏離預(yù)期:界面美觀或交互新穎可以吸引用戶,但要確保設(shè)計符合用戶的心理模型和習(xí)慣,避免過度創(chuàng)新導(dǎo)致理解困難。

5. 實踐案例:微信的朋友圈功能

微信的朋友圈功能是交互思維與界面設(shè)計思維結(jié)合的經(jīng)典案例:

交互設(shè)計:

用戶可以通過簡單的下滑操作瀏覽動態(tài),上滑時加載更多內(nèi)容,操作自然流暢。

點贊和評論的交互邏輯簡單,長按可以刪除自己的評論,符合用戶直覺。

界面設(shè)計:

動態(tài)展示以卡片形式分隔,保持視覺整潔。

文本和圖片的排版統(tǒng)一,評論區(qū)域的縮進(jìn)樣式使信息層級清晰。

總結(jié)

交互思維與產(chǎn)品思維、體驗思維、視覺設(shè)計思維的融合,是用戶體驗優(yōu)化的基礎(chǔ)。在實際設(shè)計中,我們既需要從全局出發(fā),規(guī)劃產(chǎn)品戰(zhàn)略,也需要關(guān)注用戶的每一步操作細(xì)節(jié)。

通過兩者的互相補充,我們能設(shè)計出既符合用戶需求,又實現(xiàn)商業(yè)價值的產(chǎn)品,更精準(zhǔn)地滿足用戶需求,讓產(chǎn)品不僅好用,還能打動人心。為用戶和企業(yè)帶來雙贏的結(jié)果。

未來,隨著技術(shù)的進(jìn)步和用戶需求的多樣化,這種融合將持續(xù)推動數(shù)字產(chǎn)品體驗的升級,成為提升產(chǎn)品競爭力的核心動力。

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

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

Tab Bar 動態(tài)設(shè)計提示

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

前排提示:本文多Gif需耐心加載,且需要有一定Ae基礎(chǔ)才能便于理解內(nèi)容。

 

 

 

 



 

 

01 前言

你有沒有注意過,App底部的圖標(biāo)是如何變成選中的?大多數(shù)產(chǎn)品是將靜態(tài)圖標(biāo)替換(硬切過渡),來完成狀態(tài)切換。

 

 

 


當(dāng)我看完上百個動態(tài)后,找到了更有趣的方式...



02 App底部導(dǎo)航構(gòu)成

通常由圖標(biāo)、文字/點線裝飾、和底板卡片組成,(當(dāng)然也有些產(chǎn)品只使用圖標(biāo)或文字),但設(shè)計師在進(jìn)行動態(tài)設(shè)計時則是針對這3部分。

 

 

 

 



03 Tab Bar動態(tài)類型

  • 圖標(biāo)動態(tài)
  • 裝飾元素動態(tài)
  • 底板卡片動態(tài)

動態(tài)效果由弱到強,視覺層級由低到高依次排序:圖標(biāo)動態(tài) — 裝飾元素動態(tài) — 底板卡片動態(tài)。(根據(jù)本文案例效果來排序,但效果不同會有所差異)

 

 

圖標(biāo)動態(tài)?
我們知道圖標(biāo)風(fēng)格可以簡單的分為:線性、面性還有線面。在這基礎(chǔ)上通過修改顏色或造型,又能延展出更多風(fēng)格。

 

 

 

 

  • 在底部導(dǎo)航中,假如圖標(biāo)選中前后都是線性風(fēng)格

最常用的是添加修剪路徑(Ae的一種路徑效果),你可以把它理解成托尼老師,可以通過調(diào)整百分百參數(shù)來控制線條生長。

 

 


但只是單色修剪,看起來很單調(diào)。我們可以在這個動畫基礎(chǔ)上再多復(fù)制幾層,并分別加入品牌色,這樣可以讓視覺看起來更豐富。

 

 

 

 

也可以換一種方式,只調(diào)整不同顏色圖標(biāo)的位置屬性,便能得到故障效果。

 

 


如果你覺得這些太浮夸,那么單個圖標(biāo)添加修剪路徑,再配合位移、旋轉(zhuǎn)等基礎(chǔ)屬性則是更好的選擇。

 

 

 

 

  • 假如選中圖標(biāo)是面型風(fēng)格

通用的方法是調(diào)整不透明度,相比于硬切更柔和,且不會過多吸引用戶注意力。但對于帶有娛樂類屬性的產(chǎn)品來說,可能會顯得有些普通。

 

 

 


我們可以考慮使用遮罩來制作動態(tài),首先在圖標(biāo)周圍繪制幾個圓,再將圖標(biāo)外輪廓,作為圓的遮罩,來控制其顯示范圍,最后調(diào)整圓的縮放即可。

 

 


在一些特殊的時間,設(shè)計師們可能會技癢,而將圖標(biāo)繪制的更加豐富,來營造氛圍。

 

 

 

對于這類圖標(biāo),只需要參考它們的物理狀態(tài)[下方解釋],再遵循從下往上,從中心往四周擴(kuò)張的原則來調(diào)整基礎(chǔ)屬性,便能制作出細(xì)節(jié)豐富的出場動畫。

 

 

 

(物理狀態(tài):該物體在現(xiàn)實場景下的狀態(tài),上圖獎杯真實世界狀態(tài)通常是放置地面,所以出場方向是從下到上。但假如你的圖標(biāo)是錦旗,那么物理狀態(tài)應(yīng)該是掛在墻上,所有出場方向是從上到下)


當(dāng)然如果去掉高光和投影,在制作一些動態(tài)時會更方便。
例如:復(fù)制一顆星,將其初始位置設(shè)定為一個獎杯的距離,并記錄關(guān)鍵幀,然后整體再移動一個獎杯距離。耳朵則調(diào)整路徑來完成移動和變形,這樣便能營造出3d旋轉(zhuǎn)的錯覺。

 

 

 

 

  • 假如選中圖標(biāo)是線面風(fēng)格

對于結(jié)構(gòu)復(fù)雜的圖標(biāo),可以提前分層。其中線條依舊可以使用修剪路徑(在Tab bar中,不同圖標(biāo)修剪路徑的起始點方向通常相同,以便保持一致性),而填充只需要調(diào)整元素縮放,并借助蒙版限制其顯示范圍就行。

 

 



裝飾元素動態(tài)?
如果你覺得前面這些方案不夠新穎,那我們可以對裝飾元素下手。(當(dāng)然這類方案很少見,原因在于商業(yè)價值不足,實現(xiàn)成本高,所以這里也只是提供一些創(chuàng)意練習(xí)思路)
在一些年輕化產(chǎn)品中,如果圖標(biāo)含義很容易理解,那么設(shè)計師可能會用線或點來替代文字,讓整體更簡潔。
國外設(shè)計師Tubik,通過讓點元素在移動時呈現(xiàn)心電圖樣式,讓人眼前一亮。

 

 

 


通過動態(tài)效果,甚至能體現(xiàn)出產(chǎn)品行業(yè)屬性。

 

 

  • 基于這種思路,我們同樣讓裝飾元素放在下方

嘗試修改軌跡樣式,然后為元素不透明度和位置添加動畫,你能猜出這是什么類型的產(chǎn)品嗎?

 

 


又或者再夸張些,將軌跡設(shè)計成電路圖。其中線條添加修剪路徑,再借助Ae路徑跟蹤方法,使圓點沿路徑運動。最后通過蒙版來控制整體動畫顯示范圍,這個方案看起來適合科技或游戲類產(chǎn)品。

 

 

 

 

  • 裝飾元素還可以放在上方

通過調(diào)整元素路徑來改變其造型,模擬液體滴落,再通過蒙版縮放,讓選中狀態(tài)下的圖標(biāo)出現(xiàn)。

 

 

 

 

  • 裝飾元素還可以放在中間

假如你的圖標(biāo)設(shè)計的足夠巧妙,我們可以提前繪制好關(guān)鍵筆畫的運動軌跡,便能通過修剪這條軌跡來完成筆畫的移動。

 

 




底板卡片動態(tài)?
這類動態(tài)少見的原因在于其動態(tài)效果面積大,視覺層級高,容易過度吸引用戶注意力。目前也只是在個別產(chǎn)品中看過卡片凸起效果。

 

  • 當(dāng)選中圖標(biāo)時,讓卡片凸起

在Ae中要制造這樣的效果,最先想到的可能是調(diào)整卡片路徑,但這樣的方式在制作彈性時非常麻煩。

 

 

 


我們有更簡單的方法,先多畫出一個圓,然后與卡片路徑合并。
為了讓邊緣圓滑,整體添加高斯模糊簡單阻塞,分別加大參數(shù),便能讓邊緣圓滑。(這種方式有個缺點:會收縮原有卡片寬高。所以添加效果后,需要借助參考線再次調(diào)整卡片大小)

 

 

 

 

完成圓滑處理后,修改其他元素的基礎(chǔ)屬性即可。

 

 

目前能記起的只有美團(tuán)外賣看過這效果。但為了降低視覺干擾,其弱化了彈性次數(shù)。

 

 

  • 除了凸起,還可以凹陷

這個效果靈感來源于Dribbble設(shè)計師(EuroART93),我們只需要將凸起案例中,圓與底板卡片的布爾運算模式改為相減就行,其他元素同樣調(diào)整基礎(chǔ)屬性。

 

 

此方案目前還沒有在其他產(chǎn)品中看過,究其原因還是效果太過搶眼。

 

 

看了這么多,其實不難發(fā)現(xiàn)。同一個圖標(biāo),只需要改變不同屬性或元素的運動方式,便能帶來不一樣的感受。

 

 

 

 

或許創(chuàng)意的產(chǎn)生,并不是腦袋突然迸發(fā)出全新的東西。而是許多我們熟知的舊有內(nèi)容組合了起來。
正是它們之間這種奇妙的融合,給我們帶來了新鮮感,或許這就是我們要的創(chuàng)意。

 

 

 



最后再說兩句:

每個產(chǎn)品都有自己的調(diào)性和目標(biāo)用戶,動態(tài)效果也有強有弱。好的動態(tài)應(yīng)該是能與其進(jìn)行匹配,而不是根據(jù)某個產(chǎn)品得出一個絕對的答案。
本文演示了不同類型圖標(biāo)用什么動態(tài),并不代表只能這樣用。動態(tài)效果類型遠(yuǎn)遠(yuǎn)不止這些,而以上只是最常見的動態(tài)屬性組合方式,所以請不要局限你的想法。

 



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

馮.雷斯托夫效應(yīng) | 設(shè)計師需要知道的設(shè)計原則!

天宇 設(shè)計思維

前言
在我們的日常生活中,心理學(xué)的影響無處不在。它像一把神奇的鑰匙,能打開人們內(nèi)心深處的秘密。作為設(shè)計師,我們更應(yīng)該掌握并運用心理學(xué),將其融入我們的設(shè)計中,從而創(chuàng)造出更具有吸引力和影響力的作品。
設(shè)計并不僅僅是形狀、顏色和布局的組合,更是對人類心理的探索和解讀。我們的每一個設(shè)計決策,都與用戶的心理狀態(tài)和認(rèn)知過程息息相關(guān)。如何抓住用戶的眼球、引發(fā)他們的興趣、引導(dǎo)他們的行為,這些都是我們需要深入研究的課題。
在眾多的心理學(xué)原理中,馮·雷斯托夫效應(yīng)(Von Restorff Effect)是一個值得設(shè)計師們關(guān)注的設(shè)計法則。這個效應(yīng)揭示了一個有趣的現(xiàn)象:特殊的東西往往比普通的東西更容易被人記住。這就意味著,在設(shè)計中,我們要制造一些“特殊”的元素,使它們能夠從眾多的信息中脫穎而出,成為用戶關(guān)注的焦點。今天筆者就帶大家了解一下設(shè)計中常用的心理學(xué)之一馮·雷斯托夫效應(yīng)。
 
 
 
分享目錄
一、關(guān)于馮.雷斯托夫效應(yīng)
二、馮.雷斯托夫效應(yīng)對設(shè)計的影響
三、在設(shè)計中的應(yīng)用
四、常見問題及解決方式
五、結(jié)語
 
 
 
一、關(guān)于馮.雷斯托夫效應(yīng)
1.產(chǎn)生背景
在1933年的德國,一個名叫海德維希·馮·雷斯托夫的醫(yī)生開啟了一項改變我們對人類記憶理解的實驗。她深入探索了當(dāng)人們面對一系列物品時,他們的記憶是如何運作的。通過精心設(shè)計的對比實驗,她發(fā)現(xiàn)了一個令人驚奇的現(xiàn)象:在一組物品中,那個最特別的物品總是更容易被人們記住。
馮.雷斯托夫效應(yīng) | 設(shè)計師需要知道的設(shè)計原則!
 
 
這一發(fā)現(xiàn)為我們揭示了一個核心事實:特別的事物更能吸引我們的注意力,并在我們的記憶中留下深刻的印記。想象一下,在一組物品中,如果有一個被聚光燈照亮,那么相比其他未被照亮的物品,它無疑會成為人們關(guān)注的焦點,從而在記憶中留下更深的痕跡。
這個人類行為和記憶的規(guī)律后來被命名為“馮·雷斯托夫效應(yīng)”。這一效應(yīng)不僅僅是一個簡單的觀察,它實際上是人類行為學(xué)和心理學(xué)領(lǐng)域的一項重要研究成果。隨著時間的推移,這一效應(yīng)逐漸被應(yīng)用于美學(xué)和設(shè)計領(lǐng)域,為設(shè)計師們提供了全新的視角和工具,以創(chuàng)造出更具吸引力和影響力的作品。
自馮·雷斯托夫效應(yīng)被正式確立命名以來,眾多科研學(xué)者在此基礎(chǔ)上進(jìn)行了更深入的研究,他們不僅剖析了這一效應(yīng)的內(nèi)在機制和影響因素,還探討了其在不同情境下的應(yīng)用。隨著研究的深入,對于這一效應(yīng)的理解也在不斷加深,并衍生出了許多其他的理論和學(xué)術(shù)觀點。
 
2.融入設(shè)計行業(yè)
馮·雷斯托夫效應(yīng)為我們提供了一個獨特的視角,幫助我們更好地理解人類記憶的運作方式。通過運用這一原理,我們可以在設(shè)計中有意識地創(chuàng)造出令人難忘的元素,從而與觀眾建立更深刻的聯(lián)系。無論是在廣告、品牌推廣還是產(chǎn)品設(shè)計中,突出特別的元素都是一種有效的策略,可以幫助我們更好地吸引觀眾的注意力并留下深刻的印象。
馮.雷斯托夫效應(yīng) | 設(shè)計師需要知道的設(shè)計原則!
 
 
馮·雷斯托夫效應(yīng),又被稱為隔離效應(yīng)或新奇效應(yīng),揭示了人們在記憶中的偏好。當(dāng)情境或經(jīng)歷中出現(xiàn)與眾不同的刺激時,這種效應(yīng)尤為明顯。
在當(dāng)今信息爆炸的時代,用戶往往沒有耐心去仔細(xì)查找信息,而是快速掃視。因此,設(shè)計師需要巧妙地運用萊斯托夫效應(yīng),使關(guān)鍵內(nèi)容從繁雜的信息中脫穎而出,吸引用戶的目光。
統(tǒng)一性是設(shè)計的基礎(chǔ),但只有差異化的元素才能讓信息從頁面中脫穎而出。通過巧妙運用顏色、形狀、布局等元素,我們可以創(chuàng)造出與眾不同的視覺效果,引導(dǎo)用戶的視線。通過巧妙地突出關(guān)鍵內(nèi)容,我們能夠更好地與用戶溝通,引領(lǐng)他們的注意力,為業(yè)務(wù)創(chuàng)造更大的價值。
 
 
 
二、馮.雷斯托夫效應(yīng)對設(shè)計的影響
1.背景不同 強化視覺
在界面設(shè)計中,我們常常會遇到這樣的情況:在同類型的元素中,某一元素與其他元素存在顯著差異,這種現(xiàn)象我們稱之為“背景不同”。為了使某個模塊或元素在用戶心中留下深刻印象,我們可以利用環(huán)境差異來提高其識別度和記憶度。這種手法在UI設(shè)計中被廣泛應(yīng)用,它利用了馮·雷斯托夫效應(yīng),能有效吸引用戶點擊。
例如淘寶底部標(biāo)簽欄中的四個ICON,唯獨首頁的第一個ICON(品牌logo)風(fēng)格與眾不同。即使離開了該頁面,這個特殊的ICON依然讓人印象深刻,餓了么第二的圖標(biāo)也是如此。因此,我們在設(shè)計界面時,若想吸引用戶的注意或提高點擊量,可以打破常規(guī),讓特定元素在同背景下脫穎而出。
馮.雷斯托夫效應(yīng) | 設(shè)計師需要知道的設(shè)計原則!
 
 
再比如下圖的個人中心界面,功能入口模塊均采用ICON展示,而游樂場模塊卻采用了特殊的布局和設(shè)計。因此,當(dāng)用戶進(jìn)入個人中心時,最先映入眼簾的便是游樂場模塊。這也解釋了為什么我們在進(jìn)行廣告和活動投放時,需要特別設(shè)計的原因。
馮.雷斯托夫效應(yīng) | 設(shè)計師需要知道的設(shè)計原則!
 
 
 
2.經(jīng)驗不同 強化記憶
當(dāng)遇到與過去經(jīng)驗顯著不同的情況時,我們的大腦會產(chǎn)生一種特殊的效應(yīng),這種效應(yīng)被稱為“經(jīng)驗不同”的效應(yīng)。例如,在騎自行車的過程中,我們通常習(xí)慣于左手控制左把手,右手控制右把手。但是,如果我們嘗試用雙手交叉的方式來騎車,結(jié)果很可能會摔倒。從此以后,每當(dāng)我們聽到或描述有關(guān)騎車摔倒的事情時,我們都會立刻想起那次“經(jīng)驗不同”的嘗試。
同樣地,淘寶和京東在618、雙十一等大型促銷活動時,會選擇重新設(shè)計他們的首頁。與往常的設(shè)計相比,這些新的首頁設(shè)計通常會增加更多的促銷入口,甚至改變ICON的風(fēng)格。從馮·雷斯托夫效應(yīng)的角度來看,這種與以往不同的設(shè)計能夠更好地吸引用戶的注意力,加深用戶的記憶,并擴(kuò)大活動對用戶的影響力。
馮.雷斯托夫效應(yīng) | 設(shè)計師需要知道的設(shè)計原則!
 
 
 
 
 
三、在設(shè)計中的應(yīng)用
1.功能隔離提高效率
在視覺層面難以實現(xiàn)強烈差異化時,我們可以通過功能來實現(xiàn)有效的隔離。以微信為例,其置頂功能允許用戶將好友或群聊消息置于頂部,從而與其他信息區(qū)分開來。這種設(shè)計確保了關(guān)鍵信息的優(yōu)先級,使用戶能夠更快速地找到和關(guān)注所需內(nèi)容。通過巧妙地運用功能,我們可以輕松地解決視覺上的一致性與差異化之間的矛盾,為用戶提供更加流暢和個性化的體驗。
馮.雷斯托夫效應(yīng) | 設(shè)計師需要知道的設(shè)計原則!
 
 
 
2.動效加強引導(dǎo)
靜態(tài)頁面容易讓人視覺疲勞,動效能夠更加生動有趣地展示內(nèi)容,引導(dǎo)用戶更加關(guān)注頁面。相較于被動接受信息,動效能夠更加有效地吸引用戶注意。
馮.雷斯托夫效應(yīng) | 設(shè)計師需要知道的設(shè)計原則!
 
 
 
3.背景聯(lián)動吸引目光
隨著Banner自動輪播的普及,用戶對其的吸引力逐漸降低。面對不斷變化的廣告,用戶不再耐心地逐個瀏覽。當(dāng)無法獲取所需信息時,他們的視線會迅速轉(zhuǎn)向其他區(qū)域。
為了應(yīng)對這一挑戰(zhàn),騰訊視頻首頁的Banner采用了背景聯(lián)動的形式。這意味著頭部背景色會根據(jù)Banner圖片的色調(diào)進(jìn)行變化,從而擴(kuò)大了內(nèi)容的變化空間。這種設(shè)計不僅使廣告更加引人注目,還使用戶更容易被吸引并保持關(guān)注。
馮.雷斯托夫效應(yīng) | 設(shè)計師需要知道的設(shè)計原則!
 
 
 
4.icon強化加強視覺感知
頻道頁的入口方式多種多樣,金剛區(qū)icon無疑是最優(yōu)選擇。若要突出展示某些業(yè)務(wù)功能,單一的icon配合動效可有效吸引用戶關(guān)注。此策略簡單高效,有助于用戶快速找到所需內(nèi)容。
馮.雷斯托夫效應(yīng) | 設(shè)計師需要知道的設(shè)計原則!
 
 
 
5.內(nèi)容強化凸顯價值感
在設(shè)計界面時,我們追求的是在有限的空間內(nèi)展示更多的有效信息,避免信息的無效重復(fù)。但在電商平臺中,尤其是涉及到利益點時,我們需要確保信息具有足夠的價值感和吸引力。
以智行APP開通會員為例,領(lǐng)神卡作為核心賣點被突出展示,采用了平鋪展開的方式,從而突顯其價值。相對其他權(quán)益則相應(yīng)地進(jìn)行了弱化處理,以保持整體信息的清晰度和重點。這樣的設(shè)計既充分利用了屏幕空間,又確保了用戶能夠快速了解到核心的利益點。
馮.雷斯托夫效應(yīng) | 設(shè)計師需要知道的設(shè)計原則!
 
 
 
6.分層隔離提高信息層級
頁面信息層次分明,信息層級越高,用戶感知越強烈,越能吸引注意。例如,模態(tài)彈窗處于最上層,與內(nèi)容層完全隔離,用戶無法忽視。其次是非模態(tài)懸浮層,與內(nèi)容層隔離,但不影響用戶操作。還有側(cè)邊懸浮按鈕、頂部或底部懸浮橫條等。
馮.雷斯托夫效應(yīng) | 設(shè)計師需要知道的設(shè)計原則!
 
 
 
 
 
四、常見問題及解決方式
1.本末倒置的危險
受“危險按鈕”的影響,過去設(shè)計師常常給予負(fù)向情緒操作很高的視覺層級,例如退出登錄。這樣的設(shè)計意圖是警示用戶操作危險,但視覺上卻過于強調(diào),甚至有些“喧賓奪主”。近年來,移動端設(shè)計中這種矛盾逐漸減少,但仍然存在。與其強調(diào)操作的難度和危險性,不如考慮如何讓用戶自然地忽視這些操作,減少不必要的干擾。從馮·雷斯托夫效應(yīng)來看,這種設(shè)計方式有本末倒置之嫌,應(yīng)盡量避免。
馮.雷斯托夫效應(yīng) | 設(shè)計師需要知道的設(shè)計原則!
 
 
 
2.什么都突出等于什么都不突出
新手設(shè)計師常常會遇到想要突出所有元素,但最終無法突出任何一項的問題。頁面中的特異點應(yīng)該屬于少數(shù),如果所有元素都想做得不一樣,都會讓頁面整體視覺效果崩潰。因此,在設(shè)計中要學(xué)會取舍,選擇最重要的元素進(jìn)行突出,才能達(dá)到最佳的視覺效果。
 
 
 
五、結(jié)語
總的來說,將馮·雷斯托夫效應(yīng)運用到設(shè)計中,能幫助我們創(chuàng)造出更具吸引力、更容易被記住的設(shè)計。但請記住,任何設(shè)計決策都應(yīng)以用戶為中心,了解他們的需求和心理是關(guān)鍵。只有這樣,我們才能真正創(chuàng)造出打動人心的設(shè)計。
 


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

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

ui設(shè)計分享達(dá)人 用戶研究

聊聊關(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è)計思維
 
 
 


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

軟件產(chǎn)品中,如何減少頁面跳轉(zhuǎn)?

資深UI設(shè)計者 設(shè)計管理與成長

這就是信息的無限性和手機屏幕的有限性之間的矛盾,如何把信息合理的展示給用戶,需要我們重新對信息進(jìn)行組織分類,使信息能更高效有序地被用戶認(rèn)知。在進(jìn)行信息設(shè)計的時候,我們會經(jīng)常遇到“扁平化設(shè)計”這個詞,在我的理解看來,扁平化設(shè)計可以理解為:“精簡交互步驟,用戶用最少的步驟就完成任務(wù)”。層級太多了用戶就會看不懂;即使看得懂,層級多了用起來也麻煩,因此:手機上能不跳轉(zhuǎn)就不跳轉(zhuǎn)。那我們就來看看有沒有辦法減少跳轉(zhuǎn)…

54個絕妙UI/UX設(shè)計秘訣:讓你的設(shè)計脫穎而出!

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

當(dāng)你為你的項目創(chuàng)建有效的,可訪問的,漂亮的ui時,只需要最小的調(diào)整來幫助快速改善你的設(shè)計。 努力創(chuàng)造。在這篇簡短且易于理解的指南中,我收集了一些容易放置的內(nèi)容。在實踐中,這些小技巧可以毫不費力地幫助你改善你的設(shè)計,還有用戶體驗。

希望你喜歡!

1·讓你的元素出現(xiàn)更多

 

用微妙的邊界定義。

使用多重陰影或非常微妙的邊界(只是一個陰影比你的實際影子)周圍的某些元素可以使這些元素出現(xiàn)

更清晰,更清晰,幫助你避免那些看起來泥濘的陰影。

 

 

2.減少字母間距

 

標(biāo)題給一個更好的光學(xué)范圍。減少長格式正文的字母間距?這是一個大大的“不”。但對于標(biāo)題……我要說“是”!

你的標(biāo)題很可能會比他們的標(biāo)題更大,更重。相比于正文,字母之間的間距有時會出現(xiàn)視覺上更大,這并不是你想要的。減少字母間距,只是少量,可以使你的標(biāo)題視覺平衡,更易于閱讀,通常更賞心悅目。

 

 

3.圖表一致性

 

為了一致性,確保你的圖標(biāo)具有相同的視覺風(fēng)格。確保它們擁有相同的視覺風(fēng)格;同樣的重量,要么填滿,要么秒變了。不要混搭。

 

 

4.頁面可以用一種字體

 

只使用一種字體就很好。在設(shè)計時,使用單一字體是絕對沒問題的,這樣做實際上可以幫你產(chǎn)生更強、更持久的結(jié)果。忽略“總是使用兩種字體”最小值的人群。使用以下組合重量,大小和顏色,你仍然可以產(chǎn)生完美的可接受的結(jié)果。雖然只有一個單獨的字體。

 

 

5.適當(dāng)?shù)牧舭?/h3>

 

留白是UI設(shè)計朋友。大膽的使用。適度的留白,即使是少量的白色物質(zhì),但要使用得當(dāng)。能讓你的設(shè)計透氣,而且看起來更光亮。

 

 

6.20pt的文字

 

創(chuàng)建長篇內(nèi)容?給20 pt試試。對于長形式的內(nèi)容(即微博文章,項目描述等等),試著這樣做20pt(甚至更多一點)為你的文本字號。當(dāng)然,這取決于所選擇的字體,但大多數(shù)流行的字體在20pt時效果得很好,并帶來更好的閱讀體驗當(dāng)你的用戶面對一堵文字墻的時候。18pt太過時了。

 

 

7.字號集比例

 

使用字體比例定義一個適合的字體大小集。使用字體比例可以幫助您輕松、實用地定義一組字體大小。顧名思義,Type Scale基于一個比例因子(比如1.25)工作的。從一個基本字體大小(18px)和乘(或除)它與縮放因子得到的字體大小要么更高(即;H?,H?等),或較低層次(即;標(biāo)題、按鈕等)字體比例將幫助你產(chǎn)生看起來和諧的文本字號集。因為他們的大小根據(jù)設(shè)定的固定比例增加和減少。

 

 

8.界面顏色定義

 

選擇一個基本顏色,然后使用色彩和色調(diào)增加均勻性。你猜怎么著?你不必總是用大量的顏色填充你的設(shè)計。如果項目允許,簡單地使用一個有限的調(diào)色板選擇一個基地顏色,然后使用你選擇的顏色的色調(diào)和陰影可以增加一致性以最簡單的方式來改變你的設(shè)計。

 

 

9.登陸用戶體驗

 

改善用戶登錄的體驗。記住拇指規(guī)則。允許用戶在任何時候跳過您的移動應(yīng)用程序上線序列,并且放置跳過鏈接在拇指容易觸及的位置。只是一個簡單的調(diào)整,可以為你的用戶提供更好的體驗……

記住,拇指仍然是主宰!

 

 

 

10.陰影來自一個光源

 

你的影子來自其中一個光源對吧?確保你的影子總是來自一個光源。這是一個簡單的錯誤,但它可以讓你的設(shè)計看起來更拋光且統(tǒng)一。記住,我們不是生活在一個擁有一千個太陽的國度里。

 

 

 

11.建立字體集合

 

使用更好的字體組合,效率會很很快。當(dāng)你想要提高你的字體組合技巧的時候,當(dāng)面對1000個字體選擇,只是去尋找對應(yīng)的自己集合,效率會快很多。

 

 

 

12.提高你的對比

 

文字和圖像與一個微妙的覆蓋。根據(jù)文本可能放置在圖像上方的位置,您可以選擇嘗試,并測試完整的圖像覆蓋,或更微妙的(從下到上,或從上到下)漸變疊加,以實現(xiàn)兩者之間的簡單對比。為了在你的文本之間形成良好的對比,不要太復(fù)雜的內(nèi)容和圖片。

 

 

13.使用居中排列文字要有節(jié)制

 

太多就會導(dǎo)致用戶體驗不合格。盡量只在標(biāo)題和小段落中使用中心文字。對于幾乎所有其他內(nèi)容,保持文本左對齊。你的用戶會感謝你的你。

 

 

14.多字重

 

當(dāng)選擇一個多用途的文字,盡量找一個大量權(quán)重。你搜索的字體有很多選擇嗎?重量、風(fēng)格?如果你打算在你的一些項目中使用它,請嘗試并確保它是這樣做的。只有一種重量或樣式。不行的。如果可以的話,我建議你避開這些。當(dāng)然也有例外,某些項目會要求“只有一種風(fēng)格”

更精致的字體,但對于絕大多數(shù)項目,你想要的字體再多一點就能…嗯…選擇。即使你決定只使用兩種或三種重量或風(fēng)格,希望你在設(shè)計過程的后期需要更多的空間。

 

 

 

15.淺色背景不要文本過亮

 

想要創(chuàng)造更容易理解的界面,對吧?把你的文字調(diào)暗在光亮的背景上。在淺色背景下工作時,不要讓你的文本太亮。

 

 

16.純黑色文字未必是好

 

當(dāng)涉及到長形式的內(nèi)容時,某些常規(guī)的粗細(xì)字體仍然可以看。但太重了,在屏幕上會很僵硬。你可以很容易地解決這個問題,選擇一些像深灰色(即#4F4F4F)的基調(diào),把文字往下寫,讓眼睛更容易看。

 

 

17.通過色彩對比度作區(qū)分

總是通過icon最突出的內(nèi)容。你認(rèn)為這是常識,對嗎?我并不覺得。通過使用色彩對比度做區(qū)分,尺寸和標(biāo)簽,確保盡可能突出。如果可以的話,不要總是只依賴圖標(biāo)。如果可以使用文本標(biāo)簽,那就使用它們,讓用戶更好地理解。

 

 

18.字體越小,行高越大

 

當(dāng)你的字體變小時,請增加行高,以達(dá)到更好的通用性。這同樣適用于當(dāng)你的字體大小增加。簡單地降低行高。

 

 

19.“Il1”測試文字可讀性

 

使用x-height來測試字體的可讀性?;旧?,x-height是一個小寫字母' x '相對于大寫字母高度 (T)的相同字體。如果你的字體有一個大的x高,通常有助于更好地閱讀,特別是在使用長形式的正文文本。另一種確定字體可讀性,并縮小范圍的方法如果你有一些無法選擇的字體,可以做這個測試,比較來自特定字體的三個字符:大寫字母I,小寫的L和數(shù)字1。

 

 

 

20.突出實用動作

 

當(dāng)設(shè)計一個在應(yīng)用程序內(nèi)部使用的菜單時,確保提供最多經(jīng)常使用的動作(例如:上傳圖像,添加文件等)最突出的屏幕上。

 

 

 

21.顏色-從你的圖像中選擇

 

顏色-從你的圖像中選擇,會給你的產(chǎn)品帶來生命。簡單地從你的產(chǎn)品圖片中選擇顏色,然后應(yīng)用各種色調(diào)。你選擇的顏色陰影到你的背景,文字,圖標(biāo)或更多,可以添加。你的設(shè)計具有豐富的視覺趣味和個性。

 

 

22.不同字體,不同行高

 

基于字體的x坐標(biāo),設(shè)置您的線高度。不同x高的字體需要不同的行高測量,實現(xiàn)文本行之間的正確分隔。即使你可能有兩種字體相同的字體大小(即:18px)它們的x的高度可以有很大的不同,這在選擇正確的線的種類起著很大的作用高度來實現(xiàn)。

 

 

23.突出最重要元素的方式

 

突出最重要的元素。通過使用字體大小,權(quán)重,顏色和布局的組合,可以很輕松的突出UI中最重要的元素。只是很簡單,但微妙的調(diào)整,讓用戶體驗更好一點。

 

 

24.錯誤下額外的視覺輔助

 

操作錯誤的時候,添加一個額外的視覺輔助。在用戶剛剛采取的操作附近添加一個錯誤消息可以是簡單的形式,但很有幫助,當(dāng)他們填寫任何形式的表格時額外的視覺輔助。

 

 

25.移動端熱區(qū)創(chuàng)建

 

嘗試在移動端創(chuàng)建慷慨的熱區(qū)。當(dāng)為移動設(shè)備設(shè)計時,嘗試創(chuàng)建足夠大的可點擊區(qū)域,是好的。對于只包含文本的按鈕和鏈接來說,這是很有挑戰(zhàn)性的,盡可能使用帶有標(biāo)簽的圖標(biāo)。

以下是iOS和Android的最小推薦點擊區(qū)域:

44 x 44pt用于iOS

48x48dp用于Android

 

 

26.短標(biāo)題上盡量使用全大寫

 

在短標(biāo)題上盡量使用全大寫。如果你想在標(biāo)題上使用全大寫,請確保它們在任何時候都很短。有可能,最好是一行。將它們用于較長的文本是不好的。和之前的技巧一樣,在標(biāo)題中添加少量的字母間距。能讓他們呼吸順暢,而且視覺效果更好。

 

 

27.保持文字與圖像的對比度

 

在輕文本和圖像之間,保持可接受的對比度。一定要確保淺色的文字在淺色的背景下是清晰的。簡單地應(yīng)用一個稍微不透明的背景在你的文本后面將保持這些元素之間的對比度很好。

 

 

28.英文標(biāo)題字體推薦

 

看看這些很棒的字體,用在標(biāo)題非常好的。發(fā)現(xiàn)他們真的很適合標(biāo)題,設(shè)計感很強。(我沒有推廣費用,請放心用)

 

 

29.英文長文本字體推薦

 

看看這些很棒的字體,用于長文本是非常好的,強烈推薦使用。(我仍然沒有任何推廣費)。

 

 

30.讓垂直節(jié)奏恰到好處

 

標(biāo)題和正文。當(dāng)你想實現(xiàn)一個好的垂直節(jié)奏,以及一個強大的視覺之間,需要對文本元素排版、間距作設(shè)計。我見過許多設(shè)計,最常見的是在文章列表中,它們已經(jīng)被應(yīng)用標(biāo)題的上下空白相等,這樣就失去了這種聯(lián)系在它下面有正文。在這種情況下,我總是會給我的標(biāo)題更多的頂部邊距,而在底部,標(biāo)題和下面的內(nèi)容之間的連接是更強,有良好的垂直節(jié)奏,視覺層次保留在所有的文章之間。

 

 

31.使用具有信息性的提示符

 

對于下載指標(biāo),試著去做盡可能提供信息。對于用戶,嘗試使具有信息性的下載指示符對用戶很友好。你可以通過使用顏色來實現(xiàn)這一點,用百分?jǐn)?shù)來顯示當(dāng)前進(jìn)度,一個簡單的圖標(biāo),讓他們可以在任何地方取消下載時間。

 

 

 

32.保持標(biāo)題相對簡潔

 

如果你能保持標(biāo)題簡短,簡潔……“想做就做”。

如果可以,如果合適的話,保持標(biāo)題簡短,時髦,切中要點。而不是“這是你的風(fēng)格,你的方式”,簡單地使用像這樣的“你的風(fēng)格。你的方式。”人們會瀏覽,保持這些標(biāo)題簡短有力有助于他們更快地消化中的信息。

記住,這種方式可能會讓人感覺很突然,你需要考慮一下你所從事的項目類型,以及目標(biāo)受眾來決定方法是合適的,相對于更標(biāo)準(zhǔn)的格式。

 

 

33.選擇合適的字體

 

正確的設(shè)計“聲音”。在項目中處理文本時,選擇正確的字體將影響就像你說話的聲音一樣。要大聲,要柔和,要友好,要正式,要有趣。每一種字體都有自己獨特的聲音,關(guān)鍵在于找到合適的字體你正在做的項目的聲音。當(dāng)你剛接觸字體時,這似乎是一項艱巨的任務(wù),所以不要害怕從類似的項目中獲得靈感,并從這些項目中汲取靈感它們有助于影響你的決定,并提高你的理解什么是合適的。

 

 

 

34.行長度的平衡點

 

你的正文,并提高可讀性處理正文文本,并試圖找到合適的行長度可能有點平衡。對于一個單獨的列頁面,45到75個字符被普遍認(rèn)為是滿意的行長度,而行長度為66個字符(包括字母和空格)被發(fā)現(xiàn)是最佳位置。當(dāng)然,字體大小和行高在決定可讀性時也起著重要作用,但是對于行長,保持在45到75個字符之間,就會更好了。

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

35.幽靈文字提升用戶體驗

 

偶爾使用純裝飾的幽靈文字也可以,但要保留閱讀的問題。屏幕上的大部分文本內(nèi)容應(yīng)該堅持可用性最佳的做法是沒有問題的。但有時,希望添加純出于裝飾目的的文本,我們不希望所有的設(shè)計都落入乏味。如果沒有元素會以任何方式影響用戶體驗,那么出于裝飾的原因,插入奇怪的元素是可以的。



 

 

36.界面元素保證快速區(qū)分

 

使用戶界面中的元素彼此區(qū)分。按鈕、通知,ui中兩個獨立但重要的元素。如果可以的話,總是試著確保你的用戶能夠快速地將它們區(qū)分開來,輕松掃描您的網(wǎng)站或應(yīng)用程序。按鈕,在大多數(shù)情況下,將優(yōu)先,所以確保他們是最突出的。項目在屏幕上,并很容易區(qū)分其他元素。

 

 

37.投影的玩兒法

 

只是一些細(xì)微的陰影,你所需要的。我們都喜歡陰影,對吧?它們可以作為微妙又很強大的視覺線索,在您的設(shè)計中使用要適度?,F(xiàn)實世界中的陰影,在大多數(shù)情況下幾乎是不可察覺的,而且所以你應(yīng)該在ui中模仿這種行為。放下沉重和黑暗的陰影并降低不透明度,以實現(xiàn)一些的東西更微妙和栩栩如生。

 



38.全大寫文本

使用全部大寫?選擇適合的字體,能夠達(dá)到光學(xué)清晰度。在你的設(shè)計中適度使用“全部大寫”是很好的。選擇一個合適的字體與行高和較重的字重,使用戶的光學(xué)清晰度。

 

 

39.讓面包屑脫穎而出

讓面包屑脫穎而出,易于為用戶解釋。面包屑無處不在,經(jīng)常用于內(nèi)容豐富的網(wǎng)站,通過最小的調(diào)整,你可以確保用戶能夠快速定位他們在一個網(wǎng)站上的位置以及他們可能需要去的其他地方。如果用戶已經(jīng)通過使用跳轉(zhuǎn)到網(wǎng)站的某個深度,這一點尤其有用。

 

 

40.嘗試用高飽和顏色

 

使用高度飽和的顏色?試一試用淺色調(diào)來緩和氣氛或者陰涼處。高度飽和的顏色(明亮的藍(lán)色、紅色、綠色等)可以讓網(wǎng)站看起來很棒,但是當(dāng)過度使用時,它們會使使用者的眼睛疲勞,主要是在使用的時候的文字內(nèi)容。盡可能使用時要適度,并盡量與柔和的顏色搭配顏色或色調(diào)變化)的飽和顏色,以避免可怕的眼睛疲勞。使用這種方法還可以直接注意到飽和的色彩和使最重要的內(nèi)容前面和中心,與更柔和的顏色采取較少突出角色,讓用戶的眼睛休息一下。記住,在選擇顏色時,可讀性和可訪問性應(yīng)該是最優(yōu)先的。

 

 

 

41.圖表不要叛逆的使用

 

在ui中使用已建立的圖標(biāo),為了避免給用戶造成混淆。在你的設(shè)計中添加圖標(biāo)時,試著選擇一個有代表性的已建立的圖標(biāo)。不要選擇一個能傳達(dá)正確含義和功能的圖標(biāo)否則會引起困惑,成為用戶的認(rèn)知障礙。不要在這些圖標(biāo)上過于叛逆。

 

 

 

42.接近原則

 

在眾多經(jīng)過嘗試和測試的設(shè)計原則中,這里有一個是幫助您為用戶生成更清晰的ui的關(guān)鍵。接近只是確保相關(guān)設(shè)計元素放置在一起的過程,表明彼此之間的關(guān)系,這有助于加快用戶的認(rèn)知。

 

 

 

43.文本網(wǎng)格

4pt基線網(wǎng)格+ 8pt網(wǎng)格=單一網(wǎng)格。當(dāng)使用類型時,8點網(wǎng)格旁邊使用4點基線

可以為你的設(shè)計帶來更和諧的垂直節(jié)奏。您需要對齊您的類型到基線網(wǎng)格4,使用的行高值為4的倍數(shù)(16、20、24、28等)

為什么4?我發(fā)現(xiàn)在過去使用特定的文本大小時,按8的倍數(shù)縮放是不太合適。

 

 

 

44.文本建議行高比例

減少標(biāo)題上的行高是很好的。與長形式的主體文本不同,它需要足夠的行高,以便折行易讀。標(biāo)題的推薦行高通常約為1至1.3倍。

 

 

45.顏色選擇

 

選顏色有困難計劃嗎?在顏色上進(jìn)行類比論。類似的顏色,也被稱為相鄰或相鄰的色調(diào),是其中之一最和諧的配色方案,可以大大幫助你,如果你有很難挑選出搭配得很好的顏色。由三原色、二原色和三原色組成的一組相鄰的色調(diào)幫助您創(chuàng)建一個簡單的,顏色方案快速。當(dāng)你需要快速將顏色調(diào)和到混合中時,可以使用類似的方法。

 

 

46.提高信噪比

 

在你的設(shè)計中盡量提高信噪比。你可以在你的設(shè)計中通過最大化信號來實現(xiàn)清晰和可用性最小化噪聲,從而產(chǎn)生高信噪比。您可以通過確保提供相關(guān)信息(信號)來實現(xiàn)這一點有效,不相關(guān)的信息(噪聲)被減少或完全刪除。事情更加清晰。提高你的信噪比。

 

 

47.圖像文字達(dá)到強對比

 

我想用更非正式的方式說話。語氣嗎?嘗試所有小寫字母。使用較重的字體和大寫會顯得有點正式和夸張。試著選擇全小寫和較輕的字體。在處理特定項目時,使用類似全小寫的拷貝可以呈現(xiàn)更非正式的、可接觸的信息。記住要在圖像之間使用某種顏色疊加與文字達(dá)到較強的對比。

 

 

48.使用重量、大小和顏色來表示類型中的層次結(jié)構(gòu)

 

當(dāng)使用類型時,元素不需要尖叫“看看我!”一直如此但他們確實需要一個平衡的等級制度。只需通過重量、大小和顏色進(jìn)行細(xì)微的調(diào)整就可以實現(xiàn)這一點。這樣做可以讓用戶掃描并找到必要的元素,避免在過程中產(chǎn)生任何混淆。

 

 

49.淺色文字加深色?

 

養(yǎng)肥了,字體大小為最佳易讀性。當(dāng)設(shè)置暗色文字與淺色背景,選擇一個更輕的粗細(xì)。但是…反過來說:淺色文字>深色背景。最好是看一下增加一點字體重量,特別是對于長表單副本。以最佳的易讀性為目標(biāo),避免讓用戶的眼睛疲勞。

 

 

 

50. 用你的字體選擇創(chuàng)造正確的情感回應(yīng)

 

試著為你要呈現(xiàn)的內(nèi)容選擇合適的字體。用戶是精明的,有一種直觀的感覺,當(dāng)內(nèi)容與他們交談當(dāng)它不是。正確的字體選擇是至關(guān)重要的,使您的內(nèi)容講給他們直率和情感的水平。

 

 

51.大寫字母+字母間距=更好的易讀性

 

你是否使用全大寫的短行文本?嗯…這是一個好主意,增加這些字母之間的間距,以達(dá)到更好的用戶的易讀性。這樣做使單詞更容易閱讀和處理,因為字母更多彼此區(qū)分。字母之間的間距只要稍微增加一點就可以。

 

 

52.錯誤告知

 

打開這些錯誤消息,您的表格有幫助。在使用表單時,請嘗試并確保錯誤消息得到解釋。出了什么問題,如何補救??偸亲層脩袅私馇闆r,即使是像常規(guī)一樣常見的事情的形式。讓這些錯誤消息有用,不要讓您的用戶蒙昧。

 

 

 

53.告知用戶正在發(fā)生什么

 

試著向用戶保證在加載過程中會發(fā)生一些的事情你的應(yīng)用程序。顯示應(yīng)用程序元素的框架可以幫助你快速溝通布局和確保用戶正在發(fā)生一些事情。系統(tǒng)狀態(tài)可見性是一個重要的原則要遵循,并允許用戶知道發(fā)生了什么。不要讓用戶從一開始玩猜謎游戲。

 

 

 

54.不可逆的操作強提醒

 

告訴用戶將要做什么如果他們應(yīng)用了某個動作。在應(yīng)用特定的操作之前,總是嘗試并詳細(xì)地告知用戶可以有結(jié)果。這尤其適用于具有不可逆轉(zhuǎn)后果的行為,如刪除某些東西。讓用戶知道將要發(fā)生什么,并在此之前要求他們進(jìn)行確認(rèn)。他們就會按下那個標(biāo)有“刪除”的紅色大按鈕。

 

 

 

參考文獻(xiàn)《UI & UX Micro Tips - The Ultimate Collection》

 



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

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

大廠搜索哪家強?這些交互設(shè)計值得你收藏學(xué)習(xí)!

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

大體上分為兩類:彩蛋流和體驗流

搜索的本質(zhì)是什么?無疑是內(nèi)容的召回和信息的推薦。

可隨著時代的發(fā)展和行業(yè)公司的內(nèi)卷,不少公司除了持續(xù)優(yōu)化搜索結(jié)果與推薦外,在搜索的體驗和彩蛋上也是下了不少功夫,從而進(jìn)一步加強自有產(chǎn)品的競爭力與用戶黏性。因此今天就來盤點一些,那有意思的大廠搜索交互。

大體上分為兩類:彩蛋流和體驗流

A.彩蛋流

注重提升搜索過程中的趣味程度,以增加用戶的好感度與產(chǎn)品印象/口碑。行業(yè)代表:谷歌瀏覽器、百度瀏覽器

 

1.谷歌瀏覽器

 

可以說是搜索彩蛋的先行者,內(nèi)置了很多搜索關(guān)鍵詞的有趣彩蛋,如娛樂角色:搜索【滅霸】,頁面右邊會打響指,相關(guān)字段會被’毀滅‘掉

 

 

搜索【馬里奧兄弟】,右邊也有游戲里一樣的點擊彩蛋

 

 

還有各種有意思的搜索結(jié)果比如搜:is google down(谷歌關(guān)閉了嗎),搜索結(jié)果優(yōu)先顯示:NO

 

 

再如搜索《銀河系漫游指南》的一句話:the answer to life, the universe, and everything。此時搜索結(jié)果頁會自動計算成42。貌似也只有讀過《銀河系漫游指南》的人才能明白其中的奧秘。聽說是生命、宇宙與萬事萬物的終極解答。

 

而且在日常的節(jié)日、活動、熱點運營上,谷歌也從不缺席。都會在搜索框上用【插畫、動效】等形式承載各種活動入口、吸引用戶參與,可以已經(jīng)形成一個穩(wěn)定、具有品牌感的企業(yè)文化了。

 

如各種復(fù)活節(jié)、開學(xué)季、母親節(jié)動效。而且更多有趣、創(chuàng)意的設(shè)計案例,可上:有蛋案例 youdananli.com 近千個行業(yè)/大廠里的創(chuàng)意案例、上百個知識模型、設(shè)計方法。

 

 

 

 

 

 

2.百度瀏覽器

 

百度在搜索彩蛋里下的的功夫也不少,最著名的應(yīng)該是搜索【黑洞】時,頁面上會出現(xiàn)黑洞的吸入特效。

 

 

 

 

而且和谷歌相同,在其他的搜索關(guān)鍵詞上,百度也是埋下了不少彩蛋,比如:搜索【翻轉(zhuǎn)】,頁面會左右翻過來

 

 

 

 

搜索【跳躍】,頁面會在上下跳動

 

 

 

 

搜索【失重】,頁面上的字會飄起來‍

 

 

 

 

 

而在【活動運營】上,百度也是很有心地進(jìn)行著創(chuàng)新設(shè)計,力求給用戶一種眼前一亮的感覺。比如每年的愚人節(jié),搜索結(jié)果頁上都有‘調(diào)戲’用戶的創(chuàng)意設(shè)計,各種輕松調(diào)皮的畫風(fēng) 給不少用戶帶來了新鮮感和趣味性。

 

 

 

 

 

 

 

還有在【活動入口】的設(shè)計上也是特別有想法:在某年的圣誕節(jié)上,百度創(chuàng)新性地將活動入口’嵌套‘在結(jié)果頁卡片中間,用活動里的ip形象-雪人「抬著」結(jié)果頁卡片和在上面「滾動」

 

 

 

 

 

 

 

用這種充滿創(chuàng)意+應(yīng)景的的入口設(shè)計與引導(dǎo)方式,最大限度地降低漏斗,吸引讓更多用戶參與該活動。另外,百度搜索框上面的運營活動入口,也和谷歌有異曲同工之妙。

 

 

 

 

而且更多有趣、創(chuàng)意的設(shè)計案例,可上:有蛋案例 youdananli.com 近千個行業(yè)/大廠里的創(chuàng)意案例、上百個知識模型、設(shè)計方法。

 

 

B.體驗流

 

注重提升搜索過程中的交互體驗,以增加用戶的操作效率與產(chǎn)品易用性

 

代表:蘋果產(chǎn)品、夸克瀏覽器

 

 

1.Apple/蘋果產(chǎn)品

 

·iPhone

 

iPhone的【桌面搜索】除了能查詢手機上的各種信息、文件,它還自帶了【匯率轉(zhuǎn)換和計算器】。在搜索框輸入【數(shù)學(xué)公式、匯率轉(zhuǎn)換】時會自動計算對應(yīng)的結(jié)果。無需用戶額外打開計算器、瀏覽器,大大減少操作鏈路。

 

 

 

 

在iOS的原生鍵盤里,可以根據(jù)輸入詞檢測+搜索對應(yīng)的手機號碼:當(dāng)你輸入 【打+我或通訊錄好友+電話】時,鍵盤上會自動顯示自己或好友的電話號碼,點擊號碼就能自動粘貼在輸入框中。

 

 

 

 

用戶無需前往通訊錄就能輕松「獲知+想起」誰誰的電話號碼,大大提升操作體驗與效率

 

·Mac

 

在Mac電腦的工具欄上搜索相關(guān)幫助時,系統(tǒng)會直接把該結(jié)果所對應(yīng)的頁面位置調(diào)取出來并懸浮展示。用戶可以直觀地該結(jié)果在哪里,并減少尋找的操作路徑,免去多余操作

 

 

 

 

在Mac電腦的‘系統(tǒng)偏好設(shè)置’里搜索幫助,在結(jié)果列表上會以聚光燈的形式展示各個結(jié)果入口。選擇具體某個結(jié)果時,該入口的聚光燈會更清晰些,特別容易找到搜索結(jié)果。

 

 

 

 

2.夸克瀏覽器

 

夸克瀏覽器除了傳統(tǒng)的「點擊搜索框」喚出輸入欄外,在屏幕任意位置下滑手勢同樣可以喚出搜索框。

 

 

 

 

降低「需要往上手指移動,才能點擊搜索框」的操作成本,讓用戶更快、更精準(zhǔn)地觸達(dá)搜索。

 

而且在輸入網(wǎng)址或英文等字段時,搜索框下方會出現(xiàn)一個滑塊區(qū)。點擊就會變成長條的滑塊,拖拽滑塊即可改變光標(biāo)位置。

 

 

 

 

而且更多有趣、創(chuàng)意的設(shè)計案例,可上:有蛋案例 youdananli.com 近千個行業(yè)/大廠里的創(chuàng)意案例、上百個知識模型、設(shè)計方法。

 

讓用戶更方便地將光標(biāo)快速移動到想要的位置中,以便更快地搜索信息,大大降低操作成本。而且夸克還會前置搜索結(jié)果, 比如在搜索框中輸入“某城市+天氣”的關(guān)鍵詞,上方就會以卡片的形式顯示該地區(qū)最近一周的天氣。

 

用戶無需觸發(fā)搜索、進(jìn)入結(jié)果頁才能看到想要查詢的信息。

 

 



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

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

日歷

鏈接

個人資料

存檔