蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

文章来源：优设   作者：研习社

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

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

很多网站仍然在使用老旧的页面设计，比如国内一些企业官网，万年不变的相类似的模板，外国的则是hero页面，带CTA按钮，三栏式的布局。这些设计不能说是不好的设计，很实用，用户能够预测展示的内容，也容易找到需要的内容。但是正因为可预测，用户没有新鲜感，没有期待，所以我们找了一些不仅打破常规，也依然有良好用户体验的网页设计。

蓝蓝设计(北京兰亭妙微科技有限公司）是一家专注而深入的UI设计公司，公司对UI设计的追求一向很高，致力于为卓越的国内外企业提供卓越的手机app/安卓ui设计、软件界面设计、网站设计，用户研究、交互设计服务。

接下来是精彩的UI设计赏析

蓝蓝设计秉承设计优秀，不断超越的理念，诚信敬业、专业耐心的工作作风，一直坚持注重用户心理体验及“设计与营销”等领域的理论与实践相结合。10余年专注努力，300+案例磨练。我们在ui创意设计，用户体验与交互设计，各种类型软件界面设计，国际化标准和流行趋势，进行过不断的学习和实践。蓝蓝设计提供的是可以信赖的ui设计服务，我们内部有一套管理要求，比如去客户现场每周一次的检视和沟通、内部提案会议、每天下班前的整理反馈成果发邮件、随时沟通的qq、电话，阶段性的汇报和进度记录整理。多劳多得的奖励机制，客户满意度评价奖励机制，鼓励大家用心、平和、耐心、勤奋、创新的做事.

（以上图片均来源于网络）

（精美流程图设计）

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

  更多精彩文章：

       ui界面设计之网站设计案例欣赏(一)

       超赞的创意页面排版设计，打造“视”不可挡的网页设计

      超赞的网页设计+精美流程图赏析

       超赞的网站设计赏析

表格和网格一直是产品和后台面板的重要UI组件。然而，即使到了今天，也很容易找出设计不当或用户体验不好的数据表。

今天我们邀请了 Gil Bouhnick ，来跟大家一起聊一聊「如何设计出一个可观的数据表」。

接下来，就进入正题吧～

我使用过 30 多种 SaaS 工具和 SDK ，经常用它们的后台面板看数据，观察到了一些问题并做了反馈。实话说，它们在UI设计和基本功能上，对表格的展现形式还挺糟糕的（虽然它们都是很好的Saas产品）。

鉴于我开发使用表格 20 年的经验，决定为大家来总结一下最基本的处理表格的UI / UX规则了。

本文将从功能、UI设计和美观性，这三个方面来阐述。

数据表设计之功能

1.从排序和筛选开始： 

是的，我也知道排序和筛选很烦人，我也讨厌他们，但必须先说它们。除非你打算做一个不到十条记录或者类似情况的精美表格。

排序和筛选不仅是可用性或易用性的功能，更是摘要数据的关键：了解趋势，比较记录，查找特定值，没有排序和筛选就无法完成这些工作。

如果添加基于列的筛选（如日期，布尔值，字符串等元数据）成本太高，那么可以从更基本的内容开始筛选，例如现代搜索框或一些常用的硬编码。

2.确保列的大小可调整

这是一种查看信息的方法，无需深入研究每条记录。

不管你的列宽有多大，也不要将列表固定住，因为有时候用户需要进一步扩展。

3.允许列重新排序 

对于大型表格，不能一种大小适用于所有情况。

通过重新排序列，用户可以设置符合它们特定需求的表格。这个相对小的功能可以减少混乱，并节省一些来回滚动。

这时，列的名称体现了大量信息。重新排序列能够使用户可以专注于特定区域并理解小块信息。

4.内联的编辑

有许多用于编辑单元格的UI解决方案：内联框，弹出窗口，可扩展节等。

我不认为上面的方案是最佳的，因为它依赖于功能、数据类型、使用案例。从用户角度出发，我最喜欢的方案是侧视图（快速视图）。

一旦选择一个项目，它就会从侧面弹出的方法。

这个方案，我最喜欢的是它可以保持上下文（与弹出窗口不同），易于使用，即使是在垂直滚动视图中显示大量字段的情况下也效果良好。

数据表设计之交互设计

5.小屏幕设计

当然，大显示器看表格，设计和开发都会很爽，但是还是有人在用笔记本电脑或iPad！他们又做错了什么！/手动狗头

不停的滚动、缩小的列、隐藏的文本，这些都会干扰用户体验，所以一定要在小屏幕上验证你的设计，并且尽可能使用上一段时间去切实体验用户使用情况（而不是随意测试）。

如果确实很糟糕，你可能需要在解决问题上发挥自主创造力，不过前提是你很了解它。

6.彩色交替行 

使用大型数据表时，很容易丢失。

斑马纹的表格可以帮助用户保持其位置，但是彩色的行必须非常浅，否则会引起误导，看起来像选定的行。

使用浅色时，应该将所有内容设置为浅灰色，避免使用黑色线条和深色边框。

7.使用固定表头和“冻结”列锚定一些标识符

我认为在任何屏幕上显示大量数据时，表格都应该能正常浏览。

要浏览数据，用户就需要经常滚动，这意味着需要一些锚点来辅助：

• 向下滚动时，列标题必须固定（这是最基本的）

• 第一列应该被锁定（MS Excel和Google Sheets称其为“冻结”），因为，当你水平滚动时，需要该行联系上下文。 

• 一个全行选择选项，用于在水平滚动时标记重要行。

8.设置固定的行高

表格和网格是体现结构化信息的，但是，当表格的列宽、行高不同时，就会变得混乱，信息也就会变得没有体系。

因此，为了整体的可用性和美观性，我觉得不管内容如何，所有行都应具有完全相同的高度。

为了更好地支持多行文本块，请考虑以下事项：

• 用换行替换为空格，并将整个文本变成一行（通过调整列宽的大小）

• 将（所有行的）行高设置为2行而不是1行（可以解决某些情况）

• 使用工具提示（可以用，但是最好不要用）

• 通过单击行来展开/折叠（刚需）

• 采用浮动侧视图显示所选行的详细信息。

数据表设计之UI

美学设计可以带来更好的使用感。

以下是通过简单的UI设计修改来消除杂乱并提高内容可读性的几种方法：

9.增加单元格填充 

使用空格。

加载信息的表，正是用户想要看到更多空白的地方，即使这会花费他们一些额外的滚动时间。         

10.消除不必要的边框

一旦数据结构良好并且留有空白，就该摆脱那些多余的边框，或者让边框线条变得超细且颜色浅。

文章来源：优设网    推荐：墨刀_MockingBot

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

1.登录到mysql进入命令行：[root@localhost mysql]# ./bin/mysql -h127.0.0.1 -uroot -proot

2.查看user表： 

mysql> use mysql

Reading table information for completion of table and column names
You can turn off this feature to get a quicker startup with -A

Database changed
mysql> select host,user,password from user;
+-----------------------+------+-------------------------------------------+
| host                  | user | password                                  |
+-----------------------+------+-------------------------------------------+
| localhost             | root | *81F5E21E35407D884A6CD4A731AEBFB6AF209E1B |
| localhost.localdomain | root |                                           |
| 127.0.0.1             | root |                                           |
| ::1                   | root |                                           |
| localhost             |      |                                           |
| localhost.localdomain |      |                                           |
+-----------------------+------+-------------------------------------------+
6 rows in set (0.00 sec)

表中host、user字段标识了可以访问数据库的主机和用户。例如上面的数据就表示只能本地主机通过root用户访问。原来如此，难怪远程连接死活连不上。

经过网上查找方法，为了让数据库支持远程主机访问，有两种方法可以开启远程访问功能。

第一种（改表法）：

修改host字段的值，将localhost修改成需要远程连接数据库的ip地址。或者直接修改成%。修改成%表示，所有主机都可以通过root用户访问数据库。为了方便，我直接修改成%。命令：mysql> update user set host = '%' where user = 'root';

运行上面语句会又一个报错：

ERROR 1062 (23000): Duplicate entry '%-root' for key 'PRIMARY'

不用管，直接flush privileges;

远程连接测试。

第二种（授权法）:

例如，你想root使用root从任何主机连接到mysql服务器的话。 
GRANT ALL PRIVILEGES ON *.* TO 'root'@'%' IDENTIFIED BY 'root' WITH GRANT OPTION; 
如果你想允许用户myuser从ip为192.168.1.64的主机连接到mysql服务器，并使用root作为密码 
GRANT ALL PRIVILEGES ON *.* TO 'root'@'192.168.1.64' IDENTIFIED BY 
'root' WITH GRANT OPTION; 

输入命令:FLUSH PRIVILEGES; 

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

文章来源：csdn。
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

5·12汶川地震十三周年

汶川地震十三周年

文章来源：站酷   作者：大鱼小鱼虾米

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

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

文章来源：站酷 作者：再次微笑_

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

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

我们打开visual studio code , 选择文件------------->将文件夹添加到工作区，导入我们的项目

安装Element

导入后，我们安装以下element

官网：https://element.eleme.cn/#/zh-CN/component/installation

安装命令：npm add element-ui或者也可以用yarn

安装完成后，我们在main.js中引入Element

import Vue from 'vue'

import App from './App'

import router from './router'

import ElementUI from 'element-ui'

import 'element-ui/lib/theme-chalk/index.css'

Vue.config.productionTip = false

/* eslint-disable no-new */

Vue.use(ElementUI)

new Vue({

el: '#app',

router,

components: { App },

template: '<App/>'

})

页面路由

 我们把components改名为views,并在目录下添加3个页面：Login.vue、Home.vue、404.vue。

页面内容类似：

<template>

<div class="page">

<h2>Login Page</h2>

</div>

</template>

<script>

export default {

name: 'Login'

}

</script>

配置路由

打开router/index.js,添加3个路由分别对应主页、登录、404页面

import Vue from 'vue'

import Router from 'vue-router'

import Login from '@/views/Login'

import Home from '@/views/Home'

import NotFound from '@/views/404'

Vue.use(Router)

export default new Router({

routes: [

{

path: '/',

name: 'Home',

component: Home

}, {

path: '/login',

name: 'Login',

component: Login

}, {

path: '/404',

name: 'notFound',

component: NotFound

}

]

})

配置完后启动项目，在浏览器访问测试

http://localhost:8080/#/

http://localhost:8080/#/login

http://localhost:8080/#/404

说明我们的配置已经生效了

安装scss

安装依赖：

npm uninstall sass-loader //卸载当前版本） 
npm install sass-loader@7.3.1 --save-dev //卸了重新安装了一个低版本
npm install node-sass@4.14.1 --save-dev //安装node-sass 

安装的时候注意对应版本，版本不对应，启动会报错

安装后修改404页面

<template>

<div class="site-wrapper site-page--not-found">

<div class="site-content__wrapper">

<div class="site-content">

<h2 class="not-found-title">404</h2>

<p class="not-found-desc">抱歉！您访问的页面<em>失联</em>啦 ...</p>

<el-button @click="$router.go(-1)">返回上一页</el-button>

<el-button type="primary" class="not-found-btn-gohome" @click="$router.push('/')">进入首页</el-button>

</div>

</div>

</div>

</template>

<script>

export default {

name: '404'

}

</script>

<style lang="scss">

.site-wrapper.site-page--not-found {

position: absolute;

top: 60px;

right: 0;

bottom: 0;

left: 0;

overflow: hidden;

.site-content__wrapper {

padding: 0;

margin: 0;

background-color: #fff;

}

.site-content {

position: fixed;

top: 15%;

left: 50%;

z-index: 2;

padding: 30px;

text-align: center;

transform: translate(-50%, 0);

}

.not-found-title {

margin: 20px 0 15px;

font-size: 8em;

font-weight: 500;

color: rgb(55, 71, 79);

}

.not-found-desc {

margin: 0 0 30px;

font-size: 26px;

text-transform: uppercase;

color: rgb(118, 131, 143);

> em {

font-style: normal;

color: #ee8145;

}

}

.not-found-btn-gohome {

margin-left: 30px;

}

}

</style>

再浏览器访问http://localhost:8080/#/404

可以看到样式改变了

安装axios

命令：npm install axios

安装完成后修改Home页面，进行一个简单的测试

<template>

<div class="page">

<h2>Home Page</h2>

<el-button type="primary" @click="testAxios()">测试Axios调用</el-button>

</div>

</template>

<script>

import axios from 'axios'

import mock from '@/mock/mock.js'

export default {

name: 'Home',

methods: {

testAxios() {

axios.get('http://localhost:8080').then(res => { alert(res.data) })

}

}

}

</script>

可以看到我们的请求已经成功了

安装Mock.js

为了模拟后台接口提供页面需要的数据，引入mock.js

安装依赖：npm install mockjs -dev

安装完成，在src新建一个mock目录，创建mock.js，在里面模拟两个接口，分别拦截用户和菜单的请求并返回相应数据。

import Mock from 'mockjs'

Mock.mock('http://localhost:8080/user', {

'name': '@name', // 随机生成姓名

'name': '@email', // 随机生成邮箱

'age|1-12': 7, // 年龄1-12之间

})

Mock.mock('http://localhost:8080/menu', {

'id': '@increment', // id自增

'name': 'menu', // 名称为menu

'order|1-10': 6, // 排序1-10之间

})

修改Home.vue,在页面添加两个按钮，分别触发用户和菜单请求。成功后弹出返回结果

注意：要在页面引入mock    import mock from '@/mock/mock.js'

Home.vue

<template>
  <div class="page">
    <h2>Home Page</h2>
    <el-button type="primary" @click="testAxios()">测试Axios调用</el-button>
    <el-button type="primary" @click="getUser()">获取用户信息</el-button>
    <el-button type="primary" @click="getMenu()">获取菜单信息</el-button>
  </div>
</template>

<script>
import axios from 'axios'
import mock from '@/mock/mock.js'
export default {
  name: 'Home',
  methods: {
    testAxios() {
      axios.get('http://localhost:8080').then(res => { alert(res.data) })
    },
    getUser() {
      axios.get('http://localhost:8080/user').then(res => { alert(JSON.stringify(res.data)) })
    },
    getMenu() {
      axios.get('http://localhost:8080/menu').then(res => { alert(JSON.stringify(res.data)) })
    }
  }
}
</script>

访问http://localhost:8080/#/

点击获取用户信息

点击获取菜单信息

可以看到我们已经得到响应数据，这样mock就集成进来了

看完记得点赞哦

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


参考 pm2从入门到精通
服务器上的项目需要保持稳定，即使发生故障项目也要自动重启以提供服务，这时需要托管工具对我们的项目进行托管。PM2正是这样一款工具，可以利用它来简化很多node应用管理的繁琐任务，如性能监控、自动重启、负载均衡等，而且使用非常简单。

安装pm2

$ npm install -g pm2 


    

        1
    

启动应用

$ pm2 start app.js  (--watch)  # 加上watch参数后可以实时修改代码 


    

        1
    

管理进程

$ pm2 list 


    

        1
    

停止应用

$ pm2 stop <app name> 


    

        1
    

重启应用

$ pm2 restart <app name> 


    

        1
    

删除应用

$ pm2 delete <app name> 


    

        1
    

显示某个应用程序的日志

$ pm2 logs <app name> 


    

        1
    

显示所有应用程序的日志

$ pm2 logs

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