DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> WEB網站前端 >> 關於網頁技巧 >> 用戶體驗設計:使用產品的身體舒適設計
用戶體驗設計:使用產品的身體舒適設計
編輯:關於網頁技巧     

我們不僅要關心用戶的情緒,做出給予和引導正向情感的設計,我們也要關注用戶的身體,幫用戶用舒服的姿勢使用產品。

做一個簡單的測試,拿起鼠標,第一次,讓光標從屏幕的頂邊中點,盡量保持垂直線移動到底部;第二次,讓光標從屏幕左邊中點,盡量保持水平線移動到右邊。感覺一下,第一次和第二次,哪個操作讓你覺得累?

從上到下移動光標,你的手腕,肘部的活動的幅度更大,牽動的肌肉和關節更多;從左到右相對輕松,肢體只需要輕微的移動。

我們需要動用肢體——主要是手——給電腦輸入指令,運動久則疲勞。輸入方式上鼠標比鍵盤舒適,但現在也變成了繁重勞動,出現“鼠標手”的病症。持續的點擊、移動導致手肘的疲勞,用眼過度導致視力下降,腰部和肩部酸痛,這些身體的不適反映都會影響你正在進行的操作,影響你的產品體驗過程。

豆瓣的阿爾法城,雖然有很多創新的設計,但若我不強迫自己,我無法在那兒停留超過五分鐘。比起一般的小組或者論壇,我要做出數倍的交互指令,點擊鼠標移動光標,才能獲取內容,不一會,我就疲憊不堪。

也許是我喜歡游戲的緣故,我倒蠻喜歡IBM的這個逛法www.ibmpower.com。

下面分三個部分,說說那些會影響我們使用產品的舒適的關鍵,當你在設計界面的時候,嘗試去考慮一下“用戶的身體舒適嗎”。

一 手指和臂肘

1 減少關節活動

前文的測試中提到,我們需要盡量的讓用戶用最少的操作完成指令。橫向操作比豎向的輕松,移動比點擊便捷,一次點擊比兩次點擊省力。

我們大部分人是右利手,屏幕右側是光標的待機位置,所以我們看到大多數快捷操作放在那邊。

2 減少精確要求高的操作

精確定位需要花費更多的力氣,移動鼠標定位到一個10px的方形內,一定比定位到100px的方形中費力。所以,更大的按鈕,用戶點起來更容易、更舒適。

Chrome浏覽器的頁簽設計

1 關閉的設計

在Chrome上關閉多個頁簽時,你會發現它采用一個奇妙的方式保證你不那麼費力——下一個標簽的關閉按鈕會被送到你的光標上,不需要移動鼠標,只需點擊。。

如果你是在當中關閉頁簽,之後的頁簽會移上到當前位置。

如果你是關閉最後一個頁簽,那麼剩余的頁簽會自動改變寬度,原本倒數第二個標簽的關閉按鈕會送到你的光標上來;

直到光標離開關閉按鈕,頁簽才會自動調整拉長。

2 頁簽的切換

在Chrome誕生之前,沒有一個浏覽器像頁簽完全放置在屏幕頂部,它是舒適設計原則的典范。當我們從屏幕中心移動鼠標去切換頁簽時,只要把光標甩到屏幕頂部,屏幕頂部的對光標自動限制,讓你無需考慮控制光標的上下移動,只需要控制左右移動。

其他浏覽器,當你移動光標到頁簽時,至少都需要給光標一個剎車的操作。

二 視覺

1 舒適的顏色

2 清晰的層級

顏色上的舒適應該由設計師來定奪把關,例如同一頁面的不同顏色盡量少,頁面的明度和對比度不會傷眼睛,主題色應注意暗示了用戶怎樣的情緒。

而布局上,我們可以用一種方法來檢測。

第一,產品的界面,可以讓用戶可以毫不猶豫的分成3-5個大板塊。

第二,假想這些板塊離你有遠近,你可以明確的描述它們每一個離你你多遠。

在我浏覽這篇文章的時候,正文離我若有50厘米,那麼掰掰的小站名稱和導航欄大概在100厘米遠,右側的廣告80厘米左右,豆瓣logo和用戶信息那行在120厘米遠,所以,我浏覽起來很舒適。

三 姿勢

iPad改變了我使用電腦的姿勢,在這之前,我不論是工作、娛樂還是休息,都是以正襟危坐的姿勢戰斗在電腦前,即便是看文章、看視頻也很難放松。iPad致力於從這種緊張的“前傾型”中解放用戶,讓他們變成“後仰型”的沙發土豆。

iPad的一個很重要的價值,就是重新設計了用戶使用的場景和姿勢,這為它的用戶體驗大大加分。iPad達到這個設計目標,特別做了兩件事:

★ 減少重量

★ 提高續航時間

這時候,產品設計的作用從細節戰術來到了整體戰略的層面,再加上其他種種優勢iPad弄死了上網本。

聯想的這款無線掌中寶,可以讓你躺在沙發上,利用HTPC看視頻的時候,就會變得非常有用。它還有LED背光功能,不打擾你關燈營造的影院效果。

豆瓣閱讀器的設計,就很好的考慮了姿勢問題,不論是坐在電腦前,還是捧著平板,都能夠進入舒適的閱讀狀態,手輕輕搭在鍵盤翻翻頁就好了。相比之下京東的電子書PC版就完全是垃圾,完全沒有考慮過閱讀者的姿勢。

在將來,我們使用互聯網的場景和姿勢將變得更復雜,端坐電腦前的比例越來越小。我們會站著,坐著,短時間的停留,用一只拇指操作……甚至開始利用語音和體感進行輸入,讓用戶舒適的與機器高效溝通,永遠是用戶體驗設計的重要一環。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved