国外亚洲成av人片在线观看,热99re久久精品这里都是精品,天堂网在线最新版www,国产成人av区一区二区三,51久久成人国产精品麻豆

在互聯(lián)網(wǎng)產(chǎn)品中，按鈕系統(tǒng)是產(chǎn)品與用戶之間的連接樞紐，是構(gòu)成用戶體驗的一部分。本文中，筆者將解析產(chǎn)品按鈕系統(tǒng)的設(shè)計過程，并用基礎(chǔ)模型、動態(tài)模型與思考流程模型進(jìn)行說明。

筆者從忙碌的工作生活中抽出時間，分享自己關(guān)于按鈕系統(tǒng)設(shè)計的思考。

我們都知道各種各樣不同名稱的按鈕，比如行為召喚按鈕、靈魂按鈕等，這些按鈕對于大家理解按鈕設(shè)計很有幫助，但今天不討論具體的按鈕區(qū)別。

今天主要和大家分享按鈕設(shè)計的思考決策，通過模型的方式呈現(xiàn)出連接用戶、產(chǎn)品按鈕系統(tǒng)的設(shè)計思考過程。以四張圖的形式展現(xiàn)出來，這四張圖分別是：基礎(chǔ)模型圖、動態(tài)模型圖、思考流程模型圖、表現(xiàn)形式拆解圖（對設(shè)計元素進(jìn)行拆解）。

在現(xiàn)實工業(yè)社會中，我們接觸到的很多工業(yè)產(chǎn)品都有是按鈕的，這些按鈕作為人類的行動點幫助人類操作產(chǎn)品，就像是人與人之間的對話。

隨著互聯(lián)網(wǎng)化的推進(jìn)，互聯(lián)網(wǎng)線上產(chǎn)品繼承了這個優(yōu)秀的特征，讓人類通過按鈕來和網(wǎng)站、App等線上產(chǎn)品溝通交流。按鈕作為人類和產(chǎn)品之間的紐帶，正在發(fā)揮著很大的作用。所以我們需要思考如何使按鈕系統(tǒng)價值最大化。

一、按鈕的發(fā)展歷程

首先看一下按鈕的發(fā)展歷程。在生活中，工業(yè)制成品的按鈕是有很多物理屬性的，比如：形狀、顏色、質(zhì)感、聲音、震動等等，人類通過不斷的學(xué)習(xí)和理解，逐漸形成了對于按鈕的認(rèn)知（人類對于事物的認(rèn)知是基于特征的），下圖是工業(yè)產(chǎn)品的按鈕。

隨著互聯(lián)網(wǎng)的發(fā)展，線上產(chǎn)品的按鈕設(shè)計在用戶認(rèn)知模型的基礎(chǔ)上，延續(xù)了按鈕的部分特征——真實、細(xì)節(jié)、質(zhì)感等；而現(xiàn)在產(chǎn)品中按鈕設(shè)計更加地簡約，只繼承了按鈕設(shè)計的核心特征。當(dāng)然在這個過程中，用戶對于按鈕的認(rèn)知也是在學(xué)習(xí)和理解中變化的。

二、按鈕系統(tǒng)的設(shè)計思考模型

1. 基礎(chǔ)模型圖

在設(shè)計按鈕的過程中，設(shè)計師容易陷入到每一個具體的需求中。由于需求的零碎而導(dǎo)致按鈕價值的零碎，甚至是不統(tǒng)一、不協(xié)調(diào)。而每一種類型的按鈕背后也都承載了數(shù)據(jù)邏輯和用戶行為，按鈕系統(tǒng)的不統(tǒng)一就會產(chǎn)生錯誤的視覺引導(dǎo)和心里暗示。所以設(shè)計師需要跳出需求導(dǎo)向的設(shè)計思維，從產(chǎn)品的全局出發(fā)，在產(chǎn)品體驗的基礎(chǔ)上，輸出具有不同層級且成系統(tǒng)的按鈕設(shè)計方案。

內(nèi)容主要包括如下：

• 產(chǎn)品目標(biāo)
• 用戶、場景、目標(biāo)、行為四者之間的關(guān)系
• 人類的認(rèn)知
• 按鈕的形式

（1）產(chǎn)品目標(biāo)

產(chǎn)品目標(biāo)可以幫助設(shè)計師更好地理解業(yè)務(wù)，明確產(chǎn)品的操作流程。區(qū)別對待流程的主次，哪個流程最接近產(chǎn)品目標(biāo)，把產(chǎn)品目標(biāo)和操作流程做一個相關(guān)性的分析和總結(jié)。例如電商平臺淘寶的產(chǎn)品商業(yè)目標(biāo)是提升GMV。只有和商機相關(guān)的行動點才是層級最高的按鈕，其他的按鈕是次級行動點。

而在篩選頁面的場景中，用戶的主要目標(biāo)是通過篩選來選擇出符合自己需求的內(nèi)容。篩選是行為，但用戶更關(guān)注的是列表的內(nèi)容；且篩選并不是一個和產(chǎn)品目標(biāo)強關(guān)聯(lián)的行為，只是其中的一個流程，和整個頁面的信息環(huán)境相比，篩選按鈕相對較弱。

而詳情頁是可以帶來商機和轉(zhuǎn)換的，符合產(chǎn)品的商業(yè)目標(biāo)，所以底部按鈕視覺層級較高，形成突出的視覺引導(dǎo)行動點，其他“查看全部信息”、收藏、客服等按鈕層級相對較弱。

（2）用戶、場景、目標(biāo)、行為四者之間的關(guān)系

同時在每一個操作流程中，用戶、場景、目標(biāo)、行為四個元素是互相關(guān)聯(lián)并且變化的，不同的場景會導(dǎo)致用戶目標(biāo)和行為的變化，所以不同的場景會有不同層級的按鈕設(shè)計。

例如：在淘寶的列表頁場景中，用戶的主要目標(biāo)是查看符合需求的內(nèi)容，行為是篩選和對比。當(dāng)用戶進(jìn)入到詳情頁場景中時，目標(biāo)則是對內(nèi)容的深度獲取，主要行為是添加購物車或者購買，次要行為是收藏、分享、領(lǐng)券，查看其他信息。

（3）人類的認(rèn)知

基于互聯(lián)網(wǎng)產(chǎn)品的使用，用戶對產(chǎn)品按鈕的設(shè)計形式已形成一定的認(rèn)知和理解，形成了特有的認(rèn)知模型。通過對于用戶的分析和了解，可以幫助設(shè)計師縮小設(shè)計形式的范圍。同一個行業(yè)的產(chǎn)品的按鈕設(shè)計形式都是有一定的共性。

例如下圖，電商的按鈕通常情況下是暖色系，強轉(zhuǎn)換按鈕位于屏幕的底部，按鈕的視覺和整個頁面形成強烈的對比，更加聚焦。

基于上述三點的分析，設(shè)計師在理解產(chǎn)品框架的基礎(chǔ)上融合產(chǎn)品和品牌特色，來設(shè)計按鈕的表達(dá)樣式。按鈕的形式有很多，例如：靈魂按鈕、文字按鈕、彌散投影按鈕、漸變色按鈕等等，設(shè)計師可以在已知按鈕形式的基礎(chǔ)上增加視覺特性、建立差異化、提升產(chǎn)品視覺的認(rèn)知度，塑造全局維度的按鈕體系。

2. 動態(tài)模型圖

通常情況下，設(shè)計師在設(shè)計方案中的思考是停留在靜止頁面中，缺乏對于場景頁面內(nèi)容的動態(tài)分析和理解。而動態(tài)模型圖可以幫助設(shè)計師主動思考場景內(nèi)容的動態(tài)變化（包括層級和動態(tài)）。

動態(tài)模型圖主要由層級線和動態(tài)線構(gòu)成，通過對基礎(chǔ)模型的分析得出按鈕的層級和樣式，基于層級和表現(xiàn)形式的基礎(chǔ)上增加時間的維度，呈現(xiàn)更加立體的按鈕設(shè)計體系。主要包括不同層級按鈕的默認(rèn)態(tài)、點擊態(tài)、進(jìn)行態(tài)、完成態(tài)和不可點擊態(tài)。

3. 思考流程模型圖

為了減輕設(shè)計師的思考和理解負(fù)擔(dān)，通過對基礎(chǔ)模型圖和動態(tài)模型圖的整理，歸納整理出了一整套思考流程。通過對關(guān)鍵節(jié)點的思考，讓按鈕設(shè)計更符合產(chǎn)品目標(biāo)和用戶的認(rèn)知，使設(shè)計賦能產(chǎn)品，提升產(chǎn)品的關(guān)鍵指標(biāo)?；谛枨蠓治?，通過嚴(yán)謹(jǐn)?shù)谋憩F(xiàn)形式傳遞品牌、特性等感性的視覺信息?？傮w的思考流程如下：

• 產(chǎn)品的關(guān)鍵指標(biāo)
• 場景目標(biāo)
• 用戶的行為
• 用戶的特點和認(rèn)知
• 按鈕的環(huán)境
• 位置
• 設(shè)計形式

（1）關(guān)鍵指標(biāo)

產(chǎn)品的關(guān)鍵指標(biāo)為設(shè)計確定方向。明確設(shè)計目標(biāo)，在和指標(biāo)相關(guān)聯(lián)的重要的行動點上設(shè)計最高層級的按鈕，吸引用戶關(guān)注點，引導(dǎo)用戶操作，對用戶形成強心理暗示，提升關(guān)鍵指標(biāo)數(shù)據(jù)。

例如：作為電商平臺淘寶的關(guān)鍵指標(biāo)是轉(zhuǎn)換率。只有帶來商機的行動點才是層級最高的行為，詳情頁中的購買和加入購物車是屬于和關(guān)鍵指標(biāo)強關(guān)聯(lián)的行動點。而查看更多、收藏、客服等關(guān)聯(lián)性相對較弱，所以操作層級屬于次級行動點。

（2）場景目標(biāo)
用戶在完成自己的目標(biāo)的流程中會在不同場景中穿梭，由于操作任務(wù)的復(fù)雜性，每一個場景中都有主要流程和輔助流程。所以對于場景中的主要目標(biāo)的行動點，采取相對重要層級的按鈕設(shè)計方式，弱化輔助流程的操作按鈕，減弱對于主流程的干擾。

場景的變化也會導(dǎo)致用戶目標(biāo)和行為的變化，在設(shè)計中需要根據(jù)場景的變化，及時調(diào)整按鈕重要層級的變化。例如：電商產(chǎn)品中的列表頁目標(biāo)是篩選內(nèi)容，而詳情頁是購買物品；同時也有次要流程，比如咨詢店家，收藏，查看更多等等。

（3）用戶行為

用戶行為和用戶目標(biāo)是強關(guān)聯(lián)的，基于目標(biāo)和用戶相關(guān)行為的基礎(chǔ)上，去理解因為場景的不同，用戶會采取不同的行為。

例如：車輛內(nèi)是相對較小且不穩(wěn)定的空間，滑動相對點擊的成本較低，且對手機固定位置的干擾相對影響小。所以滴滴司機端在接到客人時，確認(rèn)乘客上車的按鈕采用了滑動方式的按鈕，更好地迎合用戶在具體場景中的適宜行為。

（4）用戶特點和認(rèn)知

用戶是自帶標(biāo)簽的一個群體，打造符合群體個性的視覺化語言，有利于用戶產(chǎn)生認(rèn)同感和依賴感。同時，有科學(xué)數(shù)據(jù)表明：人類對于顏色的敏感性高于形狀?？吹绞挛锏牡?秒中，顏色信息占所有信息的80%，并且人類對于顏色信息的思考成本要低于形狀。所以在按鈕設(shè)計的過程中，要減少復(fù)雜形狀的出現(xiàn)，通過顏色的形式聚焦視線、吸引用戶。

例如：現(xiàn)在大部分APP的按鈕形狀采用了矩形、圓角矩形或全圓角矩形，這樣的形狀更加符合用戶的認(rèn)知模型。再如下圖中淘寶和造作的詳情頁，由于用戶群體和產(chǎn)品定位的差異性，整個頁面的基調(diào)是不同的，而基調(diào)差異的第一印象即是通過顏色來區(qū)分的。

另一個就是按鈕的點擊區(qū)域大小，根據(jù)人類的手指面積大小得出10mm x 10mm是最優(yōu)的點擊目標(biāo)尺寸。

（5）按鈕的環(huán)境

按鈕的環(huán)境具體是指每一個頁面的信息復(fù)雜情況。內(nèi)容較少的頁面，按鈕容易聚焦；然而現(xiàn)實情況是——每一個線上產(chǎn)品都有很多頁面，數(shù)據(jù)多種多樣，顏色更是五言六色。在一個顏色復(fù)雜、信息繁多，層級劃分不明確的頁面中，按鈕的設(shè)計就需要有針對性的設(shè)計。

例如下圖中自如頁面整體信息層級明確，頁面內(nèi)容相對去哪兒app的詳情頁面較少，所以通過色塊的對比就可以聚焦用戶視線。但在去哪兒的app頁面中，由于產(chǎn)品的差異和運營的不同，頁面內(nèi)容非常豐富，顏色較多，整個頁面的環(huán)境比較復(fù)雜；所以重要行動點的按鈕設(shè)計，通過顏色、重復(fù)、形狀來抓住用戶的關(guān)注點，引導(dǎo)用戶的行為。

（6）按鈕的位置

合理的位置決定一個按鈕的可視性，可用性。按鈕的位置需滿足：

• 內(nèi)容的聯(lián)系性
• 符合頁面內(nèi)容的瀏覽順序
• 對應(yīng)行動點的重要層級

通常情況下按鈕的位置與相關(guān)信息強聯(lián)系，按鈕位置的變化也對應(yīng)著背后用戶行為邏輯的變化。

例如微信讀書邀請好友頁面，頁面1是符合用戶的閱讀順序，并且團(tuán)隊信息和邀請按鈕強關(guān)聯(lián)；頁面2的按鈕形式則弱化了視覺引導(dǎo)，違背了頁面目標(biāo)；頁面3雖然強化了引導(dǎo)，但違背了格式塔的相近原則和用戶的閱讀順序。

（7）設(shè)計形式

設(shè)計形式是我們看到的最終表象效果，也是最終的完成效果。需要滿足以下特性：

• 創(chuàng)意性
• 品牌性
• 產(chǎn)品特色
• 層級關(guān)系

按鈕體系有多種按鈕組成，單個按鈕由多種元素構(gòu)成。設(shè)計師可以通過調(diào)整設(shè)計元素匹配用戶的認(rèn)知，去構(gòu)建不同層級的按鈕體系。具體使用哪種形式、哪些表現(xiàn)語言要基于上述決策點的具體分析。

我們都知道按鈕有很多種，比如彌散投影按鈕，圓角按鈕等等。這些按鈕主要都是由背景色、描變、底紋、文字、投影、輔助圖形、品牌元素等構(gòu)成，通過對按鈕層級的分析和歸納，采用不同的設(shè)計元素構(gòu)建多層級的按鈕體系語言，讓按鈕體系更加統(tǒng)一、協(xié)調(diào)、一致。

三、總結(jié)

設(shè)計師需要對產(chǎn)品有深度的理解和思考，跳出業(yè)務(wù)導(dǎo)向的思考流程，從系統(tǒng)體驗維度思考產(chǎn)品的整體性，在整體性的基礎(chǔ)上去構(gòu)思方案中的每一個設(shè)計細(xì)節(jié)。做到從整體開始，從局部入手，再回歸到整體的思考設(shè)計流程。單一維度的思考和表現(xiàn)，無法完整地凸顯設(shè)計的價值，更何談賦能業(yè)務(wù)。

作者：亮king，高級設(shè)計師，微信公眾號：體驗設(shè)計說

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

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