手残党学插画第2步之移动端APP界面...

Echobest

2018-10-11

原创文章

391

0

1

经验分类:经验/观点/原创文章




之前在“手残党学插画第1步”中介绍了微信端插画风运营图片的制作方法,但工作

中负责移动端APP界面的视觉工作才是常态,所以今天给大家介绍第2种练习插画的方式,下面就从简单的APP引导页开始练习吧!


(注:结合你的工作内容来练习可以事半功倍)



Idea头脑风暴/创意思考:


1. 根据文案大致确定一个你想要绘制的内容或者说想要表达的一种感觉及氛围。

2. 写下可以使用的素材种类。例如:理财行业,会让人联想到金币、算盘、小金猪储钱罐等等。

3. 确定色彩基调,选择1种主色2种辅色。想要表达热情、温暖的氛围就用暖色系;想要表达冷静、严肃、清爽的氛围就用冷色系。



制作前的准备工作:


1. 工具:photoshop软件

2. 确定制作尺寸



(一切准备就序,开始吧!)



制作步骤:


1. 收到的需求如下

要求制作三个界面,文案分别为“全面保障体系,覆盖多科室;科技改变生活,多平台操作;全程经纪服务,更专注专业”;要求简洁,体现医疗场景及科技感。



2. 想到的核心构图元素

医院建筑、保险经纪人、线上多平台模式(iPad端、PC端、手机移动端)~


3. 绘制草图

在纸上绘制草图,根据效果适当添加点缀元素。


Image title


说明:有手绘基础的,在草稿上就可以直接定好最终要在软件上绘制的图形,没有基础的(例如我,哈哈)就先简单绘制出个大概的图像即可,然后在软件中再勾画细节。


4. 打开PS软件,创建画布

创建“宽度750像素*高度1334 像素” 尺寸的画布;分辨率72像素、颜色模式RGB;


Image title


说明:以目前市场上手机屏幕种类来说,750*1334为2@图,用此尺寸向上或向下试配都方便。


5. 导入草图作为参考,调整画笔面板参数设置。

形状动态和传递中都打开“钢笔压力”,画笔选择自带的画笔即可。

新建图层绘制第1遍草图(可以有复笔,线条可以重复叠加),绘制好以后降低图层的透明度,在此图层之上再新建1个图层,绘制最终定型的线稿图(不要有复笔)。


Image title


说明:因为我的技术也不行,所以这里就不上传了(以免献丑,哈哈)。


6. 选择蓝色系作为主色,紫粉色系和橙黄色系作为辅助色。

考虑到医疗行业属性以及制作要求是希望给人营造健康、安全可靠的感觉,所以选择以蓝色系为主的色彩搭配。


7. 经过几番调色,形成最终视觉稿如下:

Image title


Image title

Image title


~ 上篇完 ~




番外篇:



首先,来说说什么是引导页。


引导页通常分为:app首次引导页操作说明引导页空页面引导页




一、app首次引导页



上面案例中我们制作的就是“app首次引导页”,即“新用户引导页面”。意思就是只有第一次启动app的用户才能看到,当你关闭APP后,再次打开时,是看不到的了。



制作的意义就是向用户介绍产品主要功能与特点。



一款APP产品的第一印象起始于引导页,但页面停留的时间只有3s,时间极短,所以设计的内容必需简洁,主题突出。

一般引导页不会超过5页。过多的页面造成视觉的冗杂,给用户造成认知疲劳和负担。



APP首次引导页主要有以下几种常见类型:



1. 功能介绍类引导页



作用:一般是新产品上线/新功能发布会使用。

形式:采用的形式大多以文字配合界面、插图的方式来展现。

设计师通过对特色功能的总结提炼,用易于理解的图形表达形式进行视觉化的设计,使用户易于理解。



2. 推广类介绍引导页


作用:主要是为了传达整个产品风格、公司文化或战略目标等。



3. 解决问题类引导页


作用:一般是产品新功能发布时使用。

这类引导页通过2~3页设计描述问题,在巧妙的通过1~2页介绍产品能带来的解决方案。




二、app操作说明引导页



形式:这类引导页大多采用箭头、圆圈进行标识,设计师在设计时会以手绘风格为主。

目的:是拉近用户的距离,进行相关轻提示。

操作:将引导的内容信息,直接固定在某个功能控件上,这些提示通常出现在用户首次操作的时候,并且一次只显示一个,用户需要触发进行下一个提示(如果有下一个提示的话)。



三、app空页面引导页



作用:首次使用APP的时候进行提示。


对于新用户而言,由于没有任何操作历史,所以许多界面都会呈现出“空状态”。

而这样一定会让用户产生一定的失落感,所以利用空页面可以引导用户进行某些操作,增加用户粘性。



其次,来说说引导页的三个基本功能。


即便是再简单的的引导页也必须有三个功能:问候、传递信息和提升参与度。



01. 问候。问候和介绍要尽量的简短,不要分散用户过多的注意力。

02. 传递信息。这是引导页对于用户来说最重要的一项功能,要起到操作说明书的作用,必须对引导页的内容做一个优先级筛选。只有真正重要的内容才能放到引导页中。

03. 提升参与度。不同的 app 有着不同核心功能和目标用户群,其引导页的框架与内容也是不一样的。但是每一款 app 的用户体验立足点却是相同的:用户需求、用户期望、产品性质、经营目标。引导页作为用户使用 app 的出发点,我们的目标是以一种动态的,易懂的和有吸引力的方式告诉用户这款 app 的基本信息。


形式:引导页一般有 3-4 页,主要有图片、文字和动画组成。


最后,来说说组成引导页的主要元素。


1. 图片



当然引导页中对于插画的要求不是很高,简单的 iocn 类插画也同样出彩。插画对于低年龄段用户来说有着巨大的吸引力。特别是对于青少年来说,他们很喜欢带有插画的引导页。




2. 文字



对于引导页来说,文字是占主导地位的。要足够的简明扼要,降低用户的阅读时间。



3. 跳过选项



用户真正的关注的是页面中的内容,这款 app 究竟能给我解决什么样难题,我通过使用这款 app 会带来哪些便利。





~ 我是有底线的哈 ~

















全部评论:0

更多作品

发表评论

取消

点击右上角
分享给朋友吧

分享到

取消