欢迎访问智唯网络!专业H5响应式营销型网站建设、百度seo优化、网络推广服务!
营销之道 干货分享
了解企业新动态,分享前沿的营销推广干货,成长路上,我们携手同行
网站设计News

移动端UI设计中视觉分隔技巧

发布时间:2017:10:03 14:31:03 | 已阅: | 作者:智唯小编 | 来源:智唯网络 | 共 0 条评论

扫一扫
手机访问

本文共有1533个文字,预计阅读时间4分钟
导语
海淘科技指出:许多app应用程序并不复杂的布局,那么一看的话,觉得还可以设计的,但是当你真正开始设计一个原型应用程序,会发现它并不那么简单。看别人已经完成设计可能会觉得很

智唯网络指出:许多app应用程序并不复杂的布局,那么一看的话,觉得还可以设计的,但是当你真正开始设计一个原型应用程序,会发现它并不那么简单。看别人已经完成设计可能会觉得很容易,但当自己动手特定元素的选择和设计是很容易落入陷阱,这时间来理解它的难度不在于多少工作量,设计师常常陷入细节建造监狱,这是它的难度。即使是元素和元素之间的分离,不能随随便便用一整篇文章来讨论。

传统的分隔方式

在UI中,线是较为传统的和非常普遍的分离方法,在视觉上和内容上的内容需要区分辨别与横线或竖线,它帮助用户了解页面的层次结构,给组织的页面内容。


1.jpg

1、全出血位分隔线

全出血位本来是一个在印刷中的概念,在此用在移动端视觉分割设计上,,一般来说是用来显示和强调不同的内容和块像不同的邮件将使用分离的细线来划分整个屏幕。在Android Gmail的用户界面,使用分界线充满流血分配器。分离线给人以“停止”的感觉,让用户知道线路清晰。


2.jpg

全出血位分割线将每一个部分都分隔开来。

2、内嵌分隔线

内联分离线和全出血位分割线是不同的,它一般是用来区分相关要展现的内容,如不同信联系人列表的一部分,通常用作视觉线索,为了方便用户浏览大量相关内容,当用户浏览时,他们将作为路标,方便用户快速翻页浏览。视觉上,全出血分界线是不同的,他们通常是有点短,并将留一些空间用来区别其他的元素,如在联系人列表的第一个字母。


3.jpg

分隔线的替代方案

传统的分隔线在桌面端的UI设计上有着悠久的历史和不错的效果,但是它们在移动端UI上有着致命的缺陷:占用空间。的确,一条线能有多占空间呢?但是实际上,往往一屏需要分隔的内容会很多,分隔线一点也不少。如果参考传统的用法,一个界面元素较多的移动端页面上可能会充满了分隔线构成的视觉噪音。值得注意的是,现在用户越来越倾向于简约的界面,这也使得如今的UI设计会尽可能多的剥离次要元素,而仅保留基本元素。这种转变背后真正的重点,是设计重心向着内容和功能转移,这样的设计自然而然地会让界面看起来更加简洁。

传统的分界线在桌面的UI设计中有着长远的历史,设计的最终所展示的效果也是不错的,但是它们在移动端用户界面有一个致命缺陷:占用空间。确实,一条线可以占空间?但事实上,很多内容往往需要一个屏幕空间,分界线往往是不能够少的。如果参考传统用法,移动终端界面元素更多页面可能充满了视觉噪声成分的分界线。需要注意的是,现在用户越来越倾向于简单的界面,它也将使今天的UI设计尽可能分离仅次于首要的元素,和仅保留最基本的元素。

这一个设计转变的过渡实际上,在它的背后是内容和功能转移,所以整个界面看起来比较简洁

通过这种方式,使用空白界面元素也就是所谓的留白更合适,而不是分界线。分界线较少的使用让整个界面看起来更清爽,更现代化,在视觉上富有冲击力。

1、留白

过多的留白可以让原本杂乱无章的界面看起来简单的和有吸引力的,因此不会放置任何与页面相关的视觉元素——让界面元素是空出来,让这些元素更加引人注目,脱颖而出。留白让界面看起来更充满气息的感觉,也更简洁。


4.jpg

留白如果能够使用的恰当,用在对的界面上,就可以让界面以亲和有力的方式来区分不同的区域和元素。

2、色彩对比

色彩对比是最强大的设计手法之一,如果使用,它可以为你带来一个聪明和英俊帅气的设计。创造性使用色差来区分不同的内容,关键是要控制两种颜色对比。不仅在视觉上很容易区分,但不能让人感觉突然觉得戏剧感。如果色彩对比控制好,应该能够让用户更快速和方便地访问信息。


5.jpg

3、阴影和高度

阴影和高度可以创建UI界面所谓的深度,那么让元素产生的不同是在三维坐标Z轴的高度。最典型的材料移动端设计是谷歌日历的设计显示了如何借助影子和空间,非强制性区域分为不同的部分。


6.jpg

另一个功能是用来区分的影子重叠内容“高度差”,介绍了关系,他们的一部分来吸引用户的注意力。

4、图片内容无需单独的分隔控件

佛山网站建设优化公司 智唯网络

专业建站,免费排名「快速上首页」5年建站优化经验

免费上首页>>马上咨询
专业建站 免费排名(有什么疑问的请留言或咨询在线客服)
  • 全部评论(0
    还没有评论,快来抢沙发吧!

上一篇:广州会议活动类网页设计

下一篇:移动App应用设计和动效原理

  • 同行价格

    统一报价,无隐形消费

  • 金牌服务

    一对一专属顾问,7*24小时金牌服务

  • 售后无忧

    完善售后,客服经理全程跟进

建站优化二维码
建站优化二维码

截屏,微信识别二维码

微信号:13825575516

(点击微信号复制,添加好友)

优化二维码打开微信