5分钟改完100个界面?那是高手都在用这个方法做设计!
yuyutoo 2024-10-12 00:54 3 浏览 0 评论
工作中大家都可能遇到过,设计完成后因为某些原因突然要批量修改某一个字段文字的大小,或者某个按钮的颜色。
领导一声令下,苦逼的设计师就要累死累活地修改界面了,有时最后的结果可能还是改来改去改回第一版,不知道多少时间浪费在了没有意义的重复性工作中,此时要是运用了组件进行设计,就只要简单几步操作就可以瞬间修改100多个界面。
组件介绍
1. 什么叫组件?
组件是通过对功能及视觉表达中元素的拆解、归纳、重组,并基于可被复用的目的,形成的规范化模块。它就像组成完整框架的单元体(比如按钮、导航栏、tab栏等),具有标准规范和可复用场景的基本模块。
从字面上理解:
- 「组」:多种设计元素组合在一起。
- 「件」:由不同的个体元件组合而成。
它们作为一个独立个体存在,可进行自由组合和替换。(如下图)
我们日常看到的完整项目,就是由许多个组件进行搭建而成的。如下图虎课网及CCTalk、大众点评为例:
上面三张图中的元素中任何一块都可以称之为组件。
2. 组件的命名
组件命名规范化,我们在给组件命名时要遵循一定的命名规范,一个好的命名规范可以方便开发和设计师查找且使用相应的组件,如下图:
组件化设计的优势
1. 有助于风格统一
在一个项目页面里,设计师有时候会将文字或者图片不经意的左右移动1px-2px而不知,从而导致设计元素间距不一致。又或者是,大量重复的手动化导致细节的疏忽。组件化设计就能很好的避免这个问题。
在日常设计中,我们常常会将同一个模块的内容应用到不同地方,如果我们每次都重新设计,每一个设计都有差异,这样会让整个项目的样式都不同。如果我们应用到了组件,在不同页面中,我们就调用组件,这样每个页面就不会出现差异化,有利于项目的设计风格统一。
2. 便于团队协作(设计师与设计师之间)
在多个设计师同步进行一个项目的时候,规范化的组件设计能保持设计结果的统一性,避免出现多人多风格的现象。如两个设计师进行协作设计时,彼此按照各自的操作习惯处理圆角大小,一个设计的是4px,一个设计的是6px,;两人不同的设计习惯不仅加大了后期的沟通成本,而且需要花很多时间去修改,假如两人使用同一个组件,同类型问题就不会出现,后期修改组件也更加容易。
3. 提高开发者的工作效率(设计师与开发之间)
组件化设计不仅方便设计师更高效的制作页面,同时也能提高开发者的工作效率。既可准确定位又方便后期的维护和修改,在发现问题时能快速锁定错误发生的位置。同时,开发者之间也能通过组件进行协作与同步,减少多余的沟通成本,提高了工作效率。
4. 便于后期修改
假如设计师需要在原来的版本上将按钮颜色进行修改,如果组件未进行封装,可能要耗费很多时间进行一个个单独进行调色。组件化的优势就在于,几十个或者更多的组件,你只需要选择所需要修改的颜色即可,大大的缩短了调整优化的时间。
既然利用组件化设计有这么多好处,那么我们赶紧一起来看看如何构建组件吧!
组件化创建流程
在工作中,组件化创建流程分为6步,如下图:
1. 调研分析
分析相关行业竞品组件的视觉风格、情感化设计,如下图:
这里做竞品分析不是为了沿用各种产品设计里的「通用方案」,要解决的核心问题不同,产生的方案也会有差异,明确需求后得出组件设计。
2. 方案设计
考虑所有场景下对组件的展示有何变化。需要融入更多自己对于人性化、创新细节的思考。除了设计细节方面,各个交互状态尽可能考虑周全,如下图:
如相同组件在不同场景呈现的交互状态,相应的颜色、大小也会跟着发生变化。
3. 整理归类
整理和归类线上组件,讨论补充现有组件能否满足需求。并和产品沟通了解后续计划,将组件的所有的当前以及潜在的应用场景总结出来,评估具体组件优先级和迭代计划,如下图(图为蚂蚁金服组件):
组件整理完毕后,明确优先级后录入到在线协作工具,将每一个组件建成一个独立任务,像日常需求那样,方便随时更新。
4. 场景走查
把自己变成产品的深度用户,将线上产品按照用户行为路线,完整体验走查一遍,尽可能不遗漏场景。
5. 问题分析
分析线上已有组件的体验现状如何,每类场景下需要解决的核心问题是什么,无法兼顾时如何取舍。
有时我们会发现想解决的问题无法都兼顾到,产生不了最理想的方案,这时就要对问题优先级有个明确判断,比如优先考虑效率提升,美观可以次要一点,这样方案设计阶段可以在几种解决方案中作出最合适的决策。
6. 效果验证
通过用户调研、数据分析的反馈结果,看看组件是否达到效果,如果不理想则进一步分析原因,迭代改进设计方案。
sketch实操讲解
1. 组件的基础使用方法
要是你掌握sketch组件的话,整体UI(100多页)中的导航背景换个颜色只是秒秒钟解决的事情。
创建组件
其实sketch组件的创建很简单的,只需要点一下就可以啦,那么创建完组件有什么用呢?
可以拖拽进行复制使用,或是直接在组件库里面调出
可以直接编辑里面的文字
还可以统一对组件调整背景颜色
双击nav进入组件库,对nav组件背景颜色进行调整,页面中运用到的nav组件其背景颜色会统一进行更改(再也不怕领导对UI界面整体调整颜色啦)。
2. 组件的嵌套
大家应该会有很多疑问什么是组件的嵌套呢?组件的嵌套就是组件套组件。
组件的一次嵌套
举个例子:之前创建了nav组件,然后可以在nav组件中将左边的icon再进行创建组件为子组件,这样就形成了嵌套关系(一次嵌套)。
icon颜色的替换
将组件库中的menu组件复制一个调整其颜色为红色(颜色随意,方便观察所以选为红色)命名为Red,然后返回page页面选中nav组件,你就会发现在symbol中menu选项里出现了Red组件,点击Red组件,那么icon将换颜色啦。
icon内容的替换
将组件库中的menu组件进行复制,将里面图形换为 < 形状并命名为Back,同样在page页面中选中nav组件你就会发现在symbol中的menu选项里有Back组件并将其选中,那么icon将换Back啦。
组件的二次嵌套
在上文一次嵌套中再进行嵌套,就是组件的二次嵌套,也就是组件套组件套组件。作用非常强大,上文介绍的一次嵌套只能改icon的内容或颜色。二次嵌套可以在改内容的同时也可以改颜色。
继续上文进行操作,nav组件(父),menu组件(子),back组件(子)。
在menu组件上画一个等大的矩形填充灰色进行创建组件命名为color/gray,复制一个color组件放在back组件上。
并对menu组件和back组件右键建立蒙版
对color组件进行多次复制分别填充不同颜色并进行命名。
返回page页面中选中nav组件,你将会发现icon的内容及颜色可以同时更改
自适应工具——Rasizing
接下来一起来了解一下自适应工具——Rasizing,当我们选中一个元素时(这个元素必须在一个组内或是在组件内)sketch右侧会出现上图的功能区,
- Pin to Edge:就是将元素与组上、下、左、右的距离进行固定。
- Fix Size:对自身的宽高进行固定,防止拉伸变形。
这个很好理解,大家多试试就清楚啦,我们还是用之前的案例进行演示。
如上图所以将左侧icon固定上、左、宽、高,中间的文字剧中对齐固定上,右边的icon固定,这样就形成了自适应的组件。
组件库
1. 什么是组件库
通过对界面元素进行拆解、归纳与重组,从而创建出了规范化的组件。在项目中逐层创建可复用的UI组件元素,对多个组件进行整合与相互调用,统一管理后,便形成了组件库。
Sketch官方团队是这样诠释组件库功能的:
一个Library(组件库)本质上就是一个普通的Sketch文件,其中的Symbols(组件)可以被其他Sketch文件调用。如果你编辑了Library当中的Symbols,那么调用了该Library的其他Sketch文件便会收到更新通知,你可以对变更进行预览、对比和确认,使这些Sketch文件所调用的Symbols自动更新至最新版本。
看起来有点不明白,那么我们可以这样来理解:
组件与组件库的关系,类似于乐高积木的搭建,多个颗粒度最小的元素可以组成一个颗粒较大的控件。基础组件如同积木中的最小颗粒,图标、文字、颜色等基础内容被归档在这里,组件库如同多个小积木互相组合而搭建起来的摩天大楼。设计师通过对多个组件进行不同的搭建,可以将其制作成各种更加复杂的组件库。
通过这种统一管理和调用的机制,能够提升界面元素的一致性,加强整体项目的可维护性。在单人项目中,组件库有助于消灭重复劳动,提升设计效率;多人项目中,组件库有助于提升UI设计方案的一致性。
2. 哪些大厂在使用组件库
- Apple UI Design Resources:https://developer.apple.com/design/resources/
- 蚂蚁金服设计规范:https://ant.design/docs/react/introduce-cn
- Mand Mobile 滴滴:https://didi.github.io/mand-mobile/#/zh-CN/home
- WeUI 微信:https://github.com/weui/weui-design
- Element 饿了么:https://element.eleme.cn/#/zh-CN
总结
- 尽可能将设计与开发中的元素独立化,以可被复用为目的,使其具备完整的局部功能,形成规范化的组件。
- 将组件多维度组合从而构建出整个设计方案的工作思路就是组件思维。
- 组件化设计会考虑很多设计的细节,在前期也会有较大的整理成本,在设计中,我们要善于总结组件,根据项目实际情况调整组件库,边制作边完善。
相关推荐
- 野路子科技!2步教你把手机改造成一个FTP服务器,支持PC互传
-
哈喽,大家好,我是野路子科技,今天来给大家带来一个教程,希望大家喜欢。正如标题所言,就是教大家如何把售价改造成FTP服务器,而这个时候估计有朋友会问了,把手机改造成FTP服务器有什么用呢?现在有Q...
- 不得不看:别样于Server-U的群晖文件存储服务器的搭建与使用
-
我先前的作品中,有着关于Server-U的ftp文件存储服务器的搭建与访问的头条文章和西瓜视频,而且我们通过各种方式也给各位粉丝介绍了如何突破局域网实现真正意义上的公网访问机制技术。关于Server-...
- Qt三种方式实现FTP上传功能_qt引入qftp库
-
FTP协议FTP的中文名称是“文件传输协议”,是FileTransferProtocol三个英文单词的缩写。FTP协议是TCP/IP协议组中的协议之一,其传输效率非常高,在网络上传输大的文件时,经...
- Filezilla文件服务器搭建及客户端的使用
-
FileZilla是一个免费开源的FTP软件,分为客户端版本和服务器版本,具备所有的FTP软件功能。可控性、有条理的界面和管理多站点的简化方式使得Filezilla客户端版成为一个方便高效的FTP客户...
- 美能达柯美/震旦复印机FTP扫描怎么设置?
-
好多网友不知道怎么安装美能达/震旦复印机扫描,用得最多是SMB和FTP扫描,相对于SMB来说,FTP扫描安装步骤更为便捷,不容易出问题,不需要设置文件夹共享,所以小编推荐FTP来扫描以美能达机器为例详...
- CCD(简易FTP服务器软件)_简单ftp服务器软件
-
CCD简易FTP服务器软件是一款很方便的FPT搭建工具,可以将我们的电脑快速变成一个FPT服务器。使用方法非常简单,只要运行软件就会自动生效,下载银行有该资源。该工具是不提供操作界面的,其他用户可以输...
- Ubuntu系统搭建FTP服务器教程_ubuntu架设服务器
-
在Ubuntu系统上搭建FTP服务器是文件传输的一个非常实用方法,适合需要进行大量文件交换的场景。以下是一步步指导,帮助您在Ubuntu上成功搭建FTP服务器。1.安装vsftpd软件...
- 理光FTP扫描设置教程_理光ftp扫描设置方法
-
此教程主要用来解决WIN10系统下不能使用SMB文件夹扫描的问题,由于旧的SMB协议存在安全漏洞,所以微软在新的系统,WIN8/WIN10/SERVER201220162018里使用了新的SMB传...
- 纯小白如何利用wireshark学习网络技术
-
写在前面工欲善其事必先利其器!熟悉掌握一种神器对以后的工作必然是有帮助的,下面我将从简单的描述Wireshark的使用和自己思考去写,若有错误或不足还请批评指正。...
- 京东买13盘位32GB内存NAS:NAS系统安装设置教程
-
本内容来源于@什么值得买APP,观点仅代表作者本人|作者:yasden你没有看错,我在京东自营商城购买硬件,组装了一台13盘位,32GB内存的NAS,硬盘有13个盘位!CPU是AMD的5500!本文...
- python教程之FTP相关操作_python ftps
-
ftplib类库常用相关操作importftplibftp=ftplib.FTP()ftp.set_debuglevel(2)#打开调试级别2,显示详细信息ftp.connect(“I...
- xftp怎么用,xftp怎么用,具体使用方法
-
Xftp是一款界面化的ftp传输工具,用起来方便简单,这里为大家分享下Xftp怎么使用?希望能帮到有需要的朋友。IIS7服务器管理工具可以批量管理、定时上传下载、同步操作、数据备份、到期提醒、自动更新...
- 树莓派文件上传和下载,详细步骤设置FTP服务器
-
在本指南中,详细记录了如何在树莓Pi上设置FTP。设置FTP可以在网络上轻松地将文件传输到Pi上。FTP是文件传输协议的缩写,只是一种通过网络在两个设备之间传输文件的方法。还有一种额外的方法,你可以用...
- win10电脑操作系统,怎么设置FTP?windows10系统设置FTP操作方法
-
打印,打印,扫描的日常操作是每一个办公工作人员的必需专业技能,要应用FTP作用扫描文件到电脑上,最先要必须一台可以接受文件的FTP服务器。许多软件都需要收费标准进行,但人们还可以应用Windows的系...
你 发表评论:
欢迎- 一周热门
- 最近发表
- 标签列表
-
- mybatis plus (70)
- scheduledtask (71)
- css滚动条 (60)
- java学生成绩管理系统 (59)
- 结构体数组 (69)
- databasemetadata (64)
- javastatic (68)
- jsp实用教程 (53)
- fontawesome (57)
- widget开发 (57)
- vb net教程 (62)
- hibernate 教程 (63)
- case语句 (57)
- svn连接 (74)
- directoryindex (69)
- session timeout (58)
- textbox换行 (67)
- extension_dir (64)
- linearlayout (58)
- vba高级教程 (75)
- iframe用法 (58)
- sqlparameter (59)
- trim函数 (59)
- flex布局 (63)
- contextloaderlistener (56)