易捷网络专注企业网站建设
11年企业网站建设经验、响应式网站建设,兼容PC、手机、平板全
终端,给你更佳的浏览体验...

大势所趋!移动端网站设计趋势

来源:网站建设行业资讯网
添加时间:2022-01-17
从移动端兴起,主流设计风格定型,再到Uber、Vine等现象级网站的崛起,移动端的网站设计直到现在才渐入佳境。促成这一切的影响因素很多,比如社会发展趋势的变化、共享经济的大热、新技术的积累,等等等等。这些事物的出现需要时间积累,这也是为什么这些应用到现在才火起来。
随着日常生活中所涉及到的移动端应用的增加,用户在这些东西上的所耗费的精神和脑力也越来越多。查看邮件、预订酒店、叫外卖都有赖于各种应用,而诸如Airbnb和GrubHub这样的优质应用则大幅度减少了用户在无关细节上的精力耗散,可以更好地处理其他的任务,专注于更有价值的事情。用户所面对的任务越多,那些真正能够便捷运用且迎合用户需求的网站所体现的价值就越明显。
也正是在这种语境之下,我们对于网站设计的发展趋势应当有更清晰的了解。今天,让我们来仔细梳理一下目前的网站设计的趋势。

1、为大屏手机设计


对,没错,不管你喜欢与否,大屏幕手机出来已经很久并且成为主流了,但是针对大屏的UI和用户体验设计一直不理想。
设计人员和开发者需要面对逐渐变大的屏幕和拇指长度之间的矛盾,曾经一直被诟病的iPhone的左上角返回键,在现在看来也只是诸多“反人类”设计中好不起眼的一员。与此同时,你不能将所有日常控件都放到右下角,毕竟还有10%左右的用户是左撇子,更不用说许多右撇子用户同样会用左手操作!
当然,给予用户定制空间是一个不错的选择。当年红极一时的“快播”移动网站就曾以“左手模式”而出名,而UC浏览器这样的移动端霸主也在很早的时候加入了左右手习惯判断的设计。当然,这只是大屏手机界面设计的诸多问题中的一个。
排版、交互、使用情景的切换、用户体验设计的变更都是需要网站设计师设身处地仔细思考的地方(比如我一直不习惯FlymeOS的默认字体尺寸,可以看但是不好看)。目前的设计不够好,好在它正在逐渐发展。

2、滑动交互成为主流


当webOS刚刚兴起的时候,精致的卡片、大量的滑动交互、手势操作惊艳了整个移动端设计领域。7年后的今天,滑动手势操作已经成为主流了。实际上,在iPhone刚刚问世的时候,滑动操作和双指缩放这种更贴近物理世界的直觉操作,就已经被广大的网站设计师所关注到,并且这种设计无疑更符合用户的需求——不用在局促的屏幕上点击更加局促的小按钮了。
滑动操作是直觉式的操作,毫无疑问。我们惯于通过连续的触摸来认知外在的事物。在屏幕上滑动可以在现实生活中找到多种多样的对应操作,刷卡,滑动门闩等等等等,经验的转嫁也是如此的直接而自然。
主流的移动端平台已经将滑动交互融入到系统的每一个细节了,并且会有意识地引导开发者运用这种交互方式。现在当你打开应用的时候,你会下意识地通过滑动操作来切换界面,返回上衣级,删除或者查看菜单,难道不是么?

3、可穿戴设备开始影响移动端设计

手机屏幕越来越大,但是可穿戴设备的屏幕则要求够小够好用,尺寸上的巨大差别令网站的界面设计面临更大的挑战。虽然网站leWatch并没有大家想象中那么火爆,但是IDC的数据则表明,2015年厂商出货的可穿戴设备高达4570万台,其中涵盖了手腕上所佩戴的手表/手环类设备、身上佩戴的和眼镜类。
不过,目前关注度较高的依然是网站leWatch和基于AndroidWear的设备,也正是这两大平台将可穿戴设备的热潮带动了起来。可穿戴设备再也不是局限于检测心率和睡眠质量的工具了,它们可以告诉你会在路上走多久,明天的天气,会提醒你为姑妈带晚饭等等等。手腕上的这个小东西有着非常巨大的潜力和无限的可能性,那么它又是如何影响着网站设计师和开发者的工作的呢?
不论是网站leWatch还是AndroidWear都强调一目了然的重要性。不同于手机和平板,智能手表的使用场景截然不同,用户不会长时间盯着看,内容显示要快,要直观,要易于消化,甚至要考虑到用户用眼角扫视这样的情况。这就意味着,这块小屏幕上的版式、色彩、对比度的控制尤其重要。另外,许多应用原本就有手机和平板可用的版本,再设计可穿戴设备的版本之时,需要考虑功能、体验等各方面的取舍。
由于可穿戴设备是新兴领域,现阶段针对它们的设计尤其需要注意应用的可用性、用户反馈,并且针对需求即时更新。虽然网站le和Google对于各自的平台各有一套规范,但是用户的诉求同样是塑造未来设计走向的重要因素。

4、分层布局


扁平化和拟物化本身是就是不同风格倾向下的产物,两者趋近于两个极端,但是并非非黑即白的有效的对立,我们之前所说的扁平化2.0和此刻所提的分层布局,就是两者之间的“灰色地带”。尽管近年来的数字美学自然而然地催生了扁平化风潮,但是在过去几年的摸索中,我们了解了复杂纹理和高度拟物的过度装饰性,同样也意识到了阴影和小幅度渐变即使在扁平化的设计中,一样很重要。
Google的MaterialDesign就非常坦诚地将阴影和分层布局推到台前。尽管整体风格依然非常的扁平化,但是Google的网站设计师从拟物化设计中借鉴来的元素令整个设计语言趋于完善,也更富有人性(如果你是Mac用户,那么你会发现目前的OSX和MaterialDesign同样是扁平和拟物的融合体)。MaterialDesign中的分层结构源于自然,取自于“纸”的物理隐喻,将物体和物体之间的相互关系用色块和阴影表达出来。
这种典型的分层结构,令虚拟的对象拥有了物理属性,色彩和阴影构建出空间关系,相对运用的速度反映出对象的重量和惯性,透过触摸屏你似乎在和实实在在的物体进行交互,这又何尝不是更为高明的“拟物”呢?优雅的体验,拟真的操作,这就是分层布局的独到之处。

5、更多动效

我们的手机所拥有的计算能力,已经超过了登月时的整个NASA。4G通讯协议的覆盖使得应用对于信息的获取也比上一个时代更加快捷高效。加之技术的发展,网站所能承载的信息量也不断增加。所有的这一切造就了今天的网站设计,过度越来越有味道,动效开始承载着引导、提醒、过渡的功能,网站也不再全是借由简单的通知来同用户进行信息沟通,每一个震颤和回弹的效果都可以传达出信息,而这一切,让网站更加自然而智能。
6、更加简单柔和的色调
就像时尚圈每年都有流行色一样,设计圈的用色习惯每年也都在改变。从大的方向上来看,我们似乎越来越着迷于简单柔和的色调了,而这也是整个设计方向向着极简主义进化的自然结果。这种配色在目前的需求下有着天然的优势,如果采用某个单色不同色度的配色方案,搭配白色字体和少量有对比的元素,或者试试两三款清爽柔和配色,你可以很快出一套非常不错的视觉稿。
考虑到用户长时间盯着屏幕,柔和的色调和清爽的配色会让用户注意力更少分散,毕竟强对比度的色彩还会加重视觉负担。如果你的网站设计采用这种配色,不仅会更富于设计感,而且让用户觉得更流畅,更舒适。
7、更注重排版
视网膜屏幕的兴起毕竟是近几年的事情,在过去很长的一段时间里,移动端和网页上的字体分辨率都比较0。随着移动端的高度进化和Typekit等服务的出现,字体清晰度的提升,让网页和网站的排版布局拥有了更多的可能性,网站设计师可以借由不同的字体和多样的图片搭配出更有表现力的设计,即使是在移动端设计上,这种趋势也越发明显。文字和内容很重要,借由字体、排版、图片的搭配来合理呈现,就不是1+1=2这么简单了。

8、网站内置模糊效果


借由背景虚化和半透明效果来提升网站在视觉上的可用性也是设计趋势之一。相比于纯色背景,用户更倾向于使用图片,虽然提高了个性化,但是会让背景层以上的图标、控件在视觉上无法清晰分辨。网站内置模糊和半透明效果可以缓解这种视觉上的障碍,可读性,又保留了用户所追求的定制化效果。

9、移动端可访问性的创新

设计和技术的革新让各种设备和网站的可访问性得到了极大的提升。滑动手势、TypeKit、动效等都是可访问性创新和提升的产物。目前国产手机中内置的“老人机”模式就是可访问性创新的成果之一,它简化了交互,解决了一部分视觉障碍用户的阅读问题。
不过,提升可访问性和可用性并不是简单的放大字体或者调整就可以解决的。网站的可用性,你需要对它的可访问性有更深入的批判性思考。当它进入“老人机”模式的时候,布局能否适应字体大小调整之后的界面?多选控件是否会随着放大并且看起来协调而易于操作?等等等等。

10、更智能的原型


移动端网站的设计越来越复杂,随之而来的设计和开发也越发的系统、琐碎。简单的静态图和线框、引线已经不足以呈现整个设计的细节,一味地要求客户脑补也解决不了问题。好在我们现在拥有了诸如UXPin、Proto.io这样的新工具。
无需进行复杂的编程来呈现原型的细节和过程,网站设计师可以借由这些进化中的新工具无缝地呈现他们的想法和构思。原型设计会越来越智能,设计流程也会随之调整匹配。

【用户体验纯干货,赶快来收!】

用户体验设计趋势:
《设计行业大起底!图说2015用户体验行业调查报告》

网站用户体验指南:
《就这么简单!搞定网站的用户体验设计》

网页设计问题:
《躺枪!看看影响用户体验的设计问题》



网站建设计最新案例赏析:


深圳华力兴新材料股份网站制作首页设计效果图
深圳华力兴新材料股份
东莞索诚电子网站制作首页设计效果图
东莞索诚电子
深圳信可威空间规划设计网站制作首页设计效果图
深圳信可威空间规划设计
深圳华测实验室技术网站制作首页设计效果图
深圳华测实验室技术
广州捷伦达实验室设备网站制作首页设计效果图
广州捷伦达实验室设备
上海艾艺信息技术网站制作首页设计效果图
上海艾艺信息技术
深圳共安智能科技网站制作首页设计效果图
深圳共安智能科技
深圳四强科技网站制作首页设计效果图
深圳四强科技
深圳华璨文化传播网站制作首页设计效果图
深圳华璨文化传播
深圳市航冠实业网站制作首页设计效果图
深圳市航冠实业
 

网站建设行业资讯推荐阅读:


网站优化必需方法事倍功半怎样开展网站建设手机网页设计必须留意什么难题 靠谱的网站设计制作联系方式 有实力的网站设计制作哪个品牌好 网站制作的原则 靠谱的网站设计制作公司定做 模板网站制作的缺点是什么分享网站优化的基础是什么优秀的企业网站设计有哪些特点企业建站对虚拟主机流量有要求吗SEO优化新手教程指导步骤JSP基础知识网站SEO优化发外链方式汇总关于网站遇到问题如何技巧性的解决及思考解析三个重要点让网站运行做到轻松加愉快深圳网站建设带您认清前端与后端网站建设有标准,空间,域名,网站程序不可少怎么制作公司网页有哪些步骤深圳网站建设对营销型与普通网站对比可靠的网站设计制作包含哪些内容上市公司网站建设应该具备哪些功能和要点网站建设,高端网站设计收费有哪些规范深圳网站设计价格,如何设计落地页提高转化率怎么做才能让网站排名始终靠前,深圳网站建设制作 网站建设中为不人知的七个小技巧深圳网站建设之Web服务器的安全配置深圳网站建设中较容易影响用户体验度的因素有哪些企业网站建设设计时必须注意的五点问题!微网站的开发建设主要作用有哪些定制软件哪便宜哪靠谱什么是定制软件开发做网站怎么定位才能突破网站建设技术难点有哪些做网站应注意网站栏目的合理布局企业在注册网站域名时需要注意哪些问题百度查找成果的标题显现多少个字2021年网页设计的10大趋势(二)加强政府网站信息内容建设实施意见浅谈改善用户体验的几个最基本途径渠道的选择对网络营销的重要性深圳福田专业网站建设公司,企业为什么要进行网站建设更适合的网站建设-云服务器深圳网站建设中需要注意哪些细节iPhone6大屏手机与其他大屏智能手机的区别深圳福田网站建设哪家公司好,企业定制网站建设与模板网站的区别是什么网站建设需要注意哪些事项决定改善网站设计之前先要制定改进计划提高表单的填写效率企业网站需要做哪些日常维护网站设计是网站成功与否的关键要素网络营销如何才能留住客户单页营销网站的利弊分析企业网站改版需要注意哪些问题分享UI设计准则减少内容重复避免浏览器惩罚深圳企业网站建设的基础分类一般包括哪些网站改版需要注意什么内容深圳网站建设之医疗行业网站的关键词如何定位优质网站建设应具备的特点
企业网站建设行业信息服务发布平台!
(www.fantodo.com)版权所有
QQ在线咨询