极简设计时代怎么用分隔线?看完这个分析你就会了! - 优设网 - UISDC

极简设计时代怎么用分隔线?看完这个分析你就会了!

2017/09/03 14651评论区

@爆裂的墨水瓶 :产品视觉设计中,线是重要的组成部分。起到分隔、分割、占位、细化等作用。然而,当前的设计趋势是趋于简化、强调内容,过多的线会造成视觉负担。如何权衡用线,是这篇文章的目的。

首先从 移动端 开始

Appstore

iOS 11 新App Store的游戏页面

分析:

版式的节奏暂不讨论,App Store用线的长短和位置区分大类和同类。

①长线,我们叫这个为 分割线,这里与整体内容对齐

②短线,我们叫这个 分隔线,这里与文字左侧对齐。

为什么用线:

单元格内的内容算算有5种样式,空间又比较小,用线区分是明智的办法。

总结:

  • 线区分有相似性的内容。
  • 当内容紧凑且样式差异大时,可以用线分开。
  • 分割线(长线)区分大类,分隔线(短线)区分内部类别。

注意:

按照亲密性原则,三条单元格(cell)是一类内容。所以分割线与内容间距要小。

分割线(长线)间距要大。而且分隔线(短线)只分隔cell,与标题之间留白即可。

Airbnb

iOS首页

Airbnb的首页除了tabbar(底部标签栏)和搜索框用了描边外,大部分内容没有线。

但它还是很好的区分开了内容。

原因:

  • 图片起到很明显的区分作用,带有明显的界限。文字与图片对齐。
  • 文字加粗后,更容易与图片取得平衡。

  • 大标题与上组内容间距较大

总结:

适用于较多图片和信息样式简明的情况。

通过颜色对比、距离区分不同组内容,通过亲密性(距离、对齐)把同组内容聚在在一起。

Messenger

  • Facebook的IM应用,iOS

发现聊天消息之间没有线…

原因:

  • 内容较为整齐,没有过多颜色。
  • 头像跟文字垂直居中。

这种用法最近比较多见,但是按下时肯定要有效果的。

Google 日历

  • Google优秀的日程应用,Android

Google的Material Design不提倡大量的线和描边,往往Android应用比iOS的线要少很多。

Android采用的分隔方式包括不限于:

  • 卡片投影
  • 颜色
  • 间距
  • 线
  • 图片
  • 标题
  • 形状

Google Allo

  • Google新一代IM应用

Google Arts&Culture

  • Android的Google 艺术普及应用

Web

web因为屏幕的面积较大,所以线的表现方式更多样一些。

Medium

  • 国外正红的协作媒体平台,最近刚改了版

medium的灰色背景使用范围较少。也就是说在白色背景下,用线和间距区分是主要方案。

为什么他不显得复杂呢?

  • 控制数量,内容块内部尽量不用线分隔,用的是留白。

  • 控制颜色,medium这么做也是他内容风格比较适合,颜色过多真的很容易影响体验。

Behance

Behance讲两个小细节

behance页面一次呈现的作品缩略图是非常多的,这时候像medium用线框就不那么合适了。所以它用的是微投影+卡片式+非常浅的背景。

注意鼠标移动到链接处,下滑线的使用,比变成彩色的效果要克制一些,适合大信息量的产品。

结语

例子其实非常非常多,在你们看烦之前是写不完的。

个人拙见,线与产品使用场景和定位是分不开的,Airbnb的旅游状态和behance的more and more学习状态是有很大不同的。而国内的应用形式是集成式的超级应用,功能繁多,跟国外把差异功能分成多个app是不同的。

移动端跟web线的使用方式毕竟都来源于平面准则,推荐大家看《写给大家看的设计书》,看过的也值得复习。

「塑造优秀细节的微交互」

  1. 《交互|帮你梳理微交互的五个基本要素》
  2. 《走心!优秀的移动端UI应当如何用微交互打磨细节?》
  3. 《超实用!6个方法帮你做出优秀的UI动态微交互》

【优设网 原创文章 投稿邮箱:yuan@www.offshoring-digest.com】

================明星栏目推荐================

优优教程网 UiiiUiii.com 是优设旗下优质中文教程网站,分享了大量PS、AE、AI、C4D等中文教程,为零基础设计爱好者也准备了贴心的知识树专栏??裘夥炎匝缕?,按照我们的专栏一步步学习,一定可以迅速上手并制作出酷炫的视觉效果。

设计导航:国内人气最高的设计网址导航,设计师必备:http://hao.www.offshoring-digest.com

优设大课堂

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:http://www.offshoring-digest.com/separate-lines-in-app

发表评论 加载中....

评论加载中....

uisdc

评论区都快饿瘪了,看看我期盼的小眼神...

设计师 版式设计 扁平化设计 交互设计师 界面设计 排版布局 优设专访 优设大课堂 职场 配色 视觉设计 web前端开发 素材下载 设计流程 AI教程 设计理论 神器下载 字体下载 设计师专访 psd下载 平面设计 设计趋势 用户体验设计 设计规范 海报设计 动效设计 logo设计 图标设计 产品设计 ICON 神器推荐 App设计 职场规划 字体设计 酷站推荐 交互设计 ui设计 设计师职场 优秀网页设计 ps技巧 酷站 用户体验 PS教程 网页设计 经验分享

您还没有登录

优设启用更安全省心的 微信扫码登录

微信扫码

300万设计师聚集地!优设网是极具人气的设计师平台
2012年成立至今,一直专注于设计师的学习成长交流

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里