作者:龍鼎網(wǎng)絡(luò)發(fā)布時(shí)間:2015-07-29 16:25:43瀏覽次數(shù):15386文章出處:晉城自適應(yīng)網(wǎng)站制作
任何移動(dòng)應(yīng)用,若沒有用戶起初和持續(xù)不斷的輸入,就什么也不會(huì)發(fā)生。因此,移動(dòng)產(chǎn)品設(shè)計(jì)師、開發(fā)者和產(chǎn)品經(jīng)理要了解最佳的輸入方式,這點(diǎn)至關(guān)重要。盡管移動(dòng)應(yīng)用——還有使用它們的用戶——通常都很獨(dú)特,但仍有很多通用模式(新舊都有)用來解決這一特殊問題。
用戶輸入設(shè)計(jì)的6項(xiàng)目標(biāo)
深入探討這些模式之前,理解用戶輸入設(shè)計(jì)的6項(xiàng)主要目標(biāo)非常重要——我把它們列在下面:
選擇一種適合的輸入和數(shù)據(jù)錄入方式
減少輸入的工作量
設(shè)計(jì)有吸引力的數(shù)據(jù)錄入界面
通過驗(yàn)證檢查來減少輸入錯(cuò)誤
設(shè)計(jì)必填項(xiàng)說明
開發(fā)有效的輸入控件
模式總覽
記住上面幾項(xiàng)目標(biāo),以下設(shè)計(jì)模式,在本文中都有詳細(xì)討論。
智能鍵盤
默認(rèn)值和自動(dòng)補(bǔ)全
直接進(jìn)入(或者說“快速登錄”)
操作欄
社交賬號(hào)登錄
大按鈕
滑動(dòng)操作
通知
隱藏式控件
擴(kuò)展式輸入框
撤銷
1. 智能鍵盤
Facebook Paper, Android通訊錄
問題
用戶想要快速鍵入信息。
解決方案
用戶點(diǎn)按進(jìn)入應(yīng)用某個(gè)輸入?yún)^(qū)塊,在他們鍵入時(shí)要提供與數(shù)據(jù)相關(guān)的鍵盤。這樣免去他們在字母與數(shù)字鍵盤間切換,不用尋找所需的按鈕,或者多一步操作來激活鍵盤。這不僅為了用戶方便,也可作為一種指示,注明用戶應(yīng)該輸入什么類型的數(shù)據(jù)。因此移動(dòng)平臺(tái)的輸入框可以高亮顯示,這增加了靈活性,決定了哪些按鈕應(yīng)該突出顯示。
例如,在通訊錄或撥號(hào)器里輸入手機(jī)號(hào)碼時(shí),用戶并不需要完整鍵盤。點(diǎn)按這些輸入框時(shí),會(huì)彈出數(shù)字鍵盤,而非完整鍵盤。去掉了令人分心的不必要的按鈕,流程更加順暢。類似的,點(diǎn)按瀏覽器地址欄,會(huì)彈出一個(gè)略有改動(dòng)的鍵盤,“/”和“.com”按鈕就顯示在空格鍵旁邊,而非隱藏于符號(hào)內(nèi)。深入了解系統(tǒng)提供的這些智能鍵盤類型,你的UI可以根據(jù)用戶當(dāng)前的操作而調(diào)整。
2. 默認(rèn)值和自動(dòng)補(bǔ)全
Skype, Flightboard
問題
用戶想要快速完成操作。
解決方案
向用戶提供預(yù)置的默認(rèn)值,或者基于之前輸入的數(shù)據(jù)生成的快速選項(xiàng)。由此預(yù)測常用選項(xiàng),讓用戶更容易進(jìn)行信息錄入。這可以和實(shí)用的自動(dòng)補(bǔ)全進(jìn)行搭配,就像Google Play商店的搜索那樣,加快速度,顯著提升用戶體驗(yàn)。這種模式尤其適用于用戶輸入的標(biāo)準(zhǔn)化,并預(yù)知問題的發(fā)生。以Skype為例,自動(dòng)在電話號(hào)碼前加上國家碼前綴。這在用戶的角度是有意義的,因?yàn)樗麄兺ǔ2⒉涣?xí)慣輸入這些信息,但它在這個(gè)環(huán)境中很重要,因?yàn)镾kype是個(gè)國際呼叫應(yīng)用。
另一種方式是保存用戶上次輸入的信息,當(dāng)用戶輸入或搜索時(shí),展現(xiàn)這些最近使用的選項(xiàng)。例如,F(xiàn)lightboard在搜索框下面列出了之前使用過的地理位置,讓用戶免于再次輸入。多數(shù)地圖或?qū)Ш綉?yīng)用也采用了這種模式,搜索方位時(shí)自動(dòng)輸入用戶當(dāng)前位置,減少用戶點(diǎn)按次數(shù)。因?yàn)檫@是最常發(fā)生的情況。
3. 直接進(jìn)入(或者說“快速登錄”)
Wunderlist
問題
用戶想在做決定前嘗試一下。
解決方案
很多應(yīng)用允許用戶直接進(jìn)入,其他什么也不用做——甚至包括注冊或登錄。
記住,用戶同時(shí)只能做一件事,他們沒有足夠時(shí)間嘗試每個(gè)新產(chǎn)品。隨著應(yīng)用越來越細(xì)分化,在培育用戶之前,找到高質(zhì)量用戶或領(lǐng)袖用戶愈發(fā)重要——他們可能會(huì)討厭你的產(chǎn)品,或者迅速意識(shí)到這不是他們要的。向用戶索要賬號(hào)注冊信息比較困難,低的注冊轉(zhuǎn)化率會(huì)與注冊用戶數(shù)相互抵消。從積極方面來看,讓用戶直接體驗(yàn)產(chǎn)品,他們更容易被吸引,這取決于首次體驗(yàn)時(shí)能探索多深。這比引導(dǎo)頁的UI模式更有效,我們會(huì)在下次講到那些。因?yàn)樗苯映尸F(xiàn)在用戶面前,而不是告訴用戶如何使用。
推遲注冊對于Carousel或Duolingo這樣的應(yīng)用就不起作用,它們依賴用戶數(shù)據(jù)來運(yùn)轉(zhuǎn)。但像Wunderlist或Houzz這樣應(yīng)用可以讓用戶直接進(jìn)來,在注冊前先使用這個(gè)應(yīng)用。通常,注冊只是增加了額外的好處,使它更具吸引力,比如Wunderlist的跨設(shè)備同步,或是在Houzz中創(chuàng)建靈感集。推遲注冊不一定總是好的,不過“注冊前嘗試”是個(gè)提升應(yīng)用吸引力的好辦法。
4. 操作欄
Facebook Paper, Behance
問題
用戶需要常用操作的快捷入口。
解決方案
在應(yīng)用的操作欄(用iOS術(shù)語叫“toolbar”)提供重要操作的快速入口。盡管導(dǎo)航欄主宰著網(wǎng)頁和早期的移動(dòng)應(yīng)用設(shè)計(jì),其他一些模式的使用,諸如抽屜菜單、滑動(dòng)側(cè)邊欄、鏈接集合、按鈕變換、垂直的基于內(nèi)容的導(dǎo)航等,造就了更簡潔的應(yīng)用界面,讓人關(guān)注主要和次要操作項(xiàng),忽略副導(dǎo)航。這些應(yīng)用的常用操作,就是搜索、分享和創(chuàng)建新內(nèi)容。固定菜單不僅讓用戶更加熟悉UI,也去除了雜亂,聚焦于用戶相關(guān)的重要操作。
5. 社交賬號(hào)登錄
Beats Music, Flipboard
問題
用戶想要更簡單的注冊和登錄方式
解決方案
整合社交媒體注冊可以讓用戶通過已有賬號(hào)登錄。這意味著他們要少操心一組用戶名/密碼,同時(shí)你也不必太擔(dān)心密碼安全。Facebook、Twitter和Google是最主要的OAuth登錄提供方,你可以依據(jù)平臺(tái)和目標(biāo)用戶,整合其中所有或部分到應(yīng)用中,用戶不必再設(shè)置一個(gè)未來可能不會(huì)用到的獨(dú)立賬號(hào)。使用這種登錄注冊模式也能為你提供用戶的一些基本數(shù)據(jù)(他們使用時(shí)自動(dòng)輸入的數(shù)據(jù)),不強(qiáng)迫他們在剛剛下載的陌生應(yīng)用中輸入詳細(xì)信息,始終保持注冊流程的簡捷。這個(gè)簡單的功能可以極大提升用戶體驗(yàn),毫無疑問這種模式是眾望所歸。
6. 大按鈕
Tinder, Shazam
問題
用戶想立刻知道他們該采取哪個(gè)操作。
解決方案
理想的觸摸屏點(diǎn)按尺寸可能是72像素,但某些應(yīng)用比如Tinder,給出了巨大的按鈕。你就清楚知道該怎么做。無論何時(shí)、正在做什么,你都能迅速操作——即使你沒有在看,也很難忽略這些大塊的按鈕。這在相對簡單的應(yīng)用中尤其有價(jià)值,其中用戶只有有限的操作,因此就更有理由在各種環(huán)境中使它更容易。以Shazam為例,旨在看電視或聽音樂時(shí)使用,它確實(shí)只有這一個(gè)功能。在這種令人分心的多任務(wù)狀態(tài)下,巨大的按鈕是非常棒的改善。
7. 滑動(dòng)操作
Carousel
問題
用戶想關(guān)注具體內(nèi)容。
解決方案
允許內(nèi)容滑出或移出屏幕。這給用戶提供了非常直觀的信息處理方式。例如Google Now的“卡片”,當(dāng)你不需要時(shí)可以滑動(dòng)刪除,清除雜亂。類似的,Tinder的個(gè)人資料也可以右滑或左滑來表示贊同或否定。這種模式與我們之前在導(dǎo)航模式中討論的滑動(dòng)視圖不同。此處,滑動(dòng)操作被當(dāng)做一種操作,而非純粹瀏覽。有些應(yīng)用結(jié)合了這兩種滑動(dòng)模式,例如Carousel,滑到一邊可以瀏覽大量照片,同時(shí)上滑或下滑操作可以分享或隱藏。Mailbox使左右滑動(dòng)操作在郵件客戶端中發(fā)揚(yáng)光大,通過相應(yīng)的左滑和右滑操作,你可以將郵件分別標(biāo)記為已讀或稍后處理。在Secret中,發(fā)現(xiàn)新操作與探索新菜單的方式相同。在一條秘密上左滑表示喜歡。
8. 通知
LinkedIn, Facebook
問題
用戶想知道新動(dòng)態(tài)或操作,他們要瞄一眼
解決方案
在視覺上通過高亮來標(biāo)記新內(nèi)容。這種模式有很多方式。例如,iOS引領(lǐng)的帶數(shù)字的小紅點(diǎn),如今很多其他應(yīng)用中也能看到,例如LinkedIn、Facebook或Quora。Twitter也這樣處理通知按鈕,不過在時(shí)間軸圖標(biāo)上方也有個(gè)小點(diǎn),用一種更微妙的方式來表示新動(dòng)態(tài)。另一種表現(xiàn)通知的方式,是在應(yīng)用中滑出一條banner來顯示新動(dòng)態(tài)。Facebook應(yīng)用也這么做了,當(dāng)信息流中有新項(xiàng)目時(shí)顯示一個(gè)小彈出提示。
9. 隱藏式控件
Secret
問題
用戶要在應(yīng)用中快速激活次要控件,還有那些只與特定區(qū)域或內(nèi)容相關(guān)的控件。
解決方案
清理雜亂,讓用戶只在需要時(shí)發(fā)現(xiàn)特定操作。這些隱形的控件可以通過各種手勢來觸發(fā)——滑動(dòng)、點(diǎn)按、雙擊、長按等等。(這些我們在手勢模式中討論過)。這讓你可以將這些東西置于屏幕外,節(jié)省寶貴的屏幕空間。以Secret為例,就使用手勢代替了可見的控件。右滑觸發(fā)操作菜單,這是我們之前提過的抽屜的極簡版。創(chuàng)建內(nèi)容時(shí),用戶可以水平滑動(dòng)或在背景上垂直滑動(dòng)來改變顏色與模式,如果用了圖片,還能改變亮度、飽和度與模糊度。沒有其他控件來控制這些——也不應(yīng)該有。這種UI設(shè)計(jì)模式如此直觀和干凈,你一定會(huì)看到更多此類交互。Pinterest也使用手勢來代替按鈕的應(yīng)用。長按圖片會(huì)顯示采集或評論按鈕,拖動(dòng)彈出控件到按鈕上執(zhí)行。
Uber是這種設(shè)計(jì)模式的又一個(gè)案例。選擇座駕類型后,通過點(diǎn)按滑動(dòng)按鈕,Uber會(huì)在預(yù)訂座駕和費(fèi)用估算間切換。這是簡單卻重要的UI設(shè)計(jì)模式,我每次試著呼叫座駕,又不想被Uber的溢價(jià)剝削時(shí),都會(huì)為此會(huì)心一笑。Snapchat和Facebook Messenger中,在任何朋友上左滑,都能及時(shí)觸發(fā)相應(yīng)功能。
10. 擴(kuò)展式輸入框
YouTube
問題
用戶想專注于內(nèi)容,不愿為了控件犧牲屏幕空間。
解決方案
將控件設(shè)計(jì)成點(diǎn)按展開式的。這能在用戶不需要時(shí)隱藏多數(shù)控件。例如YouTube和Facebook把搜索欄藏在一個(gè)圖標(biāo)里面,用戶點(diǎn)按時(shí)搜索欄才展開,節(jié)省了屏幕空間。
11. 撤銷
Gmail, Chrome
問題
用戶希望沒有阻礙地快速操作(比如對話框),但要有還原意外操作的選項(xiàng)。
解決方案
提供一個(gè)簡便的方法讓用戶撤銷操作,不要在操作前提醒他們確認(rèn)。有些由于意外或匆忙而產(chǎn)生的操作,會(huì)導(dǎo)致不便或數(shù)據(jù)損失,例如刪除郵件或編輯文字。用戶可能在不知道結(jié)果的情況下會(huì)完成一項(xiàng)操作,寬容的UI會(huì)讓他們嘗試,這更加友好有吸引力。撤銷功能對高級(jí)用戶也很有用,他們會(huì)贊賞這種操控感。UI不會(huì)在操作過程中反復(fù)阻攔他們,詢問是否確定。確認(rèn)對話框用來解釋當(dāng)前狀況時(shí)很有用,但用戶真正看見操作結(jié)果后才能理解其中含義。為避免如此,最好去掉它們,并提供一種彌補(bǔ)錯(cuò)誤的防護(hù)措施。
獲取用戶的輸入
追蹤有用戶輸入的地方,看他們是否注意到那些輸入框,是否經(jīng)常使用輸入控件,他們從應(yīng)用中的什么界面進(jìn)入,將要前往哪里(也就是使用流程)等等。持續(xù)改變排列、順序、尺寸,調(diào)整這些控件,讓用戶更多執(zhí)行你希望的操作。當(dāng)然,還要深入考慮,用戶在輸入時(shí)是如何在使用你的移動(dòng)應(yīng)用——確保設(shè)計(jì)應(yīng)用時(shí)沒有忽略明顯的要點(diǎn)。
晉城龍鼎 - 晉城網(wǎng)站建設(shè)為您解答!
專業(yè)的網(wǎng)站建設(shè)、響應(yīng)式、手機(jī)站微信公眾號(hào)開發(fā)
© 2010-2020 龍鼎網(wǎng)絡(luò) 版權(quán)所有 晉ICP備14008335號(hào)-1微信聯(lián)系
進(jìn)入手機(jī)版