中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

編輯導(dǎo)語(yǔ)：屏幕上的按鈕設(shè)計(jì)對(duì)于用戶的體驗(yàn)感是很重要的，合理的位置能給用戶更好的體驗(yàn)，也能提升效率，不同的按鈕數(shù)量和大小對(duì)于位置的擺放也有不同；本文作者就詳細(xì)分析了手機(jī)端的主按鈕應(yīng)該放在哪些位置，我們一起來看一下。

你知道嗎？按鈕位置的設(shè)計(jì)會(huì)影響用戶完成任務(wù)的速度；更快地完成任務(wù)會(huì)帶來更滿意的用戶體驗(yàn)。

如果你也想帶給用戶更滿意的用戶體驗(yàn)，那你應(yīng)當(dāng)把按鈕放在用戶所希望看到的地方。

下面是對(duì)一些你可能用到的按鈕位置的全面分析，了解哪種按鈕的位置最適合你的應(yīng)用，這樣用戶就不會(huì)浪費(fèi)時(shí)間。

一、古騰堡法則?Gtenberg Principle

在用戶采取行動(dòng)之前，他們會(huì)掃視屏幕，屏幕內(nèi)容會(huì)告知他們下一步該采取什么操作；一旦他們完成掃視，進(jìn)一步的操作就會(huì)自動(dòng)浮現(xiàn)。

那當(dāng)他們完成掃視后，他們的視線落點(diǎn)會(huì)在哪里呢？

原來用戶從左上角開始掃視，到右下角結(jié)束，他們的視覺軌跡呈Z字形；著名的報(bào)紙?jiān)O(shè)計(jì)師埃德蒙 · 阿諾德稱這種自然的掃描模式為古騰堡法則，又稱對(duì)角線平衡法則。

該法則說明了視線是如何沿著方向軸從左向右移動(dòng)，直至到達(dá)右下角；它形成了一個(gè)突出的掃描路徑，我們稱之為閱讀重心；即沿著對(duì)角線的設(shè)計(jì)元素得到了較多的關(guān)注，而位于對(duì)角線之的元素則較少被關(guān)注到。

按鈕最佳位置的選擇應(yīng)遵循古騰堡法則，即把需要用戶采取下一步操作的按鈕放在用戶掃描的視覺落點(diǎn)；在少數(shù)情況下，用戶會(huì)在掃描屏幕前就準(zhǔn)備采取行動(dòng)，但這只是在他們已經(jīng)熟悉屏幕內(nèi)容的情況下。

二、頂部按鈕vs底部按鈕

第一個(gè)要決定的位置是將操作按鈕置于屏幕的頂部還是底部，依照古登堡法則，哪個(gè)按鈕的位置是正確的呢？

大多數(shù)用戶首先掃描內(nèi)容，因?yàn)閮?nèi)容占據(jù)了屏幕的主導(dǎo)地位，且與他們的任務(wù)有關(guān)；他們的眼睛從屏幕的上半部分向下移動(dòng)，當(dāng)內(nèi)容瀏覽完畢，他們就會(huì)尋求下一步的操作。

因?yàn)橛脩魰?huì)尋找下一步操作的按鈕，所以在找到下一步操作按鈕之前，他們的視線會(huì)保持停留在底部一段時(shí)間；直到他們不曾找到按鈕，此時(shí)，他們的視線就會(huì)移動(dòng)到屏幕上方，然后在右上角才慢慢發(fā)現(xiàn)按鈕。

把操作按鈕放在頂部會(huì)讓用戶感到困惑，因?yàn)樗麄兿Ｍ趻呙柰陜?nèi)容后看到它；頂部的按鈕位置不符合他們的自然掃描流程，這導(dǎo)致他們偏離進(jìn)一步的操作路徑。

不僅如此， 由于要和屏幕標(biāo)題共享空間，所以頂部的按鈕比底部的按鈕還要?。恍∏傻某叽缂由喜⒉宦斆鞯奈恢迷O(shè)計(jì)，使得頂部按鈕更難找到，也因此更無法快速點(diǎn)擊。

當(dāng)把操作按鈕放置在底部時(shí)，用戶可以更快地找到它；他們會(huì)在掃描內(nèi)容后立即看到按鈕，無需有多余的視線移動(dòng)；底部的按鈕不僅符合古騰堡法則，而且按鈕更大，更容易點(diǎn)擊。

三、項(xiàng)目選擇

只有當(dāng)用戶在屏幕上僅選擇一個(gè)項(xiàng)目時(shí)，頂部的按鈕才有意義。

例如，當(dāng)用戶只選擇列表中一行內(nèi)容時(shí)，應(yīng)用欄會(huì)發(fā)生變化，并為所選項(xiàng)目項(xiàng)提供相關(guān)操作；此時(shí)頁(yè)面標(biāo)題消失，顯示所選項(xiàng)目的數(shù)量。

頂部按鈕也適用于選擇圖像內(nèi)容。在這種情況下使用頂部按鈕可以讓用戶在注意到應(yīng)用欄中的狀態(tài)變化后更快地采取行動(dòng)，按鈕與狀態(tài)欄標(biāo)題相近則意味著用戶的視線不必偏離太遠(yuǎn)。

四、水平按鈕

有幾種方法可以在底部排列你的按鈕。一種方法是水平對(duì)齊。當(dāng)你想要強(qiáng)調(diào)兩個(gè)不同操作內(nèi)容之間的關(guān)系時(shí)，水平對(duì)齊是最理想的排列方式；因?yàn)橛脩魰?huì)將它們視為一組，并給予兩者同等考量。

在這個(gè)例子中，App 程序使用水平對(duì)齊按鈕來確保用戶知道他們?cè)谫?gòu)買鞋子之前可以編輯鞋子的設(shè)計(jì)，并列排布的方式加強(qiáng)了兩個(gè)動(dòng)作之間的聯(lián)系。

因?yàn)橄鄬?duì)于顧客滿意度來講，購(gòu)買鞋子和編輯設(shè)計(jì)同等重要，所以他們就像兄妹般配對(duì)；當(dāng)用戶急于購(gòu)買，這樣設(shè)計(jì)才不會(huì)忽視“編輯設(shè)計(jì)”按鈕。

五、主按鈕在左邊vs在右

對(duì)于水平按鈕，你可以選擇將主要操作按鈕放置在左側(cè)或右側(cè)。但是到底哪個(gè)位置能讓用戶更快地采取行動(dòng)呢？

當(dāng)主要操作在左邊時(shí)，它不符合閱讀重心；用戶的眼睛想向右下方移動(dòng)，但是按鈕的視覺重心使他們一直盯著左下方。

在固定之后，他們移動(dòng)到右下角，然后回到左邊，點(diǎn)擊主按鈕；因此，用戶的眼睛會(huì)前后掃視，增加了用戶的任務(wù)時(shí)間。

當(dāng)主要?jiǎng)幼髟谟疫厱r(shí)，由于按鈕處于閱讀重心的終點(diǎn)，因此任務(wù)完成得更快。用戶不必回視掃描，或者不止一次地關(guān)注主要操作。

六、垂直按鈕

另一種排布的方法是垂直堆疊——如果你希望用戶分別關(guān)注每個(gè)動(dòng)作按鈕，那這種排布方案是理想的；你可以讓他們?cè)诿總€(gè)按鈕上花更長(zhǎng)的時(shí)間，以便更仔細(xì)地考慮。

垂直按鈕比水平按鈕更加突出，因?yàn)樗鼈兛缭狡聊唬懈嗟目臻g。更大的尺寸不僅使按鈕更容易點(diǎn)擊，而且使主要操作按鈕具有最大的可見性。

在本例中，主要操作是“添加到購(gòu)物車”按鈕，它比“添加禮物消息”按鈕更重要；把它安排成一個(gè)垂直的按鈕可以強(qiáng)調(diào)它，這樣就不會(huì)與次要操作按鈕互相沖突。

七、主要按鈕在上vs在下

當(dāng)兩個(gè)按鈕上下排列時(shí)，主按鈕應(yīng)該放在上面還是下面？

古騰堡法則指出閱讀重心是向下移動(dòng)的，用戶只需向下掃描就可以很快觸達(dá)底部按鈕；當(dāng)它在頂部時(shí)，用戶必須先向下掃描，然后再向上回視去點(diǎn)擊它。

八、混合型按鈕

最后一個(gè)按鈕是水平和垂直按鈕的混合，如果你至少有三個(gè)按鈕，就可以用這種方法。

因?yàn)橛懈嗟男畔⑿枰幚?，所以用戶需要花費(fèi)更長(zhǎng)的時(shí)間來決定三個(gè)按鈕的操作；但是這種排列方式以其視覺層次結(jié)構(gòu)縮短了他們的決策時(shí)間，用戶不必每次都依賴標(biāo)簽，而是可以通過查看按鈕的大小和方向提示來回憶每一個(gè)操作。

在這個(gè)例子中，主要操作是綠色的大按鈕；它很容易被發(fā)現(xiàn)，因?yàn)闆]有其他同樣大小或顏色的按鈕；然后，用戶可以將一個(gè)操作與最左邊的按鈕相關(guān)聯(lián)，將另一個(gè)操作與最右邊的按鈕相關(guān)聯(lián)。

隨用戶點(diǎn)擊按鈕次數(shù)的增多，他們就會(huì)通過按鈕的大小和方向來判斷與之相關(guān)聯(lián)的操作，很快他們就會(huì)養(yǎng)成這種幫助他們不假思索采取行動(dòng)的習(xí)慣。

閱讀重心決定了主要操作放在最下面，次要操作放在上面，優(yōu)先級(jí)較高的按鈕最需要關(guān)注，所以應(yīng)該放在用戶的掃描流程末端。

次要操作不應(yīng)該有明顯的顏色，否則會(huì)與主要操作相沖突；相反，它們都應(yīng)該為有輪廓或淺色陰影的中性色按鈕樣式。

毋需將它們與垂直按鈕對(duì)齊。與垂直邊緣對(duì)齊則意味著強(qiáng)調(diào)它們的左右方向。

九、吸底按鈕

讓用戶隨時(shí)可以操作按鈕的一種方法是使用吸底按鈕，這些按鈕固定在屏幕底部，用戶可以隨時(shí)隨地采取操作。

在本地應(yīng)用程序中可以使用這些吸底按鈕，但是在基于瀏覽器的網(wǎng)頁(yè)App中應(yīng)避免使用它們；網(wǎng)絡(luò)應(yīng)用程序上的吸底按鈕會(huì)導(dǎo)致點(diǎn)擊問題，因?yàn)楫?dāng)用戶點(diǎn)擊該按鈕時(shí)，瀏覽器欄會(huì)彈出。

對(duì)于這個(gè)問題有一些解決辦法，但很復(fù)雜。最自然的解決方案是在按鈕和瀏覽器欄之間增加一些內(nèi)邊距。

十、界面排版應(yīng)該順勢(shì)而為

操作按鈕是用戶通向成功的最后一步，他們的放置位置影響用戶操作任務(wù)完成的快慢，通過將其放在與古騰堡法則相一致的位置，使用戶能毫不費(fèi)力地觸達(dá)目標(biāo)；按照這樣的思路設(shè)計(jì)，你的操作按鈕就會(huì)有一個(gè)理所應(yīng)當(dāng)?shù)淖罴盐恢谩?/p>

原文作者：Anthony

原文地址：https://uxdesign.cc/10-ui-ux-design-lessons-from-designing-my-own-product-2f8518d5f0a1

譯者：Winterbure，編輯與配圖：Z Yuhan，公眾號(hào)：體驗(yàn)進(jìn)階。

本文由 @Z Yuhan 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載

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