您當前位置:2134分類目錄 » 站長資訊 » 運營 » 文章分享 » 文章詳細

跨屏幕的響應式設計|八方面來設計好用戶體驗

來源:網站提交點擊數: 累積有2341人瀏覽發布時間: 2017-07-07 21:38:04
內容簡介:跨設備、多屏幕、響應式的產品,無論是APP還是網頁,需要產品設計師、用戶體驗設計師能夠始終將終端用戶的體驗,牢記在心。現在的響應式的設計已經很成熟了,一整套設計方案,小到智能手表的屏幕,大到電視顯示屏,億瑪客網絡營銷學院還兼顧到更普遍存在的智能手機、平板和電腦屏幕。在很多人看來,跨屏幕的響應式設jthysh.com計,只是一套內容調整大小就可以“適配”了,但實際上,它所牽涉到的因素非常的復雜:設計

跨裝備、多屏幕、響應式的產物,不管是APP仍是網頁,需要產物設計師、用戶體驗設計師可以或許始終將終端用戶的體驗,服膺在心。

此刻的響應式的設計已很成熟了,一整套設計方案,小到智妙手表的屏幕,年夜到電視顯示屏,還統籌到更遍及存在的智妙手機、平板和電腦屏幕。在良多人看來,跨屏幕的響應式設計,只是一套內容調劑巨細便可以“適配”了,但現實上,它所牽扯到的身分很是的復雜:設計師需要經由過程設計讓內容在分歧的平臺上體驗最年夜化,確保讓用戶在任何一個屏幕上看到內容的時辰,會感覺這些內容就是為這個平臺而設計的,而不是純真的縮放而來。

這類無縫的體驗,才是跨屏幕設計的真正難點地點。想要制訂一套針對分歧裝備和屏幕的設計方案,你需要一整套的策略。

1、肯定焦點的用戶體驗

固然用戶體驗是無處不在的,可是對特定產物,最焦點的體驗是存在的。產物凡是是用來解決用戶所面對的特定問題的,它的這一特質讓產物變得成心義。要害的內容和要害的功能的組合,凡是組成了產物的焦點用戶體驗。假如你并沒有想大白這個問題,無妨問問本身:用戶需要完成哪些最多見/最主要的使命?找到問題的謎底以后,你的產物就該當從各個方面、各個渠道,完全而周全地支持這些功能,幫忙用戶完成這些使命。舉個例子,Uber 的焦點用戶體驗是隨時隨地地叫車,不管裝備的屏幕巨細若何,你進行的設計全數都應當環繞著這個需乞降功能來進行。

叫車是Uber的焦點功能,即便利用Apple Watch 都應當順遂地完成這個使命。

2、敲定你的產物所籠蓋的裝備類型

此刻的移動端裝備屏幕尺寸各不不異,零丁為某一個裝備設計內容無疑是不經濟的。按照你的產物籠蓋人群、受眾分類、利用場景,綜合斟酌你的內容會優先顯現在哪些裝備和平臺上,然后成心識地挑選出常見的裝備類型:

手機平板桌面端智能電視智妙手表……

分歧的裝備組合凡是是基于分歧的場景、需乞降辦事來組成的,用戶會針對分歧的屏幕進行分歧模式的交互,乃至處置的內容也會有差別。好比說,在手機上,用戶加倍偏向于利用輕量級的使命,而且進行必然量的溝通和交換。在平板上,用戶行動更多集中在內容消費上,而且今朝平板的利用量被認為在慢慢下降。桌面端仍然是用戶完成較為專業、復雜使命的首選平臺,足以應付復雜多樣的內容。領會各類裝備類型和利用場景是用來構建用戶體驗的要害。

3、針對分歧內容來匹配用戶體驗

弄清晰產物自己的焦點用戶體驗以后,拔取你的用戶群體所利用的硬件裝備,這個時辰你應當領會每種分歧的裝備所利用的場景,裝備利用的情況和場景是設計的主要根據。

并不是所有的內容都合適分歧裝備的利用場景,好比智妙手表就不合適展現年夜量的文本內容。你的產物所籠蓋的裝備組傍邊,每種裝備的利用場景分歧,應當匹配的用戶體驗也紛歧樣。移動端用戶和桌面端用戶的需求就是分歧的,場景差別也很年夜。以Evernote 為例,它可以在多種分歧類型的裝備之間同步和切換,其桌面端版本就針對用戶的內容需求進行了優化:

Evernote 的桌面端利用法式針對瀏覽性的內容和多媒體進行了優化,而移動真個Evernote 則強化了拍攝記實、圖片和音頻記實的功能:

Evernote 的開辟團隊無疑是細心斟酌過移動真個利用場景,所以充實操縱了移動端裝備功能,讓用戶采取最快速有用的方式來保留設法(文本筆記,攝影,設置提示)。

其次,分歧的裝備屏幕具有分歧的輸入體例。以觸摸屏為例,設計師假如疏忽輸入體例上的怪異性,經常會在設計的時辰呈現下面的問題:

(1)太小的點擊觸發區域

按鈕和可點擊的元素(好比CTA按鈕)必需有足夠年夜的尺寸,一般說來,直徑跨越7mm的按鈕就具有可用性,可是最好節制在10mm以上。

(2)將元素放得太接近

斟酌到分歧元素的巨細尺寸和用戶的現實利用狀態,應當留夠空間和間隙,才能確保界面的呼吸感和可用性。為了避免點擊和輸入毛病,這個間距最少為23pt。

“移動端上沒有光標懸停(Hover)這一狀況。”

4、優先為最小的屏幕做設計

一向以來,設計師都習慣從最年夜的屏幕著手設計,最后斟酌最小的屏幕上的顯示結果,這意味著絕年夜大都的設計都是從桌面端最先設計的,凡是桌面真個內容和功能更周全。當桌面真個整體設計完成以后,再推動到其他裝備真個設計。但是,在進行桌面端設計的時辰,我們經常會遭受“廚房水槽”窘境:因為產物凡是會牽扯到多個好處相干方,很多過剩的功能會被插手進來。而實踐經驗注解,移動端優先的設計常常可以或許更好的專注于焦點功能,更合適作為產物設計的出發點。

當你優先設計最小屏幕所需要的界面的時辰,這類場合排場會強迫你從最要害最主要的處所最先設計。這也是之前設計圈和產物開辟范疇一向所強調的“移動端優先”的策略的由來。在此以后,再進行平板、桌面和電視真個設計,就是一個天然的做加法的進程了。

在絕年夜大都的案例傍邊,最小屏幕凡是是手機屏幕。

5、不要健忘年夜屏幕

年夜屏幕裝備和小屏幕裝備是一樣主要:

不要僅僅只是將內容放年夜來簡單順應年夜屏幕,而是要有針對性地、充實操縱年夜屏幕的額外空間。

確保圖片不會由于放年夜而掉去應有的質量。年夜屏幕上的圖片應當更清楚。

斟酌年夜屏幕上展現內容的獨有環境。每種裝備不但屏幕尺寸有差距,并且利用場景也會造成各類區分。好比電視屏幕固然比桌面端顯示器更年夜,可是由于客堂的利用場景,電視屏幕給用戶帶來的是“10英寸屏幕的視覺體驗”,所以它的現實顯示結果,是比桌面端尺寸更小的。

6、供給一致的用戶體驗

固然你的產物內容在分歧平臺上有差別,可是體驗應當是類似的。一致的體驗是產物跨屏幕同一性的表現:

一致的體驗可以或許讓用戶對產物的其他版本有所預期,而且成立用戶后續利用的決定信念一致的用戶體驗讓用戶與其他版本的同系產物更輕松地互動

比擬于在分歧的屏幕分歧的裝備上“定制”分歧的體驗,不如盡量將分歧屏幕上的交互和體驗納入到一套系統傍邊來。Google 就將所有平臺上的搜刮都設計成幾近完全一樣的體驗。

當產物的設計和功能在各個處所都連結一致的時辰,用戶可以或許更快地完成使命。

7、締造無縫的用戶體驗

跨裝備的用戶體驗是接下來很多產物都力求做到的工作。在手機上保留的Evernote 筆記,可以或許在電腦上打開閱讀,這只是很根本的工作,比擬之下,人們在手機、電腦、電視和智妙手表如許的裝備上同步數據,切換場景,同系列APP之間相互操控,如許的需求加倍復雜,場景、交互和體驗所需要的設計要求更高。從一個裝備到別的一個裝備,用戶是期望同系列產物可以或許供給完全無縫的體驗,產物設計師需要對情況、用戶流程有著極深入的洞悉和精準的判定,也對產物功能和易用性設計提出了更高的要求。

按照現實利用環境,你可能會但愿裝備和裝備之間同步盡量少地耗損流量。以Apple Music 為例,你在Mac 上設置播放列表,便可以馬上在iPhone上播放;當你再切換為Mac的時辰,你可以沿著iPhone 播放的進度繼續聽,這就是無縫的播放體驗。

8、測試你的設計

產物的測試情況其實不必然都得是在實際世界找阿誰,可是在盡量讓真實的用戶來做可用性測試,而且在產物發布之前解決所有的用戶體驗上的問題。

結語

跨裝備、多屏幕、響應式的產物,不管是APP仍是網頁,需要產物設計師、用戶體驗設計師可以或許始終將終端用戶的體驗,服膺在心。不管用戶所面臨的屏幕是如何的,設計師要可以或許讓用戶時刻感觸感染到產物最焦點的功能與體驗,而且無縫地切換。

原文地址:medium

原文作者:Nick Babich

譯者:@陳子木

譯文地址:http://www.uisdc.com/designing-for-devices-8-steps

文章作者系 @陳子木?授權發布于人人都是產物司理,未經作者許可,制止轉載。

上一篇:無錢無資源,產品怎么建立差異化
下一篇:產品交付物反思總結:好文檔(圖表),會說話

最具影響力網站推薦榜

  • 刷鉆網 [71人關注, 網站指數:4969, 刷鉆網分享]
  • 美團網團購 [3359人關注, 網站指數:6695, 美團網團購分享]
  • 新浪微博 [55人關注, 網站指數:6475, 新浪微博分享]
  • 唯品會 [4人關注, 網站指數:7254, 唯品會分享]
  • 天貓商城 [9人關注, 網站指數:5783, 天貓商城分享]
  • 小米官網 [352550人關注, 網站指數:41357, 小米官網分享]
六肖必中特六肖32期