移動(dòng)應(yīng)用中的流設(shè)計(jì)

目光和手指的循跡

創(chuàng)新互聯(lián)公司-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價(jià)比日喀則網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式日喀則網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋日喀則地區(qū)。費(fèi)用合理售后完善，10年實(shí)體公司更值得信賴。

移動(dòng)情景

作為應(yīng)用的設(shè)計(jì)者，我們常常以應(yīng)用自身的邏輯為線索進(jìn)行設(shè)計(jì)，一頭沉浸在頁面與原型的制作中。 而大部分的應(yīng)用在使用過程中，用戶的目光和觸摸是與應(yīng)用共舞的主要參與者，如人-機(jī)-環(huán)中用戶的輸入輸出，以視覺輸入、觸摸輸出為主要的交互通道。為了提升用戶在感知層面的體驗(yàn)，我們可以順著用戶的目光出發(fā)，關(guān)注用戶在界面中注意力焦點(diǎn)轉(zhuǎn)移的過程，同時(shí)循著用戶手指的痕跡來發(fā)現(xiàn)用戶直接操作的軌跡，以此設(shè)計(jì)我們的應(yīng)用。

這里將提出一個(gè)流系統(tǒng)的框架，并講述如何在這個(gè)框架中提升用戶的感知體驗(yàn)。

目光和手指循環(huán)而成的流系統(tǒng)

在用戶與應(yīng)用通過目光和手指進(jìn)行交互的過程中，存在著如上圖所示的一個(gè)流系統(tǒng)——用戶的視覺通道接收著界面的絕大部分信息，視覺焦點(diǎn)（注視點(diǎn)）是用戶信息加工的載體，用戶持續(xù)關(guān)注內(nèi)容后會(huì)留下一連串的視覺焦點(diǎn)，在界面中這些視覺焦點(diǎn)的流向，我們稱為視線流。用戶通過視覺獲得了輸入信息，并通過應(yīng)用界面進(jìn)行反應(yīng)操作，用戶在界面中的操作的接觸點(diǎn)會(huì)形成觸點(diǎn)。在一個(gè)任務(wù)中，連續(xù)的觸點(diǎn)會(huì)形成一條操作的軌跡，我們稱為操作流。用戶通過觸點(diǎn)對應(yīng)用進(jìn)行輸入，應(yīng)用界面做出相應(yīng)的反饋，用戶通過視覺焦點(diǎn)接收信息，并決定下一步的觸點(diǎn)操作。這是流系統(tǒng)的循環(huán)過程，大部分交互都是由這些視覺焦點(diǎn)，觸點(diǎn)以及之間的流構(gòu)成。

流系統(tǒng)中的視覺焦點(diǎn)包含了應(yīng)用突出呈現(xiàn)給用戶信息，它抓住了用戶的視覺注意力，觸點(diǎn)則是承擔(dān)了用戶對應(yīng)用的輸入接口，是移動(dòng)應(yīng)用的直接操作的體現(xiàn)。

一個(gè)好的應(yīng)用設(shè)計(jì)應(yīng)該每次都能及時(shí)把最核心的內(nèi)容突顯出來，且視覺焦點(diǎn)的轉(zhuǎn)移很流暢，不需要用戶多次來回掃視；操作觸點(diǎn)也不需要用戶往復(fù)地轉(zhuǎn)動(dòng)、伸縮手指。視覺焦點(diǎn)和觸點(diǎn)間的流軌跡都很流暢，交互的阻力更少，用戶不用思考。那我們應(yīng)該怎么設(shè)計(jì)才能使兩個(gè)軌跡更流暢呢？

接下來將對視覺焦點(diǎn)、觸點(diǎn)，以及之間的流進(jìn)行闡述，力求在應(yīng)用的細(xì)節(jié)設(shè)計(jì)上提供一些不一樣的思路。

把握用戶的視覺焦點(diǎn)

視線流的形成來源于視覺注意力的轉(zhuǎn)移機(jī)制。除了主動(dòng)的注意外，視覺注意很容易被動(dòng)的轉(zhuǎn)移。如下表是造成視覺注意轉(zhuǎn)移的各種因素，對比越大，越容易轉(zhuǎn)移。通過這些不同維度的差異對比，可以讓用戶輕松轉(zhuǎn)移視覺焦點(diǎn)，這也是界面引導(dǎo)的設(shè)計(jì)基礎(chǔ)。

     視覺焦點(diǎn)需要運(yùn)用在信息的聚焦點(diǎn)。如何讓用戶更清楚地看到用戶想看的，或是產(chǎn)品希望用戶看到的內(nèi)容，交互設(shè)計(jì)師們需要考慮清楚這個(gè)焦點(diǎn)是什么，而非僅僅是邏輯結(jié)構(gòu)的鋪敘。如下圖左圖，傳統(tǒng)的設(shè)計(jì)風(fēng)格會(huì)通過標(biāo)題的底色和字體的加粗，讓用戶的視覺焦點(diǎn)優(yōu)先集中在標(biāo)題上，因?yàn)檫@樣似乎邏輯更清晰。但是在倡導(dǎo)內(nèi)容優(yōu)先的情況下，如果更愿意讓用戶關(guān)注內(nèi)容，而非標(biāo)題，可以通過下圖右圖中區(qū)別內(nèi)容和其他內(nèi)容在空間上的前后關(guān)系來突顯內(nèi)容。 如果是類目搜尋則更適合前者，因?yàn)橛脩粜枰劢褂跇?biāo)題才能快速定位到自身所需要的信息。

手指的觸點(diǎn)區(qū)域

     觸點(diǎn)是移動(dòng)應(yīng)用直接操控特性的體現(xiàn)，在移動(dòng)設(shè)備的觸摸屏上，沒有了物理按鍵的區(qū)塊感和觸覺反饋，引導(dǎo)操作和操作反饋大部分都由視覺承擔(dān)。對許多用戶的研究表明，下圖淺橙色區(qū)域是右手拇指的熱區(qū)，而視覺點(diǎn)擊區(qū)域不宜小于44px，由于存在視差的關(guān)系，實(shí)際操作區(qū)域會(huì)比視覺區(qū)域略大并靠下。

     上圖是一個(gè)數(shù)獨(dú)游戲的設(shè)計(jì)，刻意地將視覺焦點(diǎn)和觸點(diǎn)進(jìn)行分離，為觸摸設(shè)計(jì)出親和的圓形區(qū)域，并減少了視覺焦點(diǎn)被手指遮擋的問題，顯得貼心而周到。

     點(diǎn)擊的觸點(diǎn)其實(shí)延續(xù)了PC 的交互方式，但缺少了PC 端的hover 態(tài)。為了確保用戶得到點(diǎn)擊結(jié)果的信息，可以拆分為兩次點(diǎn)擊。比如iOS 市場的應(yīng)用下載，首先顯示價(jià)格，點(diǎn)擊價(jià)格后，按鈕變化為下載，通過增加一次點(diǎn)擊完成信息的確認(rèn)。為了防止誤點(diǎn)，更好的方式是改換為滑動(dòng)手勢的觸點(diǎn)，一般滑動(dòng)需要有一定的距離才被視為執(zhí)行操作。比如iPhone的解鎖方式，只有從左滑到右才能解開鎖屏的狀態(tài)，誤點(diǎn)等是無法完成這樣的操作的。同時(shí)用戶在滑動(dòng)的過程中，通過滑塊的控制感，對操作結(jié)果就有了足夠的心理預(yù)期，就能夠帶來流暢的體驗(yàn)。

本文節(jié)選自《移動(dòng)設(shè)計(jì)》一書

傅小貞胡甲超鄭元攏著

電子工業(yè)出版社出版

分享標(biāo)題：移動(dòng)應(yīng)用中的流設(shè)計(jì)
文章出自：http://aaarwkj.com/article36/igjgpg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供App開發(fā)、商城網(wǎng)站、網(wǎng)站設(shè)計(jì)、面包屑導(dǎo)航、搜索引擎優(yōu)化、建站公司

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)