首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

UI 设计中的七个实用技巧

6.使用强调边框为平淡的设计添加色彩

如果我们的手绘和插画能力比较薄弱,设计出来的界面只有简单的文字和卡片,怎么办?有一个很实用的方法是添加强调边框,就像上图中右边那样,给不同的卡片上沿添加了不同颜色的边框,使整个界面看起来更丰富,也成功表现出了两张卡片的不同,不至于像左边的卡片一片白,很难找到重点。

这种强调边框在界面设计中其实非常普遍,例如:

在警告消息的旁边

在选中的导航条的下面

甚至整个布局的顶部

甚至把强调边框变成卡片的一部分

我们用不同颜色的强调边框来表现不同的内容,不仅让界面看起来更丰富,而且也让不同的内容有了区分,更利于用户阅读界面的信息。

关于边框的颜色怎么选,力力推荐个不错的配色网站,可供参考:https://yeun.github.io/open-color/

7.并非每个按钮都需要背景颜色

当一个页面上有多个按钮的时候,用户很容易陷入混乱,不知道该点哪个按钮,该执行哪个操作,人们通常习惯用红色表示警示和消极的操作,习惯用绿色表示成功和积极的操作,但是如果只用颜色来表示各种按钮的意思,很容易让界面变乱,不知道该点哪个,因为按钮太多了,像下面这张图:

所以应该怎样做?其实在界面设计中,这些按钮的意思只是一方面,还有一个点经常被人忽视,就是层次结构。我们可以把一个页面的所有按钮想象成一个金字塔,大多数的页面只有一个主要按钮,一些不太重要的次要按钮,还有很多基本不会被点到的三级按钮。

下图中最左边的一列是主要按钮,中间的一列是次要按钮,最右边的一列是三级按钮:

我们设计主要按钮的时候应该让它是最明显的,一般用实心的按钮和高对比度的背景颜色。

设计次要按钮的时候,应该让它明显但不能抢了主要按钮的地位,一般用描边的按钮或者半透明按钮就行。

设计三级按钮的时候应该让它看起来最不明显,但是需要和正文有区分,一般设计成带颜色的字

最后还有个小疑问,消极的按钮比如删除按钮需要用红色么?其实看情况,有时候使用三级按钮比用红色按钮更好。除非在一个页面中删除是最重要的操作的时候,我们才把他设计成红色,像下图这样:

拖了这么久终于把这几篇更完了,最近工作忙很少有时间能码字,谢谢大家体谅 :D,既然都看到这里啦,点一下赞再走吧!感谢!

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20180323G15MZK00?refer=cp_1026
  • 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 cloudcommunity@tencent.com 删除。

扫码

添加站长 进交流群

领取专属 10元无门槛券

私享最新 技术干货

扫码加入开发者社群
领券