為移動而設(shè)計 第二部分:交互設(shè)計
lulu導(dǎo)語: ?因為移動設(shè)備獨有的一些特點,針對移動設(shè)備打造正確的交互十分重要。本文為優(yōu)秀的交互設(shè)計譯文,主要從人體工程學(xué)、手勢、切換、導(dǎo)航、內(nèi)容、表單的幾個方面對移動端的交互設(shè)計進行了研究。 歡迎來到《為移動而設(shè)計 第2章:交互設(shè)計》,如果你是從中途加入我們的,這里有些背景資料:《為移動而設(shè)計 第1章:信息架構(gòu)》,在第1章中,展示了設(shè)計師在面臨為移動,主要是移動環(huán)境而設(shè)計的過程中面臨的主要挑戰(zhàn):從瀏覽環(huán)境到行為和心情。因為這些差異影響著用戶,我認為對我們而言,從調(diào)研到最終開發(fā)完一個產(chǎn)品,在設(shè)計過程中考慮這些十分重要。 第1部分包含了在移動環(huán)境中對信息架構(gòu)的探究。這會對余下的設(shè)計流程打下了良好基礎(chǔ)。但是,在進入這一章前,有一點很重要,那就是明確移動和平板交互同桌面網(wǎng)站的區(qū)別。 如今大部分移動設(shè)備都采用觸摸屏,這對我們而言機遇和約束并存。我們使用手機不僅是查看內(nèi)容,也和里面的程序進行交互。這就使得設(shè)計師要考慮人體工程學(xué)、手勢、切換以及有移動專屬的交互模式。 為移動人體工程學(xué)設(shè)計要求我們關(guān)注于設(shè)備屏幕和觸摸屏的實用問題。例如,用戶握住設(shè)備和觸摸屏幕的方式,會影響到用戶點擊屏幕某一部分的難易度。 點擊區(qū)域,或者“用戶觸摸激活某些功能的屏幕區(qū)域”要求給用戶精確點擊的足夠空間。平均指尖尺寸為1-2厘米寬,大概相當(dāng)于標(biāo)準屏幕44px到57px,高分辨率(“retina”)屏幕88px到114px??紤]到觸摸屏的特性,諾基亞、蘋果和微軟都建議了稍微有些不同的尺寸。 然而考慮到點擊區(qū)域時,并沒有硬性規(guī)定。我們無需尋找各種標(biāo)準答案,僅需考慮用戶需要通過點擊屏幕獲得什么,某個任務(wù)有多重要,以及他們需要多短的時間完成這個任務(wù),然后根據(jù)具體情況進行設(shè)計。 觸摸屏的特有功能使得手勢成為移動交互的一個重要組成部分。所有主要的觸摸操作系統(tǒng)都支持手勢操作,包括Google的Android、蘋果的iOS和微軟的Windows 8。 此外,“標(biāo)準和模式”已經(jīng)出現(xiàn)在基于觸摸屏設(shè)備上的手勢開發(fā)中了。設(shè)計師應(yīng)該能經(jīng)常擴展手勢的邊界范圍來適配他們的應(yīng)用。 切換是一種使應(yīng)用在不同狀態(tài)間平滑過渡的交互方式,它能夠給用戶講故事,或重新定義一種基于手勢的隱喻。更進一步地說,切換能幫助用戶進行回想,并能防止其迷失。 這些僅僅是冰山一角,還有一整套可選的切換方案。最好的選擇就是那些能幫助我們增加交互一致性的切換方式。 就像在第1部分提到的,比起桌面電腦,移動設(shè)備給予設(shè)計師更小的空間添加菜單和導(dǎo)航。結(jié)合環(huán)境因素——例如可憐的瀏覽環(huán)境和限制條件——對于我們而言,讓用戶很好的領(lǐng)會到我們的內(nèi)容架構(gòu)是件很困難的事兒。 但是,以下常用交互模式對此發(fā)出了挑戰(zhàn)。其中最有價值的方案被用于提升導(dǎo)航、內(nèi)容選擇、登錄/退出和填寫表單的體驗。 主導(dǎo)航可以可視化地展示我們網(wǎng)站(或應(yīng)用)的信息架構(gòu)。這里有一些可選的方案: 點擊鏈接激活內(nèi)容來進行跳轉(zhuǎn),可以使用戶方便快速地用一只手選擇內(nèi)容。如果做得好的話,該交互也能提升用戶參與度。 輸入用戶名、郵箱和密碼對某些應(yīng)用而言十分關(guān)鍵。對于設(shè)計師而言,我們需要確保其流程盡可能順利。 在移動設(shè)備上填寫表單是件很困難的事兒,尤其是對于那些專為桌面網(wǎng)站設(shè)計的,缺乏移動版的表單。通過嘗試“常用移動設(shè)計方案”來推動這一流程,并在移動設(shè)備上考慮使用這些方案,讓填寫表單變得更便捷。 標(biāo)準和指南提供了創(chuàng)新的土壤。當(dāng)我在我的諾基亞5110上玩貪吃蛇時,我從沒想過我會有一天有機會為移動端設(shè)計和塑造工具。今天的解決方案造就了明天的標(biāo)準和指南。 針對移動設(shè)備打造正確的交互十分重要。但要想創(chuàng)造真正出色的體驗,網(wǎng)站或應(yīng)用的真實外表需要靈感、魅力和努力。在第3部分,我將講述布局和視覺設(shè)計如何為信息架構(gòu)和交互提供支持,最終創(chuàng)造一個完整的沉浸式體驗。 譯者大神@s2dongman_產(chǎn)品盒子 ? 來源:互聯(lián)網(wǎng)er的早讀課交互設(shè)計
人體工程學(xué)
手勢
下面的表格做了簡要介紹:
切換
基本切換包括:
常用模式
主導(dǎo)航
選擇內(nèi)容
登錄
使用表單
下一步
受教了~
分析的不錯
我也覺得,, 這個是一系列的,還有下一部分一會轉(zhuǎn)載