網(wǎng)頁制作中如何設(shè)計好用的觸控手勢提高用戶體驗
用戶體驗一直都是企業(yè)網(wǎng)站建設(shè)必須考慮的首要問題,而搭建網(wǎng)店商城尤甚,流暢,人性化的體驗?zāi)軌蛭蛻?,留住客戶,除給企業(yè)商家?guī)砹髁?,更可以帶來銷量,優(yōu)化體驗,能讓網(wǎng)店商城價值最大化。
1.記住你的網(wǎng)站用戶,潛在顧客以及顧客是誰,進(jìn)行網(wǎng)站制作和網(wǎng)站設(shè)計時,除了自己看著順眼喜歡之外,對方喜歡才是最關(guān)鍵的,通網(wǎng)店商城的設(shè)計和制作,首先讓他們了解自己,了解自己的品牌,了解自己的產(chǎn)品和服務(wù),同時,也要讓他們知道你是了解他們的。
2.電商網(wǎng)站更應(yīng)該注重PC+手機(jī)的結(jié)合,移動上網(wǎng)設(shè)備越來越流行,給用戶制作一個和PC體驗一樣優(yōu)秀的手機(jī)網(wǎng)店商城,對于留住客戶功不可沒。
3.網(wǎng)站URL地址改變了也要更新,盡量不要跳轉(zhuǎn)到404頁面,如果404錯誤太過,這不能不說是對用戶體驗的傷害,301重新定向也是一個不錯的方法。
4.網(wǎng)站內(nèi)容盡量少使用專業(yè)術(shù)語,行話。
5.建站后,必須進(jìn)行SEO,即搜索引擎優(yōu)化,網(wǎng)店商城除需要具備一定的營銷功能外,在不妨礙用戶體驗的前提下,關(guān)鍵詞布局也是相當(dāng)重要的。
6.網(wǎng)店商城融合社交元素,比較常見的是社會化登錄,社會化評論和社會化分享。
7.Flash是網(wǎng)店商城漂亮的殺手,第一,F(xiàn)lash會讓網(wǎng)站的加載速度變慢,第二,在移動設(shè)備上打不開Flash,第三,F(xiàn)lash文件里面的內(nèi)容,搜索引擎看不懂。
8.網(wǎng)店商城沒有抓住潛在客戶的注冊表單,你知道大多數(shù)網(wǎng)站95%的流量都是被浪費(fèi)的嗎,所以,需要多留意。
9.網(wǎng)店商城除了營銷測試之外,也需要可用性和用戶體驗測試。
10.網(wǎng)店商城的不同瀏覽器兼容測試。
11.網(wǎng)店商城的安全性,確切說是網(wǎng)絡(luò)安全,做必要的安全防護(hù)措施很重要,首先是讓網(wǎng)站安全,其次對用戶也安全。
12.跟蹤和測微信小程序試,這個主要是從營銷角度來說,看用戶喜歡什么,不喜歡什么,然后投其所好。
隨著觸摸屏逐漸成為移動設(shè)備的標(biāo)配,多點(diǎn)觸控手勢的廣泛應(yīng)用,讓我們與手機(jī),平板電腦甚至是筆記本電腦之間建立起了一種更寬廣的聯(lián)系方式,我們通過模擬真實世界的手勢與屏幕上的各種元素進(jìn)行互動,使許多曾經(jīng)不曾想或者不敢想的人機(jī)交互方式變成了現(xiàn)實,同時手勢操作的應(yīng)用降低了人與物理設(shè)備之間的溝通的門檻。
嬰兒幾乎無困難的通過屏幕玩游戲。
我家那位小P孩,不到2歲就已經(jīng)能夠很自然輕松解鎖ipad,翻頁找到他喜歡玩的熊貓餐廳,接著熟練地在各種食材選折他喜歡的,制作一份美味的虛擬美食,而我們也樂于買各種大屏手機(jī)和平板電腦送給我們的長輩,移動設(shè)備及手勢交互方式給我們帶來革命性體驗和便捷,移動的觸控時代早已到來,您是否也與時俱進(jìn)了呢,值得我們每一位設(shè)計師反思。
一,什么是觸控手勢。
觸控手勢是自然用戶界面(NUI)的一種表現(xiàn)形式。
自然用戶界面(Naturaluserinterface,NUI)是指一類無形的用戶界面,NUI則只需要人們以最自然的交流方式(如語言和文字)與機(jī)器互動,直觀的說,使用NUI的設(shè)備不需要鍵盤或鼠標(biāo),特別是觸控技術(shù)將使人機(jī)交互變得更加自然直觀,更為人性化。
您的手機(jī),平板電腦還有筆記本擁有識別多點(diǎn)觸控輸入的功能來幫助你實現(xiàn)對其廣泛的運(yùn)用,這種輸入方式幫助我們實現(xiàn)與屏幕內(nèi)容的交互,而模仿真實中的操作手勢可以降低我們對操作屏幕對象的認(rèn)知障礙。
在PC時代,我們需要他人或者一個說明教程去教會我們怎么使用鼠標(biāo),移動屏幕的光標(biāo),而這些在現(xiàn)實世界里幾乎找不到可相映射的東西,然后學(xué)習(xí)怎么雙擊打開一個文件,按住一個文件不放,把它拖動到文件夾里面。
小程序開發(fā)觸控手勢帶來的是自然用戶界面,支持觸控的移動設(shè)備能夠自然直觀的被所有年齡層,不同技能水平的人所使用,使用Multi-Touch多點(diǎn)觸控式接口技術(shù),取代目前所使用的鍵盤(按鍵),鼠標(biāo),將進(jìn)一步體現(xiàn)出人性化操控接口的未來趨勢。
電容式觸摸屏結(jié)構(gòu)原理圖。
試想一下在那些老套的用戶界面里,需要你把鼠標(biāo)懸?;蛘哙]件點(diǎn)擊目標(biāo)上才能獲得更多詳細(xì)的信息,而這些在手機(jī)設(shè)備上將不再起作用,如何擺脫這種慣用的設(shè)計呢,答案就是,創(chuàng)建移動先行體驗。
二,觸控手勢的的使用情景(移動的情景)。
移動情景指的是用戶使用時的環(huán)境和狀態(tài)——也就是任何可以影響用戶與設(shè)備進(jìn)行交互的內(nèi)容,由于這些情境持續(xù)而快速地變化,對移動設(shè)備而言就顯得尤為重要,我們要考慮用戶分心,多任務(wù),手勢操作,低電量條件和糟糕的連接條件等復(fù)雜環(huán)境下的通用設(shè)計。
移動中的互動語境(出處:NadavSavio|GiantAntDesign)。
圖2.移動中的互動語境(出處:NadavSavio|GiantAntDesign)。
各種移動環(huán)境下會影響到用戶使用觸屏設(shè)備完成任務(wù)的效率和準(zhǔn)確度的因素有:。
–移動情景下,注意力容易被分散(如交談,觀察周圍環(huán)境等)。
–移動情景下,操作手機(jī)的時間碎片化(各種事情打斷)。
–移動情景下,任務(wù)容易被中斷(意外情況影響)。
–移動情景下,肢體可能被其他物體被占用(如遛狗,拎包等)。
–移動情景下,噪音分散注意力(車水馬龍,人聲鼎沸的路邊)。
三,觸控手勢的基本操作。
鋼鐵俠系列電影中的全息觸控交互。
所謂自然手勢就是在真實物理世界中存在或演繹而來的手勢,例如上下滑動滾動列表,滑動以平移等,這類手勢是自然的,不需要或很少需要用戶去學(xué)習(xí)的。
–長按以查看更多操作(現(xiàn)在有了3DTouch,同長按微信小程序開發(fā)操作相比,最大區(qū)分是需要是有一定的按壓力度)。
–點(diǎn)擊執(zhí)行主操作。
–滑動以平移。
–輕掃以選定,并進(jìn)行命令操作。
–收縮和拉伸以縮放。
–轉(zhuǎn)動以旋轉(zhuǎn)。
–邊緣輕掃以使用系統(tǒng)命令。
四,好用的手勢是怎樣的。
首先我們來看看多點(diǎn)觸控的優(yōu)缺點(diǎn)。
網(wǎng)頁制作中,如何設(shè)計好用的觸控手勢。
那么什么是好用的手勢呢。
好用的手勢一來簡單,二來支持單手操作,它們該如由Tweetie創(chuàng)始人LorenBrichter所開發(fā)并獲得專利的“下拉刷新”一樣受歡迎,或者像iBook的翻頁動作一樣自然簡單,以下是好用的手勢該有的一些特征:。
–簡單易用,不僅動作簡單,還要能在擁擠的交通工具上單手操作。
–容易記憶,其一手勢要好記,其二要讓人愿意記住。
–符合認(rèn)知習(xí)慣,也就是說,該手勢一方面要遵循人的自然習(xí)慣和意識,另一方面要契合手勢即將產(chǎn)生的操作。
–實用,手勢要讓用戶感到舒服,少有用戶愿意點(diǎn)兩次才看到想看的東西,讓會讓他們感到麻煩。
–愉悅的體驗,Winkler認(rèn)為好的手勢會有神奇的感覺,UX總是個未知數(shù),而且難于言傳,但這恰是我們認(rèn)識。
享受科技的一種表現(xiàn)。
–及時反饋,反饋就是說用戶知道當(dāng)前正在進(jìn)行的操作,用戶進(jìn)行完手勢操作后有明確的狀態(tài)信息告知。
五,手勢設(shè)計應(yīng)用過程中需要注意的點(diǎn):(手勢設(shè)計準(zhǔn)則)。
符合認(rèn)知習(xí)慣。
在非概念性項目中使用基礎(chǔ)手勢(組合)之外的“創(chuàng)新”手勢,未建立統(tǒng)一規(guī)范的情況下,使用混亂會導(dǎo)致用戶困惑,學(xué)習(xí)成本稿,增加記憶負(fù)擔(dān),難以引導(dǎo)用戶培養(yǎng)使用習(xí)慣,技術(shù)上的限制可能會使“創(chuàng)新”變成不便。
最終使用者是人,手勢操作是基于人的行為來定義的,手勢操作是人們現(xiàn)實世界行為的映射,因此,手勢設(shè)計要符合大多數(shù)人的認(rèn)知習(xí)慣,減少用戶的認(rèn)知成本,比百度小程序如有方向性的手勢操作,要盡量符合拇指的活動方向,且要與認(rèn)知相一致。
iBooks的翻頁體驗與翻實體書iBooks的翻頁體驗與翻實體書。
記憶力限制。
因為這些手勢操作不能明白的顯示在界面上,沒有代表動作的可視元素,需要用戶記住哪種手勢對應(yīng)的是哪些操作,一些不常用的手勢操作往往很難發(fā)現(xiàn),如果手勢直觀常用自然沒問題,而如果沒有“自然”的手勢去代表一個動作,用戶就會感到困惑,于是便需要記憶,就像在使用命令行界面時要記住那些命令一樣。
一個App中手勢數(shù)量需保持在5個數(shù)量以下,多依賴與界面的引導(dǎo)和暗示,讓此類用戶根據(jù)情境記憶這些手勢,從而增加手勢的易記憶性。
如果用戶對其缺乏認(rèn)知,這些手勢操作就不易被發(fā)現(xiàn),也便不會為人所用,甚至造成操作障礙,(壞的例子,找不到導(dǎo)航欄)。
MozillaFirefox4版本右劃呼出Tab。
不同應(yīng)用場景采用不同的手勢設(shè)計。
人們會在千奇百怪的環(huán)境中使用我們的產(chǎn)品,我們的產(chǎn)品在和周圍環(huán)境爭奪用戶的注意力,憑借一個3.5~5寸的屏幕與車水馬龍,人聲鼎沸的大千世界作斗爭,因此在實際的手勢設(shè)計中還需考慮該應(yīng)用的使用場景。
效率型和實用型應(yīng)用,這類應(yīng)用一般使用場景是在行進(jìn)間,考慮手機(jī)一般隨著用戶的行進(jìn)而搖晃,操作效率以及誤操作等因素,一遍采用單手操作手機(jī)的手勢交互。
游戲等屏幕沉浸型應(yīng)用,一般為休閑且穩(wěn)定的操作環(huán)境,可以適當(dāng)?shù)脑O(shè)置一些復(fù)雜手勢配合游戲中的高級操作功能,增加游戲的操作樂趣。
Clear的手勢操作令人印象深刻。
適度的應(yīng)用手勢。
2014年火得不能再火,一旦開始玩根本停不下來的《Flappybird》,游戲以簡單但有效的方式使用了基本的手勢,點(diǎn)擊或不點(diǎn)擊是唯一的操作手勢,玩家可以很快地知道應(yīng)該使用什么手百度小程序開發(fā)勢以及怎么利用手勢去進(jìn)行游戲。
FlappyBird游戲,玩家只需要用一根手指來操控。
提供即時反饋。
在用戶觸摸屏幕的時候,立即提供視覺提示,可提高用戶的信心,交互操作涉及到的元素可表現(xiàn)為改變顏色,改變大小或發(fā)生移動/震動。
3Dtouch的震動反饋。
使操作可逆。
觸控互動操作應(yīng)該是可逆的,提供視覺反饋來表明當(dāng)用戶抬起手指時會發(fā)生什么,同時允許用戶反悔,取消操作,這將使你的應(yīng)用能夠安全地使用觸控操作進(jìn)行瀏覽。
Wechat取消發(fā)送語音。
不要讓你的手勢觸發(fā)區(qū)域遠(yuǎn)離拇指熱區(qū)(拇指法則)。
JashClark在《觸動人心-設(shè)計優(yōu)秀的iPhone應(yīng)用》一書中提到,拇指的活動范圍對操作手機(jī)的效率以及正確度都有一定的影響。
雖然拇指能夠劃到整個屏幕,但拇指在所及范圍和靈活性上是有限的,只有三分之一的屏幕是真正容易觸及的——也就是拇指正對的區(qū)域,為了獲得舒適的人機(jī)體驗,應(yīng)將主要點(diǎn)擊目標(biāo)放置在方便拇指點(diǎn)擊的熱區(qū)內(nèi)。
LukeWroblewski在《移動為先》(MobileFirst)。
保持手勢的全局性。
不要讓用戶在你的應(yīng)用中適應(yīng)了你創(chuàng)造的手勢后,卻又在你的應(yīng)用中碰壁。
如果用戶已經(jīng)習(xí)慣你的手勢,覺得你的手勢達(dá)到了方便快捷的目的,并耗費(fèi)學(xué)習(xí)成本掌握并適應(yīng)了你的手勢,那么便意味著你成功了一半,盡量用簡單的手勢完成常用功能,需要復(fù)雜手勢操作完成的功能,要有一個方便且更容易發(fā)現(xiàn)的方式相配合,盡量使用統(tǒng)一的手勢,減少不同手勢的切換頻率。
全局手勢在iOS原生應(yīng)用中的使用場景。
寫在最后。
好用的觸控手勢是人與設(shè)備,應(yīng)用之間交流的方式,當(dāng)初創(chuàng)造多點(diǎn)觸控技術(shù)的人,難能可貴的是細(xì)心洞察到了人們細(xì)膩的本真行為特征,轉(zhuǎn)而用觸屏這一行為自然的映射了出來。
武漢肥貓科技專注高端網(wǎng)站建設(shè),擁有豐富的網(wǎng)站建設(shè)制作,微信小程序開發(fā),網(wǎng)站改版設(shè)計經(jīng)驗,并提供SEO優(yōu)化推廣,SEM競價托管等網(wǎng)絡(luò)營銷服務(wù),服務(wù)熱線:18627148925http://www.sdjxgxsy.com/。
本文標(biāo)簽: 小程序開發(fā)