追求卓越一諾千金

藍藍設計__|乔任梁遗体照,2011年成立-||众乐彩票网,主創清華團隊-_-shuaitong,專注軟件和互聯網ui設計開發|0369公式是什么意思。擅長企業信息化管理-|金清二中、監控|_038彩票官方正版、大數據軟件UIUE谘詢和設計開發服務|__2019最火现金棋牌官网。立足UI|-静佳jcare纤体梅,好好學習||反间谍工作的主管单位,天天進步-|武汉文具批发市场!


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

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



如果您想訂閱本博客內容_|-9158virtualcamera,每天自動發到您的郵箱中-阶梯教室层高, 請點這裏

這篇文章我們來談談移動端和PC端交互設計上的區別_魏征进谏图的作者。



Image title


經常遇到一些設計師-_索纳塔i40,他們之前負責的都是pc端產品||_景伯宁,突然改做移動端_|_244影城,會不自覺的把pc端的一些設計理念“移植”到移動端k722,出現了水土不服|__235彩票平台。有經驗的設計師一看你設計的移動端頁麵就知道你之前做的都是pc端_-天府新区总体规划,這是一件非常尷尬的事情_找个身份证。就好像你說了一句“nice to meet you”-__1北京pk10彩票控,別人就知道你老家是哪裏一樣-易旺彩票是真的假的。那麼移動端和pc端交互設計上的區別究竟在哪呢_-杜香油?



大屏到小屏


開門見山_诺基亚7280,移動端和pc端最根本的區別就是屏幕的大小--_中华图书人。屏幕的大小直接決定了界麵信息量_-惠蒙网qig6,pc端一個頁麵可以展示完全的信息可能需要移動端好幾個頁麵來承載|地铁蓝衣水岛津实。


Image title


可能有的設計師覺得_-手机2009qq下载,屏幕尺寸不一樣做自適應不就行了___a型磁性材料卡,移動端頁麵做長一點_四平青年2百度影音,讓用戶滑動就可以了__|掌上足球专业版。這是一個非常簡單的處理方案|__陈大伟博客,但是忽略了一個重要前提-|mp4游戏格式:用戶願不願意滑動__qq空间代码克隆?根據埋點數據顯示||_陈思远新浪微博,多數移動端頁麵超過一屏的內容的曝光與點擊量會急劇下滑--_保定热线测网速,說明用戶很少主動滑動去查看一屏以外的內容||艺龙如何返现。對於移動端產品來說_|亿博登录,一些重要的內容必須保證用戶在一屏內可以看到_||破解小黄车密码方法。


1)信息架構重構


因此_--广州缓交,如果你要為一個pc端網站做一個移動端app__希苒女装,首先要做的就是信息架構的重構|--oppo803。pc端有足夠的空間可以把所有的功能直接展示給用戶___锐图拉斐,而移動端隻能展示一些主要的功能__|青山光司,一些次要的功能需要放在下一層級___陈大伟博客。


Image title


例如|_丝图腾,appstore中用戶是可以評價這條評論對自己是否有幫助的_长堤风貌街。PC端的處理方式很簡單--狩猎狂狮,直接展示給用戶|-_耽美h。而移動端是需要用戶長按這條評論才可以彈出評價列表的_-许氏大酱,可能很多用戶今天看了這篇文章才發現原來還有這個功能|-退伍军人补贴新政策2018。沒關係_-_陈秋艳,之前雖然不知道_-盈彩在线邀请码,但是並沒有影響你正常使用啊--亿客隆彩票。對次要功能進行適當的降低信息層級是移動端設計師必須要考慮的|艺龙团购后台。


2)一個頁麵|-诗馨语,一個任務


對於上麵信息架構重構的觀點可能會有人存在異議--娱乐天地重庆时时彩APP,對於一些表單類頁麵來說_|_腾讯2014校园招聘,例如用戶要借錢|-至尊彩安下载安装苹果、轉賬-_-粤dk0213,有些信息是用戶必須要填的-qq互赞群。在這些場景中_我爱淘折,我們不擔心用戶不滑動__1288购彩app,因為用戶不滑動就無法完成操作__|钢八连。那麼在這種情況下-_淳化租房,是否可以繼續延續pc端的布局樣式|_珠江台今日关注视频?


Image title


以上麵的轉賬流程為例-_斗罗大陆之三生武魂,pc端是直接在一個頁麵展示|_|168彩票网站返现正规吗,而移動端是分成了兩個頁麵|铭牌标准。為什麼這樣|||汇家卡盟?把備注/付款說明也放在第一個頁麵不行嗎|-中国军衔等级胸章?


因為移動端用戶使用環境更加的複雜多變|_-上海新闻综合频道直播,更容易受到幹擾_|眠宝,所以必須保證界麵信息的簡單直觀|_|至尊彩怎么玩。如果在一個頁麵中展示過多的信息量-__艳艳乡村全文阅读,容易讓用戶混亂--57bt龙发布。這裏所說信息量並不是指絕對信息量__|青楼十2房在线观看,更準確的說法應該是用戶主觀感受上的信息量-_众彩国际是骗局吗。同樣的幾個輸入框||温州城市学院,可能在pc端隻占了頁麵的1/4-|台风莫兰蒂登陆,而移動端占了一整個頁麵-__狼堡行动,給用戶的感觀是完全不一樣的|-_旁开口女裤。頁麵塞的滿滿當當--_我们结婚了泰民停拍,容易讓用戶焦慮_--易中彩票代玩账号兼职。


一個頁麵可以完成的任務現在要跳轉好幾個頁麵-_168彩票网站是真的吗,增加了操作步驟|_|崆峒二手房网。用戶害怕“內容多”|-_03wa论坛,難道不害怕“步驟多”嗎_|龙珠ol国服下载?不害怕-|盈彩吧是正规的吗,因為頁麵內容量是用戶一眼就可以看出來的||_低塘租房,用戶無法立刻感知這個任務有多少步驟-__黄岛配货站。因為無知_-长城彩票可以提现吗,所以無畏|-_078彩票这个软件安全吗。等到用戶知道這個任務步驟數的時候_|_哈雷摩托车官方网,整個任務都已經完成了-_重庆烟。


Image title


借唄的這次改版___飞天侠女,用戶要借錢必須先輸入借款金額-_-102彩票,其餘的借款期限|-_驾校教练车图片、還款方式利息等信息才會展示給用戶|-里番a c g全彩。這些信息都是跟用戶借款金額相關的--|注册账号彩金,用戶沒有輸入借款金額-智行飞机票出票靠谱吗,這些信息展示給用戶意義也不大__赢彩彩票app下载,不如隱藏|-|守护甜心目录,讓用戶的注意力聚焦於完成輸入借款金額药酒是在哪个朝代后出现的。


Image title


沒有一個放之四海而皆準的設計原則_-讯景9500gt,所有的設計理論都不能罔顧實際的應用場景而機械的套用_|永盛国际手机彩票游戏。如果前後步驟關聯性比較強--|赢彩票是正规的吗,我建議不要分頁展示|__芜湖市文化馆。例如_|动感地带积分兑换商城,目前很多的短信驗證碼都選擇把“輸入手機號”“輸入短信驗證碼”放到兩個頁麵_|-此物最相思的上一句,我個人對此持保留意見_-ovleng。設想一個場景_-|威海卫生365,如果用戶遲遲沒有收到短信驗證碼-裤子尺码换算,那麼他需要確定是手機號輸錯了__长沙市消防支队、網絡故障還是其他什麼原因_||枫无涯下部。用戶需要返回到上一個頁麵查看---长葛市教育局,如果手機號和短信驗證碼放在同一個頁麵就簡單多了_|-诺基亚asha503。


3)突出重要信息


前麵我們提到的主要是控製移動端頁麵的信息量-运盛彩票手机。頁麵信息量少就可以了|-360双色球专家杀号定胆?當然不是-_|优彩彩票是正规的吗,我們來看一下火車換乘的場景-|_四川教育学院温江校区,如果你要從南京去新疆阿克蘇--链家地产司歌mp3,沒有直達的車次_|-038彩票是合法的吗?,隻能從西安換乘_198娱乐平台。我們來看看下麵兩款產品的處理方式||耳鸣466专家,左邊是12306__陈德荣任天津市委常委,右邊是飛豬||-瓯江影院。12306還是一股pc端風格迎麵撲來|-超女娃娃主题曲,問題出現在哪__|赢彩彩票提现会到账吗?12306跟飛豬展示信息量差不多-|_248彩票平台提不出钱,唯一的區別在於12306展示了兩趟車次各自的起止時間_|小米1s锤子rom,而飛豬隻告訴用戶整趟旅程的起止時間||雪碧兑奖。


Image title


顯然問題不是出現在信息量上-_365彩票是真的吗,而是對信息的展示形式上---父亲的盾牌。用戶更關注的信息_|11086移动彩票能提现吗,應該讓用戶更容易發現|_|尹国驹和张子强。對於一趟車次來說-江腾蛟回忆录,用戶更加關注出發/到達站_-_岫岩玉都网、出發/到達時間票價_|_嬉戏谷死人。對飛豬界麵進行高斯模糊處理|_魔爪铃声网,發現用戶的視覺焦點正好落在這些重點信息上--oppo手机a201。


Image title


12306所有的信息都屬於同一層級_-扬州八怪画竹子,讓人抓不到主次-公安部2002年春节晚会。而且界麵中出現了過多的配色_--120富婆看图中肖特,更增加用戶的信息獲取成本|_-qq空间情侣模块。


Image title




鼠標到手指


pc端用戶與界麵進行交互靠的是鼠標__|秦岚女儿,移動端用戶靠的是手指|078彩票计划。鼠標的操作更加精準|_|金谷证券,因此移動端界麵中元素的尺寸和間距比pc端的大-||鲁音屋。以下圖為例-衡水电大成绩查询,左邊是pc端-芜湖阳光半岛,右邊是移動端||银行家生活球馆。移動端的輸入框沿用的還是pc端樣式_-96900订票,而且關於利率和手續費的詳情icon過小_|_叶彤倩,用戶的手指點擊的時候容易誤操作_|仲博最新版下载326。


Image title



給你的界麵做減法


前麵我們主要強調了移動端產品要盡量減少界麵中信息量--_重庆高考作文题目。可不可以在不改變產品信息架構的前提下_2016奥运会中国金牌数,通過交互設計上的改動來完成目標呢__-辉县天气2345?我給大家介紹兩個方法|1吨水等于多少升:場景化關聯化_1288彩票靠谱吗。


1)場景化


在一個頁麵中-_北交大晨光bt,雖然內容很多|__078彩票软件安全吗,但是用戶真正感興趣並且會與之交互的內容很少__西餐团购。如果我們可以獲知用戶在特定的場景下對於某個內容訴求很高-__三星w2017,那麼我們突出展示__下一站幸福剧情;反之如果訴求很低的話-_-绿色饮品,我們可以隱藏_--宿松县人民政府网站。


舉一個之前說過的例子___易旺彩票网犯不犯法,知乎中__-杭州九堡客运中心网上订票,用戶在搜索結果頁滑動大概3屏後---银行卡制作,會出現“向知友提問”按鈕__168彩票怎么不可以用了。因為用戶滑動了3屏|-_问问狗,說明用戶可能對當前的搜索結果不滿意--盈利国际APP下载,這時引導用戶去提問_-_菜鸟卧底广播剧,用戶的意願更高_银彩注册号码。如果我們全程展示這個去提問按鈕--_188小鱼儿玄机2站开奖,反而會減少用戶的實際瀏覽區域-_说话犀利是什么意思,造成幹擾_老娘舅2013。


Image title


上麵主要提到了___徐娇新浪微博,同一個流程||运盛彩票套路,需要根據用戶不同的使用場景提供不同的功能|__星光大道20130202。其實即使是同一個功能-_马亮照,我們也要根據用戶不同的使用場景選擇不同的展示形式|-游彩网注册。


Image title


還是知乎_-焦点打断宏,為了方便用戶可以快速的查看下一個回答-|媚行深宫,給用戶提供了一個浮動按鈕||莅临是什么意思。但是這個浮動按鈕__|优信彩票APP,當用戶開始滑動頁麵時候就會改變樣式|--361彩票官方网站登录。這個很容易理解---倚天2龙驹私服,當用戶剛進入這個頁麵-||辽宁电视台全运频道,為了降低用戶的學習成本_-2019年白姐先锋诗,我們需要直接告訴用戶這個按鈕是幹什麼的|__7k7k7小游戏大全。當用戶開始滑動進入閱讀答案的狀態-|河南科协网,縮小按鈕的形態避免對界麵信息造成遮擋-_-尊彩网app。


2)關聯化


我們需要梳理信息之間的關聯性-||中乙联赛官网,將相互關聯的信息整合在一起|_-卡通战争剑灵中文版,進而減少頁麵中信息量|_注册送。支付寶賬單的月份篩選功能||1号彩下载,對入口進行了修改|-掌信彩网址。之前用戶需要點擊日曆圖標_|_101号宠物恋人2,現在用戶直接點擊月份就可以了-货车司机罢运最新动态。用戶要篩選的就是月份||毕福剑与王二妮睡觉,那麼直接把月份作為入口更加合適_|重生之凤求凰19楼。


Image title



總結


以上就是我對移動端和pc端交互設計上區別的簡單分析和總結|--6月新股,如果你有不同的建議和看法歡迎留言討論--|焦煤上市公司。

藍藍設計www.jwrumpff.com )是一家專注而深入的界麵設計公司-_北京市市委书记是谁,為期望卓越的國內外企業提供卓越的UI界麵設計--中大恒基、BS界麵設計 -_沈阳调料批发市场、 cs界麵設計 |_-金铁霖简历、 ipad界麵設計 ---诺基亚n79手机、 包裝設計 --魔法龙虾盒、 圖標定製 _-易盈彩票、 用戶體驗 -_|yy44800、交互設計|_天目手机维修论坛、 網站建設 |-深圳飞鹤航空、平麵設計服務-||7k7k7k小游戏。


標簽: 移動端和 « 重新學習 React (一) 生命周期|||ccdd2013夏装正品,Fiber 調度和更新機製 | 原型設計中的道與術»


訂閱Rss