×

打开微信“扫一扫”,打开网页后点击屏幕右上角分享按钮

×

打开微信“扫一扫”,关注我们官方微信^_^

梦创义官方微信

首页 > 新闻 > 网页设计 > 移动端界面的转化

移动端界面的转化

2015-06-251022分享

1.将界面中相关的元素组织在一起,成为一个组,让它们不被视作一堆散乱且彼此无关的片段。

如果微信的信息列表页面,每一项的名称、时间、摘要只是样式区别却未经组织,就会变得不那么容易阅读,如下(图1)。尤其在列表项很多的时候,将拥挤不堪,让人窒息。

移动端界面的转化

实际的处理方式仅仅是采用了合理的列表项间距,以及每一项当中名称、时间、摘要的分布距离,就能轻松区分出列表项、每一项中内容的关系。秩序井然,符合逻辑,保证了良好的可读性。见下(图2)

\移动端界面的转化

通过组织界面元素,体现亲疏关系,保证条理清晰,不仅做设计时要注意,开发的时候也要重视。

2.任何元素都不能在界面中随意摆放,应该跟界面中的其他元素存在相应的视觉关系。

如果多看阅读的图书详情页面,简介信息和操作按钮随机摆放,像尚未完成的拼图零件,会让人无比烦乱,如下(图3)

实际页面见下(图4),书名、作者、评分、价格左对齐,评分标记星星与评价人数水平方向对齐,阅读与购买、收藏与赠送等根据操作类型分组,各自在水平方向对齐。整洁的排版布局,提供流畅的视觉引导。

\移动端界面的转化

移动端界面的转化

通过将文字信息、操作按钮的分别对齐,来明确它们要传递的信息。一般在设计过程中,很少会出现这种混乱的情况。更多是在开发测试阶段,界面中的类似问题会比较多,尤其是不同尺寸屏幕适配的时候。

3.界面中的元素、样式、空间关系等有意识地在整个产品中重复,以保持良好的一致性。

比如微信的底部功能栏,不管当前在哪个功能模块,它都以相同的风格样式、功能数量、排列顺序出现。不会因为从微信切换到通讯录,就突然多出一个或减少一个功能,或者改变排列顺序。见下(图5)

\移动端界面的转化

(图5)微信统一的底部功能栏

又比如简书,统一采用曙光色作为焦点状态;根据使用场景出现的元素,比如搜索和提醒,采用同样的样式和位置;文章列表在不同的分类下也是统一的卡片样式(白天和夜间模式卡片底色、文字颜色有区别,但是在同一个模式下,对应的样式会始终保持一致)。

\移动端界面的转化

聪明地使用重复的手法,不仅可以强化设计效果、提高信息清晰度,使用户能够快速熟悉和习惯产品,增加认同感,还可以营造成熟、稳定的产品形象。对开发来说,可以减少代码量、便于统一管理和修改。

4.如果两个界面元素要传递的信息不完全相同,就应该在视觉上加以区别,有利于信息阅读。

如多看阅读书城分类列表的书籍信息,见下(图7)。左边的文字样式未做对比区分,虽然能够正常阅读,但是信息层级显然不如右边有对比区分的明确。左边没有字号、颜色的对比,显得呆板不够美观;右边则能够让人阅读得很轻松,并感到愉悦。

\



手机QQ的聊天界面,见下(图8)。左边对界面中现有图形元素作了统一的样式处理,消除了对比,于是可以发现无法区分操作层级,是否可以点击也辨别不出来,并且失去重点。右边是实际界面,图形元素有样式对比,层级明确,是否可点非常明显,业务逻辑体现得充分合理。

\移动端界面的转化


移动端界面的转化

(图8)QQ聊天界面

对比可以有效地组织界面信息,体现信息层级关系,帮助用户理解产品操作逻辑。


  • 基于用户创新

    界面设计日新月异,梦创义坚持基于用户需求的界面创新设计……

  • 服务设计思维

    互联网的格局发生的改变,在我们进行设计服务时更是考虑不同用户、不同……

  • 洞察用户心理

    洞察用户有意识和无意识的行为以及心理特征通过构造一系列的服务来促进……

  • 查看更多 >>

最新新闻Latest News

解读网站结构对收录有什么影响?
这个网站建设市场里,一些企业的网站并不重视网站的内容结构。像内容标……
细谈网建中需注意的一些错误
建一个什么样的网站,是能帮企业来获得成功?对于网站的搭建,这里面是……
建站时需准备什么材料
建一个什么样的网站,是能帮企业来获得成功?对于网站的搭建,这里面是……
提高营销型网站PR值的方法是什么?
就在制作网站时有一个工作重点,便是来快速提高网站的PR值。当然来做营……
静态网页设计的一些特点
网页可以分为静态页面与动态页面两种,但如想网站有很好的排名,也被搜……


ABOUT US

北京梦创义科技有限公司是中国网络新生代的杰出代表。
MCY是由从事多年互联网界研究的海外归国人员于2007年创办,由国内丰富经验的网络工程师与国内外的知名设计师组成,立足北京。

Contact information

手机:13910811300
电话:010-52661970
传真:010-82694569

网址:www.mcykj.com
邮箱:13910811300@126.com
朝阳一部:朝阳区紫芳路九号院广顺园2号楼2605A
海淀二部:回龙观黄平路19号院泰华龙旗广场E座1212室(距西三旗桥2公里,8号线育新站海淀昌平交界)

北京梦创义网站建设的logo

Copyright 2008 ASAweb company. All rights reserved.