恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
移动端UI中的视觉分隔设计技巧
0.0°
2017-04-07 好文转载 经验/观点 原作者: 海淘科技 举报 2847 10 11 0

传统的分隔线在桌面端的UI设计上有着悠久的历史和不错的效果,但是它们在移动端UI上有着致命的缺陷:占用空间。

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

传统的分隔方式

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

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


1、全出血位分隔线

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

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


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

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


2、内嵌分隔线

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

分隔线的替代方案

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

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

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

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

1、留白

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


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

留白如果能够使用的恰当,用在对的界面上,就可以让界面以亲和有力的方式来区分不同的区域和元素。延伸阅读:新闻类网站设计五个特点

2、色彩对比

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

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


3、阴影和高度

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

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


另一个功能是用来区分的影子重叠内容“高度差”,介绍了关系,他们的一部分来吸引用户的注意力。延伸阅读:装修网页设计欣赏

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

使用网格显示的图像内容,它是没有专线或其他东西分开,因为网格本身视觉区别已经发挥了重要作用。在下面的示例中,图片和字幕都扮演一个角色之间的留白。

更新:2017-04-07

收藏

10人已收藏

上海海淘科技

海淘科技,国内先进的网站建设服务商

  • 65

    作品

  • 124

    粉丝

  • 7

    关注

  • 电商页面设计色彩搭配大盘点,快来拿
  • 怎样做APP界面视觉改版,这简直太神了
  • 原创教育网站设计作品
  • 最新的地产网站制作案例

    猜你喜欢

      2017-04-07 好文转载 经验/观点 原作者: 海淘科技 举报 2847 10 11 0

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

      0.0°

      你确定要举报移动端UI中的视觉分隔设计技巧

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2017年04月07日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      11
      10
      0

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录