通過了解分辨率確定原型大小徒蟆,接下來了解不同設(shè)備的區(qū)別,借助交互設(shè)計師的經(jīng)驗去設(shè)計APP型型。結(jié)合自身工作思考段审,并參考《多設(shè)備時代的UI設(shè)計法則》、《貼心設(shè)計》闹蒜,對比下較常見的設(shè)備:手機(jī)-pad-pc-自助大屏終端寺枉。寫作起點是以設(shè)計師的身份去提問抑淫,然后解答。如有偏頗或補(bǔ)充歡迎探討姥闪。
一始苇、Question
1.PC端低保真不需要畫狀態(tài)欄注重網(wǎng)站功能即可,但是手機(jī)原型通常都標(biāo)明手機(jī)電量筐喳、接入網(wǎng)絡(luò)等系統(tǒng)狀態(tài)是為什么催式?不同終端低保真都有哪些必備的界面元素?
2.手機(jī)避归、Pad荣月、PC、自助終端的特點是什么梳毙?對界面設(shè)計有什么影響哺窄?
二、Answer
1账锹、首先不同設(shè)備的區(qū)別
2萌业、關(guān)于設(shè)備特點解讀
——設(shè)備歸屬決定了產(chǎn)品的姿態(tài)與連接屬性。手機(jī)個人獨(dú)享牌废,pad家庭共享咽白,自助機(jī)公眾使用,該屬性決定了產(chǎn)品的私密姿態(tài)鸟缕,比如保存密碼晶框,個人手機(jī)默認(rèn)記住密碼,pad懂从、pc是可選項授段,而自助機(jī)不該有。手機(jī)端會安裝各類應(yīng)用番甩,不同app可以互享賬號侵贵,比如已登錄微信可以使用微信賬號登錄摩拜。PC端也可以互通缘薛,但自助機(jī)是公共設(shè)備大多為單一任務(wù)處理獲取不到相關(guān)信息窍育,無需獲取也不能獲取。自助機(jī)曝露在公眾場合宴胧,人們害怕在陌生人或朋友面前表現(xiàn)的愚蠢漱抓,選擇時的猶豫不確定會成倍的放大導(dǎo)致焦慮。所以在界面設(shè)計時更需要注意界面引導(dǎo)或更應(yīng)該簡潔處理恕齐。
——屏幕大小決定了信息量乞娄,信息層級。體現(xiàn)在功能、導(dǎo)航結(jié)構(gòu)仪或、界面層級不同确镊。如PC端首頁可以展示導(dǎo)航+內(nèi)容,讓用戶一眼看出該系統(tǒng)有的功能范删。手機(jī)端則默認(rèn)則是內(nèi)容+頁尾導(dǎo)航側(cè)重主要內(nèi)容蕾域,其他內(nèi)容在下一層級展示更多讓用戶探索,必要的時候推薦到PC端網(wǎng)站處理到旦。
——傳感器束铭、拍照等功能決定了交互靈活性。有傳感器能感知到客戶狀態(tài)主動推送功能厢绝,如gps定位到某地則推送相關(guān)的商圈信息。外賣地圖導(dǎo)航系統(tǒng)可以自動定位無需文字輸入带猴。手機(jī)pad還可以拍照自動識別銀行卡號昔汉,無需輸入,pc端只能輸入數(shù)字拴清,自助機(jī)有外延設(shè)備讀取身份證靶病、卡等操作。
——攜帶屬性決定了產(chǎn)品使用場景口予。手機(jī)作為手持設(shè)備在商場試衣間娄周、跑步、排隊候車沪停、地鐵等多場景都能順暢使用煤辨。pad、PC相對固定木张,自助大屏固定地點众辨。同時作為手持設(shè)備手機(jī)和pad需要考慮橫屏、豎屏情況舷礼。不同的使用場景考慮考慮異常情況不同鹃彻。
——輸入屬性影響著產(chǎn)品復(fù)雜性?手機(jī)胖手指效應(yīng)明顯文字輸入時誤觸概率高需有意識判斷正確性妻献,語音輸入解決了部分場景下輸入不易問題蛛株。pc有鍵盤設(shè)備輸入便捷,可以處理復(fù)雜任務(wù)育拨。自助機(jī)虛擬鍵盤大但是自助辦理業(yè)務(wù)即來即走的屬性讓用戶很難熟悉虛擬鍵盤的位置難以快速輸入谨履,應(yīng)盡量減少輸入型設(shè)計讓任務(wù)盡量簡單。
——網(wǎng)絡(luò)接入方式不同需考慮加載速度與網(wǎng)絡(luò)收費(fèi)問題至朗,手機(jī)接入移動4G網(wǎng)絡(luò)速度還可以屉符,但按流量收費(fèi)讓用戶對圖片與視頻有顧忌,很多人性化的app也有對應(yīng)的策略,如提醒所處網(wǎng)絡(luò)環(huán)境詢問是否繼續(xù)爆發(fā)矗钟,在4G環(huán)境下需要點擊才播放唆香,在4G服務(wù)下顯示文件大小讓用戶自主選擇是否觀看。WiFi接入的PC吨艇、自助機(jī)(部分自助機(jī)是企業(yè)內(nèi)網(wǎng))就無需考慮網(wǎng)絡(luò)問題躬它。又如產(chǎn)品圖片太大是否影響加載速度,是否流量過高客戶不使用东涡,都是設(shè)計師應(yīng)該考慮的問題冯吓。
——目前手機(jī)、pad疮跑、pc的技術(shù)成熟靈敏度較好组贺,但大屏自助機(jī)很多要用尖硬物體按才奏效靈敏度較差,滑動效果不好所以設(shè)計界面不宜太長影響使用祖娘。
2失尖、關(guān)于界面元素、操作方式渐苏、導(dǎo)航掀潮、界面層級的拓展解讀,每一項都是需要細(xì)細(xì)研究的問題琼富,此處簡單聊一下仪吧,有機(jī)會再補(bǔ)充系列文章。
——回答問題一鞠眉、原型本意為逼真薯鼠,手機(jī)和pad顯示狀態(tài)欄屏幕小模擬真實設(shè)備時更應(yīng)寸寸計較。不同終端要顯示的必備元素始于需求械蹋,手機(jī)人断、pad、pc都數(shù)個人需要關(guān)注電量朝蜘、網(wǎng)絡(luò)等信息有異常時需處理顯示這類信息恶迈,而自助終端是商家管理用戶是不關(guān)注的電量等信息的,能用就行谱醇。又如logo標(biāo)識用戶處于哪暇仲,同時供商家營造品牌感。PC端和自助機(jī)在首頁顯示logo 副渴,手機(jī)則在啟動頁顯示應(yīng)用內(nèi)為節(jié)省空間不重復(fù)顯示奈附。界面元素始于需求有需求就設(shè)計對應(yīng)的功能,手機(jī)padpc都有相應(yīng)的規(guī)范而自助機(jī)還處于自由發(fā)揮的階段煮剧。所以面對自助機(jī)設(shè)計師就秉持簡潔的原則言之有物隨心所欲的放飛吧斥滤。
——關(guān)于操作方式應(yīng)盡量使用通用手勢将鸵,避免用戶重新學(xué)習(xí)你的新手勢,iOS佑颇、Android都有比較成熟的規(guī)范遵守即可顶掉。如下為書中的鼠標(biāo)與手指對比,移動端手指按下數(shù)量多且會遮擋屏幕對應(yīng)的意外觸發(fā)的情況更多挑胸,PC端大屏自助屏幕大遮擋小誤觸情況相對少痒筒。?
——關(guān)于導(dǎo)航與信息層級導(dǎo)航,其作用是指路茬贵,告訴用戶在哪簿透,能看到什么,還可以去哪解藻。如果時間空間充足可以一次顯示所有內(nèi)容老充,反之就要拆解信息。信息的拆解運(yùn)用簡約4策略:刪除螟左、分組蚂维、隱藏、轉(zhuǎn)移路狮,減少信息量并將信息分類,充分運(yùn)用漸進(jìn)暴露原則蔚约,在適當(dāng)?shù)臅r候通過手勢或操作場景隱藏工具欄或搜索欄奄妨。如知乎文章瀏覽頁,默認(rèn)會顯示搜索工具欄苹祟,當(dāng)向下滑動時則隱藏搜索區(qū)域砸抛。因用戶注意力有限,不同的設(shè)備都需要遵循簡單原則树枫,給內(nèi)容以最大的尊重直焙,而移動端這件事要做到極致。
哇哈哈哈砂轻,整理完這些終于有底氣面對我的架構(gòu)師奔誓、SA、開發(fā)工程師們啦搔涝。如果小伙伴們還有疑問的話厨喂,請留言我會盡量查資料幫忙解答的。