设计每日一贴---北京兰亭妙微/UI设计公司

252019-6

2019 年 LOGO 设计趋势报告（下）

如果您想订阅本博客内容，每天自动发到您的邮箱中，请点这里
抽象图形拼接

坦白说，这些抽象的 LOGO 设计让我立刻想起了JK·罗琳和她书中的魔法符号。如果这些Logo背后都有着独特而富有力量的故事，那么它们确实可以很好地服务于品牌。这样的了 LOGO 设计应当在笔触上保持一致，并且充满意义，我觉得如果能传递出这样的信息，它就很优秀了。

利落清晰的笔触，完美的角度和弧线，这样精准的设计会给人带来可靠的感知。当然，这些Logo 的应用场景同样有着严格的环境要求，设计师几乎没有异想天开的余地。这些 Logo 看上去相当正式，有着明显的高级感。

负空间

借助负空间来传递信息一直一种巧妙的 LOGO 设计技巧，它就像缺少关键证据的犯罪现场，墙上的洞，它并不是借助现有存在的因素来告诉你信息，而是通过一个「不在场的关键元素」，来传递重要信息。负空间就是这样，它同样也是一块画布，只不过给人的感觉是通过画布的背面来呈现信息和故事。

负空间并不是为了隐藏信息而存在，就像联邦快递 (FedEx) Logo中隐藏的箭头，或是 Toblerone 巧克力 Logo 中山腰上的熊。这些元素都不是为了隐藏信息，而是为了通过这种不完整来传递更多的信息。通过正空间来凸显负空间就是关键的技巧，正如 Reinhard Ernst 博物馆的 Logo 所示，中间开放的矩形区块如同画框，似乎可以代表博物馆的任何一件藏品，这也是一种「less is more」的设计。

托拽笔触

很多做 Logo 的设计师都曾经历无法控制的时刻，发呆失神应该也经常会发生。如果你是在纸上画草图，笔尖无意识地滑动，或者墨水洇出，都会产生有趣的笔触痕迹。我知道这不是电脑上绘图的方式，但它确实帮助我描绘出这种视觉设计的特征。将笔尖绘制成一个完美的圆，而笔尖后则是留下托拽的痕迹，在笔痕结束的位置，自然留下的也是一个圆弧边缘。

不管这些 Logo 的布局特征是怎样的，它们都呈现了类似视觉特征。小圆点和托拽痕迹构成了它主要的「笔触」，它们而生动地拼出字母，绘制出路径，或者勾画出有意义的符号。我想你已经捕捉到了它们的特征了——活力四射，生动新鲜的笔触路径。

间断渐变

在logo设计中广泛使用渐变色，是整个行业在过去十年中经历的最两极分化的趋势之一。仍有很多设计师抵触过渡色，因为从LOGO设计的角度上来说，渐变色违背了很多规则，而这些规则是在数字时代之前就已经存在了。不过，LOGO 设计师们总能想出好办法，比如间隔渐变式的设计。

将均匀渐进的色彩变化用连续的纯色片段来替代，同样呈现出色彩的变化和韵律感，但是消解了渐变色在 LOGO 展示过程中潜在各种问题。上面案例中，Qwant 的 logo 就是通过轮廓化的颜色分割来实现这一点，它真实地模拟了渐变的效果，所呈现出的效果比CPA Ireland 要好，CPA Ireland 则使用了的四等分几何分割加上色阶转换。总体上来说，间隔渐变的色彩使用技巧，很好地在当下的流行趋势和 LOGO 设计诉求之间找到了平衡点，值得尝试。

轮廓线条

使用线条来勾勒和描摹事物，传达信息，是一项古老而传统的技艺。在时下的审美体系当中，使用轮廓线条来绘制 LOGO 似乎显得太过于老派，不够现代。不过技术总归是服务于表达的，依然有设计师能够充分的利用这一技术——加入透视，不再局限于二维，而是开始描绘三维的对象。

这一的设计看起来和如今的线性图标的绘制方式在技法上保持了延续性，但是它在维度呈现上更加深入，更加具有表现力和形式感。通过富有规律性的利落的线条，设计师不用太多的线条就能勾勒出立体而抓人眼球的LOGO。这种设计要求设计具备更强大更精准的描摹能力。你可以延续这种思路到整个设计当中，这会使得整个品牌化设计思路更加开阔、有趣。

句点元素

在 LOGO 设计当中，使用句点这样的标点符号，通常都会借用它身处标点符号中的含义和功能。当我仔细琢磨这一趋势时，发现这些类似句点的符号有时像句号，有时则偏向冒号，它们在LOGO中总带着一些奇特的意味。如你所见，这些原点在更多的时候，它更接近于句号，充当收尾和封顶的终止符。

有的时候，它的装饰性更强，以不同的形式漂浮在文本和符号周围。如果你要深究这些 LOGO 设计本身的含义会发现，这个小圆点可能是字母 i 上的那个小圆点简略之后的残留痕迹。这个小圆点，在如今的很多 LOGO 中已经超出了装饰性的范畴，基于不同的需求和设计出发点，它可能意味着时间，可能代表着字母，承载着特定的词汇和含义，可能是感叹号或者句号，表达情绪或者终止。设计师将内容抽象成几何图形，承载意义，提升了对话的智慧。

翅膀元素

在传递放飞、飞翔、展望、自由、远见、轻盈、速度等含义的时候，很多设计师都会借用翅膀的意象。这也是为什么越来越多的地方会看到被提炼和抽象出来的翅膀和羽毛的符号或者图形，某种意义上，翅膀已经远超出了它本身的意味。这些被设计得形制不一的翅膀类的图形，有着冥想的前倾或者后掠的姿态，仿佛在对抗变幻莫测的大风，借助空气动力学向上飞起。

很多翅膀元素形制类似于字母 U，只不过两只翅膀在倾斜角度、弧度和长短上，进行了比较深入的调整。之后，再对 Logo 进行弧度和细节进行修饰，这样就完成了。如同我们上面所在展示的几个案例，设计师经过很快的迭代就可以完成这样的设计。与此同时，在具体的设计过程中，设计师还会引用品牌中一些字母的特征，比如Jetta的字母J，DoorDash 的字母 D。大量包含 Fs、Ps 和非字母的意象共同孕育出了双翼的意象。苹果有翅膀，乌龟也可以有翅膀。我们可以用翅膀填补空白。

门窗元素

门其实我们常常会引申出「打开新世界大门」的概念，它在实际设计中会带有通道、时间、新世界，甚至一种全新心境和意境的概念。很多品牌 LOGO 都想借助这个意象来承载更高远的含义，微软就是一个典型。门和窗本身一直都是一组象征性极强的元素。门象征着通行的权利，解决方案的途径，机会，甚至欢迎的含义，某种意义上它们和眼睛在含义和隐喻上是共通的。这也是很多设计师在设计 LOGO 的时候青睐这一意象的原因所在。

关于2019年的LOGO趋势报告

2019年的LOGO趋势报告，是我们的第17份 LOGO趋势报告。每年的趋势报告都是从成千上万的 Logo 中，寻找新趋势和细微微妙的差别。我们承认，每一个设计案例都代表着来自世界各地的设计师们的思考和心血，我们对他们表示敬畏，并感谢他们不遗余力地帮助我们完成这份报告。感谢所有在过去、现在和未来几年为潮流报告做出贡献的设计师们。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验、交互设计、 网站建设 、平面设计服务。

评论(0) 浏览(4574)

242019-6

微信小程序--实现canvas绘图并且可以复盘回看

seo达人

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

目录结构：

index.wxml:

<view class="canvasBox">
<canvas canvas-id="myCanvas" class="myCanvas" catchtouchstart='canvasStart' catchtouchmove='canvasMoving'></canvas>
</view>
<view class="btn">
<button type="warn" bindtap='drawPen'>画笔</button>
<button type="primary" bindtap='clearCanvas'>清空画板</button>
<button type="warn" bindtap='clearLine'>橡皮擦</button>
<button style='background:#000;color:#fff;' bindtap="black">黑色</button>
<button style='background:yellow;color:#000;' bindtap="yellow">黄色</button>
<button style='background:red;color:#fff;' bindtap="red">红色</button>
<button style='background:blue;color:#fff;' bindtap="blue">蓝色</button>
<button style='background:green;color:#fff;' bindtap="green">绿色</button>
<button type="warn" bindtap="startRecording">开始录制</button>
<button type="primary" bindtap='rePlay'>复盘</button>
<button></button>
</view>
index.wxss:

.canvasBox{
position: relative;
top:0;
left:0;
width: 750rpx;
height:800rpx;
background:#eee;
}
.canvasBox .myCanvas{
width: 100%;
height:100%;
position: absolute;
top:0;
left:0;
}

.btn{
width: 750rpx;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.btn button{
width: 180rpx;
font-size: 24rpx;
}
index.js:

//index.js
//获取应用实例
import {hisData} from "../../utils/historyOperation.js";
const app = getApp()
var moveToX = 0, moveToY = 0, lineToX = 0, lineToY = 0;
var context = null;
var isStart = false;
var date;
var startDate;//开始时刻
var penType = "drawPen";
var colorStr = "#000";
var operationType = "mapping";
Page({
data: {

},

canvasStart:function(e){
var x = Math.floor(e.touches[0].clientX);
var y = Math.floor(e.touches[0].clientY);
date = new Date();
moveToX = x;
moveToY = y;
operationType = "mapping";
if(penType === "clearPen"){
operationType = "clearLine";
}
if (isStart) {
hisData.hisDataArr.push({
time: date.getTime() - startDate,
operation: operationType,
lineArr: {
startX: moveToX,
startY: moveToY,
currentX: x,
currentY: y,
z: 1,
colorStr:colorStr
}
})
}
},
//绘制线条
canvasMoving:function(e){
date = new Date();
var x = Math.floor(e.changedTouches[0].clientX);
var y = Math.floor(e.changedTouches[0].clientY);
lineToX = x;
lineToY = y;
if(penType === "clearPen"){
operationType = "clearLine";
context.clearRect(x-12, y-12, 24, 24);
context.draw(true);
}else{
operationType = "mapping";
context.setStrokeStyle(colorStr);
context.moveTo(moveToX, moveToY);
context.lineTo(lineToX, lineToY);
}
if (isStart) {
hisData.hisDataArr.push({
time: date.getTime() - startDate,
operation: operationType,
lineArr: {
startX: moveToX,
startY: moveToY,
currentX: lineToX,
currentY: lineToY,
z: 1,
colorStr: colorStr
}
})
}
moveToX = lineToX;
moveToY = lineToY;
context.stroke();
context.draw(true);
},

clearCanvas:function(){
context.clearRect(0,0,375,400);
context.draw(true);
date = new Date();//记录当前操作时刻
operationType = "clearCanvas";
if(isStart){
hisData.hisDataArr.push({
time: date.getTime() - startDate,
operation: operationType,
lineArr: {
startX: -1,
startY: -1,
currentX: -1,
currentY: -1,
z: 0,
colorStr: colorStr
}
})
}
},

drawPen:function(){
penType = "drawPen";
},
clearLine:function(){
penType = "clearPen";
},
black:function(){
colorStr = "#000";
},
yellow: function () {
colorStr = "yellow";
},
red: function () {
colorStr = "red";
},
blue: function () {
colorStr = "blue";
},
green: function () {
colorStr = "green";
},
startRecording:function(){
isStart = true;
date = new Date();
startDate = date.getTime();
},
rePlay:function(){
wx.navigateTo({
url: '../replay/replay',
})
},
onLoad: function () {
isStart = false;
context = wx.createCanvasContext('myCanvas');
context.beginPath();
context.setStrokeStyle('#000');
context.setLineWidth(5);
context.setLineCap('round');
context.setLineJoin('round');
}
})
historyOperation.js:该文件用来保存历史操作，以便复盘

const hisData = {
hisDataArr:[
{
time:0,//操作时间
/**
* 操作类型
* 绘图：mapping
* 拖动球员：moveplayer
* 清除画布：clearCanvas
* 橡皮擦：clearLine
*/
operation:"mapping",//操作类型
/**
* 绘制路径
* startX：开始x坐标
* startY：开y纵坐标
* currentX：目标位置的 x 坐标
* currentY：目标位置的 y 坐标
* z：1代表画线时鼠标处于move状态，0代表处于松开状态
* colorStr：线的填充颜色
*/
lineArr: { //绘制路径
startX:0,
startY:0,
currentX:0,
currentY:0,
z:0,
colorStr:"#000"
}
}
]
};

export {hisData};
复盘：

reply.wxml:


<view class="replayBox">
<canvas canvas-id='myCanvas' class="myCanvas"></canvas>
</view>
<button type="warn" bindtap="start">开始</button>
reply.wxss:

/* pages/replay/replay.wxss */
.replayBox{
position:relative;
width: 750rpx;
height:800rpx;
background: #eee;
}

.replayBox .myCanvas{
position: absolute;
top:0;
left:0;
width:100%;
height:100%;
}

reply.js:

// pages/replay/replay.js
import {hisData} from "../../utils/historyOperation.js";
var startDate;
var date;
var curTime;
var context = null;
var timer = null;
Page({

/**
* 页面的初始数据
*/
data: {

},
start:function(){
context.clearRect(0, 0, 375, 400);
clearInterval(timer);
date = new Date();
startDate = date.getTime();
var i = 0;
var that = this;
var len = hisData.hisDataArr.length;
timer = setInterval(function(){
date = new Date();
curTime = date.getTime() - startDate;
if (curTime >= hisData.hisDataArr[i].time){
switch (hisData.hisDataArr[i].operation) {
case "mapping":
context.setStrokeStyle(hisData.hisDataArr[i].lineArr.colorStr);
context.moveTo(hisData.hisDataArr[i].lineArr.startX, hisData.hisDataArr[i].lineArr.startY);
context.lineTo(hisData.hisDataArr[i].lineArr.currentX, hisData.hisDataArr[i].lineArr.currentY);
context.stroke();
context.draw(true);
break;
case "clearCanvas":
context.clearRect(0, 0, 375, 400);
context.draw(true);
break;
case "clearLine":
context.clearRect(hisData.hisDataArr[i].lineArr.currentX-12, hisData.hisDataArr[i].lineArr.currentY-12, 24, 24);
context.draw(true);
break;
}
i++;
}
if(i >= len){
clearInterval(timer);
}
},2);
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
context = wx.createCanvasContext('myCanvas');
context.beginPath();
context.setStrokeStyle('#000');
context.setLineWidth(3);
context.setLineCap('round');
context.setLineJoin('round');
}
})
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验、交互设计、网站建设 、平面设计服务。

评论(0) 浏览(3949)

242019-6

不知道叫什么？送你一份超全面的产品基础术语科普指南

资深UI设计者

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

设计师在日常沟通的时候，是不是经常会遇到说了半天结果大家说的不是一件事的情况？笔者认为，要解决这个问题，首先要统一名词，保证沟通的准确度。下面是笔者整理的一些关于 APP（小程序）名词的规范样例，希望能帮助到刚刚入行的同学们。

不同的APP页面类型的标准术语

我们从下载并使用一个 APP 的流程来展开说明。

1. 启动图标

点击后可以启动 APP 的图标，如图分别是淘宝在不同场景下的启动图标。

2. 应用市场展示页

在应用市场中为了帮助用户在下载之前了解 APP 功能的页面叫应用市场展示页，也能够通过优秀的 UI 设计吸引用户下载。

如图中红框内分别是苏宁易购、设计本、当当网的应用市场展示页。

3. 启动页（闪屏）

APP 启动后加载过程中显示的页面叫启动页，如图是微信、有道云笔记、得到的启动页。一般启动页的设计都会比较简洁，只有启动图标+solgen，或是吉祥物、一张精美图片的形式。

4. 广告页

国内一些公司由于变现困难在启动页之前或之后，进入主页之前加了一张广告页，主要用来显示接的广告或自己公司的运营活动，可以跳转链接或打开其他 APP。

如图是 UC浏览器、网易云音乐、宝宝树的广告页。

5. 引导页

用户第一次打开 APP 后为用户介绍 APP 主要功能的页面，只显示一次，或是 APP 版本更新后用来介绍新版本新功能。

如图是前程无忧 APP 的引导页。

6. 首页

进入 APP 后默认显示的页面，如图是微信、澎湃新闻、淘宝的首页。

7. 一级页面

一般指通过底部标签切换的方式能够到达的页面。如：

微信的一级页面有微信、通讯录、发现、我的；
淘宝的一级页面有首页、微淘、消息、购物车、我的淘宝；
澎湃新闻的一级页面有首页、视频、问政、问吧、我的。

8. 二级页面

指通过一次反馈操作能够回到一级页面的页面，叫二级页面。

如图分别是微信聊天页面、朋友圈页面、支付宝我的余额页面，它们都是二级页面。

9. 注册登录页面

用户注册账号、登录账号的页面。如图是洪恩故事的注册登录页。

10. 个人主页/我的页面

显示用户个人信息、和用户有关的订单、收藏、优惠券、课程、商品等等信息的页面。

如图是 luckin 咖啡、家长帮、丁香医生的个人主页。

11. 菜单导航页

包含很多分类、不同栏目，可以跳转到很多个不同内容页面的页面叫做菜单导航页。一般首页大部分属于菜单导航页，如我们的 pro 小程序的首页就是一个菜单导航页。

如图是一条、新世相阅读、美图秀秀的菜单导航页。

12. 搜索页面

用于搜索的页面。有的 APP 没有单独的搜索页面只有一个输入框，有的有单独的，因为可以放一些推荐内容或广告位。

如图是喜马拉雅 FM、贝贝、搜狗阅读的搜索页。

13. 设置页面

更改 APP 设置的页面，如图是百度阅读、淘票票、夸克浏览器的设置页面。

14. 详情页面

展示内容详细信息的页面，如图分别是淘宝的商品详情页、起点学院的课程详情页、今日头像的咨询详情页。

15. 关于我们页面

如图分别是夸克浏览器、极客时间、火辣健身的关于我们页面。

16. 意见反馈页面

一般的 APP 都会设计一个意见反馈功能来收集用户需求，对应的页面就是意见反馈页面。

如图分别是贝贝、阿里钉钉、花生地铁的意见反馈页。

APP 中的页面类型大致可以分为以上这些，上边所写的页面名称是被使用得最多的、最规范的名称。沟通时使用上面的页面名称应该 90% 的成员都能理解。

APP页面内部的标准术语

对于不同类型的页面名称一般设计师用的比较多，叫法也最准确，以上名称是在一些专业的 UI 设计网站查阅资料，又和几个设计师朋友确认后拟定的，准确度可以保证。

开发常用术语释义

1. 编程语言

人的语言可以分为汉语、英语、法语等等，计算机的语言同样可以分为 java、php、html 等等，这些语言就是编程语言。不同的程序员会的语言不同，每一种语言都需要单独学习。

2. 程序

通过编程语言给计算机下达任务，让它理解我们要做什么。用编程语言给计算机/手机下达的任务书就是程序。

3. 数据类型

编程语言中用来区分数据格式的标记，如记录数字和记录汉字就要使用不同的数据类型。

如：

整数类型：int
浮点型（小数类型）：float、double
字符串型（单词、句子型）：string
布尔型：只包含是和否两个值

4. 变量

没有固定值的量，例如：定义一个变量 X 表示绘本名称，那 X 可能叫《我不喜欢哭》，也可能叫《鳄鱼妈妈》。即用一个单词表示物体的一个属性，如上面说的绘本标题。

5. 接口

电脑需要调用手机里面的信息，这时候你会拿一根数据线将电脑手机连接起来，电脑和手机上连接数据线的接口就是传说中的 API 接口──即获取数据、获取某种功能的通道。

如在 pro 小程序中要想在前端展示文章，那么在定义完文章标题的字号、颜色等等后就需要设计师提供给接口获取具体的文章内的文字，常说的 API 就是接口的意思。

6. 客户端（前端）和后台

客户端是用户使用软件时能够看到的软件界面，后台是控制前端内容、功能的控制器，一般给软件开发者使用。

7. 写死和后台传过来

写死就是程序员直接在 html 代码中直接把具体文字写出来，想修改的话只能在代码中进行修改，后台传过来就行。程序员在 html 代码中不写具体文字，而是写一个变量，这个变量可以在后台修改成不同的内容。

例如，要设计一个管理不同城市分公司的软件，需要一个下拉选择框切换不同城市的分公司，这个需求在技术上有两个实现办法：

将城市数据放在服务器上，前端通过接口获取服务器的数据显示出来。
直接将所有城市的名称写在前端，也就是写死。

第一种方案比较灵活，当城市数据有变化（在新的城市成立了新的分公司）可以在后台直接添加，前端不需要做修改。缺点是需要开发相应接口，有一定工作量。第二种是比较快速的办法，省去了开发接口的工作量。

具体使用哪种方案要根据具体场景选择，如广告位的图片就不适合写死，而是要开发对应的接口能够在后台灵活更换修改。像导航栏中部的页面名称的文字一般不会有变化就可以直接写死。

8. 服务器

提供服务的机器，如微信的服务器就提供了聊天、传文件、视频、朋友圈等服务，用户连接服务器（登录）后由服务器对数据和信息进行处理，再返回给用户结果，而不是在用户自己的电脑/手机上处理。

9. 数据库

储存用户信息、软件内容的地方，保存一切数据的仓库。

如我们 pro 小程序的专家文章就保存在自己的数据库中，上次出问题打不开文章就是数据库出了问题，其余链接式的文章是保存在微信的服务器上，我们链接到微信的服务器上他为我们提供浏览文章的服务，数据库是服务器的一部分。

10. 类、对象、抽象和实例

抽象在技术术语里的意思是提炼出一个通用模板，然后基于模板做具象化的实现。

例如：在现实世界中关于人的分类，会有男人、女人、老人和小孩，如果将这个具体的分类抽象出一个类别，得到的抽象结果就是人。所以，人就是一个抽象出来的分类，也就是技术术语里面的「类」。

在编程语言的世界中，通过程序语言描述现实世界中的事物时，使用的就是抽象的方法，将一类事物抽象成一个类。有了类以后就可以根据类具体出实例，如根据「人」这个类可以具体出老人、小孩，这样的人就叫实例。

11. 程序员说的「打印」

在调试程序或开发测试的时候经常出现打印这个词，程序员口中的打印不是用打印机打印出文字或图片，而是表示结果输出。这个输出不是输出到现实世界的纸张上，而是把程序运行的结果输出到他的电脑屏幕上，进而查看程序运行是否正确。这个把程序运行的结果输出到屏幕上的过程就叫打印。

12. 架构和框架

架构和框架是程序员经常提到的两个技术概念，在工作岗位上也有架构师这一岗位。

我们通过举例来理解这两个概念，例如：修建房屋时会有一个总设计师负责设计整体蓝图和规划，这个工作就可以理解为架构师的工作。

架构设计好后，继续进入具体施工的环节，施工时可以完全自己设计装修方案，也可以使用一些现有的比较成熟的装修模板来套用，这里的装修模板就是框架。框架就是使用现有的成熟技术框架简化开发过程，降低复杂度、减少工作量。现在很多软件的开发都会使用一些比较成熟的开发框架代替纯自主开发来提率。

13. 控件和组件

任何一个网页或 APP 都是由大量的输入框、按钮、图文展示框组成的，这些组成页面的最小元素就叫控件。一个按钮是一个控件，一个输入框也是一个控件。

而组件是一种功能更全面的升级版控件，可以把组件理解成多个控件的组合。如 tab 栏就是一个组件，它是由图标、文字、按钮等组成的。

14. 进程和线程

经常听程序员讨论进程和线程，如涉及到一些复杂功能的时候程序员会说已经同时开了几个线程在处理了。

还是通过实例来说明，例如：我们点击一个 APP 的启动图标，手机的操作系统就会给这个 APP 分配运行资源（CPU和内存），分配好后这个 APP 就会开始运行。这里说的 APP 运行就是一个进程，也可以理解为每一个正在运行的 APP 都是一个进程，如我们同时打开的微信和淘宝，那么就同时存在两个进程。当手机的 cpu 资源或内存不足时就会关闭当前没有正在使用的进程（APP），进程就会被终止，对应的 APP 也就关闭了。

相对于进程，线程是一个更小的程序运行单位。一个 APP 中可以包含多个线程，如负责发送聊天信息的线程、负责连接网络的线程。APP 之所以能够同时完成很多功能就是因为存在多个线程，多个线程可以保证系统资源被合理地分配和利用。

15. 脚本

脚本这个词出现的频率也比较高，程序员有时候就会说「弄一个脚本统一处理一下」。脚本也是一种计算机程序，一般用来代替人工重复的操作，例如：我们可以通过一个固定格式的表格，来把绘本信息导入到数据库中，就是使用了脚本。

脚本一般没有图形界面，通过代码命令的形式使用，脚本一般是程序员使用的。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验、交互设计、 网站建设 、平面设计服务。

评论(0) 浏览(3447)

212019-6

后端人员如何快速上手css（flex布局

seo达人

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

网页布局（layout）是 CSS 的一个重点应用。毕竟简单的样式不能总依赖前端人员。
布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。

2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。

Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。

采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。

容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。

项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

先说第一个属性flex-direction 属性决定主轴的方向（即项目的排列方向）。
.box {
flex-direction: row | row-reverse | column | column-reverse;
}
row（默认值）：主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿。
废话少说，立刻上代码，验证下。

row：

众所周知，h1和p都是块级元素，都会纵向排列，一旦采用 Flex 布局，就以x和y轴为基础排序，
column：

不但模糊了块级元素和行内元素的区别，而且左右的排序也很灵活。
row-reverse：

flex-wrap属性
默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，就会换行。
.box{
flex-wrap: nowrap | wrap | wrap-reverse;
}
（1）nowrap（默认）：不换行。
（2）wrap：换行，第一行在上方。
（3）wrap-reverse：换行，第一行在下方。
wrap：

虽然他换行了，但是每行的元素是不是靠的太近了
在这时候就能用到
justify-content属性
justify-content属性定义了项目在主轴上的对齐方式。
.box {
justify-content: flex-start | flex-end | center | space-between | space-around;
}
它可能取5个值，具体对齐方式与轴的方向有关。下面假设主轴为从左到右。

flex-start：（默认值）：左对齐
flex-end：右对齐
center：居中
space-between：两端对齐，项目之间的间隔都相等。
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

space-between：

但是还是有点不对劲，原来没有垂直居中。
align-items属性就出来了
align-items属性定义项目在交叉轴上如何对齐。
.box {
align-items: flex-start | flex-end | center | baseline | stretch;
}
它可能取5个值。具体的对齐方式与交叉轴的方向有关，下面假设交叉轴从上到下。
flex-start：交叉轴的起点对齐。
flex-end：交叉轴的终点对齐。
center：交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

还有很多属性可以灵活的调整页面的排版，我只举例最简单的几种排版。
没有float，没有position，也没有行和块。只要知道x轴和y轴就能轻松布局。
如果想了解flex布局，可以看一下这位大佬的博客：
语法篇：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
实战篇：http://www.ruanyifeng.com/blog/2015/07/flex-examples.html

评论(0) 浏览(3560)

212019-6

2019 年 LOGO 设计趋势报告（上）

资深UI设计者

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

在过去的一年里 LOGO 设计行业蓬勃地发展着。对我而言，查看各大设计机构的LOGO趋势分析和报告，就像开礼物一样，因为我知道等待我的是一段独特体验。这其中有平凡到令人失望的设计作品，也有令我欢欣甚至惊喜的好作品。而这便是LOGO设计行业仍然充满活力的证据，是值得感激的恩赐。

值得欣喜的是今年的设计作品依然体现着设计师的好奇心与勤勉，这激励我们向着新高度进发。你会在今年的趋势中看到往年主题的延续，但是融合和改变形成了跟为独特的设计趋势。设计师们开始采用非传统的色彩和线条，赋予新的内涵。

Logo中的图案通常以黑白配色呈现，营造一种复古感。设计师们以大量的网点元素作为构建差异的方式。粗砺的噪点、条纹以及网线铜版和木纹砖纹的调合，使logo呈现一种复古的视觉特征，这似乎与时下的高饱和渐变色彩的使用趋势背道而驰。

现代流行文化不仅改变了我们看待符号的方式，也影响了视觉设计时的优先级。随着纹理、图案、排版、摄影和插画元素在视觉品中的优先级发生变化，视觉元素愈发地被收到重视。现代品牌很多时候会被视作为是被视觉美学所推动前进，因此也会要求 LOGO 具备更强的视觉吸引力。

阴阳相生。当一种新的风格、思路，新的滤镜、插件和设计工具出现的时候，设计都会向着不同的方向演化。但是，每一个精心制作的LOGO，包括动态LOGO 你都很难把功劳归结于某一个工具或者方法，它始终是多种方法、工具和流程共同作用的结果，很难把不同的因素彻底地区分开。尝试新的事物从来都不是坏事，但是我仍然寄希望于独特的技术和方法，希望在设计里留下自己的痕迹。

我需要再一次重申的是，潮流并非是趋势所造就的。与时尚领域不同的是，设计趋势不会随着文化变迁而突然爆火，相反，它在设计维度上，一直是向着两个方向延伸，触摸过去也面向未来。更准确的来说，是我们一直从过去的天才构想中汲取经验，同时还在不断开辟走向未来的路。

毫无疑问，今年流行的主题中出现了很多时下流行的元素和主题，包括无人机、蘑菇、刺猬、鹈鹕、蛇、华夫饼、针、灯泡、三眼虎和蒸汽波。虽然这些流行元素只是暂时的，但许多作品仍然制作精美。尽管这种流行元素的风潮最终会落幕，我还是要向它们致敬。

我仍然要感谢 LogoLounge 社区的2万多名来自世界各地的设计师，他们为这份报告提供了大量素材。在本报告发布时，我们的网站拥有超过30万个的logo设计师，我们可以与会员一起继续观察他们的职业发展趋势。能够与他们并肩工作，支持我们热爱的这项事业，是一种荣幸。

1、摩尔斯阴影

老实说，要求一个老练的LOGO 设计师在 LOGO 当中加入流行的阴影效果，这仿佛是对设计师灵活的创造力进行质疑。今年我们的团队精心设计了一种新的方式来为他们的作品加入阴影——因为阴影效果本来就不止一种，而还需要兼顾到 LOGO 本身的可用性。我们避开短暂流行的渐变色，用一连串同心的点和线来呈现光影动态，以这种新的方式，比传统阴影更具视觉张力，更重要的是，它可以更自然地输出纯矢量的单色 LOGO 。

在过去的几年里，我们看到圆点和线混合在一起，展示了不同元素的融合。通常，这的设计方案会以同心圆为中心，其他元素彼此平行，但不会完全合并到一起。通过将这些元素彼此融合到一起，让它们和主体元素融合、交汇，在负空间的帮助下，设计师以这种方式让消费者在头脑中自觉将图像填充完整。比如咖啡杯中的几个点，以及用点状表示的兔子尾巴。

2、堆叠

有人会因为盘子里的食物混在一起而崩溃，也有人对此毫不介意。所以，有的设计师将元素之间的各种元素之间的界限给先打破了，通过重叠来创造层次感，互相堆叠的元素会呈现出一种模糊的效果。而其中大多数 Logo 都呈现出了一种引人入胜的信息，巧妙地吸引了人们的关注。当然，也许大多数人会选择创建一个对比明显、信息清晰的LOGO。

这种堆叠式的LOGO设计，使用两个图层足矣，三个图层也勉强可以驾驭，但四个图层就太过了。如果背景无法辨认，发挥作用的就只有最顶层的视觉元素。上图所示的这些logo融合了类似于徽章和插画的排版，正如这些例子所示，这些源自复古的设计能够焕发出全新的力量。

3、微阴影

阴影作为logo设计中的一个元素，在很多方面都是至关重要的。我用了一个完整章节来讨论阴影的重要性。阴影暗示着光的方向，更确切地说，它可以显示维度和空间关系。一条垂直线和一条水平线，再加上一点阴影，就可以确定谁在平面上方了。画一匹色调均匀的马，那么马的两条后腿就应该处理得暗一点。

有时候，我们作为设计师会受限于自己的技法，这是很正常的。在这些标志当中，包含着一个非常微妙的小阴影，虽然在 Trustpilot star 这个案例中，看起来确实做了比较清晰的分离处理，但我仍然想知道，如果按比例缩小，这种对比是否足够明显发挥作用。我的建议是，如果需要效果，就要尽量使得效果可以明显地呈现，而不是要佩戴老花镜才能看得清楚。但是毋庸置疑，有很多设计师是经过审慎考虑之后，才选择了这样的方案。

4、斜纹线条

热情饱满的新生代设计师正在重塑潮流。在数字时代之前，想要在插画中加入条纹、圆点、中间色调、木纹或其他异国情调的半调效果，首先需要去当地的艺术用品商店逛逛。如今如果你想要实现半调效果，你只需花费很少的钱就可以将其应用到你的设计当中。复古风的设计书籍中充斥着各种各样的标志，展示着一些非常漂亮的半调式的渐变效果，这会让设计师们对这种相对古老却陌生的技术感到好奇。

这一趋势是非常典型的70年代复古，不仅在风格上，而且在色调上也有体现。这些带来半调效果的斜条纹线所创造的效果接近于40%的黑色。这样的 LOGO 设计能够让用户一秒回到以往那个美好的时代，不那么机器制造的感觉。但是它仍然存在缺陷，就是当它缩小的时候，斜条纹会模糊，最终会呈现出一片灰色的效果。

5、波点

在半调和高亮式的设计技法之间，波点元素还有一席之地。这些超大的圆点其实也算得上是半调的一种形态，它们实际上算是图标中的一个组成元素，而不仅仅是背景。从这些LOGO的设计案例当中，我们可以看到，这些圆点近似于编织的篮子或桃子的红晕，图案并不仅仅是用来表达色调的，它还暗含光影和纹理。

使用更大胆图案元素，已经是一个公认有效设计策略，打破紧张的平面色调和布局，并创造视觉吸引力，让元素更醒目。作为一种从在渐变和失真之间寻求平衡感的设计，波点使得设计师可以以有限的颜色，简单而有趣的矢量圆点来吸引消费者。

6、高亮

人们很容易认为，在吸引人们注意的领域里没有什么新技巧。猿类拍打胸部，孔雀展开羽毛，人类则在社交媒体上发帖。还有一小部分身份设计师会选择高亮效果来修饰他们的设计——至少这是今年最引人注目的趋势之一。

我们通常认为黑白配色的 logo 是在添加高光之前展示给客户的。当下流行的高亮色调有淡紫色，日光粉，和冰蓝色。抛开所有的视觉趣味性不谈，设计师们认识到，正是色彩的火花让这些logo摆脱了潜在的平庸性。

7、扇形元素

过去两年之间，设计主题已然延续到简化设计，以及 Logo的纯粹化。这种对前人作品结构的致敬，同样体现着设计师的创造性，因为他们想出的解决方案是基于重新排列几何元素而来的。每当你听到有人表示相信一切都是以前做过的，只要提醒他们，作家和音乐家一直在重新排列了一些笔记或字母，而且新的音乐和书籍，比logo 要多的多，但是灵感之泉却从未干涸。这大概也是以四分之一圆微代表的几何元素，开始大规模地出现。

今年，四等分的圆圈元素——或者说扇形，随处可见。大多数情况下，设计师会完全基于这个扇形来作为唯一的模块，但偶尔也会让它们与圆、半圆、正方形、三角形和其他几何形状混合在一起。即使在表达复杂的信息时，形式的纯粹性可以恰当地与之进行平衡。如果logo看起来很冗杂，那么放入元素的数量应当有所限制。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验、交互设计、 网站建设 、平面设计服务。

评论(0) 浏览(3286)

212019-6

做B端后台产品很复杂？送你一份完整的设计流程和规范！

资深UI设计者

如果您想订阅本博客内容，每天自动发到您的邮箱中，请点这里
明修栈道C和暗渡陈仓B

1. 初识B端产品和C端产品

C端 Consumer，表示为消费者、个人用户或终端用户设计，直接面向普通用户提供服务来帮助他们实现个人需求。B端 Business，它面对商业和企业，是为帮助企业集团等实现商业目的而设计的软件、工具或者平台。

在我们日常生活中，在手机上使用的大多是 C 端产品，单一的 C 端产品通常是为了实现单一的需求。比如看网红的抖音、听音乐的酷狗、买车票的12306、社交的微信等，这些产品有自己的核心功能，其他的功能则是附加的，倘若没有这些附加功能，虽然用户体验感会降低，但并不会影响产品的核心功能。

而面向 B 端的产品，我个人称之为「暗渡陈仓」，当个人用户为实现个人需求产生了一系列动作，往往伴随着该需求的另一端也会反馈一系列动作，即 C 端产品的后台产品线（BtoC），比如淘宝卖家平台、饿了么商家版等。除此之外，还有面向商家、企业、业务部门提供的企业级服务产品，以及面对企业或者个人提供的平台级工具产品等。

虽说我们日常使用的更多是 C 端产品，但是 B 端产品对我们的影响也是时时刻刻存在着。C 端产品在明，逐渐改变着现代人的生活方式，B 端产品在暗，间接服务于用户，让一切流程化秩序化，并且具有多个主要功能点。

2. B端和C端产品的区别

在我看来，C 端产品以消费互联网为主，B 端产品以产业互联网为主，C 端更感性，而B 端更理性。

从使用者的角度来说：

C 端产品关键词包括免费使用、迅速上手、体验为王、你能让我做什么；
B 端产品的关键词则是付费购买、上手缓慢、效率第一、你能为我做什么。

从开发的角度来说：

C端周期短，B端周期长；
C端用户多，B端用户少；
C端逻辑简单，B端逻辑复杂；
C端竞品较多，B端竞品较少；
C端主战场是移动端，B端则是 PC 端；
C端是用户体验驱动，B端是解决问题驱动；
C端产品的使用决策权在用户手中，而B端产品的使用决策权则在客户手中（B端客户不一定是用户）；
C端产品除了产品的体验以外，也要让产品更美观，让活动更有趣，让用户更舒服，产品经理有很强的同理心。B端产品的实用性大于美观性，能切实解决问题、配置资源的 B 端产品才是一个好的 B 端产品，产品经理要具有更强的逻辑思维能力。

3. 后台产品常见分类

后台产品按其作用可大致分为两类，一是支撑前台产品，二是管理各种资源。我认为后台产品应当是囊括在 B 端产品的范围之内的，常见的类型包括：

C 端产品的后台产品线，如淘宝商家版，饿了么商家版，对订单和用户进行管理，支持 C 端产品的业务进展。
平台级工具产品，如微信公众平台，对文章和读者的数据统计和管理；各大互联网公司的开放平台，如微博开放平台等。
企业级服务产品，虚拟主机系统（VMware），云主机管理系统（深信服、xensystem、腾讯云）以及各种云SaaS。
企业的业务处理平台，对内有考勤、报销等 OA办公系统，对外有 CRM 客户管理系统，ERP 资源及供应链管理系统。

后台产品设计思路

1. 初识后台产品设计

说起后台产品，很容易想到复杂、庞大、逻辑缜密，而作为设计师，则苦于竞品短缺、架构复杂，设计的前期工作比设计本身要复杂得多等问题。

后台产品不同于普通用户所使用的 APP，它在用户初次使用和短暂时间内的认知成本是较高的。当用户用惯了一个音乐类的 app，再给他几个其他的音乐 APP，用户是可以迅速上手并且轻易解决自己的需求的。而后台产品则不然。

对于后台产品来说，它并不是随随便便就可以下载使用的，即便你在使用的过程中，也因角色不同而受到权限限制，一般来讲很难像超级管理员一样接触到整体功能；其次，门槛之高，后台产品的使用者一般都是在该行业沉淀了很久，所以要对后台产品进行设计就需要同样了解该行业，甚至更能洞察该行业，业务本身的复杂性质决定了后台产品架构也会比较庞大；然后，无论是工厂商家的进销存管理，还是政府医院的工作流和业务流，乃至企业内部的产品，除了不同行业都有门槛外，对信息和产品也有「保密协议」的使命感，所谓「隔行如隔山」，在后台产品更是如此；最后，后台产品设计往往没有固定的功能架构和商业模式，对于产品经理的逻辑思维能力要求更高，设计师不仅仅是做界面、优化流程，也要主动和产品经理沟通交流，并对产品进行思考和探索。

2. 后台UI设计工作流程

后台 UI 设计的工作，大体分为三个部分：需求分析、设计执行、数据分析。

在需求分析阶段，要对产品本身和行业本身有一些基本的认知。要了解产品的基本情况，比如产品目标、用户人群、产品定位、需求分析、功能模块、主要竞品和产品特色。做这个产品是为了解决什么问题？想实现什么目标？使用这个系统的用户有哪些？不同角色的用户有哪些具体的权限？是否需要对每一个用户的行为都生成操作日志？产品有哪些主要的功能模块？产品的业务流程是怎样的？有哪些同类型的产品？和他们相比我们的产品有什么特色和特点？成功地做出大而全的后台产品，是整个设计团队和开发团队能力的体现，而对很多小团队来说，只能做一些大团队不愿去做的产品，或另辟蹊径在某些方面做专做精。

在设计执行阶段，参照 PM 给出的功能清单做原型和流程的梳理，需要关注的有当前版本规划、功能模块、功能类型、功能描述、任务优先级、完成时间等，交互原型则伴随着功能描述、规则判定条件、触发条件等内容。原型设计完成，开始做 UI 视觉方面的设计，而这时后端同步构思需求的实现方案。UI 设计师向前端了解实现框架，方便交接和沟通。当界面实现，UI 设计师应该是最早进行测试的，力求视觉设计和代码实现无误差。在完成设计执行后，从信息层级、文字、图标、图片等方面进行设计走查，进行多次设计验证与测试。

数据分析是产品优化迭代的重要依据。进行多番测试和评审后交付客户（或内部）使用，根据产生的具体问题进行不断迭代，且观察产品能否通过准确的数据反映问题、体现能力，应虚心接纳使用者的使用建议并严谨思考其合理性，用户的使用和反馈是优化产品的重要途径。只有达到了管理和运营的指标，后台产品才是真正产生了价值。

3. 制定设计规范的作用

为后台产品制定设计规范有哪些作用和好处呢？简单来说就是对产品好、对自己好、对团队好、对客户好。

对产品：在项目完成第一版较为稳定的版本时，着手制定设计标准，统一公司视觉设计规范及某些特定交互设计规范。同一个项目会有多个设计师的参与，规范化的设计语言，避免因设计控件混乱而影响设计输出。
对自己：组件化同类元素，提高工作效率，建立公司产品的组件库，以便不同项目的复用及设计延展。在同一个项目中也能更好的把控该项目的视觉规范，提率。
对团队：设计规范的制定，规范了设计团队的输出，同时方便了与开发团队的交接和协作。通过设计规范的制定，前端实现也能拥有一套可供复用和扩展的组件库，助力上下游交接及团队协作。
对客户：制定设计规范的同时需要考虑设计延展性，为不同客户的定制化需求提供更的输出。同时在进行产品迭代时，设计规范的组件化调整也大大提高了工作效率。

后台产品设计规范

以下数值为参考，请结合特定产品灵活运用。

1. 页面布局

统一尺寸

据统计，目前 PC 端用户屏幕分辨率占比排名前三的是 1920*1080、1366*768、1440*900，以 1440 来设计的话，向上适配或者向下适配误差会比较小。

适配方案：面向多个客户，后台产品设计功能型页面的尺寸统一为 1440*900，按照栅格系统原则向上或向下适配。展示型页面以 1440*900 为主，同时设计出极端情况（宽度为 1280 以及宽度为 1920）的效果图，力求实现前端实现效果和高保真设计图误差最小。面向公司内部的后台系统，由于各个职工电脑屏幕是统一采购、统一尺寸，所以开发适配的分辨率可以统一尺寸进行设计，这个尺寸根据公司内部采购屏幕的尺寸和分辨率选择即可（提前和前端沟通好）。

页面框架

页面框架主要分为左右栏布局和上下栏布局，还有其他的布局。左右栏布局包括顶部栏、左侧菜单栏、主体内容三大区域，其中顶部菜单栏、左侧菜单栏为固定结构，右侧主体内容根据分辨率进行动态缩放；上下栏布局包括顶部菜单栏和主体内容两大区域，其中顶部菜单栏为固定结构，主体内容进行动态缩放且需定义主体内容左右两边空白区域最小值；左右栏布局时，左侧菜单可收缩展开，收缩状态下固定宽度。

栅格布局

栅格系统的使用是为了解决自适应和响应式问题，从而更好地进行产品设计和产品开发。响应式栅格采用 24 列栅格系统实现，以满足 2，3，4，5，6 分比布局等多种情况。固定宽度 Column，将间隔 Gutter 进行动态缩放。

需要栅格化处理的内容的总宽度=23列（1列=1宽度Column+1间隔Gutter）+1宽度Column=24宽度Column+23间隔Gutter。

谷歌规定模块和结构之间要以 8px 为基准，布局间相对间距可采用 8px 以及 8 的倍数，但一些小组件（按钮、间隔、输入框）可以以 4 为基准。栅格布局是为了辅助设计，灵活运用，不要被它所局限。

尺寸设定

一般在整体区域左上角放置产品 LOGO 及产品名称，大部分系统顶部栏高度 48+8n，侧边栏宽度 200+8n。我常用的是顶部栏高度 56px，侧边栏宽度 200px，侧边栏收缩状态宽度 56px，右侧的侧浮窗宽度 400px。

相对间隔

定义主体内容的上下左右边距，定义主体区域内各模块的边距及安全宽度，超出内容区域的部分采用区域内滚动或整屏滚动，视情况固定导航栏。

2. 标准色

颜色分为品牌色、辅助色、中性色。根据不同产品的不同需求，可能也会将统计图、标签等进行统一标准色设定。

品牌色即产品主色，产品主色的设定直接影响产品气质和直观感受，也是产品直接对外的形象。品牌色要根据产品特性、用户使用场景、产品定位等进行选取，尽量做好色彩的延伸性，可支持换肤。品牌色的应用场景包括操作状态、按钮色、可操作图标等。

辅助色用于提示其他场景，比如成功、失败、警告、无效等。

中性色常用于文本、背景、边框、分割线等，需要考虑深色背景和浅色背景的差异，可以选择同一色相控制透明度变化，用来表现不同的层级结构。

其他色如统计图、数据可视化、多个标签的不同配色方案根据项目情况单独设定。

3. 标准字

后台系统常用的字体：windows 系统，中文 Microsoft YaHei，英文 Arial；Mac 字体，中文 PingFang SC，英文 Helvetica；除此之外可以选择的字体还有 segoe UI、思源黑体、Hiragino Sans GB等。

后台系统中常用字体大小为 12px、13px、14px、16px、18px、20px、24px、30px。

行高设定，根据文字大小及使用场景设置行高，一般行高=文字大小+6px/8px。

4. 图标

图标是 UI 设计中重要组成部分，一般分为功能图标和应用图标，以图形的方式传达概念，可以降低理解成本，使得界面更加协调美观。在后台产品中，图标的功能则更偏向辅助性，辅助用户对功能的认识。

除了某些常用的图标，有一些专业性的操作和词汇则需要设计师进行绘制，现在比较方便的方法是在 iconfont 提供的图标模板上用 AI 绘制，画板 1024*1024，提供圆形、正方形、矩形形状。图标尺寸按照 8 的倍数进行延展，绘制完成后生成 svg 格式文件，提交到阿里巴巴矢量图标库的项目组里，方便前端调用，调整大小和颜色更为方便，且能够优化系统内存和性能。

5. 按钮

按钮是后台产品进行交互设计是重要元素，提供给用户进行点击操作，是视觉上最引人注目的控件，具有一定的视觉受范性。常用按钮可分为填充按钮、线性按钮、文字按钮。

按钮的交互状态包括默认、悬停、点击和不可用。

按钮根据需求分为不同尺寸，大中小三个级别用在不同的场景，一般按照 8 的倍数设定。如高度分别设定为 24、32、40px。

规范整理时要规定不同类型按钮的宽高、圆角及文字大小，同时还要将按钮的不同状态展现出来。

填充按钮之间间距最小为 10px。

6. 导航

导航的类型有很多种，常用的比如顶栏菜单、侧栏菜单、折叠菜单、下拉菜单、面包屑、分页、步骤条、时间轴、tab标签页、胶囊菜单、徽标数等。

各类导航中的字体大小可进行统一设定。

顶栏菜单多为一级菜单，点击切换，或作为下拉菜单的父级，将子级菜单合理分类。

侧栏菜单为垂直导航菜单，可以内嵌子菜单。

下拉菜单的触发方式一般有鼠标悬停和鼠标点击两种。

步骤条引导用户按照流程来完成任务，一般步骤不得少于两步。

分页的高度设定为 24px、30px、32px，根据应用场景适当增减内容，比如设定每页展示数据的条数、跳转至指定页等。

面包屑用于说明层级结构，使用户明确当前所在位置，并且可以回到任一上级页面。

徽标数用来通知用户当前有未读消息，一般出现在图标的右上角或者跟在文字后面。

7. 表单

表单多由一条或多条列表项组成，单一列表项的类型有字段输入框、条件选择器。

字段输入框的标题和输入框分布方式包括左右、上下、无标题。左右分布是常见的对齐方式，比较适合 PC 端的使用；上下分布增加了表单的整体高度，视情况选择使用；无标题经常应用在登录注册，虽然减少了面积，但是增加了理解难度。

输入框的交互状态包括默认、输入结果、提示错误、禁用、获取焦点。

输入框的尺寸可按照8的倍数进行设定，比如 24px、32px，也可根据系统实际情况进行设定，我常用的输入框高度为 30px，宽度视情况而定，无圆角。上下布局的多个输入框上下间距为 20px，有错误提示时候竖向增加 10px 或横向显示在输入框右侧（预留出位置）。

表单中标题文字左对齐，输入框左对齐，标题文字距离输入框20px（多个长度不同的输入框算最长的）；标题文字右对齐，输入框左对齐，也是常用的方式。输入框内正文字体 14px，文字和左右两边边框的边距 10px。

选择器包括单选、多选、时间选择、开关切换、下拉选择、滑块选择、旋钮等。单选框多为圆形，复选框多为方形。

搜索框和选择框的高度为 30px 或按照 8 的倍数自行设定，通常和输入框保持一致。搜索框距离右侧按钮 4px，内部文字 14px。

单选多选框尺寸 16*16px，多个选项横向排列间距 16px，纵向排列间距 8px。

开关按钮外框 40*20px，内部圆形 16*16px。

8. 表格

表格在后台产品 UI 设计中占比非常大，用来展示数据、统一管理、作为详情入口，是最清晰、的形式之一。在设计规范中需设定表头高度、表格行高、表格列宽范围，同时也包括表格中的按钮样式、标签样式。

表格主要分为五大区域：选择搜索区、操作区、表头、正文、底栏。选择搜索区放置筛选框和搜索框，为用户提供按需搜索，可以大大提高用户效率；操作区指各种对表格内容进行增删改查、批量处理、配置列的动作；表头展示列标题，一般具有排序功能；正文主要展示各种各样的数据，要注意行高、对齐、分割、信息层级等，要考虑是否提供行内操作；底栏显示分页、总数统计等。

表格信息一般主要功能为增删改查，查看和编辑是最基本的功能，表格信息支持筛选、搜索、排序、分页。对可批量操作的表格数据在第一列增加多选框。

行高

表格行高可设置为表格内字体高度的 2~3 倍，主表格会间隔显示不同颜色，用于区分不同行数据、加强视觉流引导，展开单行的内置表格可采用纯色，选中行应有视觉上的反馈。表头要和表格内容有视觉上的区分。表格行高可采用 36、40、48、60 等。

行数

表格行数太多加载速度会降低，延长用户等待时间；行数太少会导致用户不断翻页，降低使用效率。比较合适的默认表格行数是 20 或 50，用户可以根据自己需求选择默认的行数。设定行数之后，如果每页行数多于每屏行数，可在表格内引入滚动条，这时可以固定表头滚动内容。

列宽

列宽根据内容字段长短需要有不同且合理的默认值，使得表格字段有良好的展示效果。列内容的长度固定时，列宽应大于固定宽度（比如时间、MD5、SHA1）；列内容不固定时，能预判最大宽度的按照最大宽度设定列宽（比如IP地址、MAC地址、姓名），不能预判最大宽度的设定列宽按照常用宽度，多于内容省略以「…」展示，鼠标悬停出现完整内容（比如详情、描述）。

列数

表格列不应过多，列数比较多的情况下应该合理进行合并、隐藏、删除或进行优先级处理。常用的方法有引入配置列，用户可自定义展示必需列以外的其他列；只展示重要信息，下拉展开列查看完整信息；在表格中引入横向滚动条，根据实际情况选择是否要始终固定基本信息列（如第一列是文件名）和操作列（最后一列的操作）。

对齐方式

表格内的文本应按照文本类型不同进行统一规范，如金额类数值保留相同位数小数，SHA1 虽然是一串数字但是其实那并不是数据而是一串编码，所以可以像文本一样左对齐。根据文本内容不同，对齐方式也应灵活调整，可采用文本左对齐、数据右对齐、金额小数点对齐的方式。数据前面有标签的，将标签前置对齐。类似 IP 地址、MD5、SHA1、域名这样的信息，也可以根据产品需要在文本前面增加「复制」图标，方便用户调用。

详情入口

表格内部数据的详情入口，将能点击下钻查看详情的内容以不同颜色表示，同时在表格行最后一列操作按钮部分放置一个查看按钮。

9. 反馈

包括弹框、侧滑框、骨架屏、全局提示、警告提示、消息提醒、加载状态等。分为模态框和非模态框，区别是是否会打断用户工作流。

弹框又称对话框，是叠加在应用主窗口上的弹出式窗口，以对话的方式使用户参与进来。

弹框

弹框出现时，主题内容增加一层遮罩 #000，透明度 50%，避免使用双层弹框，可同时采用有关闭图标的弹框和无关闭图标的弹框，引导用户对内容进行正确操作。如果设定系统内所有弹框均可以点击弹框外区域关闭，则需要为用户新增或编辑内容的弹框弹出二级确认的弹框，或者再次进行交互梳理。

侧滑框

侧滑框又称抽屉，出现在右侧，固定宽度 400px，高度覆盖在主题内容之上，点击侧滑框以外的区域则收起侧滑框。

骨架屏

为某些特定数据提供数据加载等待时的占位图形组合。

全局提示

建议停留时间 3s，可根据文字字数调整停留时间，文字内容限制在 30 以内。

警告提示

用不同颜色和样式展示需要关注的信息。

通知提醒

消息通知和警告信息用通知提醒框，单个消息从页面右侧以抽屉的方式划出，用户可手动关闭，或停留 3s 后自动关闭。

10. 缺省状态

绘制不同类型的情感化插画表示缺省状态，如404、500、暂时没有数据、没有新消息等。

页面需要一个默认的底色，错误文字使用 14px，与情感化插画间距 20px，与按钮间距 30px。

11. 数据可视化

数据可视化部分可能是后台产品中对视觉设计要求较高的部分，使用情境为各类统计图、大屏展示页面等。

功能型页面的数据可视化可以引入图形化设计组件，Echarts、G2、d3等；展示型页面的数据可视化则可以做得更有趣，比如立体的统计图、粒子地球效果、灵活有趣的网络拓扑图等。

考虑到数据可视化可能会需要深色浅色不同的背景，在数据可视化统计图的色彩搭配上要注意颜色的拓展性。

经验观点及设计资源

1. 设计前端一家亲

Ant Design 的设计组件，实现框架 React、Angular
Element 的设计组件，实现框架 Vue 2.0、 Angular
iView 的设计组件，实现框架 Vue
飞冰的设计组件，实现框架 React
Layui 的设计组件
G2 可视化图形组件
Echarts 可视化图形组件
d3.js 可视化图形组件
GridGuide 在线栅格化计算工具

2. 书籍推荐

《B端产品经理必修课》
《交互设计精髓》
《U一点料·Ⅱ》
《简约至上：交互式设计四策略》

3. 文章和作品推荐

总结

不管是做 C 端产品还是 B 端产品，都是为了实现用户的需求、帮用户解决问题。

刚接触后台产品的时候，最希望能把产品做的炫酷、美观，工作中慢慢地发现项目的背后思考更为重要，产出的设计成果也应该有理有据、支撑整个设计体系。网上供大家使用和学习的资源非常多，对一些公司来说、专门去制定一套自己的后台设计规范不免显得费时费力，合理引入 antdesign 和 element 等开源的设计组件，会使得设计师以及前端事半功倍，有助于设计师把更多的精力投入到沉淀行业知识、研究产品架构、梳理交互方式和创新视觉表现上。

在后台产品的设计过程中，更应该把宝贵的时间用在更值得关注的事物上，让设计师能够辅助业务挖掘，从趋于相同的表象中找到产品独有的闪光点，从而切实解决问题和实现价值。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验、交互设计、 网站建设 、平面设计服务。

评论(0) 浏览(3196)

202019-6

虎牙公司级全新LOGO发布，打造直播里的平行世界！

ui设计分享达人

如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里

虎牙直播是以游戏直播为主的弹幕式互动直播平台，累计注册用户2亿，提供热门游戏直播、电竞赛事直播与游戏赛事直播，手游直播等。

最近虎牙在上市一周年之际，发布了全新的公司级LOGO，也就是为虎牙母公司设计的全新企业品牌形象系统。