首页

浅讲一下 Label Studio

前端达人

Label Studio是一种基于Web的开源注释工具,旨在帮助数据科学家和机器学习工程师更轻松地创建高质量的标签数据集。它支持多种类型的注释任务,如文本分类、实体识别、图像分类等,并且可以集成到现有的机器学习流程中。Label Studio还具有可扩展性和灵活性,可以适应不同的数据类型和注释需求。


Label Studio的使用一般分为三个阶段:部署、标注和导出数据。

  1. 部署:可以通过下载源代码进行本地安装,也可以使用Docker容器快速部署。此外,Label Studio还提供了在云端使用的选项,如Amazon Web Services(AWS)和Google Cloud Platform(GCP)。

  2. 标注:通过创建项目、上传数据、定义任务类型和注释模式等步骤,可以开始进行标注。Label Studio支持多种注释任务,如文本分类、实体识别、图像分类等。标注人员可以在网页上直接进行标注,也可以使用API或CLI工具进行标注。

  3. 导出数据:标注完成后,可以将标注结果导出为不同格式的数据集,如JSON、CSV、TSV、YAML等,以供机器学习算法使用。

对于开发者而言,可以通过自定义插件和扩展来定制化和丰富Label Studio的功能。Label Studio提供了完备的文档和API参考,使得开发者可以更加便捷地进行开发和调试工作。





蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请加微信ban_lanlan,报下信息,蓝小助会请您入群。欢迎您加入噢~~

希望得到建议咨询、商务合作,也请与我们联系01063334945。 



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



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

使用 react 写一个基础表单页面

前端达人

import React, { useState } from 'react';

function BasicForm() {
  const [formData, setFormData] = useState({
    name: '',
    email: '',
    message: ''
  });

  const handleChange = (event) => {
    const { name, value } = event.target;
    setFormData({ ...formData, [name]: value });
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    console.log(formData);
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Name:
        <input type="text" name="name" value={formData.name} onChange={handleChange} />
      </label>
      <label>
        Email:
        <input type="email" name="email" value={formData.email} onChange={handleChange} />
      </label>
      <label>
        Message:
        <textarea name="message" value={formData.message} onChange={handleChange} />
      </label>
      <button type="submit">Submit</button>
    </form>
  );
}

export default BasicForm;





此表单组件具有三个输入字段:名称、电子邮件和消息。useState Hook 用于存储表单数据,并且 handleChange 函数处理输入字段值的更改。handleSubmit 函数在提交表单时被调用并打印出表单数据至控制台。

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请加微信ban_lanlan,报下信息,蓝小助会请您入群。欢迎您加入噢~~

希望得到建议咨询、商务合作,也请与我们联系01063334945。 



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



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

简单讲一下React

前端达人

React 是由 Facebook 开发的一个用于构建用户界面的 JavaScript 库。以下是 React 快速入门的步骤:

  1. 安装 React:可以通过命令行工具使用 npm 或者 yarn 安装 React。

  2. 创建 React 应用程序:可以使用脚手架工具(如 create-react-app)快速创建基本的 React 应用程序。

  3. 编写组件:React 的核心是组件,您需要编写组件来构建应用程序。组件是一个可重复使用的代码块,它包含了 HTML 和 JavaScript 代码。

  4. 渲染组件:使用 ReactDOM.render() 方法将组件渲染到页面上。

  5. 处理事件:React 使用类似 HTML 的语法来处理事件。在组件中定义事件处理程序,例如 onClick 或者 onSubmit,并将其绑定到相应的元素上。

  6. 状态管理:React 允许您使用状态来管理数据。您可以使用 setState() 方法更新组件的状态,并在组件中读取状态以显示不同的内容。

  7. 生命周期:React 组件有生命周期方法,这些方法允许您在组件生命周期内执行操作。例如,componentDidMount() 方法在组件被挂载后执行一次,用于初始化数据。

这些是 React 快速入门的基本步骤。要深入了解 React,请查阅相关文档和教程。




React 生命周期指的是React组件在挂载(mounting)、更新(updating)和卸载(unmounting)等不同阶段所经历的生命周期方法,包括:

  1. 挂载阶段:constructor、static getDerivedStateFromProps、render、componentDidMount。
  2. 更新阶段:static getDerivedStateFromProps、shouldComponentUpdate、render、getSnapshotBeforeUpdate、componentDidUpdate。
  3. 卸载阶段:componentWillUnmount。

其中,constructor()是组件实例化时第一个被调用的方法;static getDerivedStateFromProps()将props映射为state的方法;render()渲染组件的虚拟DOM;componentDidMount()在组件挂载后执行;shouldComponentUpdate()控制组件是否需要重新渲染;getSnapshotBeforeUpdate()捕获更新前的DOM状态;componentDidUpdate()在组件更新后执行;componentWillUnmount()在组件卸载前执行清理操作。





蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请加微信ban_lanlan,报下信息,蓝小助会请您入群。欢迎您加入噢~~

希望得到建议咨询、商务合作,也请与我们联系01063334945。 



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



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

简单讲一下vue生命周期 与

前端达人

Vue组件实例在创建、更新和销毁过程中,会依次触发一些钩子函数,这些钩子函数称为Vue生命周期函数。Vue的生命周期分为四个阶段:创建阶段、挂载阶段、更新阶段和销毁阶段。

  1. 创建阶段:

在创建阶段,Vue实例正在被创建,这个阶段中包含了实例化、数据观测、事件/钩子初始化等过程。具体包括以下钩子函数:

  • beforeCreate: 在实例刚被创建之后,数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
  • created: 实例已经完成数据观测 (data observer),属性和方法的运算,watch/event 事件回调,但还没有开始 DOM 操作。可以访问到computed等属性。
  1. 挂载阶段:

在这个阶段,Vue实例将模板渲染成真实的DOM并进行挂载到页面上。具体包括以下钩子函数:

  • beforeMount: 在模板编译/挂载之前被调用。
  • mounted: el被新创建的 vm.$el 替换,并挂载到实例上去之后调用该钩子函数,此时组件已经出现在页面中。
  1. 更新阶段:

在这个阶段,当Vue实例的数据变化时,它会重新渲染虚拟DOM并更新到页面上。具体包括以下钩子函数:

  • beforeUpdate: 数据更新时调用,发生在虚拟DOM重新





蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请加微信ban_lanlan,报下信息,蓝小助会请您入群。欢迎您加入噢~~

希望得到建议咨询、商务合作,也请与我们联系01063334945。 



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



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

简单实用layui 实现前端换肤功能

前端达人

使用layui实现前端换肤功能可以通过以下几个步骤完成:

  1. 安装layui:我们需要从官方网站下载安装layui。你可以在https://www.layui.com/下载最新版本。

  2. 引入样式文件:在HTML页面中引入需要的样式文件。我们可以使用layuicss提供的样式表来实现各种外观效果。如果您需要自定义样式,请创建自己的CSS文件,并在HTML中引入。

  3. 创建主题颜色列表:我们需要创建一个包含所有可用主题颜色的列表。您可以使用数组或JSON对象来创建此列表。例如:

javascript复制代码
var themeColors = [ {name: '默认', color: '#009688'}, {name: '橙色', color: '#FFB800'}, {name: '墨绿', color: '#393D49'}, {name: '紫色', color: '#800080'}, {name: '深蓝', color: '#285FD3'} ];
  1. 配置皮肤切换组件:在JavaScript代码中配置皮肤切换组件。您可以使用layui提供的switch组件或其它插件。例如:
javascript复制代码
layui.use('colorpicker', function(){ var colorpicker = layui.colorpicker; // 初始化颜色选择器 colorpicker.render({ elem: '#theme-color-picker', colors





蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请加微信ban_lanlan,报下信息,蓝小助会请您入群。欢迎您加入噢~~

希望得到建议咨询、商务合作,也请与我们联系01063334945。 



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



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

vue 简介与使用

前端达人

Vue.js是一款非常流行的JavaScript框架,用于构建单页Web应用程序(SPA)。它的设计目标是简单、灵活和易于使用。Vue.js提供了许多有用的功能,可以帮助开发人员更轻松地构建响应式、动态的用户界面。在本文中,我们将介绍Vue.js的基础知识,以及如何使用Vue.js来创建一个简单的Web应用程序。

首先,让我们来看一下Vue.js的核心思想。Vue.js采用了MVVM(Model-View-ViewModel)的架构模式。这种模式将应用程序分为三个部分:模型(Model)、视图(View)和视图模型(ViewModel)。模型表示应用程序的数据,视图表示UI,而视图模型则是将两者链接起来的桥梁。Vue.js的核心就是它的响应式系统。当模型的状态发生改变时,视图会自动更新,反之亦然。这使得开发人员可以更加专注于业务逻辑的实现,而不需要手动处理DOM操作。

接下来,让我们看一下Vue.js的基础语法。Vue.js通过指令(Directive)来扩展HTML。指令以v-开头,并且在表达式中使用。例如,v-bind指令用于将一个属性绑定到表达式上,v-model指令用于双向绑定表单元素和应用程序状态之间的数据。Vue.js还提供了许多其他指令,


一、核心概念

  1. 模板语法:Vue.js使用了一种类似于HTML的模板语法来声明渲染和组合DOM元素。模板语法被称为Vue指令,可以通过{{ }}和v-前缀在模板中使用。其中{{ }}用于文本插值,而v-则用于Vue.js提供的各种指令。

  2. 数据绑定:Vue.js的核心是响应式数据绑定系统,它能够自动跟踪并响应数据对象和视图之间的变化。当数据发生变化时,Vue会立即更新视图以反映这些变化。

  3. 组件化:Vue.js允许我们将UI分解为可重用和独立的组件。每个组件都有自己的状态和行为,并且可以与其他组件组合使用。这种组件化方法使得代码更容易维护、测试和复用。

  4. 生命周期钩子函数:Vue.js提供了一组生命周期钩子函数,在不同阶段执行自定义逻辑。这些钩子函数包



蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请加微信ban_lanlan,报下信息,蓝小助会请您入群。欢迎您加入噢~~

希望得到建议咨询、商务合作,也请与我们联系01063334945。 



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



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

关于layui的简介与使用

前端达人

layui是一款基于jQuery的前端UI框架,它的设计理念是“零门槛”,使得开发者可以快速地构建出美观、易用的界面。下面将从以下几个方面介绍layui框架的使用。

1. 安装和引入

你可以从layui官网下载最新版本的layui压缩包,也可以使用npm进行安装。在HTML文件中,只需要引入layui.js和layui.css两个文件即可开始使用:

    
html复制代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>My Webpage</title> <link rel="stylesheet" href="path/to/layui/css/layui.css"> </head> <body> <script src="path/to/layui/layui.js"></script> </body> </html>

2. 常用组件

layui提供了许多常用的UI组件,例如按钮、表单、弹窗、选项卡等。这些组件可以通过简单的html标签和属性来创建。例如,如果您想要创建一个按钮,只需要使用以下代码:

    
html复制代码
<button class="layui-btn">按钮</button>

同时,layui还提供了一些特殊类型的按钮,如次要按钮、禁用按钮、圆角按钮等。

3. 自定义样式

layui提供了一套默认的主题风格,但是如果您想要自定义样式,layui同样提供了很好的支持。您可以通过修改layui.css文件或者使用自定义CSS覆盖默认样式,来实现您想要的效果。



layui 是一款基于 jQuery 的前端 UI 框架,它具有简洁、易用和高效的特点,非常适合快速开发响应式界面。下面是使用 layui 框架的示例。

首先,需要在 HTML 文件中引入 layui 的样式文件和脚本文件:

    
复制代码
<!-- 引入样式文件 --> <link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.5.6/css/layui.min.css"> <!-- 引入脚本文件 --> <script src="https://cdn.staticfile.org/jquery/3.4.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/layui/2.5.6/layui.all.min.js"></script>

接着,在 HTML 文件中编写相应的结构和内容,并使用 layui 提供的组件进行布局和样式设置。例如,可以使用 layui 的表格组件来展示数据:

    
复制代码
<table class="layui-table"> <thead> <tr> <th>姓名</th> <th>年龄</th> <th>性别</th> </tr> </thead> <tbody> <tr> <td>张三</td> <td>20</td> <td></td> </tr> <tr> <td>李四</td> <td>22</td> <td></td> </tr> <tr> <td>王五</td> <td>21</td> <td></td> </tr> </tbody> </table>

除了表格组件,layui 还提供了很多其他的组件,如按钮、输入等...


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

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

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

工作多年才发现,原来头像这么小的设计细节,也有这么多知识点

博博

原来头像这么小的设计细节,也有这么多知识点

Hi,我是彩云。用户头像是我们在做UI时经常会用到的设计元素,但想要设计好它也是有很多需要注意的细节知识的,今天这篇文章将深入到头像设计的方方面面,不同的事件、状态、操作、配色等等一系列UI设计的最佳实践。这篇文章准备了很多实例,或许可以给你一些启发。 

undefined

近年来,我几乎每天都在浏览数以万计的UI组件、界面、不同的网站和app,研究它们的结构、布局和配色方式。我的目标是创建一个全面的UI指南,设计应用及其组件、模板等。


今天这部分讲的就是关于用户头像的UI组件探索。用户头像是一个组件元素,用户通过它来标识自己。


用户头像有哪些类型?

基本上有以下三种类型可以用来代表用户头像

  • 空状态

  • 名字的首字母

  • 用户照片或者图片


undefined


颜色和尺寸

根据具体使用场景的不同,你可以使用多样化的颜色和尺寸:

  • 1)为了更好的识别,不同用户配色可以多样化一些

  • 2)页眉、导航栏中一般用24-40dp宽度为主

  • 3)40-48dp的头像大小通常用在内容块或列表中

  • 4)如果你想在更大的页面中使用头像,比如个人中心、设置中心等时,推荐使用56+dp


undefined


事件和通知

当我们想通过用户头像通知某事或演示某种操作时,可以使用额外的UI元素;

  • 1)指示灯标识用户是在线还是不在线

  • 2)通过带有编号的标签通知提供信息

  • 3)可以在用户头像上增加额外的图标提供用户行为操作


undefined


用户的不同状态

显示用户状态的最常见做法是在头像的右下角放置一个多色控件

  • 1)绿色的代表在线,灰色代表不在线

  • 2)填充图形代表用户在线状态,而空心形态用户不在线的状态(并且是可以操作的)


undefined


通知标签

根据不同优先级以及为了吸引用户的注意力,可以修改头像的标签样式

  • 1)对于高优先级的提示,可以使用高亮的底色+反白的文字

  • 2)对于其他情况,使用浅色背景,形式上做一些弱化


undefined


操作按钮

当头像带有操作功能时,通常使用圆形按钮或嵌套图标等组件来显示即将进行的操作。

  • 1)将图标更改为符合用户期望的结果

  • 2)颜色的使用要合理,需要强调事件或动作的含义


undefined


包含文字的头像

单边文本

当需要添加额外信息时,次要标题可以和头像一起使用。此功能在应用栏、列表、表格中非常常用。

  • 1)较大的标题用于表示用户的名称

  • 2)额外信息的文字是可选的(例如:状态、职业、上次访问、关注者数量等)


undefined


底部文本

对于整页,可以使用更大的头像,并将文本放在底部。这是应用内的常见模式,例如社交、个人资料、设置等。 


undefined


头像的用户体验模式

事件

为了进一步表明新用户的事件,可以在头像周围添加一个描边。还可以添加一个带有标记的计数器,这也将具有更强的设计提醒作用。 


undefined


进度

使用一个描边线作为用户成就的进度,仍然非常流行和方便。 


undefined


选择

对于所选状态,用户最可靠的确认方法之一是确认图标和描边的组合。 


undefined


以下是所选状态的典型变体的外观:


undefined


用户头像群组

带一个按钮

当头像被分组时,额外的行动按钮可以是一个可靠的选择,让用户从那里知道某个操作。例如,“加号”按钮将我们带到一系列交互相关的选项(添加、编辑、排序等),这些选项可以对分组的头像执行。 


undefined


标记

数字标记是展示队列中剩余用户数量的一个很好的解决方案。 


undefined


带有悬浮状态的标记

一个标记最常见的模式之一,当它被悬停时可以显示用户的附加信息,作为信息交互的扩展。 


undefined


具有悬停状态的头像

当堆叠组中的头像悬停时,显示用户全名的最佳方式是使用悬停组件。 


undefined


页面模板

在应用或网站中使用头像的最流行的方式是在头部嵌入一个小的用户图片,或者在配置文件/设置部分嵌入较大的头像。此时,用户可以对图片进行编辑操作。 


undefined

undefined


以上就是我所整理的关于头像知识的所有内容,希望看完这篇文章你可以更加全面的设计更好的头像。 


作者:彩云Sky   来源:站酷



蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请加微信ban_lanlan,报下信息,蓝小助会请您入群。欢迎您加入噢~~

希望得到建议咨询、商务合作,也请与我们联系01063334945。 



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



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

为什么你的设计总感觉不舒服?很可能是视觉平衡没有做好

博博


如何在作品中做好视觉平衡

Hi,我是彩云。画面平衡是一个很基本的设计理念,但很多朋友在平时的作品中容易忽视这个点。彩云在星球中帮不少朋友看过作品集,发现最多的问题之一就是画面平衡没做好,我觉得只要把这个基本问题解决了,作品就能提升一个档次。


用户本能地会对不平衡的设计感到厌烦,如何在画面中创造一个有吸引力的平衡?是本篇文章要分享的内容。

undefined

Illustration: Outcrowd


平衡是一个作品中最重要的元素之一。平衡中的对称关系能够创造平衡与和谐,这种平衡状态直观上能够让用户感到舒适。


人体是垂直对称的,我们的视觉接收也与之相对应。我们喜欢物体在垂直轴上保持平衡,直觉上总是倾向于平衡一种力量与另一种力量。


undefinedIllustration: Outcrowd


在设计环境中,平衡是基于元素的视觉重量,而视觉重量是用户对图像的注意力范围。如果画面是平衡的,用户会下意识地感到舒适。画面平衡被认为是其元素在视觉上的比例安排。


如何让一个页面看起来平衡?


1. 对称(静态)平衡

最常见的平衡例子就是使用对称。


在潜意识层面上,对称的视觉能让人愉悦,能让画面看起来和谐有条理。对称的平衡是通过在水平或垂直的中轴两侧均匀放置元素来创造的。也就是说,画面中间假想线的两边实际上是彼此的镜像。有些人认为对称的平衡是无聊和可预测的,但它经受住了时间的考验,到现在仍然是在页面上创造舒适和稳健感觉的最好方法之一。


undefined

Illustration: Outcrowd


2. 不对称(动态)平衡


两侧重量不相同的元素构成具有不对称平衡。


动态平衡通常会比静态平衡更有设计感,让画面不至于呆板。在缺乏平衡的情况下,我们的目光会条件反射性地开始寻找平衡点,这是一个很好的机会,可以将注意力吸引到页面上可能还没被注意到的部分。页面重点就应该放在这里——抓住用户的注意力,就像产品的生命线一样。 


undefined

Landing page — Asian Cuisine


比如一般这样去“配重”的元素会是一个按钮或者标题。


重要信息(或者是行动按钮)就是我们需要去配重的价值元素。


不对称的现象越严重,用户就越想找出其中的原因(检查配重)。人们本能地比平时更仔细地研究这样的画面。然而,这里需要注意分寸,过于古怪的构图并不总是能被很好的感知。



3. 径向平衡


undefined

Illustration: Outcrowd


平衡中的另一种类型,特点是视觉元素从一个共同的中心点放射出来。径向平衡在设计中不常用。它的优点是,注意力很容易找到并保持一个焦点——恰好就在它的中心,这通常是构图中最引人注目的部分。



4. 马赛克平衡


这是一种平衡中的混乱,就像 Jackson Pollock的画作一样。这样的组成没有突出的焦点,所有的元素都有同样的视觉重量。没有层次,乍一看,画面就像视觉噪音,但所有元素又相互匹配,形成一个连贯的整体。


(彩云注:这是一种比较高阶的设计平衡处理手法,用的好可以让画面非常具有设计感,但把握不好的话,就会非常凌乱。所以,我们平时能看到很多大师的作品看似一些简单图形的使用,但就是好看,轮到自己设计的时候就会发现,越简单的设计似乎越难设计好。) 


undefined

Illustration: Outcrowd



视觉平衡的秘密?

当谈到构图中的重量平衡时,他们经常将其与物理世界中的重量进行比较:重力、杠杆、重量和支点。我们的大脑和眼睛感知平衡的方式非常类似于力学定律。我们很容易把一幅画想象成一个在某一点上平衡的平面,就像一个天平。如果我们在图像的边缘添加一个元素,它就会失去平衡,有必要修复它。元素是否是一组色调、颜色还是点并不重要,目标是找到图像的视觉“重心”,即图像的重心。


不幸的是,没有精确的方法来确定一个物体的视觉质量。一般来说,设计师依赖于他们的直觉。不过,下面这些有用的观察可能会有所帮助:

  • 大小

大的物体总是更重

  • 形状

不规则形状比规则形状的元素轻

  • 颜色

暖色比冷色重 


undefined

  • 色调

    深色物体比浅色物体重


  • 图案

    带有图案的元素显得更重


  • 3D

    带有纹理贴图的元素显得更重 

undefined

  • 位置


物体离中心越远,其视觉重量越大 


  • 方向


垂直元素比水平元素更重 


  • 密度


许多小元素可以抵消一个大元素 



  • 内部复杂性

    物体内部越复杂,视觉重量更大

  • 填充空间关系

    正形空间比负形空间更重

  • 对重量的感知

    照片中的哑铃看起来会比一只钢笔更重 



总结

当使用对称时,作品看起来可以更加的专业和有科学性。其中,静态对称的作品显得更加有专业精神和严肃的;而动态对称的设计方法则能吸引用户的兴趣,表达出个性和创造力,能让用户集中注意力。 




作者:彩云Sky   来源:站酷



蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请加微信ban_lanlan,报下信息,蓝小助会请您入群。欢迎您加入噢~~

希望得到建议咨询、商务合作,也请与我们联系01063334945。 



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



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

为什么你设计的图标不专业?可能是这10个容易被忽视的细节没做好

博博

10个容易被忽视的图标设计细节

图标是任何设计系统不可或缺的一部分。使用图标的主要原因是帮助用户快速理解想法,实现快速导航,解决语言障碍,最终提升用户体验。


图标作为一种设计工具,在UI/UX和平面设计师中最受欢迎。这些微小的设计元素对每个人来说都是简单易懂的,这些特征赋予了它们通用数字语言的地位。


在这篇文章中,我整理了10个简单又重要的技巧帮你设计出更专业的图标。


1.尺寸规范 


最小的图标大小通常是12 x 12px。以这个尺寸为基础,行业标准中大多数其他尺寸只是通过将之前的尺寸翻倍而产生的。

  • 小尺寸图标,px: 12 x 12, 16 x 16, 24 x 24, 32 x 32, 48 x 48.
  • 中尺寸图标,px: 64 x 64, 96 x 96, 128 x 128, 256 x 256.
  • 大尺寸图标,px: 512 x 512, 1024 x 1024.

重要提示:当你设计图标时,重要的是要按100%显示的比例去设计,使图标完美像素并放大像素块查看准确性。 


2.保持像素完美 


完美像素图标在屏幕上能呈现尖锐和清晰的线条和形状。如今,高分辨率显示器和视网膜显示器正变得越来越好,所以在不久的将来,对像素完美图标的需求可能会减少。但就目前而言,让你的图标具有可伸缩性、响应性和适配更多设备是非常重要的。


1) 像素网格对齐.

使直线部分完全清晰,并增加曲线和边角的清晰度。(彩云注:尽可能的使线条实心) 


undefined


2)完美角度

有角度的线更模糊。创建图标的最佳角度是45°,因为形成一个角的像素彼此对称。



undefined


3)边缘清晰

直线必须占据其边缘上最暗的4个像素。这样线的边缘看起来更清晰。



undefined


3.注意粗细和间隙 


为了让图标看起来整洁一致,重要的是要记住线条宽度和间隙大小。这条规则我认为是必须遵循的:所有线条的宽度都是相同的。


理想情况下,线宽和间隙大小也应该相等。 


undefined



undefined

然而,有时候你必须打破这个规则。当你需要解释我们在日常生活中面对的一个具有非对称模式的物体时,它就会发生。比如条形码这个例子来说,我故意使图标内的线宽和间隙大小不均匀,以表示条码的特征。 



undefined


4.统一圆角 


在UI设计中,对象(包括图标)的角半径定义了项目的外观和感觉。当我们说到一个集合中的多个对象时,规则很简单:在正方形和圆角之间进行选择,并对所有的图标应用相同的属性。


为什么它如此重要?一致性是UI/UX设计的关键原则。一个可用和用户友好的设计总是提供一致的体验。在下面的例子中,你可以看到打破这个原则是如何影响视觉感知的。 



undefined



undefined


5.视觉平衡 


在电脑上看起来完美对齐和平衡的东西,在你的眼睛看来可能并不一样。

当我们把大小相等的正方形和圆放在一起时,我们会有一种不对劲的感觉,圆似乎比正方形小。为了使我们的形状在尺寸上看起来相同,我们应该使圆更大(或减少正方形的尺寸)。 


undefined


undefined


undefined

这个原则也适用于图标的设计和使用。有些图标的一侧可能较重。试着调整它们一两个点,直到整体对齐看起来正确。在下面的例子中,你可以看到突出显示的图标看起来很大,尽管它与其他部分的大小相同。为了平衡这个集合,我们需要通过缩小图标的大小来调整突出显示的图标。


(彩云注:这个原则很多人应该都知道,但我发现也是在整套图标的设计中最容易出现的问题,当把图标汇总在一起的时候,这个问题尤其需要重视。)



undefined


undefined


6.视觉对齐 


我们经常在设计软件中使用中心对齐,这种方法没有错。但当涉及到细节时,比如图标设计,我们需要相信自己的眼睛,打破数学法则,以增强元素的平衡。


让我们以播放按钮作为展示。这个例子很简单,但非常能说明问题,因为形状越不对称,需要改进的缺陷就越明显。 


undefined


undefined


7.保持简单和直接 

我打赌你已经猜到我们指的是KISS原则。这一原则背后的思想是,大多数系统在保持简单的情况下工作得最好。用户越容易理解某样东西并与之互动,它就越具有通用性。


(彩云注:KISS原则是“Keep It Stupid Simple”或者“Keep It Simple, Stupid”的缩写。篇幅有限,彩云帮大家找了一篇参考文献https://www.jianshu.com/p/7d58b96d0185#comments ,感兴趣的可以去学习下。)


它如何适用于图标设计?


1)别使用文字


文本和图标的绑定减少了图标的通用性。此外,小尺寸的文本是可读性很差。如果一定要文本作为支持元素,使用工具提示和图标旁边的标签。



undefined


2)不要过度设计

不必要的复杂性阻碍了合理的表达,应该避免。过载的设计会将用户体验变成一场噩梦。



undefined


3)避免不必要的元素 

只要确保每个图标在整体环境中是可理解和清晰的就行。(彩云注:比如已经是在邮件客户端中,就不需要再额外增加表示邮件的图标部分)


undefined

重要提示:在图标设计中合理地使用KISS原则,也不要把事情做得太简单,否则会影响功能。一个优秀的图标应清晰易懂。


8.图标规范框架 


图标规范框架通常是指组合在一起的圆形、正方形、纵向和横向矩形。它们创建了一个框架来设计图标。但是,这个规则非常灵活,只是作为参考,方便图标的设计在视觉上平衡。所以,如果你觉得你的图标不完全匹配这个框框,但看起来完全正确——相信你的眼睛! 


undefined


undefined


undefined


框架是设计的“容器”。框架规范了一个统一的范围来设计图标,这背后有一些原因:


1) 大小

由于其几何形状,所有图标都具有不同的高度和宽度。为了在我们的设计中统一图标尺寸,我们应该将它们放置在大小始终相同的框架中。


undefined

2)输出


框架内的图标与视觉中心对齐,这经常被开发人员忽略,因为他们经常根据实际的中心来调整图标,而没有注意到差异。这就是为什么用框架输出图标是至关重要的,当你按这个框架输出图标时,能保证视觉设计时想要的视觉中心。


undefined


3)效率

如果使用Figma,可以通过创建组件来节省时间。可以使用实例快速地将一个图标替换为另一个图标。


undefined


9.设置好图标的关键词 


如果你要打算做图标资源库的话。要想到当设计师在库中搜索图标时,会遇到哪些挑战?他们的痛点是什么?他们的需求是什么?要回答这些问题,请设身处地为用户着想。 


1)不要让用户思考

例如,如果他们不知道自己想要找到哪种花卉图标,那么就让他们看到一系列选择:鲜花项链,室内花卉,植物商店等。



undefined


2)展示关联图标

例如,如果用户想在相同的主题或类别中找到图标,他们可以快速地检查包含这个特定图标的完整集合。


undefined


3)使用标签

用户可能很难找到合适的词进行搜索,或者可能希望看到所有类似的补充选项,从中选择最合适的。例如,当一个图标的实际名称是“兰花花瓣”,你仍然可以找到它与以下关键词: #兰花#花瓣#花瓣#花#装饰#花#植物#花园#开花#植物#自然#热带#树枝#美丽#植物#美丽#自然#叶子#优雅#浪漫


undefined


10.SVG和PNG图标的区别 

最终应该导出SVG或PNG格式?这是一个关键问题。让我们来比较一下格式:

  • SVG的文件大小非常小,这意味着最终设计的加载速度非常快,而PNG则相当大。
  • SVG格式是无限可伸缩的,而PNG的分辨率则受创建的文件大小的限制。然而,将一个复杂的SVG图标缩小到随机大小可能会产生半像素的边缘,这可能会使图标看起来有虚边。这是因为当屏幕上的图标变得更小时,代表其来源的像素就会减少,从而导致清晰度下降。这并不意味着需要避免使用SVG文件。只需根据预期用途调整 SVG 图标即可。
  • SVG文件可以编辑和动画,PNG文件只能是静态的。
  • 对于PNG格式,你必须提供各种大小和颜色的资源,而在使用SVG时就不需要这些了。
  • Png与大多数浏览器兼容,而svg可能不被旧的浏览器支持。


我个人的选择是使用SVG图标,因为它可以节省很多时间。但是,一定要小心缩小复杂的形状,并记住旧的浏览器可能不支持SVG格式。

总结 


到这里你应该已经学会了这10个图标设计要点,在你的图标设计中使用这些规则,相信会让你的图标变得更加专业!

彩云注:图标设计是一个设计师的基础能力,在彩云看过的无数份作品集中最普遍的问题也就是图标设计。今天这篇文章虽然非常基础,但千万别小看它,用这10条技巧重新审视自己的图标作品,相信会有新的收获! 

作者:彩云Sky   来源:站酷

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

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

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


日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档