广州总部电话:020-85564311
广州总部电话:020-85564311

广州网站建设-小程序商城开发-广州小程序开发-企业微信开发公司-网站建设高端品牌-优网科技

18年
互联网应用服务商
请输入搜索关键词
优秀移动端设计的六个核心点
发布日期:2017-01-20 08:35:52
浏览次数:1352

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

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

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

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

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


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

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

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

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

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

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

 


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

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

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

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

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

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

责任编辑:优网科技

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

优秀移动端设计的六个核心点

日期: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 (优网科技) 转载请注明出处

上一篇 返回列表 下一篇
推荐案例
眼光高度决定品牌厚度 !
广州网站建设-大良实验小学系统开发
广州网站建设-大良实验小学系统开发
大良实验小学于1998年成立,占地4万5千多平方米,是顺德区规模的民办学校之一。现有71个教学班,学生3223人,教职员工436人。学校按广东省一级学校标准建设,配有图书馆、舞蹈室、管乐室、多媒体电子琴室、实验室、英语乐园等功能场室36个,还拥有大礼堂、羽毛球馆、生物园、地理园、游泳池和200米塑胶运动场等活动场所。学校先后荣获“广东省一级学校”、“全国少先队红旗大队”、“广东省首届优秀书香校园”、“广东省书法教育名校”、“广东省综合实践样本学校”等光荣称号。
广州网站建设-海天味业公众号开发
广州网站建设-海天味业公众号开发
海天是中国调味品行业的优秀企业,专业的调味品生产和营销企业,历史悠久,是中华人民共和国商务部公布的首批“中华老字号”企业之一。目前生产的产品涵盖酱油、蚝油、酱、醋、料酒、调味汁、鸡精、鸡粉、腐乳等几大系列百余品种300多规格,年产值过百亿元。
广州网站建设-中凯网站建设
广州网站建设-中凯网站建设
中凯(海南)控股集团有限公司本次项目是集团网站建设,与优网科技合作过程中,双方配合默契,保质保量的仅一个月就完成了整站建设。优网科技帮助中凯(海南)快速树立了一个集团专业形象展示,同时网站的设计效果、体验和交互也让中凯(海南)非常满意。
广州网站建设-中国联塑网站建设
广州网站建设-中国联塑网站建设
中国联塑集团控股有限公司(简称:中国联塑,股份代号:2128.HK )是国内大型建材家居产业集团,产品及服务涵盖管道产品、水暖卫浴、整体厨房、整体门窗、装饰板材、净水设备、消防器材、卫生材料、海洋养殖、环境保护、建材家居渠道与服务等领域。
广州网站建设-前海益广网站建设
广州网站建设-前海益广网站建设
深圳前海益广股权投资有限公司成立于2016年04月18日,注册地位于深圳市前海深港合作区前湾一路1号A栋201室,经营范围包括一般经营项目是:股权投资;受托管理股权投资基金;受托资产管理;企业管理咨询、经济信息咨询;投资兴办实业等。
广州网站建设-萨米特高端品牌网站建设
广州网站建设-萨米特高端品牌网站建设
佛山市萨米特陶瓷销售有限公司始于2000年,在陶瓷行业风潮中发展壮大,是新明珠陶瓷集团的核心品牌。萨米特瓷砖注重营销系统的升级与消费体验模式的实施,倡导“设计+生活”的品牌理念,致力于打造有温度,有态度的瓷砖品牌。用设计提高人居价值,以创新驱动行业发展,与全球不同国家和文化背景的消费者共享美好家居。
广州网站建设-欧迪克网站建设
广州网站建设-欧迪克网站建设
佛山市南海欧迪克五金制品有限公司始创于2003年,致力于发展高端硅镁铝合金安全门窗,木铝门窗、阳光房定制,集研发、生产、销售、服务于一体。自创立以来,系列产品畅销大江南北,获得由权威媒体及单位颁发的多项殊荣。目前为止,“欧迪克门窗”的专卖店遍布全国800多个县市及地区,共有1000多家专卖店辐射全国。
广州网站建设-好太太网站建设
广州网站建设-好太太网站建设
好太太集团是一家集研发、生产、销售、服务于一体的智能家居企业,产品与服务涵盖智能晾晒、智能锁、智能电器等众多领域。坐落于广州番禺区,自1999年始便致力于打造 “好太太”品牌,经过将近二十年的发展,如今好太太已成为全球的晾衣架行业研发、生产、销售、服务商,在中国拥有近2000万户家庭在使用好太太产品。好太太集团于2017年主板上市,成为智能晾晒领域首家A股上市企业。
广州网站建设-中山公用水务网站建设
广州网站建设-中山公用水务网站建设
中山公用事业集团股份有限公司成立于1998年,是一家国有控股的上市公司(SZ:000685)。公司坚持“产业经营+资本运营”双轮驱动的战略思路,定位环保水务为核心业务,通过提升环保水务板块的产业经营能力,与资本运营平台协同增效,致力打造行业内有影响力的领先企业,积极担当社会责任和环境保护的公民企业,促成员工实现自身价值的平台企业。
广州网站建设--华标集团物业公众号
广州网站建设--华标集团物业公众号
华标集团物业为了进一步提升服务质量,满足业主的多元化需求,采用微信公众号作为服务平台,为业主提供日常物业缴费、报事报修、社区活动等便利性服务。本次量身定制的微信公众号,旨在打造一个高效、稳定、便捷的线上服务平台,让业主享受到更加贴心、便捷的物业服务。
广州网站建设-欧派家居集团官网建设
广州网站建设-欧派家居集团官网建设
欧派集团官网作为欧派对外展现品牌形象、传达服务理念的重要信息平台,也向用户展示了欧派最新的资讯和相关的售后服务。优网作为欧派集团的信息化战略合作伙伴,本次的官网开发基于专业的设计水平和扎实的技术能力,为欧派的互联网品牌形象全面升级。
广州网站建设-康臣药业网站建设
广州网站建设-康臣药业网站建设
康臣药业集团(HK.01681)是一家主要从事现代中成药及医用成像对比剂研发、生产及营销的现代化制药企业,创立于1997年,于2013年12月19日在香港联合交易所主板上市,旗下拥有广州康臣药业有限公司、康臣药业(内蒙古)有限责任公司、广西玉林制药集团有限责任公司、广州康臣药物研究有限公司等从事药品生产和研发的企业,运营康臣、玉林等知名医药品牌,在国内建有广东广州、内蒙古通辽、广西玉林等3个生产基地,员工逾2000人。
专属顾问 专属顾问
扫码咨询您的优网专属顾问!
专属顾问
马上咨询
扫一扫马上咨询
扫一扫马上咨询

扫一扫马上咨询

展开菜单
关于我们
优网观点
项目动态
公司新闻
优网学院
常见问题
收起菜单
活动会议应用
答题应用
班车预定应用
应急值班表应用
春节活动应用
活动直播应用
内部培训及任务应用
返回上一级