追求卓越一諾千金

藍藍設計|-|狐易康,2011年成立||注册彩金网址,主創清華團隊|_|132彩票110安卓版,專注軟件和互聯網ui設計開發_至尊争霸彩票合法吗。擅長企業信息化管理|-染衣培训、監控-亿彩彩票手机版登录、大數據軟件UIUE谘詢和設計開發服務|-璎珞潮牌服装批发网。立足UI|-注册就送199的彩票网站,好好學習__奥斯洁,天天進步|||8万以内买什么车好!


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

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



如果您想訂閱本博客內容___众博棋牌骗了我二十万,每天自動發到您的郵箱中__|买多网加盟, 請點這裏

這篇文章我們來談談移動端和PC端交互設計上的區別-_-铜旗阵。



Image title


經常遇到一些設計師__|太原洗头房,他們之前負責的都是pc端產品||解放大威,突然改做移動端--_华录s9000,會不自覺的把pc端的一些設計理念“移植”到移動端_-093彩票靠谱吗,出現了水土不服|云南鼎通贵金属。有經驗的設計師一看你設計的移動端頁麵就知道你之前做的都是pc端-|中500万之前的预兆,這是一件非常尷尬的事情---云顶娱乐官网下载。就好像你說了一句“nice to meet you”-|娱乐天地是正规网站吗,別人就知道你老家是哪裏一樣_|30元好彩头出奖模式。那麼移動端和pc端交互設計上的區別究竟在哪呢-|财经郎眼余额宝?



大屏到小屏


開門見山-||云顶娱乐下载官网100,移動端和pc端最根本的區別就是屏幕的大小_诺基亚5320xm刷机。屏幕的大小直接決定了界麵信息量_-_校园邪奏曲,pc端一個頁麵可以展示完全的信息可能需要移動端好幾個頁麵來承載|||杭州租房口碑网。


Image title


可能有的設計師覺得|-96900订票,屏幕尺寸不一樣做自適應不就行了-菲丝丽妮官网,移動端頁麵做長一點-|描写大自然的诗歌,讓用戶滑動就可以了众发彩票代理。這是一個非常簡單的處理方案|_|优彩网是合法的吗,但是忽略了一個重要前提-_青春h2之开心老人:用戶願不願意滑動_|虚拟网短号查长号?根據埋點數據顯示-|lily女装代购,多數移動端頁麵超過一屏的內容的曝光與點擊量會急劇下滑_|金清实验小学,說明用戶很少主動滑動去查看一屏以外的內容|-众益彩票简历。對於移動端產品來說_--易彩网app,一些重要的內容必須保證用戶在一屏內可以看到--_易彩彩民福地福彩。


1)信息架構重構


因此-|35彩票app,如果你要為一個pc端網站做一個移動端app-|诺基亚c7最新报价,首先要做的就是信息架構的重構|_银彩注册号码。pc端有足夠的空間可以把所有的功能直接展示給用戶---36选7好彩,而移動端隻能展示一些主要的功能-_亿贝平台登录地址,一些次要的功能需要放在下一層級||男士眼霜推荐。


Image title


例如|-1010彩票安卓,appstore中用戶是可以評價這條評論對自己是否有幫助的_|-长春花卉批发。PC端的處理方式很簡單|_-隋唐大运河各段,直接展示給用戶|注册账号送200体验金。而移動端是需要用戶長按這條評論才可以彈出評價列表的--|牛郎星手套,可能很多用戶今天看了這篇文章才發現原來還有這個功能|-诺基亚n78主题。沒關係|-|湖南省基础教育资源网,之前雖然不知道-|-园区三中,但是並沒有影響你正常使用啊_病变简谱。對次要功能進行適當的降低信息層級是移動端設計師必須要考慮的|_阎玺的微博。


2)一個頁麵||_捡钱街,一個任務


對於上麵信息架構重構的觀點可能會有人存在異議-__360全国彩票开奖结果,對於一些表單類頁麵來說_闪闪宝石,例如用戶要借錢|_|盈彩在线平台、轉賬模拟人生类网页游戏,有些信息是用戶必須要填的|-瑞士鹿喜微断食纤体。在這些場景中|-河南省实验中学校长,我們不擔心用戶不滑動|_易彩堂中80万提现不了,因為用戶不滑動就無法完成操作_|苗知喻。那麼在這種情況下|_|专科学校排名及分数线,是否可以繼續延續pc端的布局樣式|__易投彩票平台下载?


Image title


以上麵的轉賬流程為例|-甄情达,pc端是直接在一個頁麵展示|-_搔脚心漫画,而移動端是分成了兩個頁麵__运城美食。為什麼這樣--4466k最近10天更新?把備注/付款說明也放在第一個頁麵不行嗎_--现任上海市委书记?


因為移動端用戶使用環境更加的複雜多變--永盛娱乐手机,更容易受到幹擾-||西安小苏塘坝鱼,所以必須保證界麵信息的簡單直觀||青楼十2房。如果在一個頁麵中展示過多的信息量-__阿里布达年记,容易讓用戶混亂-28彩官方下载。這裏所說信息量並不是指絕對信息量---李涵辰网站,更準確的說法應該是用戶主觀感受上的信息量||29彩票。同樣的幾個輸入框-_符世画魂,可能在pc端隻占了頁麵的1/4--_永城彩票平台,而移動端占了一整個頁麵-|中国主席名单,給用戶的感觀是完全不一樣的-|朱晓东我型我秀。頁麵塞的滿滿當當---2000彩账号注册,容易讓用戶焦慮_致富彩官方网。


一個頁麵可以完成的任務現在要跳轉好幾個頁麵_暗灵猎手胡大刀,增加了操作步驟-132彩票分分时时彩。用戶害怕“內容多”|_亿彩彩票是什么,難道不害怕“步驟多”嗎|铁路调度系统?不害怕|-仲博平台在线登录,因為頁麵內容量是用戶一眼就可以看出來的--22彩票平台地址,用戶無法立刻感知這個任務有多少步驟_|停车位规范。因為無知|_易彩娱乐福地,所以無畏-|赢彩网下载app。等到用戶知道這個任務步驟數的時候|-|镭波官网,整個任務都已經完成了_优乐彩是不是真实的。


Image title


借唄的這次改版_|-铲形币,用戶要借錢必須先輸入借款金額-_诺瑞斯,其餘的借款期限|_砍死群主、還款方式利息等信息才會展示給用戶-|雷沃斯。這些信息都是跟用戶借款金額相關的--盐都政府网,用戶沒有輸入借款金額-|乐成公立寄宿学校,這些信息展示給用戶意義也不大|--盐都网,不如隱藏__|2019网上能买双色球吗,讓用戶的注意力聚焦於完成輸入借款金額-_-空军副班长。


Image title


沒有一個放之四海而皆準的設計原則-宅急送陈平,所有的設計理論都不能罔顧實際的應用場景而機械的套用__花印药妆。如果前後步驟關聯性比較強||品箫,我建議不要分頁展示|_-3631选7大星走势图。例如-诺基亚n70手机软件,目前很多的短信驗證碼都選擇把“輸入手機號”“輸入短信驗證碼”放到兩個頁麵-_金橘花,我個人對此持保留意見|-|18大全称。設想一個場景_-芬兰语学习,如果用戶遲遲沒有收到短信驗證碼__2017黄播直播app,那麼他需要確定是手機號輸錯了_-|08彩票、網絡故障還是其他什麼原因__4466k最近。用戶需要返回到上一個頁麵查看|||青银高速公路地图,如果手機號和短信驗證碼放在同一個頁麵就簡單多了-_105彩票网址。


3)突出重要信息


前麵我們提到的主要是控製移動端頁麵的信息量--柯达广告。頁麵信息量少就可以了_3M彩票平台?當然不是-105彩票网站,我們來看一下火車換乘的場景_||注册就送18元彩金彩票,如果你要從南京去新疆阿克蘇_078彩票ios,沒有直達的車次-_|我们结婚了110305,隻能從西安換乘快乐向前冲崔璀车祸。我們來看看下麵兩款產品的處理方式|洛克王国金冠冥蛇,左邊是12306--|哥弟女装 2013秋装,右邊是飛豬_|_相逢是首歌简谱。12306還是一股pc端風格迎麵撲來-_北京市长是谁,問題出現在哪-|-1990的彩票台子?12306跟飛豬展示信息量差不多|_|藤原岛子,唯一的區別在於12306展示了兩趟車次各自的起止時間-|_四川特色,而飛豬隻告訴用戶整趟旅程的起止時間|_让爸gank死他。


Image title


顯然問題不是出現在信息量上-||保洁用品专卖,而是對信息的展示形式上-至尊彩到底是国家的吗。用戶更關注的信息--_林嘉仪,應該讓用戶更容易發現--邮政托运价格表。對於一趟車次來說-|-168彩票网官方版苹果,用戶更加關注出發/到達站||众赢彩票导航、出發/到達時間票價-|x小爸爸。對飛豬界麵進行高斯模糊處理-|杨凌职业技术学院代码,發現用戶的視覺焦點正好落在這些重點信息上_-|亿客隆彩票正规吗。


Image title


12306所有的信息都屬於同一層級-_|娱乐赌博软件大全,讓人抓不到主次||-168彩票是国家彩票吗。而且界麵中出現了過多的配色_|陇县关山牧场,更增加用戶的信息獲取成本_-圣三一教堂。


Image title




鼠標到手指


pc端用戶與界麵進行交互靠的是鼠標_普法网络知识竞赛答题,移動端用戶靠的是手指||360时时彩杀码平台。鼠標的操作更加精準-_12306智行火车票,因此移動端界麵中元素的尺寸和間距比pc端的大_|杜兰特3代战靴。以下圖為例_--盈彩彩票是骗局么,左邊是pc端__众赢彩票主页,右邊是移動端--联邦止咳水价格。移動端的輸入框沿用的還是pc端樣式-__106彩票是不是正规的,而且關於利率和手續費的詳情icon過小-|093彩票安卓版,用戶的手指點擊的時候容易誤操作-360双色球精准杀号定胆。


Image title



給你的界麵做減法


前麵我們主要強調了移動端產品要盡量減少界麵中信息量-|-许尚龙。可不可以在不改變產品信息架構的前提下-_劫后余生3 9,通過交互設計上的改動來完成目標呢--_1分快3彩票?我給大家介紹兩個方法||淘1站:場景化關聯化||_雪域藏王散。


1)場景化


在一個頁麵中_--家长会主持人开场白,雖然內容很多-|二胡有几根琴弦,但是用戶真正感興趣並且會與之交互的內容很少|||言承旭和ella。如果我們可以獲知用戶在特定的場景下對於某個內容訴求很高_|西凤酒1952价格表,那麼我們突出展示||_注册送彩金的平台游戏;反之如果訴求很低的話--黑龙江旱情,我們可以隱藏|_花样少女是多大。


舉一個之前說過的例子|-8万以内买什么车好,知乎中--_大连长兴岛论坛,用戶在搜索結果頁滑動大概3屏後__运盛下载,會出現“向知友提問”按鈕|||见一次吧。因為用戶滑動了3屏|-宋茜微博,說明用戶可能對當前的搜索結果不滿意||_12306智行火车电话,這時引導用戶去提問_-|优博彩票,用戶的意願更高-_拱辰丹。如果我們全程展示這個去提問按鈕|198彩注册平台官网,反而會減少用戶的實際瀏覽區域_-星岛田阳子,造成幹擾--_123彩票靠谱吗。


Image title


上麵主要提到了--心跳宝贝之青涩回忆,同一個流程||一级b成绩查询,需要根據用戶不同的使用場景提供不同的功能|卧底军婚。其實即使是同一個功能__-宫商角羽打一成语,我們也要根據用戶不同的使用場景選擇不同的展示形式__38玩彩网下载app。


Image title


還是知乎-|-移动彩票老板叫什么,為了方便用戶可以快速的查看下一個回答-|陈龙 羽毛球,給用戶提供了一個浮動按鈕__彩信铃声。但是這個浮動按鈕-__cfve,當用戶開始滑動頁麵時候就會改變樣式坛缘坊。這個很容易理解|_霓虹灯led动画软件,當用戶剛進入這個頁麵--_2010新年快乐365,為了降低用戶的學習成本_6个男人要过河,我們需要直接告訴用戶這個按鈕是幹什麼的--|中诚快递。當用戶開始滑動進入閱讀答案的狀態_-赢咖输钱了怎么办,縮小按鈕的形態避免對界麵信息造成遮擋_徐子淇八字。


2)關聯化


我們需要梳理信息之間的關聯性|闵行莘庄公园,將相互關聯的信息整合在一起_-东方热线网络测速,進而減少頁麵中信息量--易利主管qq。支付寶賬單的月份篩選功能-陈斌凯,對入口進行了修改|_-设备维护记录表。之前用戶需要點擊日曆圖標__链家地产司歌mp3,現在用戶直接點擊月份就可以了-乐乐滋。用戶要篩選的就是月份|_|三星铃声下载,那麼直接把月份作為入口更加合適|--众乐彩票网靠谱吗。


Image title



總結


以上就是我對移動端和pc端交互設計上區別的簡單分析和總結-||吹情药,如果你有不同的建議和看法歡迎留言討論|-鼓浪屿手绘地图。

藍藍設計www.jwrumpff.com )是一家專注而深入的界麵設計公司-||臧老爷子,為期望卓越的國內外企業提供卓越的UI界麵設計-_常委人数、BS界麵設計 _-_爱唯网、 cs界麵設計 --娃哈哈股票代码、 ipad界麵設計 _春公图、 包裝設計 __天兰尾货市场、 圖標定製 -__横扫天下升阶数据、 用戶體驗 |-淘宝怎么卖东西、交互設計-|如何在淘宝注册开店、 網站建設 _-苏州博客门、平麵設計服務_秦皇岛开心订房网。


標簽: 移動端和 « 重新學習 React (一) 生命周期_|淘宝开店步骤费用,Fiber 調度和更新機製 | 原型設計中的道與術»


訂閱Rss