设计

产品设计术与器:7个实用设计技巧(译)

用战术而不是天赋改进你的设计。

每个Web开发人员都不可避免地遇到需要做出视觉设计决策的情况。也许你工作的公司没有一个全职设计师,你需要自己实现一个新功能的UI。或者,也许你正在攻克一个编外项目,并希望它看起来比「另一个Bootstrap站点」更好。很容易举起双手说:“我永远无法让这个看起来很好,我不是一个艺术家!”但事实证明,有很多技巧可以用来提升你的工作,不需要有平面设计的经验。

这里有七个简单的想法可以用来改善你的设计。

1.使用颜色和粗细来创建层次结构,而不是字体大小

Untitled Image
对UI文本进行样式设计时常犯的一个错误是过于依赖字体大小来控制层次结构。

“这段文字是重要的吗?让它大一点。 ”

“这段文字是次要的?让它小一点。 ”

不要将所有繁重的工作都留在字号上,而是尝试使用颜色或字重来实现相同效果。

“这段文字是重要的吗?让它粗一点。

“这段文字是次要的?**让它细一点。 **”

尝试并坚持两种或三种颜色:

①主要内容的深色(但不是黑色)(如文章的标题)

②次要内容灰色(如文章发表日期)

③辅助内容的浅灰色(可能是页脚中的版权声明)

Untitled Image

类似地,两种字体权重通常足以用于UI工作:

①大多数文本的正常字重(400或500取决于字体)

②较粗的字体(600或700)用于您要强调的文字

Untitled Image

UI设计上远离字重不超过400的字体 ; 他们可以用在大标题上,但在较小的字号下不易于阅读。如果您正在考虑使用较轻的重量来淡化某些文字,请改为使用较浅的颜色或较小的字体。

2.不要在彩色背景上使用灰色文字

Untitled Image

使文本变为浅灰色是在白色背景上淡化它的好方法,但在彩色背景上看起来并不太好。

这是因为我们实际看到白色灰色的效果是对比度降低。

使文本更接近背景色实际上有助于创建层次结构,而不是使它变成浅灰色。

Untitled Image

处理彩色背景时有两种方法可以降低对比度:

①减少白色文字的不透明度
使用白色文字并降低不透明度。这可以让背景颜色渗透一点点,以不与背景冲突的方式减弱文字。

Untitled Image

②选择基于背景色的颜色
当您的背景是图像或图案时,或者当减少不透明度会使文字感觉过于枯燥或不适应时,这会比减少不透明度效果更好。

Untitled Image

选择与背景色调相同的颜色,调整饱和度和亮度,直到看起来合适。

3.偏移阴影

Untitled Image

不要使用较大的模糊和扩散值来使框阴影更明显,请添加垂直偏移。

它看起来更自然,因为它模拟了像我们以前在现实世界中看到的那样从上方照射下来的光源。

这适用于表格输入框:

Untitled Image

如果您有兴趣了解更多关于阴影设计的知识,google的“材料设计指南”是一本很棒的入门指南。

4.尽量少使用边框

Untitled Image

当你需要在两个元素之间创建分隔时,虽然边框是区分两个元素的好方法,但它们并不是唯一的方法,而使用它们太多会让你的设计变得拥挤和混乱。

下一次你发现自己到达边境时,请尝试以下其中一个想法:

①.使用盒子阴影

盒子阴影在绘制像边框这样的元素方面做得非常出色,但是可以更加微妙并且完成相同的目标而不会让人分心。

Untitled Image

②使用两种不同的背景颜色

通常只需将相邻元素的背景颜色略有不同就可以在它们之间进行区分。如果您已经在边框上使用不同的背景颜色,请尝试删除边框; 你可能不需要它。

Untitled Image

③添加额外的间距

什么方法创建元素之间的分离比增加分离更好呢?将事物划分得更远是一种在不引入任何新UI的情况下创建元素组之间区别的好方法。

Untitled Image

5.不要过渡放大图标

Untitled Image

如果你正在设计一些可能使用一些大图标的东西(比如可能是着陆页上的“功能”部分),你可能会本能地采用一个像Font Awesome或Zondicons这样的免费图标集,并且调整大小直到它们符合你的需求。

毕竟它们是矢量图像,所以如果你增加尺寸,质量不会受到影响?

虽然矢量图像在增加尺寸时质量不会降低,但是在16-24像素绘制的图标在将它们放大3倍或4倍的预期尺寸时会显得非常不专业。他们缺乏细节,并总是感觉不成比例的“矮胖”。

Untitled Image

如果您有小图标,请尝试将它们放在另一个形状中,并为该形状提供背景颜色:

Untitled Image

这可以让您保持实际的图标更接近其预期的尺寸,同时仍然填充更大的空间。

如果您有预算,也可以使用专门用于较大尺寸的高级图标集,如Heroicons或Iconic。

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

Untitled Image

如果您不是平面设计师,那么您如何将其他设计从美丽的摄影或色彩丰富的插图中获得的那种视觉风格添加到您的用户界面中?

一个可以产生巨大差异的简单诀窍是在界面的某些部分添加色彩鲜明的重音边框,否则会感觉有点平淡。
例如,在提示消息的旁边:

Untitled Image

…或突出显示活动的导航项目:

Untitled Image

……甚至是整个布局的顶部:

Untitled Image

简单的为您的界面添加一个彩色矩形不需要任何平面设计专业天才,但却可以使您的网站更具有“设计感”。
难以挑选颜色?尝试从Dribbble的颜色搜索等受限调色板中进行选择,以避免被传统颜色选择器的无穷可能性所淹没。

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

Untitled Image

当用户可以在页面上执行多个动作时,很容易陷入纯粹基于语义设计这些动作的陷阱。
像Bootstrap这样的框架通过为您提供一系列样式供你选择:

Untitled Image

“这是一个积极的行动?选个绿色的按钮。“

“这会删除数据?将按钮设为红色。“

语义是按钮设计的重要组成部分,但是还有一个更重要的维度被人们遗忘:层次结构

网页上的每个动作都位于重要金字塔的某处。大多数页面只有一个真正的主要操作,一些不太重要的次要操作,以及几个很少使用的三级操作。

在设计这些行动时,在层次结构中传达他们的位置很重要

①主要行动应该很明显。实心,高对比度的背景色在这里很有用。

②次要行动应该明确但不突出。轮廓样式或较低的对比度背景色是很好的选择。

③三级行动应该是可以发现但不显眼的。将这些行为设计为链接通常是最好的方法。

Untitled Image

“那么消极行为按钮呢?他们不应该总是红色吗?”

不必要!如果消极行为不是页面上的主要行为,那么给它一个二级或三级按钮治疗可能会更好。

Untitled Image

在当负面行为实际上是界面中的主要行为时(如在确认对话框中)采用大的,红色的和粗体的样式:

Untitled Image

0
Standard
设计

BI 移动端 UI 设计总结

Untitled Image

上篇:BI移动端产品设计总结

在这个项目里,我不仅担任了PM,还有机会做了 UI 设计师,学习了 Sketch移动设计软件和 Flinto交互设计工具。这一部分,我从框架层和表现层的角度上做项目总结。

1、产品框架设计(框架层)

首先,面对 N 多角色,报表要做到个性化定制,角色之间关注的某一类型的数据中有重复的指标也有不通的,为了避免代码的重复,最好是对数据的分析进行单独管理,直接调用指定的指标组合成报表。

Untitled Image

其次,为了更高效,在界面设计上,报表能够灵活组合、快速调整。我对比了业内几个比较先进的移动 BI APP

Untitled Image

通过对比不难发现,Power BI 卡片式的设计最符合需求。利用这种设计,一方面,可以通过接口控制增减卡片、调整顺序,而不需要通过更新版本来实现;另一方面,可以通过将卡片类型抽象化、数据格式抽象化,缩短客户端开发时间,如果报表增加,卡片增加,几乎不会占用客户端的开发资源。反观其他界面,例如千牛和 Google Analytics等,分析报表的内容相对固定,如果需要调整,则需要更新版本来实现,每一个报表都需要大量的开发资源。当然,优点就是相比卡片设计,单屏承载的信息量更多,这里就需要根据情况做相应的取舍。

根据结构层功能的需求设计 APP 的框架,上一篇提到了关于报表分类的问题,在最早的 Demo 设计时考虑到某个经理可能会有多个角色(即使部门经理,又是品牌负责人,查看的报表就不一样),而事实上,很少有多重角色存在,在做产品设计时,就要充分考虑这个需求的必要性,不然会影响整个产品体验,实际Demo 1 设计结果,发现品牌切换设计不友好,于是做了重新设计。

所以在设计过程中,要充分考虑用户的交互习惯,要跳出自己思维,去审视设计。做出交互原型的时候,多体验,邀请团队的成员包括技术、测试,听一下他们的想法,最好的是要邀请真实的用户去体验

接下来就是对于图表类型、数据类型进行抽象,把所有的指标进行分类,然后再去分析,这些数据指标展现需要的图表类型,以及数字格式。

  1. 图表类型:
·数字卡片(number) ·进程图卡片(progress)
·组合图卡片(combo) ·面积图卡片(area)
·堆积面积图(stacked_area) ·折线图卡片(line)
·饼图卡片(pie) ·列表卡片(table)
·排行榜卡片(ranking) ·活动进度卡片(activity_guage)
·条形图卡片(bar) ·柱状图卡片(column)
·多柱状图卡片(multi_column) ·环形图卡片(donut)
·Web引用卡片(web) · 空白卡片(empty)
·不支持卡片(error)
  1. 数字格式
  • 带单位的金额数字格式(amount_with_units):保留千分符,万元以下为实际数字,小数点后四舍五入,例如:9,999元;万元以上,亿元以下,显示万位,例如:800万;亿元以上显示亿位及小数点后一位,例如:1.3亿。用于销售额、营收、库存指标

  • 金额数字格式(amount):保留千分符,万元为计量单位,万元以下显示小数点一位,例如:0.9;万元以上,显示万位,例如:800。用于销售额、营收、库存指标绘制的图表

  • 基本数字格式(basic_number):整数,例如:1、999

  • 有限小数格式(finite_number):四舍五入精确到小数点后一位,例如:1.5

  • 百分比数字格式(percent):四舍五入精确到小数点后一位,例如:2.8%

  • 日期数字格式(date):日的展形式为「1日、2日、3日…」月的展示形式为「1月、2月、3月…」年的展示形式为「2015年、2016年、2017年…」,此规范适用于日期图标的横纵坐标

2、界面设计(表现层)

分析对比上面提到的业内的几款 APP,像 GA 、Roambi、Tableau还是跟随了企业自身的品牌色调, 生意参谋和 PC 端色调一直,均为科技蓝,而我司主色调为红色,对于数据类 APP,我觉得红色过于鲜艳,我认为应该用一个冷色调做为主颜色,看了dribbblewrapbootstrap上的一些dashboard设计,决定参考INSPINIA IN+ – WebApp Admin Theme配色

Untitled Image

  • 关于图标设计:遵循简约至上的设计原则用了柱状图来诠释「数据分析」这个概念

Untitled Image

  • 卡片设计:在设计的过程中,需要充分考虑,正常情况和各种异常情况的处理,比如在「进度条」设计过程中,因为卡片内容需要包含实际值、计划值、进度百分比,一开始出了一套比较满意的原型,但是当考虑上进度为负值、超过100%等异常情况时,原型远远满足不了数据的展示需求。在开发过程中也会暴露出未考虑周全的点,比如:数据异常(例如有负值),数字 0和 Null 字段,无数据的处理,版本过低新卡片类型不支持的情况,数据系列排序等

(数据均为脱敏数据,无真实意义)

  • 部分卡片展示

Untitled Image

  • 全套界面展示
    Untitled Image

因为我即扮演了 PM 也扮演了 UI/UX ,跳过了「原型设计」这一步,输出了设计文档,而真实的团队中是少不了 UI/UX 设计师的,PM 们不要过多的去干涉设计,提出自己对于 APP 设计的一些思路就好了,不要限制 UI 设计师的发挥,设计师们一般会给你超出预期的想象。


推荐阅读:

0
Standard
设计

产品经理术与器:12个必备Sketch插件

Untitled Image

Sketch的插件已经数以万计,而且每周都会更新更多的插件,这些插件都是提高效率的最佳选择

Sketch Toolbox 工具箱

首先,需要下载插件管理器,你可以轻松快速的搜索和安装插件

产品经理术与器:12个必备Sketch插件 1

1.Sketch Constraints 布局器

产品经理术与器:12个必备Sketch插件 2
当需要设计各种分辨率的时候(iPhone 5,6,6Plus,Android,web),则可以通过设置限制,类似于在Xcode中使用自动布局,可以节省大量的修改。自适应布局一直是设计师的主要需求,这个插件正是你在寻找的。

2.Sketch SF Font Fixer字体修复器

产品经理术与器:12个必备Sketch插件 3

SF字体在iOS9中在设计时考虑了最大的可读性,插件可以修复调整字体使遵循iOS人机交互设计指南「1.10 颜色与字体(Color and Typography)」,在文本模式和显示模式下的差异如下表所示。

3.Sketch Palettes 调色盘

产品经理术与器:12个必备Sketch插件 4

可以轻松保存、导入全局和文档颜色到调色板。

4、Icon Fonts 图标字体

产品经理术与器:12个必备Sketch插件 5

这个插件可以让你任意挑选Font Awesome, Ionicons 还有Material icons网站上的成千上万的图标,你可以浏览,搜索图标,并且作为文本插入,还可以转换为矢量轮廓。

5、Magic Mirror魔镜

制作3D风格展示效果的工具

Untitled Image

6、Find and Replace查找和替换

可以在所有的图层中查找并替换文字。

产品经理术与器:12个必备Sketch插件 6

7、Sort Me分类

管理分类图层的工具

产品经理术与器:12个必备Sketch插件 7

8、Sketch Content Generator内容生成器

快速生成用户头像、姓名、邮箱等数据,也可以生成大段文本

Untitled Image

9、Dynamic Button 动态按钮

可以随着按钮中文字的多少自动调整按钮大小

Untitled Image

10、Measure

测量工具,可以标记尺寸、颜色等属性

Untitled Image

11、Zeplin

实时协作工具,评论等可以实时显示

产品经理术与器:12个必备Sketch插件 8

仅仅需要你导出Sketch 设计稿的 Artboard

Untitled Image

12、Flinto for Mac

原型工具,可以快速设计页面内元素、页面间的专场效果

Untitled Image

翻译自Sketch 3 Plugins——Essential Sketch Plugins for Designers and Developers

0
Standard