PhoneGap中文网

 找回密码
 立即注册
查看: 23687|回复: 0

PC端与移动端在UI设计方面什么区别?

[复制链接]

87

主题

87

帖子

327

积分

中级会员

Rank: 3Rank: 3

积分
327
发表于 2017-8-24 11:15:35 | 显示全部楼层 |阅读模式
每当我们去求职或者跟同行交流的时候,或多或少都会问问PC端与移动端在UI设计方面什么区别,比较明显的区别到底在哪些方面呢?
  其实,人家考核你的能力就是多平台用户界面设计的转换能力,需要UI设计师要基于小屏幕的交互来思考整个设计和优化的策略。
  不妨可以跟Hr面试官聊聊下面五个方面的区别。
  1、更大的展示字体,因为屏幕小了。
QQ截图20170409201802.png
在小屏幕上显示的内容,应该适当地增加大小,让用户能够更轻松地阅读和消化。通常,在移动端上,每行容纳的英文字符的尺寸在30~40个最为合理,而这个数量基本上是桌面端的一半左右。
  在移动端上排版设计要注意的东西还有很多,但是总体上,让字体适当的增大一些,能让整体的阅读体验有所提升。
  2、排版布局的尺寸和形式的优化
QQ截图20170409201802.png
PC端迁移到移动端,应该让用户更易于访问,形态也需要跟随着平台的变化而进行适当的优化和修改。对于整体尺寸和排版布局的设计,应该更有针对性。
  比如大量的大尺寸的图片需要跟着移动端的需求而进行优化,考虑到移动端设备上用户的浏览方式,图片最好被切割为方形,或者和手机屏幕比例相近的形状;比如选择尺寸更合理的图片,放弃不匹配移动端需求的JS动效等。所有的按钮或者可点击的元素都按照用户的手持方式,放到手指最易于触发的位置
  3、移除不必要的特效
  在PC端网页上,旋转动效和视差滚动常常会让网页看起来非常不错,但是在移动端上,情况则完全不同。内容在迁移到移动端的网页和APP上的时候,效率和可用性始终是第一需求。快速无缝的加载和即点即用的交互是用户的首要需求,剥离花哨和无用的动效,会让用户感觉更好。
  作为UI设计师,你需要围绕着点击和滑动这两种交互来构建移动端体验,悬停动效要去掉。移动端上手指触摸是主要的交互手段,悬停动效是毫无意义的存在。
  4、精简优化导航体系
  当用户打开APP的时候,他们通常倾向于执行特定的操作,访问特定的页面,或者你希望他们点击特定的按钮,所有的这些操作能否实现,大多是要基于导航模式的设计。
  在PC端网页上,一个可用性较强的导航能够承载多个层级、十几个甚至20多个不同的导航条目,但是在移动端上,屏幕限制和时间限制往往让用户来不及也不愿意去浏览那么多类目。
  移动端的导航需要精简优化,不用沿用PC端的导航模式,可以采用侧边栏或者底部导航等更适合移动端的方式。搞清楚整个导航的关键元素之后,就可以有针对性地做优化和调整了。
  5、每屏完成一项任务即可
  虽然手机的屏幕越来越大,但是当你的内容在移动端设备上呈现的时候,依然要保证每屏只执行一个特定的任务,不要堆积太多的内容。
  用户的习惯和多样的应用场景使得移动端界面必须保持内容和界面与内容的简单直观,这样用户在繁复的操作中,不至于迷失或者感到混乱。
  那么怎样保证这种清晰的体验呢?让你使用的所有UI设计元素都用来帮助户作出执行操作的决定就可以了!
来源:网络

it营
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关闭

站长推荐 上一条 /1 下一条

ionic4视频教程

Archiver|手机版|小黑屋| PhoneGap中文网 ( 京ICP备13027796号-1 )  

GMT+8, 2024-5-20 23:12 , Processed in 0.040705 second(s), 33 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表