在互聯(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 個好處。
我們試著再舉個例子,加深下對模式的理解,順便學(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 個交互模式的任意組合。
常見的導(dǎo)航模式有按鈕組合、標(biāo)簽菜單、宮格布局、列表視圖等。
導(dǎo)航模式的主要作用是,告知用戶當(dāng)前在網(wǎng)站的位置,以及接下來到哪些頁面,這有點像地圖 APP。
上面這張圖中,包含了幾種導(dǎo)航組件呢?
搜索,是各大電商 APP 常見的交互模式。
搜索模式允許用戶輸入關(guān)鍵詞,然后系統(tǒng)返回搜索結(jié)果。
打個比方,這有點像在 Navicat 中寫了一段 SQL 查詢。
SELECT id, name, age
FROM users
WHERE age > 18
這段 SQL 的作用是,查詢大于 18 歲的用戶信息,包含序號、名稱、年齡。
常見的反饋模式組件,涉及了對話框、吐司提示、氣泡提示等。
反饋模式用的比較多的場景是,告知用戶一些信息或提示,比如“輸入密碼錯了、展示訂單取消的注意事項”等。
輸入模式主要用于新數(shù)據(jù)創(chuàng)建,例如淘寶下單時,你新增了一個收貨地址。
打開美團(tuán)叫個外賣,整個訂單創(chuàng)建流程,也是輸入模式。
有很多人可能會把輸入模式和編輯模式搞混。
區(qū)別它們的一個方法是,交互流程涉及新數(shù)據(jù)創(chuàng)建,還是改舊數(shù)據(jù)。
改數(shù)據(jù)的話,那就是編輯模式。
我們在看到一些干貨文章,或好用的小程序想要轉(zhuǎn)發(fā)給朋友,那就要用到分享模式。
分享模式可以很簡單,也可以往復(fù)雜了做,看產(chǎn)品階段去實現(xiàn)。
引導(dǎo)模式和反饋模式有點像,都是展示特定的內(nèi)容。
那怎么分辨它們呢?
以設(shè)計師視角來看,反饋模式需要用戶觸發(fā),系統(tǒng)被動顯示。
而要讓用戶特別關(guān)注的信息,那就是引導(dǎo)模式。
模式,即抽象的規(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ù)。
在前面的文章中,我們定義了交互思維和流程、目標(biāo),接下來我們分享交互設(shè)計思維與我們常說的產(chǎn)品思維、體驗思維等的融合。
在現(xiàn)代產(chǎn)品開發(fā)中,交互思維與產(chǎn)品設(shè)計思維的融合已經(jīng)成為提升用戶體驗的關(guān)鍵。兩者看似獨立,卻可以在實際設(shè)計過程中形成互補,打造出更加契合用戶需求的產(chǎn)品。本文將從兩者的特點、融合的價值,以及實際應(yīng)用場景中如何落地等角度出發(fā),深入探討它們的結(jié)合。
交互思維:聚焦人與界面的連接
交互思維的核心在于用戶與產(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è)價值。核心問題包括:
產(chǎn)品設(shè)計思維更偏向戰(zhàn)略層面,要求對市場、用戶和商業(yè)有全局的理解,并制定產(chǎn)品的發(fā)展方向。
例子:微信從“即時通訊”入手,以簡單的聊天功能切入市場,但通過持續(xù)擴(kuò)展支付、朋友圈、公眾號等模塊,構(gòu)建了一個完善的生態(tài)系統(tǒng)。
兩種思維的結(jié)合,能夠更好地兼顧用戶體驗和商業(yè)價值。以下是幾種主要的融合方式:
1)以用戶為中心,兼顧商業(yè)目標(biāo)
交互思維: 設(shè)計流暢、直觀的操作流程,提升用戶體驗。
產(chǎn)品設(shè)計思維: 在流暢體驗的基礎(chǔ)上,引導(dǎo)用戶完成關(guān)鍵行為(如購買、注冊等),實現(xiàn)商業(yè)目標(biāo)。
案例:美團(tuán)外賣的下單流程
2)用戶需求與技術(shù)限制的平衡
交互思維: 關(guān)注用戶直觀感受,簡化復(fù)雜操作,讓用戶專注于目標(biāo)任務(wù)。
產(chǎn)品設(shè)計思維: 在技術(shù)和資源限制內(nèi),找到實現(xiàn)用戶需求的最佳方案。
案例:滴滴出行的“一鍵叫車”功能
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è)計思維: 從用戶行為和反饋中提煉需求,找到情感體驗的落地點。
案例:支付寶的“年度賬單”功能
隨著AI技術(shù)的深入發(fā)展,交互思維與產(chǎn)品設(shè)計思維的融合將進(jìn)一步進(jìn)化:
案例展望:
在未來的外賣App中,AI不僅能推薦菜品,還能根據(jù)天氣、飲食偏好提供動態(tài)優(yōu)惠,讓用戶感到“被理解”。同時,界面交互會變得更加智能,比如直接通過語音完成點餐和支付。
在數(shù)字產(chǎn)品開發(fā)中,交互思維和用戶體驗設(shè)計思維(UX Design Thinking)常常交織在一起,共同塑造出令人滿意的產(chǎn)品體驗。兩者的融合不僅能提升產(chǎn)品的使用效率,還能激發(fā)用戶的情感共鳴,最終實現(xiàn)用戶目標(biāo)與商業(yè)價值的雙贏。
1)交互思維:聚焦人與界面的高效互動
交互思維主要關(guān)注用戶與產(chǎn)品之間的操作過程,旨在通過直觀的界面設(shè)計和高效的交互方式,幫助用戶輕松完成任務(wù)。其核心要素包括:
2)用戶體驗設(shè)計思維:以用戶為中心的全局視角
用戶體驗設(shè)計思維是以用戶需求和用戶感受為核心的一種方法論,涉及產(chǎn)品從設(shè)計到使用的整個生命周期。其重點在于:
簡單類比:
交互思維像是一位專注于修路的工程師,確保路徑筆直流暢;而用戶體驗設(shè)計思維更像是一位城市規(guī)劃師,考慮如何讓整個城市的交通系統(tǒng)高效且宜居。
1)從細(xì)節(jié)到全局,滿足用戶操作與體驗的雙重需求
交互思維注重細(xì)節(jié),優(yōu)化每一個交互動作;而用戶體驗設(shè)計思維關(guān)注全局,確保整個使用流程的流暢性和一致性。兩者結(jié)合能讓用戶在每個環(huán)節(jié)都感到舒適且順暢。
案例:微信的語音消息功能
2)情感設(shè)計與功能設(shè)計的結(jié)合
交互思維解決“怎么用”的問題,用戶體驗設(shè)計思維則深入到“為什么用”和“用后感受如何”。情感設(shè)計是兩者融合的一個關(guān)鍵點,既提升用戶滿意度,又增強產(chǎn)品粘性。
案例:支付寶的完成支付動畫
3)用戶需求與設(shè)計約束的平衡
交互思維幫助優(yōu)化操作路徑,而用戶體驗設(shè)計思維則考慮設(shè)計的合理性和場景適配性。在技術(shù)和資源的限制下,兩者需要共同探索最佳方案。
案例:滴滴出行的路線規(guī)劃與確認(rèn)
4)數(shù)據(jù)驅(qū)動與用戶感知的結(jié)合
數(shù)據(jù)分析是用戶體驗設(shè)計思維的重要部分,而交互思維則利用這些數(shù)據(jù)優(yōu)化每一次用戶操作。兩者的結(jié)合能實現(xiàn)功能的個性化和體驗的精準(zhǔn)化。
案例:淘寶的商品推薦系統(tǒng)
抖音作為短視頻平臺,在交互與用戶體驗設(shè)計的結(jié)合上表現(xiàn)得尤為出色:
隨著AI的普及,交互思維與用戶體驗設(shè)計思維的融合將進(jìn)入新的階段:
案例展望:智能客服系統(tǒng)
未來的智能客服不僅能準(zhǔn)確理解用戶問題,還能根據(jù)情緒識別調(diào)整對話語氣,同時提供即時解決方案與友好的互動體驗。
交互思維與界面設(shè)計思維的融合,是現(xiàn)代產(chǎn)品設(shè)計中的核心命題。二者分別專注于用戶操作路徑和界面視覺呈現(xiàn),彼此互補,共同打造出功能性與美觀性兼具的產(chǎn)品體驗。本文將從兩者的概念、融合的價值以及實際案例中剖析如何實現(xiàn)這種深度結(jié)合。
1)交互思維:聚焦操作路徑與用戶效率
交互思維的核心在于優(yōu)化用戶操作的每一步,降低操作復(fù)雜度,提升使用效率。
其關(guān)注的主要問題包括:
特點:邏輯性強,重在用戶的操作行為,強調(diào)功能可達(dá)性和可用性。
2)界面設(shè)計思維:聚焦視覺呈現(xiàn)與情感體驗
界面設(shè)計思維則以視覺表現(xiàn)為中心,關(guān)注界面的美感和信息傳達(dá)的有效性。其關(guān)注點包括:
特點:更注重感性表達(dá),強調(diào)用戶的情感體驗和對產(chǎn)品的第一印象。
簡單類比:
交互思維像是設(shè)計產(chǎn)品的操作說明書,確保邏輯清晰易懂;而界面設(shè)計思維則為產(chǎn)品包裝,讓它看起來有吸引力且直觀。
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)音波效果,識別成功后展示專輯封面和歌詞,增強情感連接。
微信的朋友圈功能是交互思維與界面設(shè)計思維結(jié)合的經(jīng)典案例:
交互設(shè)計:
用戶可以通過簡單的下滑操作瀏覽動態(tài),上滑時加載更多內(nèi)容,操作自然流暢。
點贊和評論的交互邏輯簡單,長按可以刪除自己的評論,符合用戶直覺。
界面設(shè)計:
動態(tài)展示以卡片形式分隔,保持視覺整潔。
文本和圖片的排版統(tǒng)一,評論區(qū)域的縮進(jìn)樣式使信息層級清晰。
交互思維與產(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
在前面的文章中,我們定義了交互思維和流程、目標(biāo),接下來我們分享交互設(shè)計思維與我們常說的產(chǎn)品思維、體驗思維等的融合。
在現(xiàn)代產(chǎn)品開發(fā)中,交互思維與產(chǎn)品設(shè)計思維的融合已經(jīng)成為提升用戶體驗的關(guān)鍵。兩者看似獨立,卻可以在實際設(shè)計過程中形成互補,打造出更加契合用戶需求的產(chǎn)品。本文將從兩者的特點、融合的價值,以及實際應(yīng)用場景中如何落地等角度出發(fā),深入探討它們的結(jié)合。
交互思維:聚焦人與界面的連接
交互思維的核心在于用戶與產(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è)價值。核心問題包括:
產(chǎn)品設(shè)計思維更偏向戰(zhàn)略層面,要求對市場、用戶和商業(yè)有全局的理解,并制定產(chǎn)品的發(fā)展方向。
例子:微信從“即時通訊”入手,以簡單的聊天功能切入市場,但通過持續(xù)擴(kuò)展支付、朋友圈、公眾號等模塊,構(gòu)建了一個完善的生態(tài)系統(tǒng)。
兩種思維的結(jié)合,能夠更好地兼顧用戶體驗和商業(yè)價值。以下是幾種主要的融合方式:
1)以用戶為中心,兼顧商業(yè)目標(biāo)
交互思維: 設(shè)計流暢、直觀的操作流程,提升用戶體驗。
產(chǎn)品設(shè)計思維: 在流暢體驗的基礎(chǔ)上,引導(dǎo)用戶完成關(guān)鍵行為(如購買、注冊等),實現(xiàn)商業(yè)目標(biāo)。
案例:美團(tuán)外賣的下單流程
2)用戶需求與技術(shù)限制的平衡
交互思維: 關(guān)注用戶直觀感受,簡化復(fù)雜操作,讓用戶專注于目標(biāo)任務(wù)。
產(chǎn)品設(shè)計思維: 在技術(shù)和資源限制內(nèi),找到實現(xiàn)用戶需求的最佳方案。
案例:滴滴出行的“一鍵叫車”功能
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è)計思維: 從用戶行為和反饋中提煉需求,找到情感體驗的落地點。
案例:支付寶的“年度賬單”功能
隨著AI技術(shù)的深入發(fā)展,交互思維與產(chǎn)品設(shè)計思維的融合將進(jìn)一步進(jìn)化:
案例展望:
在未來的外賣App中,AI不僅能推薦菜品,還能根據(jù)天氣、飲食偏好提供動態(tài)優(yōu)惠,讓用戶感到“被理解”。同時,界面交互會變得更加智能,比如直接通過語音完成點餐和支付。
在數(shù)字產(chǎn)品開發(fā)中,交互思維和用戶體驗設(shè)計思維(UX Design Thinking)常常交織在一起,共同塑造出令人滿意的產(chǎn)品體驗。兩者的融合不僅能提升產(chǎn)品的使用效率,還能激發(fā)用戶的情感共鳴,最終實現(xiàn)用戶目標(biāo)與商業(yè)價值的雙贏。
1)交互思維:聚焦人與界面的高效互動
交互思維主要關(guān)注用戶與產(chǎn)品之間的操作過程,旨在通過直觀的界面設(shè)計和高效的交互方式,幫助用戶輕松完成任務(wù)。其核心要素包括:
2)用戶體驗設(shè)計思維:以用戶為中心的全局視角
用戶體驗設(shè)計思維是以用戶需求和用戶感受為核心的一種方法論,涉及產(chǎn)品從設(shè)計到使用的整個生命周期。其重點在于:
簡單類比:
交互思維像是一位專注于修路的工程師,確保路徑筆直流暢;而用戶體驗設(shè)計思維更像是一位城市規(guī)劃師,考慮如何讓整個城市的交通系統(tǒng)高效且宜居。
1)從細(xì)節(jié)到全局,滿足用戶操作與體驗的雙重需求
交互思維注重細(xì)節(jié),優(yōu)化每一個交互動作;而用戶體驗設(shè)計思維關(guān)注全局,確保整個使用流程的流暢性和一致性。兩者結(jié)合能讓用戶在每個環(huán)節(jié)都感到舒適且順暢。
案例:微信的語音消息功能
2)情感設(shè)計與功能設(shè)計的結(jié)合
交互思維解決“怎么用”的問題,用戶體驗設(shè)計思維則深入到“為什么用”和“用后感受如何”。情感設(shè)計是兩者融合的一個關(guān)鍵點,既提升用戶滿意度,又增強產(chǎn)品粘性。
案例:支付寶的完成支付動畫
3)用戶需求與設(shè)計約束的平衡
交互思維幫助優(yōu)化操作路徑,而用戶體驗設(shè)計思維則考慮設(shè)計的合理性和場景適配性。在技術(shù)和資源的限制下,兩者需要共同探索最佳方案。
案例:滴滴出行的路線規(guī)劃與確認(rèn)
4)數(shù)據(jù)驅(qū)動與用戶感知的結(jié)合
數(shù)據(jù)分析是用戶體驗設(shè)計思維的重要部分,而交互思維則利用這些數(shù)據(jù)優(yōu)化每一次用戶操作。兩者的結(jié)合能實現(xiàn)功能的個性化和體驗的精準(zhǔn)化。
案例:淘寶的商品推薦系統(tǒng)
抖音作為短視頻平臺,在交互與用戶體驗設(shè)計的結(jié)合上表現(xiàn)得尤為出色:
隨著AI的普及,交互思維與用戶體驗設(shè)計思維的融合將進(jìn)入新的階段:
案例展望:智能客服系統(tǒng)
未來的智能客服不僅能準(zhǔn)確理解用戶問題,還能根據(jù)情緒識別調(diào)整對話語氣,同時提供即時解決方案與友好的互動體驗。
交互思維與界面設(shè)計思維的融合,是現(xiàn)代產(chǎn)品設(shè)計中的核心命題。二者分別專注于用戶操作路徑和界面視覺呈現(xiàn),彼此互補,共同打造出功能性與美觀性兼具的產(chǎn)品體驗。本文將從兩者的概念、融合的價值以及實際案例中剖析如何實現(xiàn)這種深度結(jié)合。
1)交互思維:聚焦操作路徑與用戶效率
交互思維的核心在于優(yōu)化用戶操作的每一步,降低操作復(fù)雜度,提升使用效率。
其關(guān)注的主要問題包括:
特點:邏輯性強,重在用戶的操作行為,強調(diào)功能可達(dá)性和可用性。
2)界面設(shè)計思維:聚焦視覺呈現(xiàn)與情感體驗
界面設(shè)計思維則以視覺表現(xiàn)為中心,關(guān)注界面的美感和信息傳達(dá)的有效性。其關(guān)注點包括:
特點:更注重感性表達(dá),強調(diào)用戶的情感體驗和對產(chǎn)品的第一印象。
簡單類比:
交互思維像是設(shè)計產(chǎn)品的操作說明書,確保邏輯清晰易懂;而界面設(shè)計思維則為產(chǎn)品包裝,讓它看起來有吸引力且直觀。
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)音波效果,識別成功后展示專輯封面和歌詞,增強情感連接。
微信的朋友圈功能是交互思維與界面設(shè)計思維結(jié)合的經(jīng)典案例:
交互設(shè)計:
用戶可以通過簡單的下滑操作瀏覽動態(tài),上滑時加載更多內(nèi)容,操作自然流暢。
點贊和評論的交互邏輯簡單,長按可以刪除自己的評論,符合用戶直覺。
界面設(shè)計:
動態(tài)展示以卡片形式分隔,保持視覺整潔。
文本和圖片的排版統(tǒng)一,評論區(qū)域的縮進(jìn)樣式使信息層級清晰。
交互思維與產(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
前排提示:本文多Gif需耐心加載,且需要有一定Ae基礎(chǔ)才能便于理解內(nèi)容。
你有沒有注意過,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)類型
動態(tài)效果由弱到強,視覺層級由低到高依次排序:圖標(biāo)動態(tài) — 裝飾元素動態(tài) — 底板卡片動態(tài)。(根據(jù)本文案例效果來排序,但效果不同會有所差異)
▍圖標(biāo)動態(tài)?
我們知道圖標(biāo)風(fēng)格可以簡單的分為:線性、面性還有線面。在這基礎(chǔ)上通過修改顏色或造型,又能延展出更多風(fēng)格。
最常用的是添加修剪路徑(Ae的一種路徑效果),你可以把它理解成托尼老師,可以通過調(diào)整百分百參數(shù)來控制線條生長。
但只是單色修剪,看起來很單調(diào)。我們可以在這個動畫基礎(chǔ)上再多復(fù)制幾層,并分別加入品牌色,這樣可以讓視覺看起來更豐富。
也可以換一種方式,只調(diào)整不同顏色圖標(biāo)的位置屬性,便能得到故障效果。
如果你覺得這些太浮夸,那么單個圖標(biāo)添加修剪路徑,再配合位移、旋轉(zhuǎn)等基礎(chǔ)屬性則是更好的選擇。
通用的方法是調(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)的錯覺。
對于結(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)品中看過卡片凸起效果。
在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)屬性組合方式,所以請不要局限你的想法。
這就是信息的無限性和手機屏幕的有限性之間的矛盾,如何把信息合理的展示給用戶,需要我們重新對信息進(jìn)行組織分類,使信息能更高效有序地被用戶認(rèn)知。在進(jìn)行信息設(shè)計的時候,我們會經(jīng)常遇到“扁平化設(shè)計”這個詞,在我的理解看來,扁平化設(shè)計可以理解為:“精簡交互步驟,用戶用最少的步驟就完成任務(wù)”。層級太多了用戶就會看不懂;即使看得懂,層級多了用起來也麻煩,因此:手機上能不跳轉(zhuǎn)就不跳轉(zhuǎn)。那我們就來看看有沒有辦法減少跳轉(zhuǎn)…
當(dāng)你為你的項目創(chuàng)建有效的,可訪問的,漂亮的ui時,只需要最小的調(diào)整來幫助快速改善你的設(shè)計。 努力創(chuàng)造。在這篇簡短且易于理解的指南中,我收集了一些容易放置的內(nèi)容。在實踐中,這些小技巧可以毫不費力地幫助你改善你的設(shè)計,還有用戶體驗。
希望你喜歡!
用微妙的邊界定義。
使用多重陰影或非常微妙的邊界(只是一個陰影比你的實際影子)周圍的某些元素可以使這些元素出現(xiàn)
更清晰,更清晰,幫助你避免那些看起來泥濘的陰影。
標(biāo)題給一個更好的光學(xué)范圍。減少長格式正文的字母間距?這是一個大大的“不”。但對于標(biāo)題……我要說“是”!
你的標(biāo)題很可能會比他們的標(biāo)題更大,更重。相比于正文,字母之間的間距有時會出現(xiàn)視覺上更大,這并不是你想要的。減少字母間距,只是少量,可以使你的標(biāo)題視覺平衡,更易于閱讀,通常更賞心悅目。
為了一致性,確保你的圖標(biāo)具有相同的視覺風(fēng)格。確保它們擁有相同的視覺風(fēng)格;同樣的重量,要么填滿,要么秒變了。不要混搭。
只使用一種字體就很好。在設(shè)計時,使用單一字體是絕對沒問題的,這樣做實際上可以幫你產(chǎn)生更強、更持久的結(jié)果。忽略“總是使用兩種字體”最小值的人群。使用以下組合重量,大小和顏色,你仍然可以產(chǎn)生完美的可接受的結(jié)果。雖然只有一個單獨的字體。
留白是UI設(shè)計朋友。大膽的使用。適度的留白,即使是少量的白色物質(zhì),但要使用得當(dāng)。能讓你的設(shè)計透氣,而且看起來更光亮。
創(chuàng)建長篇內(nèi)容?給20 pt試試。對于長形式的內(nèi)容(即微博文章,項目描述等等),試著這樣做20pt(甚至更多一點)為你的文本字號。當(dāng)然,這取決于所選擇的字體,但大多數(shù)流行的字體在20pt時效果得很好,并帶來更好的閱讀體驗當(dāng)你的用戶面對一堵文字墻的時候。18pt太過時了。
使用字體比例定義一個適合的字體大小集。使用字體比例可以幫助您輕松、實用地定義一組字體大小。顧名思義,Type Scale基于一個比例因子(比如1.25)工作的。從一個基本字體大小(18px)和乘(或除)它與縮放因子得到的字體大小要么更高(即;H?,H?等),或較低層次(即;標(biāo)題、按鈕等)字體比例將幫助你產(chǎn)生看起來和諧的文本字號集。因為他們的大小根據(jù)設(shè)定的固定比例增加和減少。
選擇一個基本顏色,然后使用色彩和色調(diào)增加均勻性。你猜怎么著?你不必總是用大量的顏色填充你的設(shè)計。如果項目允許,簡單地使用一個有限的調(diào)色板選擇一個基地顏色,然后使用你選擇的顏色的色調(diào)和陰影可以增加一致性以最簡單的方式來改變你的設(shè)計。
改善用戶登錄的體驗。記住拇指規(guī)則。允許用戶在任何時候跳過您的移動應(yīng)用程序上線序列,并且放置跳過鏈接在拇指容易觸及的位置。只是一個簡單的調(diào)整,可以為你的用戶提供更好的體驗……
記住,拇指仍然是主宰!
你的影子來自其中一個光源對吧?確保你的影子總是來自一個光源。這是一個簡單的錯誤,但它可以讓你的設(shè)計看起來更拋光且統(tǒng)一。記住,我們不是生活在一個擁有一千個太陽的國度里。
使用更好的字體組合,效率會很很快。當(dāng)你想要提高你的字體組合技巧的時候,當(dāng)面對1000個字體選擇,只是去尋找對應(yīng)的自己集合,效率會快很多。
文字和圖像與一個微妙的覆蓋。根據(jù)文本可能放置在圖像上方的位置,您可以選擇嘗試,并測試完整的圖像覆蓋,或更微妙的(從下到上,或從上到下)漸變疊加,以實現(xiàn)兩者之間的簡單對比。為了在你的文本之間形成良好的對比,不要太復(fù)雜的內(nèi)容和圖片。
太多就會導(dǎo)致用戶體驗不合格。盡量只在標(biāo)題和小段落中使用中心文字。對于幾乎所有其他內(nèi)容,保持文本左對齊。你的用戶會感謝你的你。
當(dāng)選擇一個多用途的文字,盡量找一個大量權(quán)重。你搜索的字體有很多選擇嗎?重量、風(fēng)格?如果你打算在你的一些項目中使用它,請嘗試并確保它是這樣做的。只有一種重量或樣式。不行的。如果可以的話,我建議你避開這些。當(dāng)然也有例外,某些項目會要求“只有一種風(fēng)格”
更精致的字體,但對于絕大多數(shù)項目,你想要的字體再多一點就能…嗯…選擇。即使你決定只使用兩種或三種重量或風(fēng)格,希望你在設(shè)計過程的后期需要更多的空間。
想要創(chuàng)造更容易理解的界面,對吧?把你的文字調(diào)暗在光亮的背景上。在淺色背景下工作時,不要讓你的文本太亮。
當(dāng)涉及到長形式的內(nèi)容時,某些常規(guī)的粗細(xì)字體仍然可以看。但太重了,在屏幕上會很僵硬。你可以很容易地解決這個問題,選擇一些像深灰色(即#4F4F4F)的基調(diào),把文字往下寫,讓眼睛更容易看。
總是通過icon最突出的內(nèi)容。你認(rèn)為這是常識,對嗎?我并不覺得。通過使用色彩對比度做區(qū)分,尺寸和標(biāo)簽,確保盡可能突出。如果可以的話,不要總是只依賴圖標(biāo)。如果可以使用文本標(biāo)簽,那就使用它們,讓用戶更好地理解。
當(dāng)你的字體變小時,請增加行高,以達(dá)到更好的通用性。這同樣適用于當(dāng)你的字體大小增加。簡單地降低行高。
使用x-height來測試字體的可讀性?;旧?,x-height是一個小寫字母' x '相對于大寫字母高度 (T)的相同字體。如果你的字體有一個大的x高,通常有助于更好地閱讀,特別是在使用長形式的正文文本。另一種確定字體可讀性,并縮小范圍的方法如果你有一些無法選擇的字體,可以做這個測試,比較來自特定字體的三個字符:大寫字母I,小寫的L和數(shù)字1。
當(dāng)設(shè)計一個在應(yīng)用程序內(nèi)部使用的菜單時,確保提供最多經(jīng)常使用的動作(例如:上傳圖像,添加文件等)最突出的屏幕上。
顏色-從你的圖像中選擇,會給你的產(chǎn)品帶來生命。簡單地從你的產(chǎn)品圖片中選擇顏色,然后應(yīng)用各種色調(diào)。你選擇的顏色陰影到你的背景,文字,圖標(biāo)或更多,可以添加。你的設(shè)計具有豐富的視覺趣味和個性。
基于字體的x坐標(biāo),設(shè)置您的線高度。不同x高的字體需要不同的行高測量,實現(xiàn)文本行之間的正確分隔。即使你可能有兩種字體相同的字體大小(即:18px)它們的x的高度可以有很大的不同,這在選擇正確的線的種類起著很大的作用高度來實現(xiàn)。
突出最重要的元素。通過使用字體大小,權(quán)重,顏色和布局的組合,可以很輕松的突出UI中最重要的元素。只是很簡單,但微妙的調(diào)整,讓用戶體驗更好一點。
操作錯誤的時候,添加一個額外的視覺輔助。在用戶剛剛采取的操作附近添加一個錯誤消息可以是簡單的形式,但很有幫助,當(dā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
在短標(biāo)題上盡量使用全大寫。如果你想在標(biāo)題上使用全大寫,請確保它們在任何時候都很短。有可能,最好是一行。將它們用于較長的文本是不好的。和之前的技巧一樣,在標(biāo)題中添加少量的字母間距。能讓他們呼吸順暢,而且視覺效果更好。
在輕文本和圖像之間,保持可接受的對比度。一定要確保淺色的文字在淺色的背景下是清晰的。簡單地應(yīng)用一個稍微不透明的背景在你的文本后面將保持這些元素之間的對比度很好。
看看這些很棒的字體,用在標(biāo)題非常好的。發(fā)現(xiàn)他們真的很適合標(biāo)題,設(shè)計感很強。(我沒有推廣費用,請放心用)
看看這些很棒的字體,用于長文本是非常好的,強烈推薦使用。(我仍然沒有任何推廣費)。
標(biāo)題和正文。當(dāng)你想實現(xiàn)一個好的垂直節(jié)奏,以及一個強大的視覺之間,需要對文本元素排版、間距作設(shè)計。我見過許多設(shè)計,最常見的是在文章列表中,它們已經(jīng)被應(yīng)用標(biāo)題的上下空白相等,這樣就失去了這種聯(lián)系在它下面有正文。在這種情況下,我總是會給我的標(biāo)題更多的頂部邊距,而在底部,標(biāo)題和下面的內(nèi)容之間的連接是更強,有良好的垂直節(jié)奏,視覺層次保留在所有的文章之間。
對于下載指標(biāo),試著去做盡可能提供信息。對于用戶,嘗試使具有信息性的下載指示符對用戶很友好。你可以通過使用顏色來實現(xiàn)這一點,用百分?jǐn)?shù)來顯示當(dāng)前進(jìn)度,一個簡單的圖標(biāo),讓他們可以在任何地方取消下載時間。
如果你能保持標(biāo)題簡短,簡潔……“想做就做”。
如果可以,如果合適的話,保持標(biāo)題簡短,時髦,切中要點。而不是“這是你的風(fēng)格,你的方式”,簡單地使用像這樣的“你的風(fēng)格。你的方式。”人們會瀏覽,保持這些標(biāo)題簡短有力有助于他們更快地消化中的信息。
記住,這種方式可能會讓人感覺很突然,你需要考慮一下你所從事的項目類型,以及目標(biāo)受眾來決定方法是合適的,相對于更標(biāo)準(zhǔn)的格式。
正確的設(shè)計“聲音”。在項目中處理文本時,選擇正確的字體將影響就像你說話的聲音一樣。要大聲,要柔和,要友好,要正式,要有趣。每一種字體都有自己獨特的聲音,關(guān)鍵在于找到合適的字體你正在做的項目的聲音。當(dāng)你剛接觸字體時,這似乎是一項艱巨的任務(wù),所以不要害怕從類似的項目中獲得靈感,并從這些項目中汲取靈感它們有助于影響你的決定,并提高你的理解什么是合適的。
你的正文,并提高可讀性處理正文文本,并試圖找到合適的行長度可能有點平衡。對于一個單獨的列頁面,45到75個字符被普遍認(rèn)為是滿意的行長度,而行長度為66個字符(包括字母和空格)被發(fā)現(xiàn)是最佳位置。當(dāng)然,字體大小和行高在決定可讀性時也起著重要作用,但是對于行長,保持在45到75個字符之間,就會更好了。
偶爾使用純裝飾的幽靈文字也可以,但要保留閱讀的問題。屏幕上的大部分文本內(nèi)容應(yīng)該堅持可用性最佳的做法是沒有問題的。但有時,希望添加純出于裝飾目的的文本,我們不希望所有的設(shè)計都落入乏味。如果沒有元素會以任何方式影響用戶體驗,那么出于裝飾的原因,插入奇怪的元素是可以的。
使用戶界面中的元素彼此區(qū)分。按鈕、通知,ui中兩個獨立但重要的元素。如果可以的話,總是試著確保你的用戶能夠快速地將它們區(qū)分開來,輕松掃描您的網(wǎng)站或應(yīng)用程序。按鈕,在大多數(shù)情況下,將優(yōu)先,所以確保他們是最突出的。項目在屏幕上,并很容易區(qū)分其他元素。
只是一些細(xì)微的陰影,你所需要的。我們都喜歡陰影,對吧?它們可以作為微妙又很強大的視覺線索,在您的設(shè)計中使用要適度?,F(xiàn)實世界中的陰影,在大多數(shù)情況下幾乎是不可察覺的,而且所以你應(yīng)該在ui中模仿這種行為。放下沉重和黑暗的陰影并降低不透明度,以實現(xiàn)一些的東西更微妙和栩栩如生。
使用全部大寫?選擇適合的字體,能夠達(dá)到光學(xué)清晰度。在你的設(shè)計中適度使用“全部大寫”是很好的。選擇一個合適的字體與行高和較重的字重,使用戶的光學(xué)清晰度。
讓面包屑脫穎而出,易于為用戶解釋。面包屑無處不在,經(jīng)常用于內(nèi)容豐富的網(wǎng)站,通過最小的調(diào)整,你可以確保用戶能夠快速定位他們在一個網(wǎng)站上的位置以及他們可能需要去的其他地方。如果用戶已經(jīng)通過使用跳轉(zhuǎn)到網(wǎng)站的某個深度,這一點尤其有用。
使用高度飽和的顏色?試一試用淺色調(diào)來緩和氣氛或者陰涼處。高度飽和的顏色(明亮的藍(lán)色、紅色、綠色等)可以讓網(wǎng)站看起來很棒,但是當(dāng)過度使用時,它們會使使用者的眼睛疲勞,主要是在使用的時候的文字內(nèi)容。盡可能使用時要適度,并盡量與柔和的顏色搭配顏色或色調(diào)變化)的飽和顏色,以避免可怕的眼睛疲勞。使用這種方法還可以直接注意到飽和的色彩和使最重要的內(nèi)容前面和中心,與更柔和的顏色采取較少突出角色,讓用戶的眼睛休息一下。記住,在選擇顏色時,可讀性和可訪問性應(yīng)該是最優(yōu)先的。
在ui中使用已建立的圖標(biāo),為了避免給用戶造成混淆。在你的設(shè)計中添加圖標(biāo)時,試著選擇一個有代表性的已建立的圖標(biāo)。不要選擇一個能傳達(dá)正確含義和功能的圖標(biāo)否則會引起困惑,成為用戶的認(rèn)知障礙。不要在這些圖標(biāo)上過于叛逆。
在眾多經(jīng)過嘗試和測試的設(shè)計原則中,這里有一個是幫助您為用戶生成更清晰的ui的關(guān)鍵。接近只是確保相關(guān)設(shè)計元素放置在一起的過程,表明彼此之間的關(guān)系,這有助于加快用戶的認(rèn)知。
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ù)縮放是不太合適。
減少標(biāo)題上的行高是很好的。與長形式的主體文本不同,它需要足夠的行高,以便折行易讀。標(biāo)題的推薦行高通常約為1至1.3倍。
選顏色有困難計劃嗎?在顏色上進(jìn)行類比論。類似的顏色,也被稱為相鄰或相鄰的色調(diào),是其中之一最和諧的配色方案,可以大大幫助你,如果你有很難挑選出搭配得很好的顏色。由三原色、二原色和三原色組成的一組相鄰的色調(diào)幫助您創(chuàng)建一個簡單的,顏色方案快速。當(dāng)你需要快速將顏色調(diào)和到混合中時,可以使用類似的方法。
在你的設(shè)計中盡量提高信噪比。你可以在你的設(shè)計中通過最大化信號來實現(xiàn)清晰和可用性最小化噪聲,從而產(chǎn)生高信噪比。您可以通過確保提供相關(guān)信息(信號)來實現(xiàn)這一點有效,不相關(guān)的信息(噪聲)被減少或完全刪除。事情更加清晰。提高你的信噪比。
我想用更非正式的方式說話。語氣嗎?嘗試所有小寫字母。使用較重的字體和大寫會顯得有點正式和夸張。試著選擇全小寫和較輕的字體。在處理特定項目時,使用類似全小寫的拷貝可以呈現(xiàn)更非正式的、可接觸的信息。記住要在圖像之間使用某種顏色疊加與文字達(dá)到較強的對比。
當(dāng)使用類型時,元素不需要尖叫“看看我!”一直如此但他們確實需要一個平衡的等級制度。只需通過重量、大小和顏色進(jìn)行細(xì)微的調(diào)整就可以實現(xiàn)這一點。這樣做可以讓用戶掃描并找到必要的元素,避免在過程中產(chǎn)生任何混淆。
養(yǎng)肥了,字體大小為最佳易讀性。當(dāng)設(shè)置暗色文字與淺色背景,選擇一個更輕的粗細(xì)。但是…反過來說:淺色文字>深色背景。最好是看一下增加一點字體重量,特別是對于長表單副本。以最佳的易讀性為目標(biāo),避免讓用戶的眼睛疲勞。
試著為你要呈現(xiàn)的內(nèi)容選擇合適的字體。用戶是精明的,有一種直觀的感覺,當(dāng)內(nèi)容與他們交談當(dāng)它不是。正確的字體選擇是至關(guān)重要的,使您的內(nèi)容講給他們直率和情感的水平。
你是否使用全大寫的短行文本?嗯…這是一個好主意,增加這些字母之間的間距,以達(dá)到更好的用戶的易讀性。這樣做使單詞更容易閱讀和處理,因為字母更多彼此區(qū)分。字母之間的間距只要稍微增加一點就可以。
打開這些錯誤消息,您的表格有幫助。在使用表單時,請嘗試并確保錯誤消息得到解釋。出了什么問題,如何補救??偸亲層脩袅私馇闆r,即使是像常規(guī)一樣常見的事情的形式。讓這些錯誤消息有用,不要讓您的用戶蒙昧。
試著向用戶保證在加載過程中會發(fā)生一些的事情你的應(yīng)用程序。顯示應(yīng)用程序元素的框架可以幫助你快速溝通布局和確保用戶正在發(fā)生一些事情。系統(tǒng)狀態(tài)可見性是一個重要的原則要遵循,并允許用戶知道發(fā)生了什么。不要讓用戶從一開始玩猜謎游戲。
告訴用戶將要做什么如果他們應(yīng)用了某個動作。在應(yīng)用特定的操作之前,總是嘗試并詳細(xì)地告知用戶可以有結(jié)果。這尤其適用于具有不可逆轉(zhuǎn)后果的行為,如刪除某些東西。讓用戶知道將要發(fā)生什么,并在此之前要求他們進(jìn)行確認(rèn)。他們就會按下那個標(biāo)有“刪除”的紅色大按鈕。
參考文獻(xiàn)《UI & UX Micro Tips - The Ultimate Collection》
蘭亭妙微(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。
大體上分為兩類:彩蛋流和體驗流
搜索的本質(zhì)是什么?無疑是內(nèi)容的召回和信息的推薦。
可隨著時代的發(fā)展和行業(yè)公司的內(nèi)卷,不少公司除了持續(xù)優(yōu)化搜索結(jié)果與推薦外,在搜索的體驗和彩蛋上也是下了不少功夫,從而進(jìn)一步加強自有產(chǎn)品的競爭力與用戶黏性。因此今天就來盤點一些,那有意思的大廠搜索交互。
大體上分為兩類:彩蛋流和體驗流
注重提升搜索過程中的趣味程度,以增加用戶的好感度與產(chǎn)品印象/口碑。行業(yè)代表:谷歌瀏覽器、百度瀏覽器
可以說是搜索彩蛋的先行者,內(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è)計方法。
百度在搜索彩蛋里下的的功夫也不少,最著名的應(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è)計方法。
注重提升搜索過程中的交互體驗,以增加用戶的操作效率與產(chǎn)品易用性。
代表:蘋果產(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é)果。
夸克瀏覽器除了傳統(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é)果頁才能看到想要查詢的信息。
蘭亭妙微(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。
藍(lán)藍(lán)設(shè)計的小編 http://bouu.cn