宝贝过来趴好张开腿让我看看_欧美日韩在线视频一区_国产婷婷成人久久AV免费高清_亚洲AV午夜成人片精品网站

News & Events

新聞動態

所在位置：

首頁新聞動態建站經驗如何站在用戶體驗角(jiao)度，設計(ji)跨屏(ping)幕的響(xiang)應式

如何站在用戶體驗角度，設計跨屏幕的響應式

時間：2017-09-22 00:00:00瀏覽次數：2190
1、確(que)定核心的(de)用戶體驗(yan)

雖然(ran)用(yong)(yong)(yong)戶(hu)體驗是無(wu)處不(bu)在(zai)的(de)(de)(de)，但(dan)是對于特(te)定(ding)產(chan)(chan)品(pin)，最(zui)核(he)心(xin)的(de)(de)(de)體驗是存在(zai)的(de)(de)(de)。產(chan)(chan)品(pin)通(tong)常是用(yong)(yong)(yong)來解決用(yong)(yong)(yong)戶(hu)所(suo)面臨的(de)(de)(de)特(te)定(ding)問(wen)題的(de)(de)(de)，它的(de)(de)(de)這(zhe)一特(te)質讓產(chan)(chan)品(pin)變得有意義。關鍵(jian)的(de)(de)(de)內容和關鍵(jian)的(de)(de)(de)功(gong)能(neng)的(de)(de)(de)組合，通(tong)常構(gou)成了(le)產(chan)(chan)品(pin)的(de)(de)(de)核(he)心(xin)用(yong)(yong)(yong)戶(hu)體驗。如果(guo)你并沒(mei)有想明白(bai)這(zhe)個(ge)問(wen)題，不(bu)妨(fang)問(wen)問(wen)自己：用(yong)(yong)(yong)戶(hu)需(xu)要完成哪些最(zui)常見/最(zui)重要的(de)(de)(de)任務?找到問(wen)題的(de)(de)(de)答案(an)之后，你的(de)(de)(de)產(chan)(chan)品(pin)就應當從各個(ge)方面、各個(ge)渠(qu)道(dao)，完整而全面地(di)(di)支(zhi)撐這(zhe)些功(gong)能(neng)，幫(bang)助用(yong)(yong)(yong)戶(hu)完成這(zhe)些任務。舉個(ge)例(li)子，Uber 的(de)(de)(de)核(he)心(xin)用(yong)(yong)(yong)戶(hu)體驗是隨時隨地(di)(di)地(di)(di)叫車，無(wu)論設備的(de)(de)(de)屏幕(mu)大(da)小如何，你進行的(de)(de)(de)設計全部都應該圍繞著這(zhe)個(ge)需(xu)求和功(gong)能(neng)來進行。


叫車是Uber的核心功(gong)能，即(ji)使(shi)使(shi)用Apple Watch 都應該(gai)順利地完成這個任務(wu)。

2、敲定你的產品所覆蓋的設(she)備類型

現(xian)在的(de)(de)移動端設(she)備屏幕尺寸(cun)各不相(xiang)同，單獨為某一(yi)個設(she)備設(she)計內容(rong)無疑是不經濟的(de)(de)。根據(ju)你的(de)(de)產品覆蓋人群(qun)、受(shou)眾分類(lei)(lei)、使用場(chang)景(jing)，綜合(he)考慮你的(de)(de)內容(rong)會(hui)優先呈現(xian)在哪(na)些設(she)備和平臺(tai)上(shang)，然后有意識(shi)地(di)篩(shai)選出常(chang)見的(de)(de)設(she)備類(lei)(lei)型：

手機
平板
桌(zhuo)面端(duan)
智(zhi)能電(dian)視
智(zhi)能手表
……

不(bu)同的(de)設備組(zu)合通常(chang)是(shi)基于不(bu)同的(de)場景(jing)、需求和(he)服務(wu)來構(gou)成的(de)，用戶會針對不(bu)同的(de)屏幕(mu)進行不(bu)同模式的(de)交(jiao)互，甚(shen)至處(chu)理的(de)內容也會有差異(yi)。比(bi)如說，在手機(ji)上，用戶更加傾向于使(shi)(shi)用輕量(liang)(liang)級的(de)任(ren)務(wu)，并且進行一定(ding)量(liang)(liang)的(de)溝通和(he)交(jiao)流。在平(ping)板(ban)上，用戶行為(wei)更多集中在內容消費(fei)上，并且目(mu)前平(ping)板(ban)的(de)使(shi)(shi)用量(liang)(liang)被認(ren)為(wei)在逐步降低。桌面端依然(ran)是(shi)用戶完成較為(wei)專業、復(fu)雜任(ren)務(wu)的(de)首選平(ping)臺(tai)，足以應付復(fu)雜多樣的(de)內容。了解各(ge)種設備類(lei)型(xing)和(he)使(shi)(shi)用場景(jing)是(shi)用來構(gou)建用戶體(ti)驗的(de)關(guan)鍵。

3、針對不(bu)同內容來匹配用戶體驗

搞清楚(chu)產品本身的核心用(yong)(yong)(yong)戶體驗(yan)之后，選(xuan)取你的用(yong)(yong)(yong)戶群(qun)體所(suo)(suo)使(shi)用(yong)(yong)(yong)的硬件設備(bei)，這個時候你應該(gai)了解(jie)每種(zhong)不同(tong)的設備(bei)所(suo)(suo)使(shi)用(yong)(yong)(yong)的場景(jing)，設備(bei)使(shi)用(yong)(yong)(yong)的環境(jing)和場景(jing)是設計的重要依據。

并(bing)非所(suo)有(you)的(de)(de)(de)內容都符(fu)合(he)不(bu)(bu)(bu)同設備(bei)(bei)的(de)(de)(de)使(shi)用(yong)(yong)場(chang)景，比如智能手表就不(bu)(bu)(bu)適(shi)合(he)展示(shi)大量(liang)的(de)(de)(de)文本(ben)內容。你的(de)(de)(de)產品所(suo)覆蓋的(de)(de)(de)設備(bei)(bei)組當中，每種(zhong)設備(bei)(bei)的(de)(de)(de)使(shi)用(yong)(yong)場(chang)景不(bu)(bu)(bu)同，應該匹配的(de)(de)(de)用(yong)(yong)戶(hu)體驗(yan)也不(bu)(bu)(bu)一樣。移動端(duan)用(yong)(yong)戶(hu)和桌(zhuo)面端(duan)用(yong)(yong)戶(hu)的(de)(de)(de)需求就是不(bu)(bu)(bu)同的(de)(de)(de)，場(chang)景差異也很(hen)大。以Evernote 為例，它可(ke)以在多種(zhong)不(bu)(bu)(bu)同類型(xing)的(de)(de)(de)設備(bei)(bei)之間同步和切(qie)換，其桌(zhuo)面端(duan)版本(ben)就針對(dui)用(yong)(yong)戶(hu)的(de)(de)(de)內容需求進行了(le)優化：


Evernote 的(de)桌(zhuo)面端應用(yong)程序(xu)針(zhen)對(dui)閱讀性的(de)內(nei)容和(he)多媒體進行(xing)了優化，而移動端的(de)Evernote 則強化了拍攝記錄、圖片和(he)音(yin)頻記錄的(de)功能(neng)：


Evernote 的開發團隊(dui)無疑是仔(zi)細考慮過移(yi)動端的使(shi)用場(chang)景(jing)，所以充分(fen)利(li)用了移(yi)動端設備功(gong)能，讓用戶(hu)采用最快速有效的方法(fa)(fa)來保(bao)存想法(fa)(fa)(文(wen)本筆記，拍照，設置提醒)。

其次，不同的設(she)(she)備(bei)屏幕(mu)具備(bei)不同的輸(shu)入(ru)(ru)方(fang)式。以(yi)觸摸屏為例，設(she)(she)計師如果忽略輸(shu)入(ru)(ru)方(fang)式上的獨特性，常(chang)常(chang)會在(zai)設(she)(she)計的時候(hou)出現(xian)下面的問題：

·過(guo)小的(de)(de)(de)點擊(ji)觸(chu)發區域。按鈕和可點擊(ji)的(de)(de)(de)元素(比如CTA按鈕)必須(xu)有足夠大的(de)(de)(de)尺(chi)寸，一般(ban)說來，直徑(jing)超過(guo)7mm的(de)(de)(de)按鈕就具備可用性，但(dan)是最好控(kong)制在(zai)10mm以上。


·將元素(su)放得(de)太(tai)靠近。考慮到不同元素(su)的大小尺寸和用(yong)(yong)戶的實際使用(yong)(yong)狀況，應該留夠空間和間隙(xi)，才能確保界面(mian)的呼吸感和可用(yong)(yong)性。為了防止(zhi)點擊和輸入錯(cuo)誤，這個間距至少為23pt。


“移動端上沒有光標懸停(Hover)這一(yi)狀(zhuang)態。”
4、優先為最小(xiao)的屏幕做設計

一直(zhi)以來(lai)，設(she)計(ji)師都習慣從最大(da)的(de)(de)屏幕(mu)著手設(she)計(ji)，最后(hou)考慮最小的(de)(de)屏幕(mu)上(shang)的(de)(de)顯示(shi)效果，這意味著絕大(da)多數的(de)(de)設(she)計(ji)都是從桌(zhuo)面端(duan)開始(shi)設(she)計(ji)的(de)(de)，通常(chang)桌(zhuo)面端(duan)的(de)(de)內容(rong)和(he)功(gong)(gong)能(neng)(neng)更全面。當桌(zhuo)面端(duan)的(de)(de)整(zheng)體設(she)計(ji)完成之后(hou)，再推進(jin)到(dao)其他(ta)設(she)備端(duan)的(de)(de)設(she)計(ji)。然而(er)，在進(jin)行桌(zhuo)面端(duan)設(she)計(ji)的(de)(de)時(shi)候，我(wo)們(men)常(chang)常(chang)會遭遇“廚房水槽”困境(jing)：由于產(chan)品通常(chang)會牽涉到(dao)多個利益相關方(fang)，許多多余的(de)(de)功(gong)(gong)能(neng)(neng)會被(bei)加入進(jin)來(lai)。而(er)實踐經驗(yan)表明，移(yi)動端(duan)優先的(de)(de)設(she)計(ji)往往能(neng)(neng)夠更好的(de)(de)專注(zhu)于核(he)心功(gong)(gong)能(neng)(neng)，更適合作為產(chan)品設(she)計(ji)的(de)(de)起點(dian)。

當你優先設計(ji)(ji)最(zui)小(xiao)屏幕所需要的(de)(de)(de)界面(mian)的(de)(de)(de)時候，這(zhe)種(zhong)局面(mian)會強(qiang)制你從(cong)最(zui)關(guan)鍵最(zui)重(zhong)要的(de)(de)(de)地方開始設計(ji)(ji)。這(zhe)也(ye)是(shi)之前設計(ji)(ji)圈和產品開發領域一直(zhi)所強(qiang)調(diao)的(de)(de)(de)“移動端優先”的(de)(de)(de)策略的(de)(de)(de)由來。在此(ci)之后(hou)，再進行平板、桌面(mian)和電視端的(de)(de)(de)設計(ji)(ji)，就是(shi)一個(ge)自(zi)然(ran)的(de)(de)(de)做加法的(de)(de)(de)過程了。

在絕大(da)多數的(de)案例當中，最小屏幕通常(chang)是手機屏幕。


5、不(bu)要忘記大屏(ping)幕

大屏(ping)幕(mu)設備(bei)和小屏(ping)幕(mu)設備(bei)是同樣重(zhong)要：


·不(bu)要(yao)僅僅只(zhi)是將內容放大來簡單適應大屏(ping)幕(mu)，而是要(yao)有針對性地、充(chong)分利用大屏(ping)幕(mu)的額外空間。


·確保圖片不會因為(wei)放(fang)大(da)而失(shi)去(qu)應(ying)有(you)的質量。大(da)屏幕上(shang)的圖片應(ying)該更清晰。


·考慮大(da)屏幕(mu)上展示(shi)內容(rong)的獨(du)有情況。每種(zhong)設備不(bu)僅屏幕(mu)尺(chi)寸(cun)有差距，而且使用(yong)場景也會造成各種(zhong)區別。比如電視屏幕(mu)雖然比桌面端顯示(shi)器(qi)更(geng)大(da)，但(dan)是(shi)因(yin)為客廳的使用(yong)場景，電視屏幕(mu)給(gei)用(yong)戶(hu)帶來的是(shi)“ 10 英寸(cun)屏幕(mu)的視覺體驗”，所以它的實際顯示(shi)效果，是(shi)比桌面端尺(chi)寸(cun)更(geng)小的。

6、提供一致的用戶體驗

雖然你的(de)(de)產品內容在不同平臺上有(you)差異(yi)，但是(shi)體(ti)驗應該是(shi)相似(si)的(de)(de)。一致的(de)(de)體(ti)驗是(shi)產品跨屏幕(mu)統一性的(de)(de)體(ti)現：

·一致的體驗能夠讓用(yong)戶對產品的其他版(ban)本有所預期，并(bing)且建立用(yong)戶后續(xu)使用(yong)的信心(xin)

·一致的(de)用戶體驗讓用戶與(yu)其他(ta)版(ban)本的(de)同(tong)系產品更(geng)輕松地(di)互動


相比于在(zai)不同的(de)屏幕不同的(de)設備上(shang)“定制”不同的(de)體(ti)驗，不如盡可(ke)能將不同屏幕上(shang)的(de)交互和體(ti)驗納入到一套體(ti)系當中來(lai)。Google 就將所有平臺上(shang)的(de)搜(sou)索都設計成幾乎完全一樣的(de)體(ti)驗。

當產品的(de)設(she)計(ji)和功(gong)能在(zai)各個地方都(dou)保(bao)持一(yi)致的(de)時候，用(yong)戶(hu)能夠更(geng)快(kuai)地完成任務。

7、創造無縫的用戶體驗

跨設(she)備(bei)的(de)(de)用(yong)戶(hu)體(ti)(ti)驗(yan)是接(jie)下來許多(duo)產(chan)(chan)(chan)品都力圖做到的(de)(de)事情(qing)。在手機上(shang)(shang)保存的(de)(de)Evernote 筆記，能(neng)夠(gou)在電腦(nao)上(shang)(shang)打開(kai)瀏覽，這(zhe)(zhe)只是很基礎的(de)(de)工作，相比之下，人們在手機、電腦(nao)、電視和智能(neng)手表這(zhe)(zhe)樣(yang)的(de)(de)設(she)備(bei)上(shang)(shang)同步數據，切換(huan)場(chang)景(jing)，同系(xi)列(lie)APP之間互(hu)相操控，這(zhe)(zhe)樣(yang)的(de)(de)需求(qiu)更加(jia)復雜，場(chang)景(jing)、交互(hu)和體(ti)(ti)驗(yan)所需要的(de)(de)設(she)計要求(qiu)更高。從一(yi)個(ge)設(she)備(bei)到另外一(yi)個(ge)設(she)備(bei)，用(yong)戶(hu)是期望同系(xi)列(lie)產(chan)(chan)(chan)品能(neng)夠(gou)提(ti)供完全無縫的(de)(de)體(ti)(ti)驗(yan)，產(chan)(chan)(chan)品設(she)計師需要對于(yu)環境、用(yong)戶(hu)流程有著極深刻的(de)(de)洞悉和精準(zhun)的(de)(de)判斷(duan)，也對產(chan)(chan)(chan)品功能(neng)和易用(yong)性設(she)計提(ti)出了更高的(de)(de)要求(qiu)。


根據(ju)實際使用(yong)情(qing)況，你(ni)可(ke)(ke)(ke)能會希望(wang)設(she)備和設(she)備之(zhi)間同步盡可(ke)(ke)(ke)能少地消耗流量。以(yi)(yi)Apple Music 為例(li)，你(ni)在Mac 上(shang)設(she)置播(bo)放(fang)列表，就可(ke)(ke)(ke)以(yi)(yi)立刻在iPhone上(shang)播(bo)放(fang);當你(ni)再切換為Mac的(de)時候，你(ni)可(ke)(ke)(ke)以(yi)(yi)沿著iPhone 播(bo)放(fang)的(de)進度繼(ji)續聽(ting)，這就是無縫的(de)播(bo)放(fang)體驗。


8、測試你的設計

產品的(de)測試環境并(bing)不一(yi)定都得是(shi)在(zai)(zai)(zai)現實世界找那個，但是(shi)在(zai)(zai)(zai)盡可能(neng)讓真實的(de)用戶來做可用性測試，并(bing)且在(zai)(zai)(zai)產品發布之(zhi)前解(jie)決所有的(de)用戶體驗(yan)上的(de)問題。

結語

跨(kua)設(she)備、多(duo)屏幕、響應式的(de)(de)產(chan)(chan)品，無論(lun)是APP還是網(wang)頁，需要產(chan)(chan)品設(she)計師、用(yong)戶體(ti)(ti)(ti)驗(yan)設(she)計師能夠始終將(jiang)終端用(yong)戶的(de)(de)體(ti)(ti)(ti)驗(yan)，牢記(ji)在心。無論(lun)用(yong)戶所面對的(de)(de)屏幕是怎樣(yang)的(de)(de)，設(she)計師要能夠讓用(yong)戶時刻感受到(dao)產(chan)(chan)品最核(he)心的(de)(de)功能與體(ti)(ti)(ti)驗(yan)，并且無縫地切換。
400-0592-888

15周(zhou)年慶(qing)鉅惠活(huo)動，免費獲取(qu)報價方案請致電(dian)400-0592-888或提交留言，我們(men)馬上為(wei)您服務！

廈門
廈門市思明區軟件園二期望海路19號之二3層
泉州
泉州晉江市青陽泉安中路與湖光路交叉處嘉誠商廈10層
        版權所有?廈門會心信息科技有限公司    網站地圖
導航