UI 设计小白入门论
作者:不洗碗工作室 - Ajiajia葭
作者联系方式:549044363@qq.com
版权归作者所有,转载请注明出处
(两个月前,新手入门的我可以说是一头雾水,很多方面都从未涉足,但,“种一棵树最好的时间是十年前,其次是现在”,慢慢摸索,在学长学姐们的点拨和建议中慢慢成长起来,平日里也留下了一些小总结,近日对学到的东西进行了归类整理,一定程度上对新手可以提供入门帮助。于是这篇小文章就诞生了。然而我的命名和尺寸等也还不规范,工具也不还不够熟练,现在仍处于猥琐发育期,所以这篇文章不仅仅是供大家参考,更是写给自己,如果文中有什么不恰当的地方,欢迎批评指教,希望与大家共勉,一起进步)
基础工具
设备
- 一台Mac可以助你一臂之力,或者装黑苹果
app(基于苹果系统)
- sketch可以说是专门为UI设计师量身定做的PS简化版本,所需要的功能都有,界面友好,而且对我而言,用起来会感觉比Photoshop更加便捷。(附:sketch中文用户手册 )
- 切图工具
- PxCook(后面会具体讲到)
- Zeplin
网址
设计师导航网址(其实这个用好了,enough)
- 设计导航1
- 设计导航2
icon
- 阿里巴巴Iconfont
- flaticons
- icomoon
- Noun Project
图片(有时候就是灵魂)
- 图虫
- Libre Stock
- Unsplash
- 500px
什么都不会的时候,最好的方式就是借鉴
- UI中国
- 学UI网(这个网站对所有界面进行了分类)
颜色素材与灵感
- dribbble
logo设计
- 25学堂(里面的UI干货,挺不错的)
- 手机上的两个app也可以进行初设计(装在口袋里的logo设计)
- Logo Market和 Logo Shop
分层级关系(接下来,打开你的sketch)
你设计出来的界面,不仅仅是给你自己看的,还有开发工程师,不仅仅是给你当下看的,还有未来接手此项目的下一届UI,所以,你得有明确的分类规范,命名规范.....如果可以让从未接触过此项目的人,看到你的目录能够一目了然,那你就成功一半了。接下来,我们就一起来学习一下。
三句箴言
- 每一个 app 对应 一个 Sketch 文件
- 每一个 app独立界面的汇总 对应 一个page
- 每一个 app的小界面是一个 Artboard
注意:在每一个Page内,还需要专门建立一个Artboard来说明 尺寸规范
- 颜色规范(color所出现的不同场景)
- 字体大小规范
- 图标规范(icon选中及未被选中时的颜色)
- 按钮规范(默认和不可点击的状态、及其他)
命名
一般来说,安卓或IOS开发工程师是在接收到UI的设计图之后开始工作,然而很多时候,在处理来自UI的图片命名上,总要或多或少的花费一些时间,因为大部分是“中文+数字”,所以安卓师在画layout布局的时候就需要:打开英汉词典查单词->安卓规范命名id->修改图片名字id,再把图片拖入drawable中。 其实,UI可以为这个过程加一个“疾跑”,想象一下,如果工程师在拿到切图的时候,就可以直接用这个名字来令为id,这可以一定程度上节省很多时间,与此同时,UI的英文单词量可以有显著上升的,这个可以有!哈哈哈哈
Artboard(画板)命名
- 模块-功能
- 将所有的Artboard按照序列号排好,相同模块内容的需要放在一起
- 另外:最顶层加一个额外的Artboard,主要用来画流程线,和一些信息备注,如:
Layer(图层)命名
- 将页面大型分块,大块建文件包,按照图层内容进行分包
- 类型--范围--功能
icon(图标)命名
- 模块--类别--功能--状态
- 文本颜色:text前缀
- 分割线颜色:div前缀
状态:
- 默认状态的颜色,添加normal后缀
- 按下时的颜色,添加pressed后缀
- 选中时的颜色,添加selected后缀
- 不可用时的颜色,添加disable后缀
类别:
- 导航栏:nav
- 页面标题:title
- 按钮:btn
- 标签:label
- 提示文字:hint
- 菜单栏:tab
- 背景图片:bg
- 默认图片:def
基础概念
Android开发单位
- dp
用于标注“长度”的单位 - sp
用于标注“字体”的单位
设计稿尺寸
- 推荐1080x1920px(sketch用户:540 x 960)
界面控件尺寸
底部(顶部)导航栏
- 作用:便于用户切换页面,提供快速导航的功能
- 适用条件:3~5个同等级的跳转界面,如果少于三个可以考虑Tabs(标签)来替代,如果大于三个则可以通过其他位置,比如导航抽屉来安放。
状态栏
- 作用:显示电量、时间、信号、网络等状态
标签栏
界面图标尺寸(1080x1920px)
- 启动图标(home页或app列表页):48 x 48 dp
- 操作栏图标:整体大小为32x32dp图形实际区域为 24x24dp
- 上下文图标:整体大小为16x 16dp图形实际区域为 12x12dp
- 系统通知图标:整体大小为24x24dp ,图形实际区域为 22x22dp
- 最细画笔:不小于6px
界面文字
- 字体
- 英文字体:Roboto
- 中文字体:source han sans 或者noto sans CJK
图片命名规范
- 模块--类别--功能--状态.png
为你飞得更高,来一些助攻吧
- 如何在4小时内学会 AI
- iOS设计规范
- Android设计规范
- 界面切图命名规范
切图工具PxCook
使用详情
具体操作:Pxcook
- 快速导出:一键快速导出到PxCook,无缝享受智能标注
- 数据填充:快速批量填充名字、时间、日期、手机号、邮箱
- 快速复制:精准到像素的快速批量复制设计元素
- 快速参考线
不断更新中.....
UI 设计小白入门论相关推荐
- ui设计新手入门学习需要注意什么细节
本文由:"学设计上兔课网"原创,图片素材来自网络,仅供学习分享 ui设计新手入门学习需要注意什么细节?初级与高阶设计师的区别,有时候不在于说整体大的布局上有什么差别,其实往往就在于 ...
- UI设计小白怎样学才能快速入门?
最近有很多同学问我,UI小白有什么捷径可以快速入门?其实我想说设计这门学科没有什么捷径,真的只有多学.多看.多练.多想.多做. 1.先学软件 如果你是小白,软件也不会用,那就先学软件,从PS开始,先看 ...
- UI设计小白怎样学才能快速入门
最近有很多同学问我,UI小白有什么捷径可以快速入门?其实我想说设计这门学科没有什么捷径,真的只有多学,多看,多练,多想,多做. 1.先学软件 如果你是小白,软件也不会用,那就先学软件,从PS开始,先看 ...
- 再谈UI设计的入门与进阶
设计是一门实践性很强的工作嗯.假如你的学习目标是要成为一名UI设计师的话,建议尽早找一份相关的工作开始做起.因为只有你进入到这个角色,实际的进行项目流程的时候你才能亲身感受到你所面临的具体问题是什么, ...
- 哪些人适合入门培训学习UI设计?
哪些人适合入门学习UI设计?UI设计横跨互联网和设计行业,深受很多人的热捧.今天就以3大具有代表性的人群着重给大家分析一下,希望能对大家有所启示和帮助.(来源:千锋UI) 一.设计相关专业大学生: 包 ...
- 怎么学ui设计入门?怎样才能少走弯路?
很多人错误地将工具作为学习UI设计的入门课,其实入门UI设计最好是选择美术基础.设计理论.很多自学UI设计的小伙伴,都会出现这样一种现象,会使用工具但是在了解真实的需求后却完全动不了手. 这里给想要入 ...
- UI设计初学者必入门必看!
UI设计初学者必入门必看!很多想学一门技术,却不知的学什么的朋友,经常可能会看到一些关于UI设计相关的信息,一时还不明白UI到底是干嘛的,想清楚的了解一下UI设计到底是什么,再打算去深入的学习. 一. ...
- UI设计行业领域知识体系
今天在百度搜"陈皮小桔",搜到自己的博客,就打开看看,以前写的都是前端的知识!CSDN里面基本都是技术类文章,而自从我做了UI设计师,基本上很少打开它,但是做了UI也可以继续我的博 ...
- UI设计书籍推荐,这三本好书你不能错过
UI设计近几年发展时态一片良好,UI设计师也顺势成了热门行业,但是行业专业技能人才还是很稀缺的,对这一行有想法的朋友也要动起来了,我们需要必要的充电.这里小编整理了一些UI设计书籍,希望能帮到大家.U ...
最新文章
- day20 函数闭包与装饰器
- RandomizedSearchCV 和GridSearchCV
- NLP之CRF分词训练(六)
- js 两行之间的设置间距_防火间距
- 修改服务器mysql密码,修改Linux服务器中的MySql密码
- 仓库每天的账怎样做_新年第一站,济南:仓储匠人仓库问题解决与实战力培训...
- 电路原理 邱关源 第五版 课后习题答案 课后习题详解
- php版本高无法删除栏目,phpcms不能删除栏目怎么办
- vue+element_ui上传文件,并传递额外参数
- Project-Euler-045思维
- WIN11 EDGE设置IE(internet explore)兼容相关
- python 暴力破解 excel加密文件
- 数据结构考试的一些选择题
- NVM详细安装及使用
- 基于ITIL的医院信息化服务管理实践(客户说)
- 数据分析之np.random.choice()补充【从二维数组随机选择n行一维数组】
- 版本回顾会_回顾Excel的早期版本
- ON1 Effects图形工具领域,LUT和预设的色彩工作站
- 【FPGA教程案例42】图像案例2——通过verilog实现图像二值化处理,通过MATLAB进行辅助验证
- 什么是“NULL指针”,“悬空指针”和“野指针”?
热门文章
- 情人节主题微信红包封面序列号免费领取!
- 这次彻底搞懂 Promise(手写源码多注释篇)
- 多波束成像声呐在不同安装角下对空间的切割方式分析
- 性能测试监控工具Server Agent无法监控资源,jmeter报错
- C# .net Framework Windows窗体应用【01】
- mysql查询未讲课教师_mysql综合性练习
- 【蓝桥备赛】七星填空
- NimotionStudio软件如何用?Studio软件的使用方法、操作流程和常见功能
- 【我的Android进阶之旅】NDK开发引入第三方so库(比如assimp和opencv库)常出现的几个问题:missing and no known rule to make it等
- java(十)【属性集,缓冲流、转换流、序列化流】