广州总部电话:020-85564311

TOP

收起快捷

首页 > 关于途必 > 途必学院 > 优秀移动端设计的六个核心点
优秀移动端设计的六个核心点
发布日期:2017-01-20 08:35:52
浏览次数:
来源:广州网站建设

不知道大家有没有发现,每当一个领域趋于成熟的时候就会呈现出诸如“套路”这样的东西,移动端APP/网页设计也是这样,在用户和设计师不断的磨合的过程中,约定俗成一些规则,这也可以说默默形成了一个套路。其中优秀的移动端设计都拥有一个有共性:它们在基本的功能和设计上的执行都相当的完美。那么其中的套路是怎样的呢,今天我们就来聊聊优秀移动端设计的核心点有哪些。
一、有效的排版设计
不论你所设计的是网页还是APP,其中的文本构建起了用户和你的产品之间的明确关系,所有的文本都在帮助用户抵达他们想要的那个目标。所以,排版设计在交互中扮演着相当关键的因素。文本的大小和屏幕上的整体布局设计,对于用户的阅读体验有着巨大的影响:当文本过小,而行间距和字间距也比较紧凑的时候,用户需要更长的时间来对内容进行识别,而许多用户干脆会跳过其中的许多内容。在移动端上出现这样的问题之时,则显得更加严重:过小的字体在一块明亮的小屏幕上显示,低下的识别度和炫光让用户更加头疼。排版对于移动端用户而言,影响更大。

移动端的文字排版的核心技巧在于,平衡易读性和空间利用率。当你在为移动端界面设计文本排版的时候,需要选择合理的字体尺寸和间距,这两个因素是关键的影响因素。字体尺寸需要足够大,确保绝大多数的用户能够识别,而足够的间距则保证小界面上内容的呼吸感,不会让人觉得局促。当然,这些是底线,字体和间距并非越大越好,适中而舒适才是终目的。

iOS 平台上Medium 的客户端的字体和间距的设计就是很好的参考范例。
小贴士:为了确保移动端设备的可读性,英文文本控制在每行30~40个字符,中文文本控制在20个字左右。如果是在桌面端,英文字符通常控制在60~75个字符之间,会让人阅读起来比较舒适。
二、简单的配色方案
色彩是视觉设计中复杂的部分。太过繁复的色彩有时候会让用户感到不适,简化配色方案往往能够很好的提升整体的体验。学会对复杂的配色方案说不吧。如果简单的配色方案让你的设计看起来略显单调,不妨通过新增现有色彩同色系不同饱和度、明度的色彩,生成丰富而不至于繁复的配色方案。

蓝色的单色调配色方案
下面的APP设计案例采用的就是单色配色方案,通过同色系不同色调、饱和度的色彩来构成一个紧凑而不单调的配色方案。

小贴士:从零开始创建配色方案有很多技巧,本身并不复杂,可以参考我们的文章、借助合理的工具来创建配色方案。如果现有的配色方案本身比较单调,或者整体偏中性,那么不妨增加一种明亮的色彩,让它能够更好的吸引用户的注意力,简单又不失个性。


三、基于内容的卡片式导航模式
不管你想在你的应用或者网页中呈现什么样的内容,你总是希望你的用户能够仅可能方便、完整地体验到它们。基于内容的导航模式的思路在于,尽量让内容的概述和详情两种状态能够无缝地切换,而卡片式设计和这种设计模式为搭配,因为卡片式设计能够统一而自由地组织内容,并且很容易消化大量不同类型的内容:
·卡片将用户划分成更有意义的区块,让屏幕的利用率更高。就像不同的文本段落组成文章一样,卡片式设计将不同类型的内容用卡片承载着,构成连贯的信息流。
·卡片是为移动端触摸交互而生的。用户无需学习就能够直观而自然的点击、滑动、翻转卡片交互,这是基于现实世界的物理规则的设计。

小贴士:想要让界面真正意义上地“隐形”,那么就专注于内容吧。
四、层次与深度
桌面端和移动端之间明显的差异大概就是屏幕尺寸的大小了。由于移动端设备屏幕尺寸上的局限,越来越多的移动端APP设计开始试图在界面层次和深度上做文章,让界面拥有“厚度”,在原有的平面上增加一个“Z轴”。

图层让界面拥有了深度,让体验更加真实
分层式的界面设计甚至成为了Google的Material Design的核心设计原则,它参考了现实世界中人们同不同的物体进行交互的方式,将这些物理法则融入到界面交互当中。表层和投射在背景中的阴影则在界面层次中起到了重要的作用,它将不同控件和元素分隔为不同的层。

分层界面中常见的元素和特征:
·浮动的操作按钮。通常常用的、推荐的操作被集成在这些浮动按钮中,通常你需要点击界面顶端浮动的一个圆形按钮来展开全部的浮动操作按钮。

·放大和展开。在分层式界面当中常见的一个例子,就是当你点击列表中一个条目的时候,就会展开呈现其中的细节,随后你还能返回收缩让你看到完整的列表视图。

·置顶导航。保留必要的菜单,当用户操作的时候,常驻屏幕顶端,便于操作。

 


·典型的弹窗。就像桌面端的弹出式提示框那样,叠加在现有界面上的提示框,让用户登录、提示信息,甚至是展现广告。

小贴士:简化你的流程,每一屏好只用来做一件事情。
五、熟悉的手势
基于手势的移动端交互,改变了我们同智能设备沟通和操作的方式,屏幕不再只是单纯的触摸点击的目标,更为复杂的滑动和多点触控让手势操作带来了更多的可能性,从缩放、返回到删除,我们可以进行的操作越来越多,一些约定俗成的手势操作规则也逐步成型。

越来越多的APP开始依赖手势操作,而屏幕上的按钮也越来越少,为有价值的内容腾出了更多的空间。这样一来,APP本身也越来越专注于内容的呈现。

小贴士:当我们谈及标准化的手势操作的时候,其实也是在强调手势的“直觉性”和通用性。当你想要在手势操作上玩创意的时候,好三思而后行。手势操作本身带有一定的隐藏性,所以,如果没有一定的视觉引导,用户可能会感到迷惑,不知道要如何同APP进行交互。
六、功能性的动效
这里所说的功能性的动效指的是那些嵌入到用户交互流程、使用过程中的微妙的动效设计。它们充当界面和交互之间的协调人和连接器:
·提供视觉反馈:

当用户看到这些作为触发反馈的动画效果的时候,就明白他们的操作完成了。
·平滑过渡,让用户注意到改变:

图标的变化在不同的阶段可以起到不同的效果。
小贴士:微妙的动效能够巧妙的连接不同的界面和状态,提升用户体验。但是千万不要滥用动效,专注体验,而不是为了使用动效而添加动效。
以上其实都是做好优秀移动端设计的基本设计,要想成为真正优秀的移动端设计还得去探索属于自己的特色。

责任编辑:途必设计部

版权所有:http://www.uweb.net.cn (优网科技) 转载请注明出处

关闭
推荐新闻
童心无界 童萌有礼——六一儿童节活动来啦!
童心无界 童萌有礼——六一儿童节活动来啦!
六一儿童节是属于“孩子们”节日,不管是天真卡爱的小朋友,还是童心未泯的大朋友。跟着我们一起重回童年,让童心出发吧。
2024.06.03 10:56:04
途必科技十一月生日会--关怀与爱
途必科技十一月生日会--关怀与爱
时隔一个月,又迎来了我们可爱小伙伴们的生日,本月有好几位的寿星生日。途必科技为了关怀员工,特地举办了此次的集体生日会活动,并且还有很多丰富的小吃零食,饮品饮料,当然更重要的蛋糕也是不可或缺的。
2023.11.29 10:57:26
一起成长---十月途必科技员工生日会
一起成长---十月途必科技员工生日会
秋高气爽的季节里头,我们迎来了十月份途必科技小伙伴们的生日,在这个温馨的聚会里一同感受着生日的快乐,能在工作繁忙之余享受到节日带来的温暖。每一次的生日会都是大家在共同的成长,当然啦,成长的路上少不了磕磕碰碰,但是在我们的人生里头,总会相遇温暖,陪伴左右,成长也就变得更加有意义。
2023.10.30 09:29:30
温暖与你同在-八月途必科技小伙伴生日会
温暖与你同在-八月途必科技小伙伴生日会
在每个人成长的背后,总会有温暖相伴,像在途必科技的大家庭里,大家都可以感受到这样的氛围,又温馨,有爱。也许有时候自己都忘了的生日,却是有人记得你的生日,有人愿意为你祝福,这又何尝不是一种温暖呢。途必科技与大家一同成长,也将爱送给大家,途必科技对出席生日会的每一位小可爱表示热烈的欢迎和衷心的感谢,同时也为八月份生日的寿星们送上美丽的祝福~祝愿可爱的寿星们天天开心,心想事成,身体健康,另外也希望每位途必科技的小伙伴在未来的工作中越来越顺利,生活里也越来越好。
2023.08.30 10:32:55
这次圣诞节,我们玩大的
这次圣诞节,我们玩大的
这次的圣诞节,我们玩大的,为了让大家感受到如火热情般的圣诞节,此次带来了很多不一样的玩法和活动。行政人事部代表途必科技给大家制造了很多不一样的惊喜,在这里你可以收获丰富满满的礼物,漂亮小姐姐和可爱圣诞老人的合影,小伙伴们其乐融融的氛围,
2022.12.25 17:00:04
推荐案例
眼光高度决定品牌厚度!
业务展示
专业团队,品质服务

预算不足没关系,

这里

广州市途必企业管理中心(有限合伙)版权所有 粤ICP备2020085998号 Copyright © 2023 All Rights Reserved
 
扫码咨询

专属顾问
扫码咨询您的优网专属顾问!