手绘分享看牛人教你如何画出手机APP软件.docx
- 文档编号:17768992
- 上传时间:2023-08-03
- 格式:DOCX
- 页数:9
- 大小:1.68MB
手绘分享看牛人教你如何画出手机APP软件.docx
《手绘分享看牛人教你如何画出手机APP软件.docx》由会员分享,可在线阅读,更多相关《手绘分享看牛人教你如何画出手机APP软件.docx(9页珍藏版)》请在冰点文库上搜索。
手绘分享看牛人教你如何画出手机APP软件
手绘好玩吗?
答案是一定的!
看看那些手绘达人天马行空的创意,恐怕你也就开始蠢蠢欲动拿起画笔了吧。
今天,小编为你分享一位手绘达人是如何画出栩栩如生的手机APP应用的。
小编表示,看完之后,好想重拾画笔,画出自己的世界啊。
有人问起手绘线框图的工具和方法,一名手绘设计师了她的个人经验。
尽管很少使用手绘表现UI设计,一般都是铅笔稿等级就进Axure制图、几乎没用到马克笔,不会的同学学起来先。
关于线框图
线框图是基于手机app等UI的一种低保真度的设计原型,在去除所有视觉设计细节之下,进行页面结构、功能、内容规划。
页面上只有方框和文字,没有图片和色彩。
绘制线框图的目的在于确认每一个页面的构成,重点在于画面上要呈现什么内容、而不是看起来漂不漂亮。
就像是室内设计平面图,只有简单的几何图型,却是装修最重要的依据
工具
根据个人习惯,你可以挑选以下3种基本工具。
酒精性马克笔
你可能常见Pantone、Copic这两牌子。
当然NEOPIKO也还不错。
不过不要买毛笔软头,请挑平头+硬尖头那种。
有经验的设计师一定会提醒你:
千万不要买整套!
你是要画Wireframe不是交学校作业,灰阶挑1、3、5,加自己看得顺眼的4只浅色就绰绰有余了。
什么艳色、深色,画Wireframe用不到。
酒精性麦克笔贵死了!
能省则省。
油性色铅笔
铅笔、油性原子笔、水性笔画的草稿,被酒精性麦克笔一涂,画面通通都脏掉。
早期我们用到H的自动笔在画,下笔重一点同样脏脏的。
后来找到破解法:
油性色铅笔。
拿浅色的来替代铅笔打草稿,画错一样擦得掉很不明显。
就算酒精性麦克笔抹过去也不会糊,根本救星啊!
文具店抓随便一支就够用,20元左右。
粗的黑色原子笔
最后描框用,随便哪牌子都可以,挑顺手便宜的买。
想专业点就拿代针笔吧,我自己是用Uni的普通原子笔。
(ZEBRAZ-1S0.7原子笔,便宜大碗。
)
步骤
1.白纸
大家可以去UIStencils—iPhoneSketchPad找免费的样板PDF下载
2.打草稿
直接拿浅色油性色铅笔画出主要区块。
根据为什么要画3次Wireframe?
介绍的个人习惯,动用麦克笔的Wireframe在手绘稿中算是第2次了,会有张辽草的乱撇铅笔稿当范本,所以拿色铅笔直接画也不太会出错。
3.上底色
拿出最浅的1号灰阶麦克笔上底色。
除非胸有成竹,不然要从1号灰阶起手。
颜色浅可以多迭几次,下手太重没救。
4.描边
用粗黑笔描轮廓线,画面就会有模有样的。
色铅笔画错也没关系,黑笔边一描下去就很不明显了。
一般,UI设计师会等架构都确定了才会想icon的设计,通常就是一个圈圈代替。
万一Wireframe一直重画,光刻icon就饱了。
5.写字
请用比0.5细的黑笔来写字和补细节。
我手账本用UniStyleFIT写╮(╯_╰)╭,随手抓也就是这牌子的黑色,0.38或0.28都可以。
6.上重点色
几个比较重要的颜色要加强,用深一点的灰色也行,但视觉会没有重心,用亮一点的色彩加强比较讨喜。
7.外框
外框最后再来画,避免万一要加什么麦克笔色就糊掉了。
不画也没关系,但加这一圈框在视觉上比较有精神,焦点会集中在框内。
8.其它
画这样一张Wireframe有依据的话非常快,但很多企划、PM、客户不看这种手绘图,他们只想看计算机画的。
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 手绘 分享 看牛人教 如何 画出 手机 APP 软件