恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
管理者寄语:UI实习生成长指南-中篇
0.0°
2021-03-23 原创文章 经验/观点 举报 5555 103 35 2

  • 一.掌握基础知识(入职前)

1.1阅读并掌握设计基础原则

学会站在巨人的肩膀上成长,多读书和多沉淀对刚入行的新人的成长是至关重要的。

·入职前必读书籍:

1.《写给大家看的设计书》

了解设计的基础原则,虽然是很多年前关于平面的书籍,但是依然适用于UI界面设计之中。即便很多理论知识是大家很了解的,但是在运用中却没法及时运用。基础原则将会成为后续检验设计合格与否的基础标准。

2.《一个APP的诞生》

是对落地化移动端项目设计流程的入门书籍,因为大部分的新人在入行之前很难有接触落地项目的经验,大都停留于学校的小组项目设计或自发的Redesign,这些与公司的落地化项目还是有一定的经验知识差。所以,提前形成项目设计的流程意识,为后续工作打好理论知识。

·沉淀读书笔记(按照章节)

沉淀是与自己意识交流的一个过程,辩证和有效的知识吸收是与前人的思维对话,形成沉淀的习惯是诸位未来是否在专业或思维上进步的验证,有着各方面的意义与价值。就如现在,你与我也在一番对话…

·设计4大基础原则

先了解当下设计的目的为何?当下互联网环境的特殊性在于效率至上,而界面视觉设计传达上也为此服务。

1.提高人机交互下的界面操作效率,减少人机交互时间,设计让人的时间释放出来做更多有意义的事(陪伴家人,和朋友的交流,感受自然的美妙……)

2.情感化设计,针对哪些必须长期在人机交互下的用户提供高效的服务外,同时注意情感化设计的注入,让人与机的交流不至于枯燥无味的人文情感关怀。

#设计的目的为何?如何发挥设计的价值?是在做设计中一个需要一直在心里发问的命题


01.亲密性原则(擅于使用间距处理信息分组关系)

亲密性为彼此相关的元素归组在一起,成为一个视觉单元。「亲密性」有助于组织信息,减少混乱,为读者提高清晰的结构。

文章推荐:https://www.uisdc.com/layout-design-approach-principle


02.对齐原则(像素眼的养成是UI设计师的基本素养)

任何元素都不能在页面上随意安放,每一项都应当与页面上的某个内容存在某种视觉联系。对齐原则不仅仅是对用户视觉浏览习惯的考量,还是对页面中信息组织的考量。

·利用对齐,符合用户的视觉惯性,降低用户阅读负担;
·利用不同的对齐形式,能有效组织信息,让页面规整有序、严谨美观。

文章推荐:https://www.uisdc.com/alignment-principle


03.重复(擅于分析页面层级结构,对层级的定义与划分)

重复原则是指:版面中的视觉要素要重复出现,可以重复颜色、字体、图形、形状、材质、空间关系等。运用「重复原则」把同一级别的文字设置为相同的文字样式,增加条理性,加强统一性。在页面上重复使用可以定义不同层级的字体、字号、字重。可以很直观地把大量的信息分为四个信息层级:主标题、小标题、正文、辅助说明文字。

文章推荐:https://www.uisdc.com/redundancy-principle


04.对比(对主要信息的强调处理方法)

「对比」强调事物之间的差异性,在设计时要避免页面上的视觉元素太过相似,如果元素之间是为了有所不同,那么加大反差,确保对比明显、页面清晰是很有必要的。·可以突出重点,丰富画面层次,打破呆板、活泼生动

文章推荐:https://www.uisdc.com/contrast-principle


1.2.掌握基础设计软件+快捷键(提高效率重要之法)

UI设计师需要掌握基础的设计软件:Sketch/AI/PS/XD/AE/C4D

·Sketch快捷键

·PS快捷键(AI/XD几乎相同)

1.3.深读设计规范

作为一名UI设计师需要具备基础的设计规范知识。基于各个平台和各个优秀的设计规范,在此基础上辩证的学习及使用,打牢基础的实战技能。

01.iOS设计规范

·IOS:https://developer.apple.com/ios/

02.Android控件规范

·Material Design:https://material.io/components

·Ant Design:https://mobile.ant.design/components/white-space-cn/

03.Web端控件规范

·Material Design:https://material.io/design

·Microsoft Design:https://www.microsoft.com/design

#基于开发对接的设计规范#

·antdesign:https://ant.design/components/layout-cn/

·element:https://element.eleme.cn/#/zh-CN/component/installation

·youzan:https://youzan.github.io/vant/#/zh-CN/tree-select

04.小程序设计规范

·微信小程序:https://developers.weixin.qq.com/miniprogram/dev/framework/


二.入职前练习题(入职前必做)

入职前进行设计练习和同个设计的不同风格扩展思维的训练,提前进入设计状态。所有练习题在入职日提交给设计BODDY审核并作后续的修改。

2.1.输出3套不同风格图标设计

#我的/主页/数据/管理/设置#

2.2.输出3套不同风格的占位图设计

#暂无结果/加载失败#

2.3.输出1套APP设计主界面

#工具类/社交类/音乐类#

2.4.输出1套web设计主界面

#工具类:数据/列表/列块…#官网类#大屏展示类


三.入职第一日:软件与插件安装

3.1.基础软件安装

·Sketch(下载网址:https://www.sketch.com,序列码照设计Body要)
·Adobe:AI/PS/XD/AE/(已有正版,Adobe账号密码找设计Body要)
·C4D:(学生版,自行官网用学生证下载,一年免费使用)

3.2.插件安装

·蓝湖插件:Sketch/PS/XD/(蓝湖:上传设计及切图,用于多方协同)

四.必备协同基础知识

4.1.Iconfont图标库使用方法

Iconfont是阿里巴巴旗下的一个在线图标库,支持矢量图标的上传和下载。

·Iconfont使用场景:

1.设计中需要快速使用到图标,可搜索并下载所需的SVG格式icon,方便在设计中灵活更改
2.Web端的项目需要,将设计图中的图标上传至项目文件夹,方便前端下载和使用。


·Iconfont图标制作要求

1. Icon必须以填充方式输出
2. 不可为描边,需轮廓化
3. 使用整数值
4. 不可用渐变和透明度


·Iconfont项目新建

1. 选择资源管理
2. 选择我的项目
3. 选择新建项目文件夹
4. 输入项目名称后新建
5. 添加成员
6. 输入成员昵称(昵称需要确认是否本人)
7. 管理员可进行人员权限分配


·Iconfont图标上传要求

·多色icon:选择保留颜色提交(可保留设计样式)
·单色iocn:选择去除颜色提交(1.统一上传后的视觉观感。2.防止白色icon上传后不方便预览)


4.2.蓝湖的基础使用

蓝湖是可以上传及阅览项目设计图的第三方平台。主要用来管理项目设计图及对需要看到设计图的人员管理

·蓝湖使用场景:

1.设计团队:根据项目及版本划分,规整功能及设计图的呈现。
2.研发团队:方便查阅项目的设计图,同时调用相关切图与标注信息
3.需求方:方便查阅最终项目的设计,及功能表现的最终设计效果。

·注册规范

·公有版蓝湖:https://lanhuapp.com/web/#/item

·企业版蓝湖:http://xxxxxxxxxxxx/#/item(需要企业购买部署私有服务器)

·蓝湖的注册规则:公邮箱注册 + 事业群 + 实名 + 职位

  例: 工程院_UED_陈XX_视觉设计师

·插件下载

1. 网页端进入项目,点击顶部 “+”号
2. 选择设计图
3. 选择不同的设计工具插件下载安装

·新建项目

1. 在自己的“UED的团队”下选择团队组
2. 点击新建项目按钮
3. 输入项目名称、选择设计载体

·插件登录

1. 公有蓝湖:使用个人账号没密登录
2. 企业蓝湖:使用XXXXXX地址登录


4.2.1 Sketch-蓝湖的使用方法(切图、上传设计)

·切图方法

1. 选择需要切图的icon,点击右侧制作导出项
2. 点击筛选icon 可做不同切图属性切换

·上传设计画板

1. 选择需要上传的画板
2. 点击 - 插件 - 蓝湖 - 上传所选/全部
3. 选择正确的团队
4. 选择设计尺寸 WEB、IOS、安卓
5. 选择蓝湖项目名称
6. 选择蓝湖内小组,点击上传


4.2.2PS-蓝湖的使用方法(切图、上传设计)

·切图方法

1. 选择需要切图的元素
2. 打开蓝湖插件
3. 切换至切图功能
4. 点击标记为切图

·上传设计画板

1. 选择需要上传的画板
2. 选择正确的团队
3. 选择设计尺寸 WEB、IOS、安卓
4. 选择蓝湖项目名称


4.2.3XD-蓝湖的使用方法(切图、上传设计)

·切图方法

1. 方法一:鼠标hover 在图层上左侧“分享”icon 也可以作为导出标记
2. 方法二:点击需要导出的icon ,鼠标右键添加导出标记

·上传设计画板

1. 打开独立的蓝湖XD软件
2. 选择需要上传的画板
3. 选择正确的团队
4. 选择蓝湖项目名称
5. 选择设计尺寸 WEB、IOS、安卓
6. 检查是否识别到画板,点击上传


4.3.邮件的正确使用

·邮件格式与内容规范

1. 邮件发送必须为公司邮箱,不可使用个人邮件
2. 一经发送不可撤回更改,内容需确认无误


4.4 Icon/图标的设计与切图

·Icon/图标的设计原则

01.图标的网格和参考线:

放大四倍进行图标设计。如果我们想设计一个48dp的图标,那么我们可以把画布放大到400%(192 x 192 dp)来设计,这时可以显示4dp的边缘。通过保持这个比例,任何变化都将按比例放大或缩小,这样可以在画面恢复到100%(48dp)时保持锋利的边缘和正确的对齐。

02.图标边距:

图标应该留出一定的边距,保证不同面积的图标视觉显示一样大。如果多个图标具有类似的逻辑层级,且同时在界面出现,注意它们的大小应尽量相等。

03.解决视觉差:

调整面积,解决视觉差。形态不一的图标会导致一定的视觉差,以下为不同形状的参考宽距。

*调节不同形态icon视觉差例子


·统一Icon/图标的设计DNA原则

01.图标的类型:

Material Design把图标分为填充图标(Filled)、线性图标(Outlined)、圆角图标(Rounded)、双调图标(Two-Tone)、尖角图标(Sharp)。无论什么类型的图标都要统一图标的设计DNA,如线的粗细,圆角的大小,图标的角度,图形的结合形式等等…

例:线性图标

02.描边粗细统一

图中的图标使用了2dp的描边以保持图标的一致性。如没有特殊原因,不要使用一种以上的描边粗细,保证图标视觉上的统一。


·Icon的切图

一.移动端的切图:iOS、Android

视觉图标要和切图本身四周留有间距,保证级别icon尺寸统一。或着整个切图还要和周围保持距离(通常两倍),开发不给力的时候直接输出大面积空白即可,这样就算他再马虎不给你留间距,你的切图也没有问题。

*例子:同类icon保持统一尺寸

01.sketch制作移动端切图#

1. 使用形状工具
2. 画出需要切图区域
3. 将区域形状和需输出的icon编组
4. 选择导出区域图层
5. 将区域形状透明度调整为“0”
6. 选择需要切图的元素/分组
7. 将区域形状与相对应的素材编组 -  添加导出标记


02.PS制作移动端切图

方法一:

1. 使用形状工具
2. 画出需要切图区域
3. 将区域形状和需输出的icon编组
4. 将区域形状透明度调整为“0”
5. 选择需要切图的元素/分组
6. 使用蓝湖插件切图标记

方法二:

1. 选择需要切图的元素/分组
2. 将确定好的长宽数值输入对应框内
3. 点击标记为切图

03.XD制作移动端切图

1. 使用形状工具
2. 画出需要切图区域
3. 选择导出区域形状图层
4. 将区域形状透明度调整为“0”
5. 将区域形状与相对应的素材编组 - 添加导出标记

二.Web端的切图

Web端icon为方便开发使用与后期UI维护管理,需要将iocn上传至confront(阿里巴巴图表库),上传至图标库需使用svg格式。一般将icon使用AI进行重新绘制导出,为保证icon同级别大小统一,需要将画板进行独立输出。

*注意事项:

无论在Ai,Ps,Sketch,XD中绘制矢量图标,图标边缘必须贴紧像素边缘,否则会出现显示模糊情况,从而降低设计质量。

三.点9切图法

.9是 andriod平台开发里的一种特殊的图片形式,文件扩展名为:.9.png。比如有一个气泡bubble,那么它的.9切图命名格式就是:bubble.9.png。这种图片能告诉程序这个图片哪部分可以被拉伸,哪部分不要拉伸。我们要做的就是使用 Photoshop 的铅笔工具,把铅笔设置成1px大小,透明度100%,颜色选择#000000纯黑色,然后在我们的切图边缘画出1像素的横竖线,然后把这张图命名后缀加上.9,就和系统打好了暗号了。后续,开发人员在开发环境就可以设置哪些部分可以拉伸哪些需要保留了。噢对了,我们画的黑色「暗号」是不会显示给用户的。

关于图标的设计原则:https://www.uisdc.com/material-design-knowledge


·结语

以上分享了我的《UI实习入职白皮书2.0》1~4章节,主要针对一些基础知识的总结和整理,希望能给UI新手和管理者一些受用。

其实针对协同软件和icon的设计与切图,虽然文字很多,但笔者已经尽量列了步骤点。很遗憾的是,由于会涉及到公司项目,其实笔者和同事彬仔是录了以上的教学视频,暂时不方便分享出来,若大家需要后续会考虑重新录制一个普罗大众版本。


·下一篇

下一篇为该主题的最后一篇,针对《UI实习入职白皮书》目录5~8章节的整理分享。


感谢~

上一篇感谢各位的支持和点赞,给我更多继续的动力。既然看到这里了,若受用就请给我一个赞吧,也欢迎各位一起讨论~

Powered by Froala Editor

更新:2021-03-23

收藏

103人已收藏

Blosson

无论何时,勿忘初心……

  • 24

    作品

  • 283

    粉丝

  • 12

    关注

  • 【2020AR设计整理·Mini3D/AR导航/AR尺子】
  • 【内卷时代下】设计师价值探索
  • 管理者寄语:UI实习生成长指南-下篇
  • 3D设计这么火,UI应用造起来!

    猜你喜欢

      2021-03-23 原创文章 经验/观点 举报 5555 103 35 2

      管理者寄语:UI实习生成长指南-中篇

      0.0°

      你确定要举报管理者寄语:UI实习生成长指南-中篇

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2021年03月22日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      35
      103
      2

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录