UI 设计小白入门论

作者:不洗碗工作室 - Ajiajiajia

作者联系方式:549044363@qq.com

版权归作者所有,转载请注明出处

掘金专栏:https://juejin.im/post/5a2e8c17f265da43252940c7

(两个月前,新手入门的我可以说是一头雾水,很多方面都从未涉足,但,“种一棵树最好的时间是十年前,其次是现在”,慢慢摸索,在学长学姐们的点拨和建议中慢慢成长起来,平日里也留下了一些小总结,近日对学到的东西进行了归类整理,一定程度上对新手可以提供入门帮助。于是这篇小文章就诞生了。然而我的命名和尺寸等也还不规范,工具也不还不够熟练,现在仍处于猥琐发育期,所以这篇文章不仅仅是供大家参考,更是写给自己,如果文中有什么不恰当的地方,欢迎批评指教,希望与大家共勉,一起进步)

基础工具

设备

  • 一台Mac可以助你一臂之力,或者装黑苹果

app(基于苹果系统)

  • sketch可以说是专门为UI设计师量身定做的PS简化版本,所需要的功能都有,界面友好,而且对我而言,用起来会感觉比Photoshop更加便捷。(附:sketch中文用户手册
  • 切图工具
    • PxCook(后面会具体讲到)
    • Zeplin

网址

设计师导航网址(其实这个用好了,enough)

icon

图片(有时候就是灵魂)

什么都不会的时候,最好的方式就是借鉴

颜色素材与灵感

logo设计

  • 25学堂(里面的UI干货,挺不错的)
  • 手机上的两个app也可以进行初设计(装在口袋里的logo设计)
    • Logo Market和 Logo Shop

分层级关系(接下来,打开你的sketch)

你设计出来的界面,不仅仅是给你自己看的,还有开发工程师,不仅仅是给你当下看的,还有未来接手此项目的下一届UI,所以,你得有明确的分类规范,命名规范.....如果可以让从未接触过此项目的人,看到你的目录能够一目了然,那你就成功一半了。接下来,我们就一起来学习一下。

三句箴言

  • 每一个 app 对应 一个 Sketch 文件
  • 每一个 app独立界面的汇总 对应 一个page
  • 每一个 app的小界面是一个 Artboard
image
image

注意:在每一个Page内,还需要专门建立一个Artboard来说明 尺寸规范

image
  • 颜色规范(color所出现的不同场景)
  • 字体大小规范
  • 图标规范(icon选中及未被选中时的颜色)
  • 按钮规范(默认和不可点击的状态、及其他)

命名

一般来说,安卓或IOS开发工程师是在接收到UI的设计图之后开始工作,然而很多时候,在处理来自UI的图片命名上,总要或多或少的花费一些时间,因为大部分是“中文+数字”,所以安卓师在画layout布局的时候就需要:打开英汉词典查单词->安卓规范命名id->修改图片名字id,再把图片拖入drawable中。
其实,UI可以为这个过程加一个“疾跑”,想象一下,如果工程师在拿到切图的时候,就可以直接用这个名字来令为id,这可以一定程度上节省很多时间,与此同时,UI的英文单词量可以有显著上升的,这个可以有!哈哈哈哈

  • Artboard(画板)命名
    • 模块-功能
image
- 将所有的Artboard按照序列号排好,相同模块内容的需要放在一起
- 另外:最顶层加一个额外的Artboard,主要用来画流程线,和一些信息备注,如:
image
  • Layer(图层)命名
    • 将页面大型分块,大块建文件包,按照图层内容进行分包
    • 类型--范围--功能
  • icon(图标)命名
    • 模块--类别--功能--状态
    • 文本颜色:text前缀
    • 分割线颜色:div前缀

状态:

  • 默认状态的颜色,添加normal后缀
  • 按下时的颜色,添加pressed后缀
  • 选中时的颜色,添加selected后缀
  • 不可用时的颜色,添加disable后缀

类别:

  • 导航栏:nav
  • 页面标题:title
  • 按钮:btn
  • 标签:label
  • 提示文字:hint
  • 菜单栏:tab
  • 背景图片:bg
  • 默认图片:def

基础概念

Android开发单位

  • dp
    用于标注“长度”的单位
  • sp
    用于标注“字体”的单位

设计稿尺寸

  • 推荐1080x1920px(sketch用户:540 x 960)

界面控件尺寸

image
  • 底部(顶部)导航栏

    • 作用:便于用户切换页面,提供快速导航的功能
    • 适用条件: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

为你飞得更高,来一些助攻吧

切图工具PxCook

使用详情

具体操作:Pxcook

  • 快速导出:一键快速导出到PxCook,无缝享受智能标注
image
  • 数据填充:快速批量填充名字、时间、日期、手机号、邮箱
image
  • 快速复制:精准到像素的快速批量复制设计元素
image
  • 快速参考线
image

不断更新中.....

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,126评论 6 481
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,254评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 152,445评论 0 341
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,185评论 1 278
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,178评论 5 371
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,970评论 1 284
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,276评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,927评论 0 259
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,400评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,883评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,997评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,646评论 4 322
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,213评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,204评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,423评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,423评论 2 352
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,722评论 2 345

推荐阅读更多精彩内容

  • 一、WebView 谷歌提供的系统组件,用来加载和展现html网页,其采用webkit内核驱动,来实现网页浏览功能...
    闲庭阅读 6,931评论 2 12
  • WebView·开车指南 2016-08-31BugDev 北京市东城区首席Bug布道师开山之作,一整月交通事故血...
    53c021c38a1d阅读 825评论 0 1
  • WebView·开车指南 目录 WebView简介 WebView基本使用 WebView常用方法 WebSett...
    南城的人阅读 4,739评论 0 19
  • 你见不得我吃一点点零食,你恨不得我每天都呆在健身房!就因为我是一个吃什么都会长肉的体制,那天我要是真的胖回原来的样...
    S小姐你好呀阅读 160评论 0 2
  • 简书
    一简爱一阅读 86评论 0 0