欧美videos另类精品-欧美videos另类极品-欧美vide-欧美va在线视频-欧美va在线观看-欧美va在线播放免费观看

根據(jù)產(chǎn)品的定位和目標(biāo)用戶的情感需求選擇色彩。例如，輕松愉悅的應(yīng)用常采用明亮、柔和的色彩；緊張刺激的游戲則可能運(yùn)用深沉、對(duì)比強(qiáng)烈的色彩。同時(shí)，確保色彩之間有足夠的對(duì)比度，以提高信息的可讀性和視覺(jué)層次感。

通過(guò)用戶調(diào)研、訪談、觀察以及分析用戶行為數(shù)據(jù)等方式，深入了解目標(biāo)用戶的需求、痛點(diǎn)、期望以及使用習(xí)慣。例如為職場(chǎng)辦公軟件設(shè)計(jì)界面時(shí)，會(huì)觀察不同崗位員工的工作流程，了解他們與軟件交互的痛點(diǎn)和特殊需求。

當(dāng)有新上線的功能或隱藏功能時(shí)，我們通常會(huì)用小紅點(diǎn)、角標(biāo)等靜態(tài)內(nèi)容給予用戶提示。然而相比靜態(tài)內(nèi)容，我們的注意力更容易被動(dòng)態(tài)內(nèi)容吸引，所以有時(shí)會(huì)用動(dòng)態(tài)引導(dǎo)用戶。本文作者對(duì)頁(yè)面中常見(jiàn)的動(dòng)態(tài)引導(dǎo)進(jìn)行了分析，一起來(lái)看一下吧。

還記得你第一次下載某個(gè)App的體驗(yàn)嗎？界面清爽、按鈕醒目，一個(gè)“開(kāi)始美好旅程”讓人忍不住點(diǎn)下去。接著，它彈出請(qǐng)求：“為了更好地服務(wù)您，我們需要訪問(wèn)您的聯(lián)系人、位置、相冊(cè)、……甚至呼吸頻率。”你猶豫了一下，但發(fā)現(xiàn)“允許”按鈕紅得發(fā)光，而“拒絕”灰得快看不見(jiàn)。于是你心想：“算了，先點(diǎn)了再說(shuō)。”恭喜，這正是用戶引導(dǎo)設(shè)計(jì)的經(jīng)典套路。

編輯導(dǎo)語(yǔ)：很多產(chǎn)品在使用時(shí)，都會(huì)有“用戶反饋”這一個(gè)設(shè)置，用戶可以將自己的操作體驗(yàn)反饋給商家，但你真的了解“用戶操作反饋”是怎樣的一個(gè)機(jī)制嗎？這篇文章詳細(xì)講解了“操作反饋”這一設(shè)置，一起來(lái)讀一讀吧。

背景

前幾天使用自己產(chǎn)品的時(shí)候，點(diǎn)擊作業(yè)列表想要查看作業(yè)詳情，點(diǎn)擊之后沒(méi)有反應(yīng)，然后又連續(xù)點(diǎn)擊了好幾下，過(guò)了幾秒鐘，界面開(kāi)始連續(xù)跳轉(zhuǎn)。后來(lái)才知道，因?yàn)橛脩袅勘容^大，產(chǎn)品稍微會(huì)有一些卡頓，導(dǎo)致用戶點(diǎn)擊后，產(chǎn)品沒(méi)有實(shí)時(shí)的反饋給用戶，使得用戶也變得不知所措。

那為什么會(huì)出現(xiàn)這種情況呢？主要原因就是沒(méi)有用戶操作反饋。一個(gè)好的產(chǎn)品需要根據(jù)用戶不同的行為操作，實(shí)時(shí)給出反饋，告知用戶當(dāng)前狀態(tài)或建議，消除用戶因?yàn)椴淮_定性帶來(lái)的不安感和焦躁感。

可以將用戶整個(gè)操作流程簡(jiǎn)化為：用戶輸入—平臺(tái)反饋—結(jié)果反饋。可以看出反饋其實(shí)分為兩種：過(guò)程反饋（平臺(tái)反饋）和結(jié)果反饋。

可以看到無(wú)論Google公司推出的Material Design，還是蘋(píng)果公司的iOS設(shè)計(jì)規(guī)范，都對(duì)用戶過(guò)程反饋?zhàn)隽思?xì)致的設(shè)計(jì)規(guī)范。

國(guó)內(nèi)也有很多體驗(yàn)很好的APP對(duì)于用戶反饋方面也做的不錯(cuò)，例如QQ、飛書(shū)。

3. 頁(yè)面

頁(yè)面反饋，相較于彈窗會(huì)更重一些。一般也用于比較重要的操作流程的結(jié)果頁(yè)面，例如淘寶買(mǎi)完?yáng)|西的結(jié)果頁(yè)面、餓了么下單完成后的結(jié)果頁(yè)面。

4. 動(dòng)畫(huà)

動(dòng)畫(huà)的合理使用不僅可以告知當(dāng)前狀態(tài)，還會(huì)將用戶帶入當(dāng)前場(chǎng)景，吸引用戶注意力。例如，微博的點(diǎn)贊，會(huì)出現(xiàn)一個(gè)點(diǎn)贊的動(dòng)畫(huà)，讓點(diǎn)贊變得更加有趣。

微信圖書(shū)，點(diǎn)擊進(jìn)入書(shū)本詳情時(shí)會(huì)出現(xiàn)一個(gè)打開(kāi)書(shū)本的動(dòng)畫(huà)，讓用戶帶入實(shí)際看書(shū)場(chǎng)景，增強(qiáng)沉浸感。

5. 音效

音效的反饋也比較常見(jiàn)，例如ios下載時(shí)，會(huì)有叮咚一聲，聲音的反饋不僅提升了用戶體驗(yàn)，對(duì)于加強(qiáng)品牌認(rèn)知也很有幫助。

三、總結(jié)

以上是我對(duì)于操作反饋的一些整理和復(fù)盤(pán)，其中也借鑒了一些大神的佳作，不到之處，希望和大家一起探討交流。

在實(shí)際項(xiàng)目的運(yùn)用中，也會(huì)根據(jù)實(shí)際的研發(fā)情況，逐步的去調(diào)整，不斷地完善產(chǎn)品細(xì)節(jié)。

本文由 @小太陽(yáng)不愛(ài)吃辣椒 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來(lái)自 Unsplash，基于 CC0 協(xié)議。

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

編輯導(dǎo)語(yǔ)：自適應(yīng)設(shè)計(jì)指能使界面自適應(yīng)顯示在不同大小終端設(shè)備上的設(shè)計(jì)方式及技術(shù)。而內(nèi)容自適應(yīng)則需要對(duì)用戶行為進(jìn)行預(yù)判進(jìn)而改變?cè)O(shè)計(jì)內(nèi)容，本文作者將對(duì)自適應(yīng)設(shè)計(jì)在內(nèi)容上的應(yīng)用進(jìn)行分享，值得閱讀學(xué)習(xí)。

我們一般說(shuō)的自適應(yīng)設(shè)計(jì)，多半指的是界面自適應(yīng)，即為不同的終端設(shè)計(jì)不同的界面布局與操作流程。而內(nèi)容自適應(yīng)，是一種根據(jù)用戶標(biāo)簽與操作行為預(yù)判用戶目標(biāo)所需頁(yè)面內(nèi)容的方式，他的優(yōu)點(diǎn)是既能預(yù)測(cè)交互意圖，實(shí)現(xiàn)信息量的智能輸出，同時(shí)也能滿足不同交互需求，改變界面樣式，達(dá)到降低人機(jī)交互負(fù)荷的目的。

以下，是道樂(lè)UED團(tuán)隊(duì) 基于查閱的資料以及行業(yè)的積累，帶來(lái)的一篇關(guān)于內(nèi)容自適應(yīng)的分享。

目錄：

1. 內(nèi)容自適應(yīng)的界定
2. 適用場(chǎng)景及案例分析
3. 利弊分析
4. 內(nèi)容自適應(yīng)設(shè)計(jì)在金融產(chǎn)品上的應(yīng)用思考

一、內(nèi)容自適應(yīng)的界定

目前自適應(yīng)界面在內(nèi)容上的呈現(xiàn)大致包括兩種類型：

1. 實(shí)時(shí)自適應(yīng)

顧名思義，就是根據(jù)用戶當(dāng)下的操作，實(shí)時(shí)判斷用戶所需，從而調(diào)整不同的信息展示與布局，他的優(yōu)勢(shì)在于能盡量減少頁(yè)面上與用戶目標(biāo)不相關(guān)信息的展示，從而提升用戶操作的效率與準(zhǔn)確度

2. 歷史自適應(yīng)

通過(guò)用戶標(biāo)簽與過(guò)往數(shù)據(jù)的分析，調(diào)整頁(yè)面內(nèi)容的展示數(shù)量與優(yōu)先級(jí)，僅展示用戶感興趣或可能感興趣的內(nèi)容，從而提高用戶在使用產(chǎn)品中的轉(zhuǎn)化率。

總的來(lái)說(shuō)，內(nèi)容自適應(yīng)更趨向于對(duì)用戶行為軌跡的縱向思考，將“用戶尋找信息”的被動(dòng)服務(wù)模式轉(zhuǎn)化為“信息尋找用戶”主動(dòng)服務(wù)模式。滿足差異化的用戶需求，提升企業(yè)系統(tǒng)的用戶體驗(yàn)和人性化服務(wù)水平。

二、適用場(chǎng)景及案例分析

1. 實(shí)時(shí)自適應(yīng)

（1）搜索

① Google搜索

自適應(yīng)設(shè)計(jì)在搜索上的應(yīng)用意味著針對(duì)每個(gè)用戶的每一次搜索，都會(huì)產(chǎn)生一個(gè)定制的界面，該界面將自身塑造成所顯示的信息。請(qǐng)看以下示例：如何根據(jù)不同的用例更改搜索結(jié)果頁(yè)面。

最近，Google搜索的設(shè)計(jì)重點(diǎn)是在用戶點(diǎn)擊搜索結(jié)果之前傳遞信息。為此，Google采用了一種稱為自適應(yīng)設(shè)計(jì)的方法。

Google搜索適應(yīng)用戶需求的第一種方法是重新安排導(dǎo)航以適應(yīng)結(jié)果。

• 在“lizzo”的例子中，搜索框下面的導(dǎo)航是：（按順序依次為）圖片、視頻、新聞、購(gòu)物、更多；
• 在“tel aviv”的例子中，導(dǎo)航是：新聞、圖片、地圖、視頻、更多；
• 搜索“aapl”（蘋(píng)果公司的股票代碼），導(dǎo)航顯示：金融、新聞、書(shū)籍、購(gòu)物、更多；

Google有362,880種獨(dú)特的方式來(lái)排列導(dǎo)航，以適應(yīng)搜索查詢。然而，自適應(yīng)設(shè)計(jì)的最大例子是搜索結(jié)果本身的布局。結(jié)果頁(yè)面是完全模塊化的：根據(jù)搜索結(jié)果，不同的元素出現(xiàn)在不同的配置中。

例如，音樂(lè)家Lizzo的搜索結(jié)果集中在媒體上：一組模塊以本機(jī)格式顯示視頻，圖片和歌曲。還顯示最近的新聞，推文和即將舉行的活動(dòng)，以及指向Lizzo在YouTube、Twitter、Facebook、Instagram和SoundCloud上的個(gè)人資料鏈接。直到頁(yè)面底部，我們才能看到看起來(lái)像傳統(tǒng)搜索結(jié)果的元素。

另一方面，以色列特拉維夫市的搜索結(jié)果為旅行者提供優(yōu)先信息。圖片、地圖、當(dāng)?shù)靥鞖庖约芭c旅行有關(guān)的問(wèn)題（“特拉維夫?qū)τ慰桶踩珕幔?rdquo;、“特拉維夫以什么聞名？”）優(yōu)先于傳統(tǒng)搜索結(jié)果。模塊促進(jìn)了特拉維夫的活動(dòng)以及對(duì)附近其他城市的推薦。搜索結(jié)果頁(yè)上可能會(huì)出現(xiàn)數(shù)千個(gè)不同的模塊，從簡(jiǎn)單的布局驅(qū)動(dòng)模塊到完全獨(dú)立的應(yīng)用程序。

例如，“aapl”的搜索結(jié)果頁(yè)上，股票代碼模塊顯示了當(dāng)前價(jià)格和交互式歷史價(jià)格圖。

通過(guò)自適應(yīng)設(shè)計(jì)，所有有關(guān)內(nèi)容、格式和順序的決策都是由算法決定的。設(shè)計(jì)人員的作用不再是創(chuàng)建明確的外部布局。

如今，尖端產(chǎn)品的設(shè)計(jì)者，以及未來(lái)日常產(chǎn)品的設(shè)計(jì)者，正在就生成這些布局的規(guī)則做出決策。

② 淘寶搜索

淘寶搜索結(jié)果頁(yè)，當(dāng)用戶往下滑動(dòng)查看更多時(shí)，系統(tǒng)判斷你根據(jù)當(dāng)前搜索頁(yè)沒(méi)有找到想要的內(nèi)容，則根據(jù)不同物品展示物品的更細(xì)分的篩選，如啤酒會(huì)c展示“德國(guó)進(jìn)口啤、國(guó)產(chǎn)精釀、比利時(shí)精釀”，方便用戶找到目標(biāo)物品。

③ OTA平臺(tái)PC端（去哪兒、攜程等）

攜程/去哪兒pc端中，Tab前置條件是國(guó)內(nèi)/國(guó)際，在選擇國(guó)內(nèi)機(jī)票時(shí)，默認(rèn)單程。在選擇“國(guó)際/港澳臺(tái)機(jī)票”時(shí)，則默認(rèn)機(jī)票往返。

這樣的功能設(shè)置是基于對(duì)用戶需求的深入研究得出的，主要有以下幾個(gè)原因：

• 最優(yōu)方案不同：國(guó)內(nèi)單程往返的最優(yōu)方案多半有可能不是一個(gè)航空公司，要一個(gè)一個(gè)查詢，（盡管同一航空公司往返有1+1小于2的規(guī)則），會(huì)對(duì)客人更有利，因?yàn)榻?jīng)常會(huì)出現(xiàn)1+0.5=1.5的情況。國(guó)際票往返的最優(yōu)方案通常還是一家航空公司的便宜，這個(gè)基本上是定律，所以這個(gè)默認(rèn)設(shè)定是培養(yǎng)消費(fèi)習(xí)慣之舉。
• 使用場(chǎng)景不同：國(guó)際機(jī)票的使用場(chǎng)景下，大都有明確時(shí)間區(qū)間，簽證限制了用戶在國(guó)外停留的時(shí)間。用戶不得不提前計(jì)劃。且回程可選擇交通工具有限。相對(duì)而言，國(guó)內(nèi)機(jī)票場(chǎng)景較自由，提前計(jì)劃必要性相對(duì)較弱。
• 觀測(cè)數(shù)據(jù)證明：根據(jù)同程的國(guó)際機(jī)票訂購(gòu)數(shù)據(jù)顯示，70%以上的用戶選擇了往返。

基于以上充分的原因，這個(gè)自適應(yīng)功能設(shè)計(jì)就得以開(kāi)發(fā)并成功提高用戶的使用效率。

（2）根據(jù)用戶靜態(tài)標(biāo)簽優(yōu)化結(jié)果

靜態(tài)標(biāo)簽：用戶主動(dòng)提供的數(shù)據(jù), 指用戶不變的基礎(chǔ)信息，多為用戶固定數(shù)據(jù)，如姓名、性別、年齡、身高、體重、職業(yè)、地區(qū)、設(shè)備信息、來(lái)源渠道等。

定位地區(qū)：大眾點(diǎn)評(píng)——切換城市

大眾點(diǎn)評(píng)的這個(gè)功能經(jīng)常被拿出來(lái)說(shuō)，當(dāng)你到另一個(gè)城市，通過(guò)獲取定位申請(qǐng)，判斷你是來(lái)這座城市旅游的場(chǎng)景，從而頁(yè)面展示中入口就改成了跟旅游相關(guān)，這其實(shí)也有點(diǎn)內(nèi)容自適應(yīng)的意思，通過(guò)用戶不同的操作展示不同的內(nèi)容。

2. 歷史自適應(yīng)

歷史自適應(yīng)主要集中在特定領(lǐng)域的個(gè)性化界面定制和推薦等方面。針對(duì)不同用戶呈現(xiàn)不同界面，根據(jù)用戶的類型、任務(wù)特點(diǎn)、喜好等提供不同的界面樣式。

（1）根據(jù)用戶動(dòng)態(tài)/預(yù)測(cè)標(biāo)簽算法推薦定制內(nèi)容

預(yù)測(cè)標(biāo)簽：平臺(tái)介入的數(shù)據(jù)，指根據(jù)用戶在平臺(tái)內(nèi)的行為數(shù)據(jù)對(duì)用戶未來(lái)行為或喜好進(jìn)行預(yù)測(cè)；是設(shè)計(jì)千人千面和運(yùn)營(yíng)策略的關(guān)鍵；比如某電商平臺(tái)，根據(jù)用戶A“月均消費(fèi)5單，且有數(shù)額過(guò)萬(wàn)的運(yùn)動(dòng)商品”的購(gòu)物數(shù)據(jù)，平臺(tái)會(huì)給用戶A打“高頻、品質(zhì)敏感性、運(yùn)動(dòng)”的標(biāo)簽，后期會(huì)更多推薦高品質(zhì)運(yùn)動(dòng)商品及相關(guān)運(yùn)動(dòng)品牌活動(dòng)的精準(zhǔn)推送。

用戶標(biāo)簽是構(gòu)成用戶畫(huà)像的核心因素，是將用戶在平臺(tái)內(nèi)所產(chǎn)生的行為數(shù)據(jù)，分析提煉后生成具有差異性特征的形容詞。即用戶通過(guò)平臺(tái)，在什么時(shí)間什么場(chǎng)景下做了什么行為，平臺(tái)將用戶所有行為數(shù)據(jù)提煉出來(lái)形成支撐業(yè)務(wù)實(shí)現(xiàn)的可視化信息。

① 用戶生產(chǎn)內(nèi)容（UGC）

互聯(lián)網(wǎng)上的許多站點(diǎn)開(kāi)始廣泛使用用戶生成內(nèi)容的方式提供服務(wù)，許多圖片、視頻、博客、播客、論壇、評(píng)論、社交、Wiki、問(wèn)答、新聞、研究類的網(wǎng)站都使用了這種方式。

② 電商平臺(tái)

這種平臺(tái)一般會(huì)隨著用戶的使用，網(wǎng)站會(huì)積累及不斷修正及展示最貼近用戶喜好的產(chǎn)品，從而進(jìn)行推薦。功能上適應(yīng)了用戶的喜好，會(huì)大大增加用戶的粘性。

③ APP Store 應(yīng)用頁(yè)面大變動(dòng)：不同用戶可看到不同功能與內(nèi)容

自定義產(chǎn)品頁(yè)功能讓開(kāi)發(fā)者可以面向不同用戶展示 App 的不同功能，產(chǎn)品頁(yè)優(yōu)化功能則讓開(kāi)發(fā)者們能夠測(cè)試不同的截屏、預(yù)覽視頻，甚至 App 圖標(biāo)。

蘋(píng)果指出，得益于 App Store Connect 詳實(shí)且注重隱私的分析，開(kāi)發(fā)者可以了解自己用戶的偏好，從而決定產(chǎn)品頁(yè)的展示內(nèi)容。

④ SoulAPP創(chuàng)始人：Sou了APP功能符合不同場(chǎng)景的用戶需求

SoulAPP多種匹配機(jī)制,功能符合不同場(chǎng)景的客戶需求。Soul利用AI大數(shù)據(jù)，依照性格、興趣等因素,劃分用戶。通過(guò)這種精準(zhǔn)的方式分類用戶,以便用戶之間能夠更高效地建立連接。第一次注冊(cè)SoulAPP，用戶需要通過(guò)系統(tǒng)的一些答題測(cè)試,以便于生成符合自己的性格報(bào)告。接著就是通過(guò)上述數(shù)據(jù)采集，劃分專屬圈子，這里就是大家經(jīng)常說(shuō)的“星球“，這些都是基于SoulAPP的AI功能。

三、利弊分析

1. 優(yōu)點(diǎn)

• 增強(qiáng)用戶體驗(yàn)：自適應(yīng)界面不能讓用戶控制自適應(yīng)過(guò)程。對(duì)用戶動(dòng)機(jī)準(zhǔn)確的判斷和對(duì)應(yīng)的自適應(yīng)設(shè)計(jì)能有效簡(jiǎn)短交互路徑，優(yōu)化用戶的交互體驗(yàn)。
• 增強(qiáng)用戶粘性：基于精準(zhǔn)人群的需求分析和功能設(shè)計(jì)，更容易得到用戶認(rèn)可，更容易打造產(chǎn)品亮點(diǎn)，提供精準(zhǔn)個(gè)性化的服務(wù)，比如對(duì)于社區(qū)產(chǎn)品，內(nèi)容個(gè)性化推薦將有效提升社區(qū)粘度。
• 利于公司可持續(xù)發(fā)展：一方面使公司更具競(jìng)爭(zhēng)壁壘，及時(shí)洞察市場(chǎng)風(fēng)向，預(yù)測(cè)產(chǎn)品所占市場(chǎng)規(guī)模及前景發(fā)展，及時(shí)優(yōu)化公司戰(zhàn)略，避免過(guò)早陷入發(fā)展瓶頸；另一方面沉淀大批用戶數(shù)據(jù)，既利于孵化創(chuàng)新產(chǎn)品，也豐富盈利模式（比如與第三方合作）。
• 提升產(chǎn)品設(shè)計(jì)價(jià)值：基于精準(zhǔn)人群的需求分析和功能設(shè)計(jì)，更容易得到用戶認(rèn)可，更容易打造產(chǎn)品亮點(diǎn)，提供精準(zhǔn)個(gè)性化的服務(wù)，比如對(duì)于社區(qū)產(chǎn)品，內(nèi)容個(gè)性化推薦將有效提升社區(qū)粘度。
• 提高運(yùn)營(yíng)效率：如今的新用戶獲客成本居高不下的情況下，利用現(xiàn)有用戶畫(huà)像，做好存量用戶的維護(hù)，通過(guò)精準(zhǔn)營(yíng)銷策略，提升存量用戶的留存與活躍。

2. 缺點(diǎn)

自適應(yīng)界面同樣有一些“小缺點(diǎn)”，違背了一些眾所周知的可用性原則：

• 缺乏控制：自適應(yīng)界面不能讓用戶控制自適應(yīng)過(guò)程。
• 不可預(yù)測(cè)性：由于用戶不能直接控制界面，用戶不能預(yù)測(cè)界面接下來(lái)的某些行為。
• 透明度：通常，用戶不能理解在界面中，自適應(yīng)是如何起作用的。在設(shè)計(jì)自適應(yīng)界面時(shí)的其中一個(gè)問(wèn)題就是讓用戶可以見(jiàn)到多少自適應(yīng)比例。
• 私密性：用戶必須接受基于用戶模型的一種系統(tǒng)，將會(huì)一直維持與系統(tǒng)交互的狀態(tài)，持續(xù)收集用戶使用行為。
• 信任度：用戶在系統(tǒng)中的信任是容易改變的，如果自適應(yīng)系統(tǒng)給予了錯(cuò)誤的指令。
• 開(kāi)發(fā)成本：提供內(nèi)容的自適應(yīng)度，通常意味著著更多的開(kāi)發(fā)成本。要把控好自適應(yīng)性設(shè)計(jì)的度，而非一味地增加開(kāi)發(fā)量。

四、內(nèi)容自適應(yīng)設(shè)計(jì)在金融產(chǎn)品上的應(yīng)用思考

1. 基礎(chǔ)設(shè)計(jì)原則思考

內(nèi)容自適應(yīng)的核心在于，基于用戶過(guò)往的操作以及行為路徑的分析，提前預(yù)判用戶下一步需要的內(nèi)容，從而讓用戶能更便捷的使用產(chǎn)品。但是在金融產(chǎn)品的設(shè)計(jì)中比較特殊，往往用戶在使用產(chǎn)品的一個(gè)核心需求是安全感，產(chǎn)品安全、資產(chǎn)安全、操作安全等都是用戶著重關(guān)注的點(diǎn)，所以如果一味的進(jìn)行內(nèi)容自適應(yīng)設(shè)計(jì)，會(huì)讓用戶產(chǎn)生“信息泄露”的擔(dān)憂，從而失去對(duì)該產(chǎn)品的信任。

基于以上內(nèi)容自適應(yīng)的分析以及金融產(chǎn)品設(shè)計(jì)的特殊性，我們來(lái)看看有哪些可以運(yùn)用到金融產(chǎn)品的設(shè)計(jì)中來(lái)。

2. 金融產(chǎn)品設(shè)計(jì)思考

（1）金融應(yīng)用的[截圖]功能

截圖功能可以根據(jù)用戶場(chǎng)景與用戶目標(biāo)兩個(gè)維度進(jìn)行分析。截圖操作的發(fā)生幾乎會(huì)發(fā)生在用戶使用金融應(yīng)用的各個(gè)場(chǎng)景，比如瀏覽金融產(chǎn)品、查看產(chǎn)品詳情、查看持倉(cāng)資產(chǎn)、收益等等，而不同的場(chǎng)景用戶的目標(biāo)也有所不同，我們可以根據(jù)用戶不同的操作目標(biāo)，為用戶提供自適應(yīng)的內(nèi)容來(lái)方便用戶的操作。

截圖常見(jiàn)的用戶目標(biāo)大致分為兩類：報(bào)錯(cuò)與分享。我們可以為這兩個(gè)用戶目標(biāo)做一些內(nèi)容上設(shè)計(jì)。

報(bào)錯(cuò)一般會(huì)關(guān)聯(lián)產(chǎn)品的在線客服功能，那么我們?cè)谟脩艚貓D操作發(fā)生后，提供在線客服的入口，同時(shí)分析報(bào)錯(cuò)自身的用戶行為，如可能是針對(duì)頁(yè)面的哪個(gè)點(diǎn)或者哪個(gè)區(qū)域報(bào)錯(cuò)，那我們可以針對(duì)這一點(diǎn)再提供編輯截圖的功能等等。

如此根據(jù)用戶目標(biāo)拆解用戶行為，設(shè)計(jì)對(duì)應(yīng)的功能來(lái)滿足用戶操作，從而減少用戶的操作路徑。

分享可根據(jù)用戶場(chǎng)景設(shè)計(jì)不同的內(nèi)容，如：

• 當(dāng)截圖發(fā)生在產(chǎn)品詳情頁(yè)，那此時(shí)截圖的分享意圖可能是分享此只產(chǎn)品給好友，我們可以為此設(shè)計(jì)一個(gè)關(guān)于產(chǎn)品信息的分享頁(yè)來(lái)便于用戶分享；
• 當(dāng)截圖發(fā)生在資產(chǎn)頁(yè)，此時(shí)的截圖的分享意圖可能是炫耀自己的收益，那我們可以生成收益海報(bào)等內(nèi)容給用戶，從而滿足用戶的心理預(yù)期。

（2）金融應(yīng)用的[內(nèi)容管理]功能

買(mǎi)衣服的時(shí)候，絕大多數(shù)人在意的是是否合身，對(duì)于數(shù)字產(chǎn)品，同樣是如此。在一個(gè)金融應(yīng)用的內(nèi)容管理功能當(dāng)中，會(huì)推送大量的內(nèi)容給用戶，絕大多數(shù)的用戶幾乎沒(méi)有時(shí)間來(lái)掌控所有的信息，導(dǎo)致部分對(duì)用戶有用的信息被忽略，這樣意味著內(nèi)容的可定制化是極其重要的。

內(nèi)容的可定制化體現(xiàn)在不同用戶的分層上，基于分層，我們可以為相同類型用戶推送內(nèi)容。如持有私募基金的用戶，我們可能會(huì)更多為其推送關(guān)于此類產(chǎn)品的信息以及高端用戶的優(yōu)惠、活動(dòng)、資產(chǎn)報(bào)告等信息。

（3） 金融應(yīng)用的[搜索]功能

金融產(chǎn)品的搜索，除了具備一般應(yīng)用該有的內(nèi)容，如最近搜索、熱門(mén)搜索、搜索排行榜等，也需要基于產(chǎn)品特性來(lái)思考還有哪些可以展示的內(nèi)容。

根據(jù)用戶行為與數(shù)據(jù)分析，一般搜索的關(guān)鍵詞為基金名稱或者基金代碼，而搜索的目的是查看該產(chǎn)品的信息以及收益情況，那么基于此類目的，我們可以當(dāng)用戶輸入基金名稱后，展示該基金最近的凈值走勢(shì)等內(nèi)容，這樣用戶就可以提前了解部分基金信息，可以提前做一個(gè)判斷，需不需要進(jìn)入搜索結(jié)果頁(yè)進(jìn)一步的了解。

除了提前展示該基金部分產(chǎn)品信息以外，我們也可以展示相類似基金，防止用戶因提前獲知產(chǎn)品部分信息而帶來(lái)的流失率，當(dāng)用戶不滿意該只基金的近期表現(xiàn)，我們可以為其提供表現(xiàn)良好的基金供其選擇，從而提高產(chǎn)品的轉(zhuǎn)化率。

五、結(jié)語(yǔ)

通過(guò)對(duì)自適應(yīng)設(shè)計(jì)在內(nèi)容上的應(yīng)用探究，我們對(duì)內(nèi)容自適應(yīng)的設(shè)計(jì)手法及應(yīng)用場(chǎng)景有了初步的理解，也會(huì)繼續(xù)的探究并運(yùn)用到實(shí)際的工作中來(lái)，希望這些思考能為大家?guī)?lái)一些幫助。

作者：道樂(lè)UED全體成員

原文鏈接：https://www.ui.cn/detail/610302.html

本文由 @道樂(lè)科技設(shè)計(jì)中心 授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來(lái)自Unsplash，基于CC0協(xié)議。

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

編輯導(dǎo)語(yǔ)：智能手機(jī)現(xiàn)在對(duì)于大家來(lái)說(shuō)都并不陌生，而“陀螺儀”作為手機(jī)上的一種先進(jìn)硬件，可以增強(qiáng)手機(jī)的使用感，本文作者介紹了一些運(yùn)用陀螺儀讓人身臨其境的設(shè)計(jì)，讓我們一起來(lái)看看吧！

iPhone率先將先進(jìn)硬件（如陀螺儀、重力感應(yīng)等傳感器）引入手機(jī)，讓智能手機(jī)的硬件參數(shù)和升級(jí)成為用戶的重要選購(gòu)參考，設(shè)計(jì)師們也會(huì)在設(shè)計(jì)時(shí)關(guān)注到硬件的應(yīng)用和潛力挖掘。今天我們淺聊一下“陀螺儀”在增強(qiáng)交互體驗(yàn)、豐富交互反饋上的實(shí)際應(yīng)用。

▲ 智能手機(jī)有豐富的硬件能力

一、陀螺儀是什么

在我們的自然交互場(chǎng)景中，視野的變化（如觀察四周）和速度的感受（如拍打搖晃）是和五感非常緊密的體驗(yàn)。手機(jī)中的陀螺儀和加速度傳感器就是這樣的硬件，可以感知我們?cè)谑褂迷O(shè)備時(shí)的角度、位置和速度變化。

▲ 陀螺儀可測(cè)量設(shè)備的方向和角速度

通過(guò)陀螺儀傳感器，手機(jī)應(yīng)用能感知用戶設(shè)備的角度變化并觸發(fā)相應(yīng)的動(dòng)作和交互，拓展平面屏幕空間，實(shí)現(xiàn)更加有空間操縱感的體驗(yàn)。比如，最常見(jiàn)的就是的手機(jī)橫/豎屏自動(dòng)切換、導(dǎo)航指路、手機(jī)搖一搖等功能。

▲ 手機(jī)橫豎自動(dòng)切換

▲ 地圖方向感知

二、讓體驗(yàn)增強(qiáng)的應(yīng)用場(chǎng)景

1. 越出靜態(tài)視圖邊界

通常背景氛圍圖片的展示區(qū)域最多只有屏幕寬度，但是結(jié)合陀螺儀的角度感知，通過(guò)視差變化可以將視圖延展到原先被限制的空間之外，給用戶更多的視覺(jué)信息，形成類3D的空間效果。淘寶人生的套裝展示頁(yè)中，當(dāng)轉(zhuǎn)動(dòng)手機(jī)時(shí)背景圖和人物模型也會(huì)跟隨變化，讓人物及服裝的展示更加生動(dòng)和有沖擊力。

▲淘寶人生套裝展示

當(dāng)將多幀圖片匹配視角變化時(shí)，甚至能帶來(lái)裸眼3D的效果。

▲類裸眼3D效果

根據(jù)陀螺儀旋轉(zhuǎn)視角，靜態(tài)圖片可以不僅僅固定在單一位置上，還可以升級(jí)為交互性內(nèi)容，模擬現(xiàn)實(shí)空間里物品的拋、彈、跳，讓信息交互更有驚喜感，讓用戶身臨其境更有控制欲，不知不覺(jué)反復(fù)把玩。

▲ 好好住徽章動(dòng)態(tài)交互

很多應(yīng)用中，陀螺儀承載了其核心的能力，給用戶帶來(lái)突破屏幕的360度的全景體驗(yàn)。比如在星圖類APP中，跟隨陀螺儀的變化，可以將浪漫的星空變得可識(shí)別和觸手可及。

▲ 星空APP–即時(shí)星圖體驗(yàn)

2. 讓游戲更具操縱感

陀螺儀在體感類手游游中可以說(shuō)是標(biāo)配，幾乎所有需要感知三維空間變化的游戲都需要用到它。尤其是賽車、飛機(jī)或者體育類游戲，對(duì)角色控制和視角變化有高精準(zhǔn)度要求。通過(guò)調(diào)整手機(jī)姿勢(shì)、上下左右擺動(dòng)，模擬真實(shí)空間的操控性反饋，增強(qiáng)了游戲空間的3D體感，用戶跟隨視角變化在游戲里上下翻飛，有強(qiáng)烈的代入感和沉浸感。

▲ 狂野飆車的鏡頭視角變化

▲ 和平精英體感操作

VR體感游戲中的陀螺儀跟隨用戶肢體的動(dòng)作，實(shí)現(xiàn)虛擬空間物品距離和空間視角的變化。

▲ AR體感游戲

3. 現(xiàn)實(shí)空間的互動(dòng)交互

除了可以操控平面元素，在我們使用3D AR交互功能時(shí)，陀螺儀也可以增強(qiáng)與現(xiàn)實(shí)空間交互的真實(shí)感。和現(xiàn)實(shí)世界的自然交互一樣，當(dāng)相機(jī)靠近被跟蹤的3D模型時(shí)，3D形象需按比例放大，并跟隨相機(jī)的視角調(diào)整3D模型的展示視角。

▲ 3D應(yīng)用

▲ AR跟隨并觸發(fā)功能

而且，在有多維空間切換訴求的場(chǎng)景中，可以通過(guò)監(jiān)測(cè)手機(jī)的角度變化，在2D/3D兩種空間中快速輕便切換。比如高德地圖的步行導(dǎo)航，當(dāng)用戶抬起手機(jī)能迅速進(jìn)入AR導(dǎo)航模式，輕松獲得3D實(shí)景指引，讓用戶想迷路都難。

▲抬起喚醒AR導(dǎo)航

▲放下恢復(fù)平面導(dǎo)航

▲高德地圖喚醒AR實(shí)景導(dǎo)航

在智能玩具中也會(huì)用到陀螺儀，例如Smart Car教育機(jī)器人。在它的手勢(shì)控制手表上就裝有陀螺儀，可以根據(jù)手勢(shì)控制機(jī)器人移動(dòng)。

▲ 陀螺儀體感控制

陀螺儀還能植入其他生活用品中，比如在這款潮人喜愛(ài)的LED鞋中，它跟隨你腳步的速度和角度，展示炫目的燈光顏色和模式，讓你成為人群的焦點(diǎn)。

▲ 發(fā)光的鞋子通過(guò)陀螺儀

4. 讓視聽(tīng)一體身臨其境

陀螺儀除了可以帶來(lái)視覺(jué)和體感上的空間感和操縱感，在音頻上也能實(shí)現(xiàn)更真實(shí)極致的環(huán)繞聲體驗(yàn)。比如，AirPods Pro內(nèi)置的陀螺儀和加速度傳感器會(huì)對(duì)佩戴者的頭部進(jìn)行追蹤，即使你的位置變化也能使環(huán)繞音效保持在固定位置，讓環(huán)境音會(huì)根據(jù)人的移動(dòng)而移動(dòng)，創(chuàng)造沉浸式的聲音體驗(yàn)。

▲ Airpods環(huán)繞聲定位

Airpods的空間音頻能力，也可以應(yīng)用到界面交互上。通過(guò)把頭部角度變化映射到圖片視角變化，形成視差效果，轉(zhuǎn)動(dòng)頭部就能看到更多內(nèi)容。

▲ Airpods跟隨示例

三、更多可能

除了陀螺儀，移動(dòng)設(shè)備還有很多豐富的傳感器硬件能力，如壓力傳感器、光學(xué)傳感器、震動(dòng)傳感器、NFC等，各種令人印象深刻的交互表達(dá)中都有它們的身影。例如，zenly的bump功能通過(guò)近場(chǎng)互動(dòng)快速添加好友和查看信息，字體設(shè)計(jì)網(wǎng)站通過(guò)屏幕多指觸控可以讓設(shè)計(jì)更自由和可控。

▲zenly近場(chǎng)互動(dòng)

▲多指觸屏設(shè)計(jì)字體

在體驗(yàn)設(shè)計(jì)中，我們可以在合適的場(chǎng)景使用硬件能力集成更豐富的功能，創(chuàng)造更加匹配自然行為和有創(chuàng)意的交互和反饋，為用戶帶來(lái)更多直接有趣的體驗(yàn)~

作者：能操縱空間的；

原文鏈接：https://mp.weixin.qq.com/s/qAz5WK9zQ7JPhgpBqmgorw

本文由 @淘寶設(shè)計(jì) 授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來(lái)自 Unsplash，基于CC0協(xié)議

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

編輯導(dǎo)語(yǔ)：交互設(shè)計(jì)本質(zhì)上就是設(shè)計(jì)產(chǎn)品的使用方式的過(guò)程，“如何才能做出合理的B端交互決策”是很多人都在思考的問(wèn)題。在這篇文章里，作者聚焦具體的實(shí)戰(zhàn)場(chǎng)景，分享了一些自己做B端交互設(shè)計(jì)的經(jīng)驗(yàn)，一起看看吧。

這陣子想了想關(guān)于交互知識(shí)的分享，還是應(yīng)該要拓展成一整個(gè)系列的內(nèi)容，包含各類組件、控件和行為的解析。

基于我的分享習(xí)慣，我會(huì)盡量避免使用太過(guò)理論還是空泛的方式進(jìn)行講解，而是聚焦具體的實(shí)戰(zhàn)場(chǎng)景，幫助大家理解如何做出合理的交互決策。

一、交互的全局框架是什么

交互設(shè)計(jì)本質(zhì)上就是設(shè)計(jì)產(chǎn)品的使用方式的過(guò)程，賬號(hào)怎么填寫(xiě)，表單怎么導(dǎo)出，數(shù)據(jù)怎么篩選，列表怎么排序等等……針對(duì)每個(gè)功能的使用方式，都可以花很長(zhǎng)的時(shí)間去考慮其合理性。一個(gè)項(xiàng)目的交互，就是這個(gè)項(xiàng)目所有功能使用方式的總和。

那設(shè)計(jì)師如何開(kāi)始項(xiàng)目的交互設(shè)計(jì)？直接進(jìn)入細(xì)節(jié)，開(kāi)始跟著原型制定輸入框的狀態(tài)，下拉菜單的展開(kāi)邏輯嗎？

這樣肯定是不行的，項(xiàng)目的交互內(nèi)容又多又雜，設(shè)計(jì)師會(huì)很快陷入這些細(xì)枝末節(jié)中疲于奔命。頭疼醫(yī)頭腳疼醫(yī)腳，容易造成項(xiàng)目細(xì)節(jié)缺乏統(tǒng)一性，前后矛盾，體驗(yàn)割裂。

所以，理解項(xiàng)目交互設(shè)計(jì)的正確思路，就要知道在項(xiàng)目中有哪些交互內(nèi)容，它們對(duì)應(yīng)的層級(jí)和設(shè)計(jì)對(duì)象是什么。

在這里，我把需要設(shè)計(jì)的交互對(duì)象拆分成4個(gè)種類，它們從大到小依次為：

1. 全局框架：項(xiàng)目的主要模塊排版和布局，產(chǎn)品使用的主要依據(jù)和步驟
2. 功能流程：需要較多操作步驟才可以完成的一個(gè)完整的用戶使用目標(biāo)
3. 組件操作：一些復(fù)雜模塊、業(yè)務(wù)組件的完整操作方法和狀態(tài)
4. 控件使用：基礎(chǔ)控件元素的操作方法和狀態(tài)

我們先圍繞在全局框架這個(gè)類型進(jìn)行解釋，什么是項(xiàng)目的主要模塊排版和布局，以及為什么全局框架可以決定產(chǎn)品的主要使用依據(jù)和步驟。

比如大家都用過(guò) Adobe 的軟件，應(yīng)該會(huì)有個(gè)感覺(jué)，就是熟悉了其中一款后用下一個(gè)，立馬就能上手，完成一些最基本的操作。而如果不是 Adobe 系列的軟件，用起來(lái)感覺(jué)就感覺(jué)非常別扭，往往要從頭開(kāi)始學(xué)起，比如對(duì)標(biāo) PS 的 Affinity Photo、Pixelmator。

為什么會(huì)出現(xiàn)這樣的反差？就是因?yàn)?Adobe 盡可能統(tǒng)一了自己生態(tài)內(nèi)的軟件全局框架，操作方式，讓全家桶用戶可以用最快的方法適應(yīng)不同的軟件。

包括頂部的屬性欄，左側(cè)的工具欄，中間的標(biāo)簽欄、創(chuàng)作區(qū)域，右側(cè)的不同工作窗口排列形式。

除了主要界面的布局框架外，還包含一些二級(jí)窗口的框架結(jié)構(gòu)也是統(tǒng)一和固定的。比如打開(kāi) PS 內(nèi)的首選項(xiàng)設(shè)置和屬性設(shè)置窗口，和其它幾個(gè)軟件的屬性設(shè)置窗口幾乎一致。

而在 Affinity 中，軟件首選項(xiàng)設(shè)置就沒(méi)有使用左側(cè)導(dǎo)航，而是類似 Mac 通用設(shè)置的快速入口分層模式，用慣了 Adobe 再換這個(gè)就會(huì)有股說(shuō)不出的別扭。

可能有同學(xué)有疑問(wèn)，Photoshop 并不是只有這幾種窗口，其它窗口不就樣式和上面這類不一樣嘛？那是因?yàn)榇翱诘目蚣芸隙ㄊ且紤]功能和場(chǎng)景的，即使使用了多種窗口類型，那也是有規(guī)律的應(yīng)用在操作方式相近的場(chǎng)景中。

再回想一下 PhotoShop 的基本操作流程，就是在創(chuàng)建文件以后，通過(guò)左側(cè)工具添加圖層元素到中間畫(huà)布區(qū)域進(jìn)行排版，再在右側(cè)屬性欄中調(diào)節(jié)畫(huà)布對(duì)象的圖層順序、屬性。

PhotoShop 作為平面領(lǐng)域中的獨(dú)角獸，直接影響了絕大多數(shù)同類設(shè)計(jì)軟件的框架結(jié)構(gòu)和布局方法。因?yàn)榻^大多數(shù)設(shè)計(jì)師學(xué)習(xí)設(shè)計(jì)的入門(mén)軟件都是 PS，想要讓用戶更快上手自己的軟件，那就應(yīng)該順著他們已經(jīng)習(xí)慣的方式來(lái)。

所以，從 Sketch 開(kāi)始，它的框架和操作流程都和 PhotoShop 高度相似，再之后的 Adobe XD、Figma、即時(shí)設(shè)計(jì)等，都應(yīng)用了幾乎相同的全局框架，所以你只要掌握其中一個(gè)就能立馬熟悉其它軟件的使用。

而當(dāng)實(shí)際功能和 UI 設(shè)計(jì)軟件高度相似的其它幾個(gè) “辦公應(yīng)用” 結(jié)構(gòu)框架不同時(shí)，上手就變得異常的困難和別扭。比如 Axure、Keynote、PowerPoint，先學(xué)了設(shè)計(jì)軟件再去學(xué)這幾個(gè)軟件的同學(xué)一定深有感觸。

而其它行業(yè)的軟件，如果沒(méi)有一個(gè)具備絕對(duì)主導(dǎo)性的產(chǎn)品作為標(biāo)桿，那么每家公司的產(chǎn)品框架就各不相同。比如 3D 建模軟件中的 C4D、Blender、犀牛，視頻剪輯工具中的 Pr、Finalcut、達(dá)芬奇，你就是熟練掌握其中一款，對(duì)專業(yè)術(shù)語(yǔ)和必要功能邏輯了如指掌，也需要通過(guò)基本教學(xué)才能掌握其它同類軟件。

這就是框架帶來(lái)的作用，它是軟件使用方式和操作流程的主要依據(jù)，其它細(xì)節(jié)的交互和操作都是附著于全局框架下的子集內(nèi)容。之所以交互設(shè)計(jì)要從全局框架開(kāi)始，原因就是設(shè)計(jì)師要：

先確定產(chǎn)品整體操作的方式，再去考慮按鈕和表單那些細(xì)節(jié)的處理。

二、B端產(chǎn)品的全局框架拆解

雖然前面舉例的都是軟件案例，但只要仔細(xì)留意，你們就會(huì)發(fā)現(xiàn)網(wǎng)頁(yè)端管理系統(tǒng)的操作框架和一般軟件別無(wú)二致。只不過(guò)相比較五花八門(mén)的專業(yè)軟件來(lái)說(shuō)，B 端管理系統(tǒng)的操作框架模式經(jīng)過(guò)了長(zhǎng)期的演化形成了固定的幾種套路。所以網(wǎng)上找到的管理界面案例，看起來(lái)只是圍繞幾個(gè)固定的布局翻來(lái)覆去的改顏色和圖標(biāo)。

雖然它們看起來(lái)都很像，但依舊包含很多交互細(xì)節(jié)是需要設(shè)計(jì)師留意和制定的，不是簡(jiǎn)單照搬就能設(shè)計(jì)出符合項(xiàng)目需要的全局框架。

所以，交互的全局框架到底怎么設(shè)計(jì)？

它不是一個(gè)個(gè)體，而是一個(gè)由多個(gè)組件、頁(yè)面類型、適配方式組成的合集概念。想要有效制定，就需要先了解合集中包含的要素有哪些，以及它們的基本特點(diǎn)。

1. 全局框架中的組件

在全局框架的范疇中，包含的組件模塊類型可以分成兩個(gè)大類，全局組件和浮層元素。

全局組件是指在項(xiàng)目多數(shù)頁(yè)面中都會(huì)存在并進(jìn)行交互的組件，功能往往和當(dāng)前頁(yè)面沒(méi)有直接聯(lián)系，比如路徑跳轉(zhuǎn)、色彩切換、快捷操作等。

而包含的浮層元素，本質(zhì)上也是全局組件，只是它們的共性是不會(huì)默認(rèn)展示，需要被特定條件觸發(fā)才能被感知。比如斷網(wǎng)提示、刪除確認(rèn)、側(cè)邊抽屜等都是全局化的浮層要素，也是需要在前期做好規(guī)劃的內(nèi)容。

下面就針對(duì)這個(gè)兩種類型的組件一一展開(kāi)解釋。

（1）全局組件

a. 導(dǎo)航欄

導(dǎo)航欄不僅僅是 B 端管理系統(tǒng)，也是網(wǎng)站設(shè)計(jì)中最重要的組件。優(yōu)秀的導(dǎo)航欄可以清晰的展示項(xiàng)目的頁(yè)面層級(jí)結(jié)構(gòu)，幫助用戶高效的訪問(wèn)目標(biāo)頁(yè)面。全局框架制定的一步，就是根據(jù)項(xiàng)目的具體情況，選擇合適的導(dǎo)航類型。

導(dǎo)航欄主要使用上方、左側(cè)、混合型三種布局形式：

1. 上方導(dǎo)航：適合選項(xiàng)內(nèi)容較少，預(yù)留更多橫向空間內(nèi)容區(qū)域。
2. 左側(cè)導(dǎo)航：適合選項(xiàng)、層級(jí)較多的情況，方便折疊和上下滾動(dòng)。
3. 混合導(dǎo)航：適合需要有效區(qū)分不同功能區(qū)塊的場(chǎng)景。

確定導(dǎo)航欄的類型，還需要確定導(dǎo)航的操作邏輯，包含幾級(jí)菜單，默認(rèn)、展開(kāi)、選中、關(guān)閉的交互。

b. 頂部欄

除了導(dǎo)航外，另一個(gè)基本必備的組件，就是頂部欄，除了放最基礎(chǔ)的用戶和設(shè)置選項(xiàng)外，它的角色定位要根據(jù)需求決定，最常見(jiàn)的包含下方幾種：

• 標(biāo)題欄：主要用來(lái)展示頁(yè)面標(biāo)題、副標(biāo)題，或者面包屑控件。
• 工具欄：包含比較多的操作要素，如搜索、新增、邀請(qǐng)、消息管理等。
• 菜單欄：包含較多針對(duì)當(dāng)前頁(yè)面/模塊的菜單選項(xiàng)和內(nèi)容切換操作。

當(dāng)然，以上幾種情況并不是絕對(duì)的。設(shè)計(jì)師需要根據(jù)項(xiàng)目的實(shí)際需求出發(fā)，去梳理項(xiàng)目包含哪些全局控件或操作，然后再?zèng)Q定如何分配到導(dǎo)航或者頂部菜單上，而不是先定義菜單的類型再往里面填內(nèi)容和字段。

c. 頁(yè)面標(biāo)簽欄

頁(yè)面標(biāo)簽欄是一個(gè)類似瀏覽器標(biāo)簽欄的組件，用來(lái)展示和關(guān)閉當(dāng)前項(xiàng)目?jī)?nèi)打開(kāi)的頁(yè)面。

標(biāo)簽欄的使用在遠(yuǎn)古時(shí)期的 B 端項(xiàng)目應(yīng)用非常普遍，因?yàn)橐呀?jīng)入土的 IE 瀏覽在那個(gè)年代是沒(méi)有頁(yè)面標(biāo)簽功能的，導(dǎo)致開(kāi)啟多個(gè)頁(yè)面的切換非常麻煩。

隨著瀏覽器標(biāo)簽的普及，它已經(jīng)不適用于多數(shù) B 端項(xiàng)目，但依舊有一小部分項(xiàng)目是需要結(jié)合它的優(yōu)勢(shì)才可以更好的提升操作效率。

在一些需要持續(xù)打開(kāi)和來(lái)回切換頁(yè)面的項(xiàng)目，如客服系統(tǒng)、財(cái)務(wù)審核、合同審批，因?yàn)榇蜷_(kāi)新頁(yè)面僅僅需要加載內(nèi)容區(qū)域而不是全局，沒(méi)有新建窗口后的空白頁(yè)面加載過(guò)程，就能帶來(lái)更好的體驗(yàn)。

d. 內(nèi)容模塊

內(nèi)容模塊是用來(lái)容納和顯示頁(yè)面相關(guān)內(nèi)容的模塊，這是個(gè)被很多人忽略的組件類型，包含模塊標(biāo)題欄和操作區(qū)域。

一個(gè)成熟的 B 端項(xiàng)目會(huì)統(tǒng)一制定內(nèi)容模塊的組件結(jié)構(gòu)，保證大量頁(yè)面和模塊之間樣式的統(tǒng)一性。比如下面的模塊案例。

如果只是簡(jiǎn)單做個(gè)標(biāo)題再統(tǒng)一間距參數(shù)，那么這個(gè)組件也就沒(méi)必要在這里提了，因?yàn)檫@僅僅是設(shè)計(jì)問(wèn)題而不是交互問(wèn)題。內(nèi)容模塊的制定是為了盡可能考慮各種內(nèi)容場(chǎng)景，并進(jìn)行統(tǒng)一處理。

例如要應(yīng)用一級(jí)分頁(yè)標(biāo)簽、多層級(jí)分頁(yè)標(biāo)簽、操作按鈕、內(nèi)容折疊等。考慮的越全，后面處理起來(lái)越工整，否則就像下方淘寶賣家端千牛的案例一樣，損害用戶的體驗(yàn)和操作效率。

內(nèi)容模塊是很難在初期一口氣全部定完，不僅需要產(chǎn)品經(jīng)理前期給出詳盡的需求和產(chǎn)品原型，還依賴設(shè)計(jì)師自身的經(jīng)驗(yàn)判斷。

所以，它的制定流程是在前期先根據(jù)掌握的信息制定出最初的版本，然后在完成后續(xù)的頁(yè)面中逐漸進(jìn)行補(bǔ)充、優(yōu)化并替換。

作者：酸梅干超人；

本文由 @超人的電話亭 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來(lái)自Unsplash ，基于 CC0 協(xié)議。

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

B端設(shè)計(jì)規(guī)范如何正確搭建，好的設(shè)計(jì)規(guī)范對(duì)設(shè)計(jì)有什么幫助呢？設(shè)計(jì)夾老師在這篇文章中圍繞清晰、高效、友好、可控四個(gè)關(guān)鍵設(shè)計(jì)原則，帶你一步步建立起設(shè)計(jì)規(guī)范，推薦各位設(shè)計(jì)er和對(duì)交互產(chǎn)品、B端產(chǎn)品設(shè)計(jì)感興趣的童鞋閱讀。

Halo，這里是設(shè)計(jì)夾，今天為大家分享的是「B端設(shè)計(jì)」。B端設(shè)計(jì)離不開(kāi)設(shè)計(jì)規(guī)范這個(gè)話題，而做好設(shè)計(jì)規(guī)范是一個(gè)龐大復(fù)雜工程，很多人對(duì)這些處于一知半解狀態(tài)。在這個(gè)系列文章里通過(guò)結(jié)合平時(shí)的項(xiàng)目案例來(lái)談?wù)勛约簩?duì)B端設(shè)計(jì)規(guī)范的一些理解，希望可以帶來(lái)一些啟發(fā)。

本篇先談?wù)勗O(shè)計(jì)規(guī)范制作的指導(dǎo)思想–設(shè)計(jì)原則，后續(xù)文章再展開(kāi)講一下常見(jiàn)各種組件的設(shè)計(jì)規(guī)范。

一、設(shè)計(jì)規(guī)范作用

設(shè)計(jì)規(guī)范作為B端設(shè)計(jì)中非常重要的一環(huán)，它的作用主要體現(xiàn)在以下三個(gè)方面：

在日常工作中，當(dāng)項(xiàng)目組收到一個(gè)新的需求時(shí)，如果已經(jīng)具備了成熟的設(shè)計(jì)規(guī)范體系，其工作效率往往會(huì)得到很好的提升。最后上線的頁(yè)面不用走查還原度。以下是具體工作流程：

二、設(shè)計(jì)原則

通過(guò)前面內(nèi)容我們知道了設(shè)計(jì)規(guī)范對(duì)于產(chǎn)品設(shè)計(jì)意義重大，那么制定設(shè)計(jì)規(guī)范制定依據(jù)又是什么呢？這里就要引出設(shè)計(jì)原則這個(gè)話題，設(shè)計(jì)原則是設(shè)計(jì)規(guī)范的總綱領(lǐng)，所有的設(shè)計(jì)規(guī)范都應(yīng)當(dāng)以設(shè)計(jì)原則為基準(zhǔn)。設(shè)計(jì)原則主要包含以下內(nèi)容：

接下來(lái)就圍繞設(shè)計(jì)原則清晰、高效、友好、可控這四個(gè)方面展開(kāi)講解。

(一) 清晰

清晰原則主要從視覺(jué)角度讓界面信息傳達(dá)合理，提高用戶信息獲取效率。主要包含對(duì)比，親密，對(duì)齊，重復(fù)四個(gè)方面。

1.對(duì)比

對(duì)比是指界面中為了區(qū)分信息層級(jí)，強(qiáng)化元素對(duì)比度，使用的很常見(jiàn)的一種手段。例如，下圖中利用大色塊按鈕與線框按鈕形成對(duì)比來(lái)凸顯關(guān)鍵按鈕；通過(guò)對(duì)文字字號(hào)加大，字體加粗，顏色加深來(lái)與弱文案形成對(duì)比，凸顯關(guān)鍵文字信息。

2.親密

如果信息之間關(guān)聯(lián)性越高，它們之間的距離就應(yīng)該越接近，也越像一個(gè)視覺(jué)單元；反之，距離就應(yīng)該越遠(yuǎn)，也越像多個(gè)視覺(jué)單元。親密性的根本目的是實(shí)現(xiàn)組織性，讓用戶對(duì)頁(yè)面結(jié)構(gòu)和信息層次一目了然。

3.對(duì)齊

在界面設(shè)計(jì)中，將元素進(jìn)行對(duì)齊，既符合了用戶的認(rèn)知特點(diǎn)(我們往往傾向使知覺(jué)對(duì)象的直線延續(xù)還是直線，曲線延續(xù)還是曲線)，也能引導(dǎo)用戶視覺(jué)流，讓用戶更流暢地接收信息。

4.重復(fù)

重復(fù)是指相同的元素在項(xiàng)目中重復(fù)引用，作用是可以有效降低用戶的學(xué)習(xí)成本，同時(shí)提高這些元素之間的關(guān)聯(lián)性。

(二) 高效

高效原則體現(xiàn)在便捷、輕量、簡(jiǎn)化、一致幾個(gè)方面，目的是通過(guò)合理的方式讓產(chǎn)品操作更加便捷；交互體驗(yàn)與內(nèi)容更加輕量和簡(jiǎn)化；以及產(chǎn)品風(fēng)格保持一致。下面結(jié)合常見(jiàn)案例說(shuō)明如何應(yīng)用這一原則。

1.合理利用拖拽–便捷、輕量

在涉及到諸如上傳文件，排序，滑動(dòng)輸入，搭建等需求時(shí)，合理采用拖拽交互往往可以打造更加便捷用戶體驗(yàn)。

2.盡量減少不必要的跳轉(zhuǎn)–便捷、輕量

用戶操作過(guò)程盡量減少跳轉(zhuǎn)，以實(shí)現(xiàn)交互減步長(zhǎng)，從而使用戶操作更高效輕量。例如能用原位操作就不考慮展開(kāi)收起；能用展開(kāi)收起就不用氣泡…依次類推(優(yōu)先級(jí)從高到低：原位＞展開(kāi)收起＞氣泡＞彈窗＞抽屜＞新頁(yè)面)

3.放大點(diǎn)擊熱區(qū)–便捷

放大可點(diǎn)擊按鈕熱區(qū)，相對(duì)于較小點(diǎn)擊熱區(qū)，具備更絲滑操作體驗(yàn)。

4.懸停即現(xiàn)–輕量

利用懸停即現(xiàn)，避免信息過(guò)于重復(fù)啰嗦，簡(jiǎn)化頁(yè)面提高閱讀體驗(yàn)。

5.折疊次要功能–簡(jiǎn)化

頁(yè)面功能按鈕過(guò)多時(shí)，可將次要按鈕收納到一起，點(diǎn)擊時(shí)再展開(kāi)，外面只展示高頻操作或重要按鈕，保證頁(yè)面內(nèi)容簡(jiǎn)潔。

6.統(tǒng)一樣式–一致

一致性是指在不同頁(yè)面中相同操作應(yīng)保持一致視覺(jué)與交互樣式，可有降低用戶學(xué)習(xí)成本與企業(yè)開(kāi)發(fā)成本。

(三) 友好

友好原則應(yīng)貫穿用戶操作前，操作中及操作后三個(gè)階段，給予用戶及時(shí)反饋與幫助。

1.操作前

在用戶操作前給到合適的引導(dǎo)與幫助，有效減少用戶迷茫感。

2.操作中

通過(guò)交互效果及頁(yè)面樣式讓用戶可以清晰感知到自己當(dāng)前操作。

3.操作后

利用界面中元素變化清晰直觀展示當(dāng)前的狀態(tài)。

(四) 可控

可控主要體現(xiàn)在自由和導(dǎo)航兩個(gè)方面。

1.自由

自由即指用戶可以自由完成一些操作，例如回退，撤銷，終止等。

2.導(dǎo)航

導(dǎo)航是指用戶隨時(shí)知曉當(dāng)前所在位置，而且可以利用導(dǎo)航隨意到達(dá)目標(biāo)頁(yè)面。

最后

通過(guò)本篇內(nèi)容我們大概知道了制作設(shè)計(jì)規(guī)范主要方向，那么具體到每個(gè)組件上，我們?cè)撊绾稳ピO(shè)計(jì)呢？后續(xù)篇章將細(xì)分聊聊如何去設(shè)計(jì)「B端常見(jiàn)組件」。

編輯導(dǎo)讀：人是視覺(jué)動(dòng)物，相比于文字，人們更容易被圖片吸引。而如何在界面設(shè)計(jì)中運(yùn)用好圖片，給用戶更好的視覺(jué)體驗(yàn)，本文作者有自己的想法，一起來(lái)看看吧。

在UI設(shè)計(jì)中，配圖的好壞將直接影響著界面的品質(zhì)及用戶的視覺(jué)體驗(yàn)。縱觀如今高質(zhì)量的界面設(shè)計(jì)，具有設(shè)計(jì)感的配圖不僅是吸引用戶的重要元素，能比原本平淡無(wú)奇的文字界面更讓人產(chǎn)生點(diǎn)擊欲望，還能體現(xiàn)出設(shè)計(jì)師的品味、以及相關(guān)方面的專業(yè)性。

在這個(gè)快節(jié)奏的時(shí)代，相比文字，圖像的傳達(dá)效率會(huì)更快、更高、更有助于用戶輕松理解及記憶。配圖用的好，往往能起到?jīng)Q定畫(huà)面基調(diào)、流程引導(dǎo)、視覺(jué)平衡等關(guān)鍵作用，所以，在同等樣式的布局下，因圖片的使用及處理方式的不同，界面的品質(zhì)也會(huì)存在較大的差異。本篇文章將介紹一些在UI設(shè)計(jì)中配圖的基礎(chǔ)知識(shí)，幫助大家在圖片列表、背景處理、圖文混排、頭圖等相關(guān)界面設(shè)計(jì)無(wú)從下手時(shí)提供靈感，在選擇圖片、后續(xù)處理時(shí)如何做到有規(guī)律可循帶來(lái)一些思路。

一、了解UI設(shè)計(jì)中的圖片

1. 為什么要重視圖片

在文字出現(xiàn)之前，人們都是靠看到的圖像來(lái)理解信息內(nèi)容，即便后來(lái)文字能表達(dá)出很豐富的內(nèi)容，圖示也不可少，試想一下，當(dāng)別人拿著密密麻麻的數(shù)據(jù)給你看時(shí)，能看的頭皮發(fā)麻，你更希望有一張清晰的圖表，但并不能說(shuō)明別人的數(shù)據(jù)不清晰。所以，圖像相比文字能更具說(shuō)服力、更容易傳達(dá)信息，使讀者產(chǎn)生共鳴、震撼內(nèi)心，讓人看了一目了然，能直觀的與人產(chǎn)生互動(dòng)。

當(dāng)說(shuō)到UI設(shè)計(jì)中的圖片非常重要時(shí)，并不是說(shuō)文字就一定比圖片弱，好的文字也能帶給我們無(wú)限的遐想，只能說(shuō)在更大的概率上圖片和文字哪個(gè)更吸引人，所以我更傾向于觀賞圖片，然后感受到帶來(lái)的美好。但是，如果非要問(wèn)我選擇哪一個(gè)時(shí)，我只能說(shuō)“只有小孩子才做選擇題，我（設(shè)計(jì)師）全都要”，圖片可以表達(dá)出豐富的內(nèi)容，再用文字言簡(jiǎn)意賅，是一個(gè)非常完美的組合。

2. 常用的圖片格式

圖片有多種格式，如JPG、GIF、PNG、TIFF、RAW、BMP、WEBP…等，在UI設(shè)計(jì)中，最常用的無(wú)非JPG、GIF、PNG三種。

JPG：目前為止使用最多的圖片格式，兼容各大操作系統(tǒng)瀏覽器及編輯軟件，非常方便被打開(kāi)和處理，但不能顯示透明底，壓縮后會(huì)失去一部分原始信息。

PNG：如需編輯，PNG應(yīng)該算是所有圖片格式中的最佳選擇，支持無(wú)損壓縮及透明底，但針對(duì)需要高保真的復(fù)雜圖片，壓縮后的文件較大，且有少數(shù)的瀏覽器不支持。

GIF：動(dòng)效圖片，支持透明底及無(wú)損壓縮，通常由視頻格式的內(nèi)容轉(zhuǎn)換而來(lái)，但對(duì)色彩有非常嚴(yán)格的要求，數(shù)量最多不超過(guò)256種，相比前面兩種，GIF格式的文件更大。

二、圖片的使用及處理方法

1. 圖片的使用比例

在移動(dòng)端UI設(shè)計(jì)中，我歸納了最常用的幾個(gè)圖片比例，分別是1:1、3:2、4:3、16:9四種，這些比例都是源于最早的膠片攝影及現(xiàn)代相機(jī)的傳感器演變而來(lái)。當(dāng)我們不知如何選擇比例時(shí)，首先需清楚的了解界面圖片的應(yīng)用場(chǎng)景、來(lái)源用戶以及圖片比例背后的緣由，否則將很難把控，下面將針對(duì)這幾個(gè)比例作具體分析。

1）1:1 比例

因?yàn)橄鄼C(jī)結(jié)構(gòu)的原因，早期最傳統(tǒng)的120膠片畫(huà)幅就是正方形（6*6cm），即1：1的比例，此比例更容易的將構(gòu)圖規(guī)整，使其最大程度的突出照片主體。

在如今的電商APP中，商品圖片絕大多數(shù)都遵循了1：1的比例，不管橫向還是縱向都能將信息進(jìn)行完整化的展示，且方便多場(chǎng)景、頁(yè)面的適配。另外，用戶頭像也都使用了這一比例。

2）3:2比例

起初135膠卷的比例就是3：2，主要是因相機(jī)取景框的大小而決定。在移動(dòng)端，這一比例使用也比較廣泛，例如新聞、旅游類型產(chǎn)品，在拍照之后無(wú)需裁剪等處理，直接上傳使用，非常方便。

3）4:3比例

隨著攝影的發(fā)展，小/微型相機(jī)出現(xiàn)而誕生4：3比例，且移動(dòng)設(shè)備發(fā)展迅速，在非專業(yè)攝影的情況下，手機(jī)能很大程度上代替單反并成為主流拍照設(shè)備，目前市場(chǎng)上主流手機(jī)的拍攝尺寸基本都為4：3比例。相比3：2的圖片，4：3圖片占比更大，能最大化顯示圖片以突出重點(diǎn)信息。

4）16:9比例

根據(jù)人體工程學(xué)的研究，人眼視野范圍的比例約為16：9的長(zhǎng)方形，所以電視、顯示器及投影范圍的設(shè)計(jì)都是基于這個(gè)黃金比例。

線上產(chǎn)品不用多說(shuō)，影視類型的產(chǎn)品均采用16：9的尺寸，例如愛(ài)奇藝、優(yōu)酷、騰訊視頻等，到目前為止，這個(gè)比例在設(shè)定上還沒(méi)出現(xiàn)過(guò)問(wèn)題。

在上述4個(gè)尺寸中，最容易混淆的是3：2和4：3，如果不清楚如何選擇，請(qǐng)根據(jù)產(chǎn)品目標(biāo)定位，看看到底是以內(nèi)容為主導(dǎo)還是圖片為主導(dǎo)。例如：資訊類型產(chǎn)品很注重標(biāo)題文案，即會(huì)使用上文下圖、左文右圖的版式，選擇3：2作為封面，以降低圖片的視覺(jué)重量；旅游、租房類產(chǎn)品，則可使用4：3的圖片，以傳達(dá)更多信息。這種選擇方式雖然不是絕對(duì)，但當(dāng)我們陷入兩難的困境時(shí)，可作為參考依據(jù)幫助快速?zèng)Q策。

2. 圖片的使用場(chǎng)景

1）單圖布局

全屏：具有很強(qiáng)的視覺(jué)沖擊力，非常適合用于傳播行業(yè)屬性及品牌調(diào)性。單圖全屏布局處理靈活，可整體突出、局部特寫(xiě)或加純色不透明度紋理/遮罩，對(duì)圖片細(xì)節(jié)、構(gòu)圖等有較高的質(zhì)量要求，一般用于登錄、啟動(dòng)引導(dǎo)、產(chǎn)品介紹背景等頁(yè)面。

卡片：以單張圖片作為視覺(jué)引導(dǎo)，寬高不固定，但占據(jù)界面大部分區(qū)域及重要位置，主要突出產(chǎn)品調(diào)性和成為吸引用戶的流量入口，促使用戶與其產(chǎn)生交互行為。常用于產(chǎn)品詳情頁(yè)頭圖、推薦頁(yè)、專題入口等。

2）圖文列表

在圖文列表界面，很多時(shí)候，我們都在想一個(gè)問(wèn)題，到底是選擇左圖右文、左文右圖還是上圖下文？所以我們首先要明白F式（從上到下、從左到右）瀏覽布局，這也跟人眼的瀏覽習(xí)慣相吻合，然后確定圖、文信息內(nèi)容的權(quán)重，根據(jù)優(yōu)先級(jí)將重要的信息放在關(guān)鍵位置。

單列組合

左文右圖：以文字為主、圖片為輔，主要強(qiáng)調(diào)文字信息，且圖片與標(biāo)題的關(guān)聯(lián)性不是很大，能減少減少圖片對(duì)文字的干擾，對(duì)圖片的質(zhì)量要求不高，很多新聞、資訊類產(chǎn)品都是選用這種方式布局。

左圖右文：在圖片內(nèi)容優(yōu)先于文本內(nèi)容的情況下，采用左圖右文的方式，更強(qiáng)調(diào)以圖片直觀的傳達(dá)內(nèi)容、吸引用戶的視線，對(duì)圖片的質(zhì)量要求高于左文右圖，一般是電商、旅游類產(chǎn)品的最佳之選。

上圖下文：一行只顯示一張圖片，大多采用橫圖，同屏一般不超過(guò)兩個(gè)內(nèi)容，用戶需要從圖片中獲取大量信息，對(duì)圖片的質(zhì)量要求很高，大多有專門(mén)的人員審核，以完成對(duì)圖片的品質(zhì)的把控。這種方式很占用界面的縱向空間，部分租房類、藝術(shù)類產(chǎn)品會(huì)選用此種方式。

雙列組合

并排：相同高度的比例控制，是較為經(jīng)典圖文布局，相比單列，同屏可展示更多的圖片內(nèi)容且空間利用率更高，能同時(shí)向用戶傳達(dá)更多信息。

錯(cuò)位：圖片高度自適應(yīng)（瀑布流），在限制寬度的條件下，高度自由發(fā)揮，讓圖片得到更多的舒展，利用率更高。雙列錯(cuò)位的排版方式增加了版式的趣味性，可緩解用戶在長(zhǎng)時(shí)間瀏覽下的視覺(jué)疲勞，需要注意的是寬高比例不要太大、成跳躍式的變化，否則可能導(dǎo)致視覺(jué)混亂，且低高度的圖片信息很容易被忽略。

3）多圖組合

規(guī)則：3張或以上的規(guī)則的圖片組合很常見(jiàn)，主要用圖片列表來(lái)引導(dǎo)用戶查看更多，通常利用單排左右滑動(dòng)或九宮格的方式呈現(xiàn)。例如旅游、租房、影視類產(chǎn)品，包括手機(jī)相冊(cè)、社交圈子等。

不規(guī)則：多圖不規(guī)則比例并不常見(jiàn)，因移動(dòng)端設(shè)備可視寬度有限，容易導(dǎo)致混亂的錯(cuò)覺(jué)。藝術(shù)、拼圖類產(chǎn)品看到的居多，另外，部分社交類產(chǎn)品為了展示不同遠(yuǎn)近距離的層級(jí)關(guān)系也會(huì)用到這種排版方式。

3. 圖片操作的交互手勢(shì)

圖片常見(jiàn)的手勢(shì)操為：滑動(dòng)、點(diǎn)擊、雙指縮放，除此之外，還有很多針對(duì)所有元素都可以操作的交互手勢(shì)，這里就不多說(shuō)了，下面單獨(dú)對(duì)圖片手勢(shì)作出介紹。

1）滑動(dòng)

上下滑動(dòng)：通常在圖文列表或單張圖片內(nèi)容超過(guò)一屏的情況下，通過(guò)上下滑動(dòng)查看更多信息。

左右滑動(dòng)：為了拓展更多內(nèi)容，多用于相同等級(jí)的圖片列表或大圖切換，在頁(yè)面列表中會(huì)將無(wú)法同時(shí)展示的圖片呈現(xiàn)一部分或以數(shù)量作為提示，引導(dǎo)用戶探索以發(fā)現(xiàn)更多。

2）點(diǎn)擊/長(zhǎng)按

單擊：?jiǎn)螕艨刹榭磮D片，從縮略圖到詳情或大圖的切換操作；

雙擊：針對(duì)圖片本身進(jìn)行某些操作，比如喜歡、點(diǎn)贊等，另外，部分圖片通過(guò)雙擊進(jìn)行一定比例的放大縮小。

長(zhǎng)按：調(diào)出圖片的部分屬性信息、下載圖片等進(jìn)行下一步操作。

3）雙指縮放

當(dāng)我們需要查看圖片的某些局部信息或細(xì)節(jié)時(shí)，就會(huì)使用雙指（開(kāi)合）縮放的交互手勢(shì)。

三、圖片樣式效果

1. 圖片遮罩

因圖片的色彩變化不規(guī)則，為了保證圖片上層文字的可讀性，通常會(huì)在文字區(qū)域加一個(gè)純色遮罩，也可設(shè)置不透明度的漸變效果，使遮罩跟圖片的過(guò)渡更加協(xié)調(diào)，提升視覺(jué)美觀度。

2. 毛玻璃（背景模糊）

毛玻璃效果通常出現(xiàn)在應(yīng)用的2、3級(jí)頁(yè)面，對(duì)應(yīng)用性能會(huì)有一定的消耗，一般使用封面圖片進(jìn)行大幅度的高斯模糊作為背景使用，可在上層加上一定透明度的蒙層配合使用，透明度數(shù)值根據(jù)不同的圖片色彩及使用場(chǎng)景適當(dāng)?shù)恼{(diào)整。毛玻璃效果既能滿足文字內(nèi)容的清晰呈現(xiàn)，又能提供場(chǎng)景氛圍并提升界面的品質(zhì)感與神秘感，我們最熟悉的當(dāng)屬音樂(lè)播放頁(yè)面的背景模糊效果了。

3. 摳圖+純色背景組合

對(duì)于自營(yíng)平臺(tái)，內(nèi)容較為固定的商品頁(yè)面，可將商品摳圖后自定義背景，讓界面的整體設(shè)計(jì)風(fēng)格可控，延展性更高。不適配平臺(tái)類型應(yīng)用，因?yàn)闀?huì)讓商家產(chǎn)生較高的運(yùn)營(yíng)成本。

4. 圓角設(shè)定

圖片圓角值設(shè)定，能體現(xiàn)出不同的產(chǎn)品屬性及氣質(zhì)。例如：直角比較硬朗，給人高冷、力量的感覺(jué)，小圓角傳達(dá)出安全、專業(yè)的屬性，而大圓角顯得活潑、可愛(ài)，更有親和力。

5. 圖片出界

圖片出界常用于運(yùn)營(yíng)設(shè)計(jì)，例如圖片輪播、膠囊banner、專題頁(yè)等，另外，經(jīng)摳圖處理過(guò)的圖片也可用在商品詳情頁(yè)頂部圖示。這種效果能有效避免呆板，營(yíng)造出畫(huà)面氛圍，制造出更強(qiáng)烈的視覺(jué)沖擊力。

四、圖片處理小技巧

1. 符合產(chǎn)品氣質(zhì)

UI設(shè)計(jì)中，任何一個(gè)設(shè)計(jì)思路、想法及效果樣式都是為產(chǎn)品而服務(wù)，圖片也不例外，需要根據(jù)不同的場(chǎng)景進(jìn)行合理搭配，好的配圖更能與用戶產(chǎn)生共鳴。

2. 切合主體，表達(dá)產(chǎn)品核心內(nèi)容

配圖必須要明確主體，一眼就能看出核心內(nèi)容，且不可以炫技或好看為主，否則會(huì)被多余的元素、效果影響主體視覺(jué)導(dǎo)致沒(méi)有重點(diǎn)。但確定好一張圖片的風(fēng)格及色系后，后續(xù)也要保持統(tǒng)一。

3. 風(fēng)格統(tǒng)一

圖片以實(shí)用性為準(zhǔn)，如果一味的追求漂亮、好看，最終可能形色各異造成視覺(jué)的不統(tǒng)一，嚴(yán)重影響用戶體驗(yàn)。設(shè)計(jì)師在選圖時(shí)需要對(duì)風(fēng)格精準(zhǔn)把控或后續(xù)稍加處理，以形成統(tǒng)一的視覺(jué)。

常見(jiàn)的控制方向有圖片類型（位圖/插畫(huà)/形狀）、視角（平視/仰視/俯視）、商品背景（簡(jiǎn)約/復(fù)雜/純色）、呈現(xiàn)區(qū)域（堆積/局部/特寫(xiě)）、構(gòu)圖（中心/水平線/對(duì)稱/對(duì)角線…）等。另外，還有很多抽象的方式但并不是絕對(duì)的，我們都可以嘗試從不同的角度去調(diào)整，力求讓所有圖片達(dá)到最佳視覺(jué)效果。

4. 顏色豐富

因人的天性即向往美好、品質(zhì)（非物質(zhì)化）生活，固品質(zhì)感的配圖更容易吸引用戶的注意力，讓人想要擁有的感覺(jué)，如果色彩不夠飽滿，不管風(fēng)格是多么統(tǒng)一，也達(dá)不到良好的用戶體驗(yàn)。在選好圖片后，可對(duì)色相、飽和度、亮度稍加調(diào)整，以確保色彩飽滿、豐富。

5. 設(shè)計(jì)稿需呈現(xiàn)上線的實(shí)際效果

有時(shí)候做設(shè)計(jì)為了方便，整個(gè)界面的圖片直接復(fù)用同一張，即便設(shè)計(jì)的再好，也可能隱藏著不易察覺(jué)的瑕疵。需要說(shuō)明的是，一個(gè)成熟且專業(yè)的設(shè)計(jì)師，首先要對(duì)自己負(fù)責(zé)，然后才是設(shè)計(jì)，即便是初稿，在即將呈現(xiàn)給大家或匯報(bào)前，一定要給出上線后最真實(shí)的效果，這樣方便他人貼合實(shí)際給出一些方向性的建議，幫助自己更好的決策。經(jīng)處理過(guò)的實(shí)際配圖能體現(xiàn)整體效果，方便找出圖片以外的設(shè)計(jì)缺陷，例如版式、字體大小、層級(jí)關(guān)系等問(wèn)題。

6. 文件大小處理

靜態(tài)圖片常用的無(wú)非PNG、JPG這兩種格式，文件較大的圖片會(huì)影響打開(kāi)頁(yè)面或刷新時(shí)的速度，本地圖片更會(huì)增加應(yīng)用包的大小。從設(shè)計(jì)稿中導(dǎo)出圖片時(shí)需要控制文件大小，如無(wú)特別（超大圖）情況，切勿主動(dòng)降低圖片質(zhì)量后再導(dǎo)出，否則會(huì)影響界面整體的視覺(jué)美觀度。

這里推薦一個(gè)線上無(wú)損智能壓縮神器：https://tinypng.com，僅限PNG、JPG、WEBP格式的圖片。

△上圖可以看出，圖片在壓縮了76%后，由1.4MB變成了332KB，肉眼很難看出（查看大圖）質(zhì)量上的損失。

7. 倍率切圖

切圖不像以前那么麻煩，同一張圖片需要手動(dòng)導(dǎo)出多套規(guī)范，現(xiàn)在只需在軟件（或安裝插件）標(biāo)記好切圖，上傳到類似藍(lán)湖、摹客等第三方線上應(yīng)用，分享給團(tuán)隊(duì)成員即可各自下載web、Android、iOS對(duì)應(yīng)的多套規(guī)范制圖。

設(shè)計(jì)師在設(shè)計(jì)過(guò)程中，一定要按照規(guī)范的最大極限保留原圖，以iOS系統(tǒng)@1x規(guī)范設(shè)計(jì)稿為例，如果圖片的寬度是100px，那么導(dǎo)入軟件中的圖片寬度至少要在300以上，然后再進(jìn)行縮小（PS中需轉(zhuǎn)為智能對(duì)象），如果低于300px，開(kāi)發(fā)在導(dǎo)出@3x的圖片就會(huì)失真，可能會(huì)因損失像素而出現(xiàn)模糊的情況。

五、總結(jié)

文章中所介紹的圖片使用方法及處理技巧，并非最好、唯一的答案，但在你沒(méi)有更好的方法之前，多多少少能從中得到啟發(fā)。UI中圖片設(shè)計(jì)的本質(zhì)在于自身的專業(yè)能力，然后用自己的視覺(jué)產(chǎn)出和設(shè)計(jì)手段去吸引、打動(dòng)用戶，從而為產(chǎn)品帶來(lái)利益，也能體現(xiàn)出設(shè)計(jì)價(jià)值。

不得不承認(rèn)，人們很多時(shí)候都是通過(guò)視覺(jué)表象決定是否需要深入了解、擁有某一件事/物，設(shè)計(jì)師就是在做視覺(jué)表象的表達(dá)，如果圖片用的好，不僅能讓你的設(shè)計(jì)更加出彩，還有一定幾率轉(zhuǎn)化用戶，形成商業(yè)價(jià)值。

#專欄作家#

大漠飛鷹；公眾號(hào)：能量眼球，人人都是產(chǎn)品經(jīng)理專欄作家。致力于產(chǎn)品需求的驅(qū)動(dòng)、產(chǎn)品體驗(yàn)的挖掘，利用設(shè)計(jì)的手段為受眾用戶帶來(lái)更好的體驗(yàn)，即好看、好用。

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

題圖來(lái)自Unsplash，基于 CC0 協(xié)議

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