PC端和移動(dòng)端產(chǎn)品設(shè)計(jì)差異

隨著移動(dòng)互聯(lián)網(wǎng)的普及醉鳖,移動(dòng)端上網(wǎng)的人數(shù)也超過(guò)了PC端舆驶。產(chǎn)品的設(shè)計(jì)也越來(lái)越傾向于PC端和移動(dòng)端統(tǒng)籌起來(lái)考慮乱陡,出現(xiàn)了不少純移動(dòng)端的產(chǎn)品虽缕。

近年來(lái)關(guān)于移動(dòng)端和PC端融合的設(shè)計(jì)技術(shù)和理念也不斷的涌現(xiàn)溶弟,HTML 5女淑、響應(yīng)式設(shè)計(jì)、移動(dòng)先行的理念等等辜御。一定程度上緩解也解決了移動(dòng)端和PC端重復(fù)開(kāi)發(fā)的問(wèn)題鸭你。但是,因?yàn)镻C端和移動(dòng)端在設(shè)備形態(tài)和使用上的差異擒权,如何根據(jù)兩者的差異袱巨,合理規(guī)劃產(chǎn)品設(shè)計(jì)的差異還是有很多值得關(guān)注的點(diǎn)。

頁(yè)面結(jié)構(gòu)的差異

顯示屏幕的大小是PC端和移動(dòng)端最直接的呈現(xiàn)了碳抄。

PC端有超大的屏幕愉老,頁(yè)面結(jié)構(gòu)可以設(shè)計(jì)得相對(duì)比較復(fù)雜,而不會(huì)影響用戶的使用剖效。PC端的產(chǎn)品設(shè)計(jì)往往關(guān)注于單個(gè)頁(yè)面的橫向信息量和不同頁(yè)面層次間的縱向信息量嫉入。

首先焰盗,PC端在頁(yè)面橫向信息量上比較大。

設(shè)計(jì)PC端產(chǎn)品頁(yè)面時(shí)咒林,除了考慮本身頁(yè)面信息熬拒,還要考慮很多“其他”的信息。如相關(guān)閱讀垫竞、廣告推薦等等澎粟。

這是因?yàn)槿嗽跒g覽頁(yè)面內(nèi)容的時(shí)候,會(huì)自動(dòng)的“過(guò)濾”掉不相關(guān)的信息件甥。我們可以閉上眼睛想一下我們?yōu)g覽新聞頁(yè)面時(shí)多少時(shí)候能注意到頁(yè)面邊上的小廣告捌议。

其次,PC端縱向頁(yè)面層次信息比較深引有。

PC端頁(yè)面比較大,所以設(shè)計(jì)的時(shí)候可以利用面包屑導(dǎo)航倦逐、快捷按鈕等來(lái)保證你在網(wǎng)站瀏覽時(shí)不會(huì)迷路譬正。

例如我們?cè)跒g覽門(mén)戶網(wǎng)站時(shí),用戶從閱讀時(shí)政新聞一步步被引導(dǎo)到閱讀周邊新聞是經(jīng)常的事情檬姥,你可以隨時(shí)在頂部菜單欄回到你關(guān)注的時(shí)政新聞頁(yè)面曾我。

第三,PC端可以在新標(biāo)簽打開(kāi)健民。

在PC端瀏覽器上抒巢,多頁(yè)面瀏覽是一件輕而易舉能實(shí)現(xiàn)的事情。通過(guò)打開(kāi)多個(gè)頁(yè)面打開(kāi)能保證用戶關(guān)閉標(biāo)簽后可以接著瀏覽從而保證操作的連續(xù)性秉犹。

移動(dòng)端在承載豐富內(nèi)容上面有天然的不足的蛉谜。所以在移動(dòng)端設(shè)計(jì)的時(shí)候往往會(huì)更簡(jiǎn)潔。

首先崇堵,讓頁(yè)面呈現(xiàn)方式更“簡(jiǎn)單型诚、明了、直接”鸳劳。

移動(dòng)端頁(yè)面就那么一畝三分地狰贯,放了這個(gè)放不了那個(gè),這個(gè)也是習(xí)慣了PC端產(chǎn)品的人設(shè)計(jì)移動(dòng)端產(chǎn)品是手足無(wú)措的原因赏廓。

移動(dòng)端遵循少即是多原則涵紊,剔除不必要的元素,減少非關(guān)鍵信息對(duì)用戶的干擾幔摸。怎么用最簡(jiǎn)潔的方式把產(chǎn)品想呈現(xiàn)的信息呈現(xiàn)出來(lái)是產(chǎn)品設(shè)計(jì)過(guò)程中需要考慮的摸柄。

其次,頁(yè)面層級(jí)不要太深抚太。

在移動(dòng)端塘幅,執(zhí)行多次返回操作回到原點(diǎn)是很煩躁的事情(在PC端也同理昔案,試想一下,你在PC網(wǎng)站上电媳,有沒(méi)有操作過(guò)三四次返回到一個(gè)頁(yè)面踏揣?)。

移動(dòng)端產(chǎn)品設(shè)計(jì)匾乓,應(yīng)該充分利用導(dǎo)航欄來(lái)找到入口捞稿。同時(shí)要盡量縮短產(chǎn)品單次任務(wù)的層級(jí)。遇到頁(yè)面層級(jí)較多的任務(wù)時(shí)(比如下單流程)拼缝,需要考慮在過(guò)程或結(jié)束頁(yè)面增加返回到起點(diǎn)的操作(比如下單過(guò)程提示購(gòu)物車結(jié)賬娱局,下單完成引導(dǎo)用戶繼續(xù)購(gòu)物)。

操作方式不同

PC端用的是鼠標(biāo)和鍵盤(pán)咧七,移動(dòng)端用的多為手指衰齐。

鼠標(biāo)的移動(dòng)可以精確到像素級(jí)別,手指移動(dòng)精確度要差得多继阻。如果非要在移動(dòng)端做精確移動(dòng)的操作耻涛,可以考慮轉(zhuǎn)化成按鈕,利用“上瘟檩、下抹缕、左、右墨辛、放大卓研、縮小”按鈕來(lái)進(jìn)行精確移動(dòng)操作。

在移動(dòng)端輸入文本絕對(duì)是一個(gè)噩夢(mèng)睹簇,無(wú)論是用粗大的手指在狹小的鍵盤(pán)點(diǎn)擊奏赘,還是光標(biāo)的重定位。如何減少用戶在使用過(guò)程中的輸入是需要考慮的带膀。如志珍,輸入聯(lián)想、輸入按鈕化(將歷史輸入垛叨、熱門(mén)輸入設(shè)計(jì)成按鈕)伦糯、輔助輸入(比如增加下拉、增加按鈕等)嗽元。

是否在移動(dòng)端進(jìn)行長(zhǎng)文本輸入的任務(wù)也是需要慎重考慮的敛纲。

在移動(dòng)端有著獨(dú)特的輸入方式滑動(dòng)、多點(diǎn)觸控剂癌、搖一搖等淤翔,善用這些操作方式將會(huì)帶來(lái)極大的便捷。

應(yīng)用場(chǎng)景不同

應(yīng)用場(chǎng)景的不同是很多初做產(chǎn)品的人容易忽略的佩谷。

PC端的應(yīng)用場(chǎng)景往往是在固定的場(chǎng)景旁壮、相對(duì)長(zhǎng)的一段時(shí)間進(jìn)行的监嗜。如辦公室、家里抡谐、網(wǎng)吧等等裁奇,多數(shù)情況下用戶使用PC端產(chǎn)品往往有著一段相對(duì)長(zhǎng)的時(shí)間。而移動(dòng)端不同麦撵,移動(dòng)端應(yīng)用場(chǎng)景是碎片化的刽肠,辦公司、家里免胃、車上音五、廁所都是移動(dòng)端使用的場(chǎng)景。

如何讓產(chǎn)品更輕羔沙、更扁平躺涝,從而占據(jù)用戶碎片化片的時(shí)間。豆瓣電影移動(dòng)端弱化了社區(qū)功能撬碟,突出電影導(dǎo)看和購(gòu)票诞挨,用戶直接查看熱門(mén)電影、查找附近影院呢蛤、完成購(gòu)票。馬蜂窩則把內(nèi)容進(jìn)行了拆分棍郎,形成了馬蜂窩旅游攻略(內(nèi)容)其障、旅游翻譯官(工具)等產(chǎn)品。

縱觀市面熱門(mén)PC端和移動(dòng)端產(chǎn)品涂佃,并無(wú)通用原則励翼。綜合移動(dòng)端和PC端的差異,根據(jù)應(yīng)用場(chǎng)景和產(chǎn)品策略辜荠,關(guān)注產(chǎn)品細(xì)節(jié)才能設(shè)計(jì)出好的產(chǎn)品汽抚。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市伯病,隨后出現(xiàn)的幾起案子造烁,更是在濱河造成了極大的恐慌,老刑警劉巖午笛,帶你破解...
    沈念sama閱讀 211,194評(píng)論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件惭蟋,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡药磺,警方通過(guò)查閱死者的電腦和手機(jī)告组,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,058評(píng)論 2 385
  • 文/潘曉璐 我一進(jìn)店門(mén),熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)癌佩,“玉大人木缝,你說(shuō)我怎么就攤上這事便锨。” “怎么了我碟?”我有些...
    開(kāi)封第一講書(shū)人閱讀 156,780評(píng)論 0 346
  • 文/不壞的土叔 我叫張陵放案,是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我怎囚,道長(zhǎng)卿叽,這世上最難降的妖魔是什么? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 56,388評(píng)論 1 283
  • 正文 為了忘掉前任恳守,我火速辦了婚禮考婴,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘催烘。我一直安慰自己沥阱,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,430評(píng)論 5 384
  • 文/花漫 我一把揭開(kāi)白布伊群。 她就那樣靜靜地躺著考杉,像睡著了一般。 火紅的嫁衣襯著肌膚如雪舰始。 梳的紋絲不亂的頭發(fā)上崇棠,一...
    開(kāi)封第一講書(shū)人閱讀 49,764評(píng)論 1 290
  • 那天,我揣著相機(jī)與錄音丸卷,去河邊找鬼枕稀。 笑死,一個(gè)胖子當(dāng)著我的面吹牛谜嫉,可吹牛的內(nèi)容都是我干的萎坷。 我是一名探鬼主播,決...
    沈念sama閱讀 38,907評(píng)論 3 406
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼沐兰,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼哆档!你這毒婦竟也來(lái)了?” 一聲冷哼從身側(cè)響起住闯,我...
    開(kāi)封第一講書(shū)人閱讀 37,679評(píng)論 0 266
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤瓜浸,失蹤者是張志新(化名)和其女友劉穎,沒(méi)想到半個(gè)月后寞秃,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體斟叼,經(jīng)...
    沈念sama閱讀 44,122評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,459評(píng)論 2 325
  • 正文 我和宋清朗相戀三年春寿,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了朗涩。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 38,605評(píng)論 1 340
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡绑改,死狀恐怖谢床,靈堂內(nèi)的尸體忽然破棺而出兄一,到底是詐尸還是另有隱情,我是刑警寧澤识腿,帶...
    沈念sama閱讀 34,270評(píng)論 4 329
  • 正文 年R本政府宣布出革,位于F島的核電站,受9級(jí)特大地震影響渡讼,放射性物質(zhì)發(fā)生泄漏骂束。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,867評(píng)論 3 312
  • 文/蒙蒙 一成箫、第九天 我趴在偏房一處隱蔽的房頂上張望展箱。 院中可真熱鬧,春花似錦蹬昌、人聲如沸混驰。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 30,734評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)栖榨。三九已至,卻和暖如春明刷,著一層夾襖步出監(jiān)牢的瞬間婴栽,已是汗流浹背。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 31,961評(píng)論 1 265
  • 我被黑心中介騙來(lái)泰國(guó)打工辈末, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留居夹,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 46,297評(píng)論 2 360
  • 正文 我出身青樓本冲,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親劫扒。 傳聞我的和親對(duì)象是個(gè)殘疾皇子檬洞,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,472評(píng)論 2 348

推薦閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢(shì)1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 171,749評(píng)論 25 707
  • 問(wèn)答題47 /72 常見(jiàn)瀏覽器兼容性問(wèn)題與解決方案? 參考答案 (1)瀏覽器兼容問(wèn)題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 13,737評(píng)論 1 92
  • 轉(zhuǎn)自《人人都是產(chǎn)品經(jīng)理》,原文鏈接:寫(xiě)給產(chǎn)品經(jīng)理技術(shù)書(shū) 產(chǎn)品經(jīng)理有三大領(lǐng)域的技術(shù)是需要去攻克的贤旷,分別是:客戶端相關(guān)...
    游社長(zhǎng)閱讀 4,143評(píng)論 4 79
  • 父親喜歡旅行广料,喜歡去不同的地方走走看看,母親因?yàn)闀炣嚥惶敢獬鲩T(mén)幼驶,可她每次還是選擇了陪伴父親艾杏。 年輕的時(shí)候,交通不...
    紫萸閱讀 253評(píng)論 3 1
  • 為什么巧克力會(huì)和狼人殺聯(lián)系起來(lái)盅藻? 因?yàn)楣荷#乙膊恢馈?這是個(gè)巧合畅铭。 作為一個(gè)愛(ài)購(gòu)物的孩子,我在某一天勃蜘,突然想吃巧克...
    萌芽mua閱讀 2,364評(píng)論 2 0