移動端和PC端交互設計上的區別

2019-6-12 泥人張 手機及小程序界麵設計文章及欣賞


如果您想訂閱本博客內容__钳子先生的魔法龙虾盒,每天自動發到您的郵箱中_-345彩票网邀请码, 請點這裏

這篇文章我們來談談移動端和PC端交互設計上的區別-_诛仙奋斗。



Image title


經常遇到一些設計師|||尿毒症武警二院专家,他們之前負責的都是pc端產品|_优化彩票,突然改做移動端-|_李涵辰网站,會不自覺的把pc端的一些設計理念“移植”到移動端-||168彩票合法吗,出現了水土不服_-_快乐大本营落跑甜心剧组。有經驗的設計師一看你設計的移動端頁麵就知道你之前做的都是pc端|-|11086移动彩票官网,這是一件非常尷尬的事情|-广州缓交女。就好像你說了一句“nice to meet you”-|贵阳传销,別人就知道你老家是哪裏一樣7374小游戏。那麼移動端和pc端交互設計上的區別究竟在哪呢|-_苏州36路公交车路线?



大屏到小屏


開門見山|__亿客隆彩票正规吗,移動端和pc端最根本的區別就是屏幕的大小|-天津apec限行规定。屏幕的大小直接決定了界麵信息量_|河北区haobc,pc端一個頁麵可以展示完全的信息可能需要移動端好幾個頁麵來承載-_|36选7开奖中奖规则。


Image title


可能有的設計師覺得_-htcg24,屏幕尺寸不一樣做自適應不就行了-_传奇归来刺客装备,移動端頁麵做長一點-__36选7好彩3奖金是多少,讓用戶滑動就可以了-|_一看网。這是一個非常簡單的處理方案-||众赢国际彩票,但是忽略了一個重要前提|-雷霆扫毒中介人是谁:用戶願不願意滑動_-|固话积分查询?根據埋點數據顯示|焦煤上市公司,多數移動端頁麵超過一屏的內容的曝光與點擊量會急劇下滑|_神秘顾客招聘,說明用戶很少主動滑動去查看一屏以外的內容|-178国际娱乐会员登录。對於移動端產品來說_|_苏州36路公交车路线,一些重要的內容必須保證用戶在一屏內可以看到---薄樱鬼同人羁绊。


1)信息架構重構


因此|-|亿贝娱乐登录,如果你要為一個pc端網站做一個移動端app_|_sss355,首先要做的就是信息架構的重構|_注册送58元彩票体验金。pc端有足夠的空間可以把所有的功能直接展示給用戶_|-儿童风景画,而移動端隻能展示一些主要的功能_注册送体验金68的彩票,一些次要的功能需要放在下一層級--_未成年身份证。


Image title


例如-_艾尔之光狂心武者,appstore中用戶是可以評價這條評論對自己是否有幫助的_-2628彩票平台登录链接。PC端的處理方式很簡單-_|碧欧丽,直接展示給用戶-_盈彩彩票安卓。而移動端是需要用戶長按這條評論才可以彈出評價列表的--陈白沙祠,可能很多用戶今天看了這篇文章才發現原來還有這個功能-||108娱乐彩票可以报警吗。沒關係||111彩票cc手机APP,之前雖然不知道_||金义大都市,但是並沒有影響你正常使用啊|-|11086移动彩票APP。對次要功能進行適當的降低信息層級是移動端設計師必須要考慮的_-_陈公博简介。


2)一個頁麵|_|雪豹雳剑电视剧全集,一個任務


對於上麵信息架構重構的觀點可能會有人存在異議_|256时时彩安卓版,對於一些表單類頁麵來說||_永城彩票官网,例如用戶要借錢-|钓鱼岛ppt、轉賬|_动感地带随心聊,有些信息是用戶必須要填的-__三八成人。在這些場景中-_u盘修复大师,我們不擔心用戶不滑動--106平台彩票二维码,因為用戶不滑動就無法完成操作---欧吉妮公主。那麼在這種情況下12强赛世预赛赛程,是否可以繼續延續pc端的布局樣式_-空间留言代码祝福闪字?


Image title


以上麵的轉賬流程為例|肖志恒简历,pc端是直接在一個頁麵展示_-_2013四川地震,而移動端是分成了兩個頁麵__|菲丝丽妮官网。為什麼這樣_|世界杯草坪多少钱?把備注/付款說明也放在第一個頁麵不行嗎|_吴碧云?


因為移動端用戶使用環境更加的複雜多變_--万年屋日本料理,更容易受到幹擾|-玛巴斯属性,所以必須保證界麵信息的簡單直觀_-sss355。如果在一個頁麵中展示過多的信息量-__小学生美术作品,容易讓用戶混亂||_金斯顿的梦想。這裏所說信息量並不是指絕對信息量-永盛国际手机彩票官网,更準確的說法應該是用戶主觀感受上的信息量|360足彩胜负平比分直播。同樣的幾個輸入框_-张柏芝约谈谢霆锋,可能在pc端隻占了頁麵的1/4|_幼香阁网址,而移動端占了一整個頁麵|-_郫县薰衣草基地,給用戶的感觀是完全不一樣的-007a私募内线。頁麵塞的滿滿當當-_九九归一打一生肖,容易讓用戶焦慮--|云购彩票骗局揭秘。


一個頁麵可以完成的任務現在要跳轉好幾個頁麵-_|掌上彩票下载安装,增加了操作步驟||至尊时时彩平台。用戶害怕“內容多”_|金巧巧胸,難道不害怕“步驟多”嗎|_诺基亚滑盖手机大全图片及报价?不害怕|-股票套牢,因為頁麵內容量是用戶一眼就可以看出來的|-实况足球2014psp,用戶無法立刻感知這個任務有多少步驟-|_臭豆腐打一歌手。因為無知---雅迪电动车代言人,所以無畏_--众赢国际彩票有托吗。等到用戶知道這個任務步驟數的時候_|跆拳道太子妃,整個任務都已經完成了_江腾蛟回忆录。


Image title


借唄的這次改版_--360手机游戏大厅,用戶要借錢必須先輸入借款金額---藏疆壮根丸,其餘的借款期限|御龙在天野蘑菇坐标、還款方式利息等信息才會展示給用戶|初中数学教案模板。這些信息都是跟用戶借款金額相關的|苏宁易购网站打不开,用戶沒有輸入借款金額__33选7走势图综合,這些信息展示給用戶意義也不大_永诚彩票,不如隱藏|-_突袭宝库,讓用戶的注意力聚焦於完成輸入借款金額_台湾身份证号。


Image title


沒有一個放之四海而皆準的設計原則|_长春万达电影院影讯,所有的設計理論都不能罔顧實際的應用場景而機械的套用|_-银河游戏是不是作假。如果前後步驟關聯性比較強__构橘,我建議不要分頁展示|||手机怎么开通gprs。例如-038彩票骗局,目前很多的短信驗證碼都選擇把“輸入手機號”“輸入短信驗證碼”放到兩個頁麵|_26岁毒贩获死刑,我個人對此持保留意見_--快播加速器。設想一個場景_-|银行建筑,如果用戶遲遲沒有收到短信驗證碼_|穿越神墓之何为逆天,那麼他需要確定是手機號輸錯了_-10500vip下载、網絡故障還是其他什麼原因|-_1号站平台。用戶需要返回到上一個頁麵查看|_众购彩票,如果手機號和短信驗證碼放在同一個頁麵就簡單多了_-31选七走势图。


3)突出重要信息


前麵我們提到的主要是控製移動端頁麵的信息量_|ca4353航班。頁麵信息量少就可以了-_-盈盈彩中奖怎么领取?當然不是-北京466鼻腔科医院,我們來看一下火車換乘的場景-happy together fx,如果你要從南京去新疆阿克蘇_行会名字竖起来,沒有直達的車次-_亿发彩票下载,隻能從西安換乘--_优彩登录。我們來看看下麵兩款產品的處理方式--qq刷q币软件免费版,左邊是12306_|小狼狗心水论坛,右邊是飛豬|-亿彩票安全吗。12306還是一股pc端風格迎麵撲來--李天一受害教师照片,問題出現在哪_-_雷克萨斯ex350?12306跟飛豬展示信息量差不多_|-168彩票真的吗,唯一的區別在於12306展示了兩趟車次各自的起止時間_|易旺彩票是正规平台吗,而飛豬隻告訴用戶整趟旅程的起止時間_-_白洁在亲戚家被陈三日。


Image title


顯然問題不是出現在信息量上_-样本量计算公式,而是對信息的展示形式上__2628彩票网页。用戶更關注的信息-__2019王中王平特肖图,應該讓用戶更容易發現|-|国世平本人。對於一趟車次來說_|-约彩彩票软件正规吗?,用戶更加關注出發/到達站-_|谈爱 李白、出發/到達時間票價-__211限时达。對飛豬界麵進行高斯模糊處理-_|365彩票怎么买不了?,發現用戶的視覺焦點正好落在這些重點信息上_|醉美cf单机版1 4。


Image title


12306所有的信息都屬於同一層級_|_尹斗俊 孙娜恩,讓人抓不到主次-石上藕。而且界麵中出現了過多的配色_|-色护士网,更增加用戶的信息獲取成本--诺基亚7210c软件。


Image title




鼠標到手指


pc端用戶與界麵進行交互靠的是鼠標|_3550幸运彩票安全吗,移動端用戶靠的是手指|_-娱乐天地点检怎么下载。鼠標的操作更加精準_||芭妃视觉,因此移動端界麵中元素的尺寸和間距比pc端的大-武汉市教师教育网。以下圖為例|||清朝皇帝皇太后列表,左邊是pc端__陈浥萍,右邊是移動端|118娱乐彩票。移動端的輸入框沿用的還是pc端樣式|舞乐天使,而且關於利率和手續費的詳情icon過小--|央视曝光净水器名单,用戶的手指點擊的時候容易誤操作|-掌上永辉职工App下载。


Image title



給你的界麵做減法


前麵我們主要強調了移動端產品要盡量減少界麵中信息量-至尊彩下载。可不可以在不改變產品信息架構的前提下-_f1直播时间,通過交互設計上的改動來完成目標呢|_杨凌设市?我給大家介紹兩個方法|-|掌上足球世界杯:場景化關聯化-_锐骐zd30。


1)場景化


在一個頁麵中-_|诺尔丝假发,雖然內容很多--亲戚关系图,但是用戶真正感興趣並且會與之交互的內容很少-|娱乐天地点检下载网址。如果我們可以獲知用戶在特定的場景下對於某個內容訴求很高_-_昆明桑拿爽记,那麼我們突出展示-|15858彩票计划;反之如果訴求很低的話___永利娱乐最低充多少,我們可以隱藏_|啾啾宝贝。


舉一個之前說過的例子-_-谁能百里挑一于淼,知乎中__|遂宁英语网,用戶在搜索結果頁滑動大概3屏後_威斯特梵高,會出現“向知友提問”按鈕_|掌上购彩三分快三。因為用戶滑動了3屏_|-艺术生百日冲刺这本书,說明用戶可能對當前的搜索結果不滿意|-栾城贴吧,這時引導用戶去提問-_求身份证号码,用戶的意願更高-_-突泉信息港。如果我們全程展示這個去提問按鈕_--廖慧敏落水,反而會減少用戶的實際瀏覽區域_-_静安外国语小学,造成幹擾-_长治文明小博客。


Image title


上麵主要提到了-_传奇归来刺客武器,同一個流程|||众彩是真是假,需要根據用戶不同的使用場景提供不同的功能-|众彩软件下载。其實即使是同一個功能-_078软件app,我們也要根據用戶不同的使用場景選擇不同的展示形式-相逢是首歌下载。


Image title


還是知乎-|邮局上班时间,為了方便用戶可以快速的查看下一個回答|_2019年香港走势图,給用戶提供了一個浮動按鈕|_意彩app注册。但是這個浮動按鈕|_ios12beta1描述文件,當用戶開始滑動頁麵時候就會改變樣式_金华烟草电子商务网。這個很容易理解--评剧发源地,當用戶剛進入這個頁麵||商丘摄影网,為了降低用戶的學習成本__梁笙和沈言 卫生间,我們需要直接告訴用戶這個按鈕是幹什麼的|天津股侠。當用戶開始滑動進入閱讀答案的狀態-|cf易美,縮小按鈕的形態避免對界麵信息造成遮擋_|第一大团团购。


2)關聯化


我們需要梳理信息之間的關聯性|-|众彩彩票手机app下载,將相互關聯的信息整合在一起|-米站,進而減少頁麵中信息量_金绒飞。支付寶賬單的月份篩選功能--camera什么意思,對入口進行了修改-||雷霆扫毒谁是黑警。之前用戶需要點擊日曆圖標--易发彩票注册,現在用戶直接點擊月份就可以了_--绿色饮品。用戶要篩選的就是月份_|蕉岭新闻,那麼直接把月份作為入口更加合適|-|盈众彩票网址。


Image title



總結


以上就是我對移動端和pc端交互設計上區別的簡單分析和總結|_免费刷q币软件下载,如果你有不同的建議和看法歡迎留言討論--_众购彩票开奖记录数据分析。

藍藍設計www.jwrumpff.com )是一家專注而深入的界麵設計公司__家常红烧肉,為期望卓越的國內外企業提供卓越的UI界麵設計-||卓易彩票老版本、BS界麵設計 _-长郡中学网站、 cs界麵設計 _|-娱乐天地重庆时时彩APP、 ipad界麵設計 -中山轻轨时刻表、 包裝設計 _--余庆教育网、 圖標定製 |_阳城县人力资源和社会保障局、 用戶體驗 ___徐子淇八字、交互設計|-|7k 7k小游戏、 網站建設 -丁丁与杨坤、平麵設計服務|||奇乐影院。


標簽: 移動端和

Powered by emlog 京ICP備12006971號-1 sitemap