UI图标手绘88例
上QQ阅读APP看书,第一时间看更新

13 个人中心图标设计

个人中心图标一般在底边工具栏的最右边。在日常生活中,我们所见的所有需要用户注册才能使用的App都有“个人中心”界面。

54601-00-35-1

视频演示

◎ 元素提炼

顾名思义,“个人中心”界面是关于用户个人的所有功能和信息集合的界面,所以这类图标多会以“人”的形态来进行表现。经过无数次的演变和简化,这类图标中的人的形态一般用头和身体进行概括,也有些设计师在设计图标时会选择去掉身体部分,而保留头的部分进行细化设计。

54601-00-35-2

◎ 结构分析

针对这个图标的绘制,笔者提取了人的头和身体,并将两者进行组合设计,身体仅留取肩以上的部分。此外,在右下角添加了一个心形图案。

◎ 设计思路

这个图标以人像为主要元素,其中头直接由一个圆进行表现,肩部由一个半圆进行表现,并保持图标线条的流畅性和圆润感。为了让图标看起来简约而不简单,在右下角增加了一个心形图案,以表达“喜爱和收藏”的语义。心形图案采用风格化虚线可以使图标更透气,同时可以平衡整体画面。在人头和身体衔接的位置增加了两处断裂的效果,让整体图标看起来更轻松、灵活一些。

◎ 绘制过程

01 定出人像和心形图案在画面中的位置和比例。画出垂直方向的中轴线,之后用辅助线确定出头和身体的具体位置和大小。

54601-00-35-3

02 绘制出人像的具体形态,注意在右侧留出心形图案的位置。

54601-00-36-1

03 先确定心形图案的中轴线,画出心形图案上半部分的两个半圆。

54601-00-36-2

04 将心形图案的轮廓补齐。

54601-00-36-3

05 擦除被心形图案遮挡的人像部分,同时擦出心形图案右下角的风格化虚线,以及人物头与身体之间需要断开的部分。

54601-00-36-4

思维拓展:为什么图标需要在正方形范围内进行设计

图标设计需要在正方形范围内进行,其较重要的一个原因是,同一个图标在不同屏幕下显示的效果会不同,而这样处理可以更好地进行屏幕适配,让工作流程更标准,并大大降低工作成本。同时,这样设计出的图标更便于点击,且能让界面看起来更加规范、统一。

» 内容和形式

图标设计的内容是指设计师希望传达给用户的图标语义、功能或者其他希望用户了解的图标信息;形式则是指图标设计的风格和其他表现方式。在图标设计过程中,设计师可以利用各种设计元素与设计方法对想要传达的内容进行视觉上的处理。但是,形式要服从于内容。也就是说,图标的功能决定着它的形态,形态必须要表达出功能所包含的语义。

» 绘制图标前需了解的App系统基础知识

底边工具栏在手机应用这类互联网产品诞生之初就存在了,作用类似于网站的导航栏,但是其具体表现形式和网站的导航栏有很大不同。在进行UI图标设计之前,应该先了解不同平台(主要指iOS和Android这两个系统平台)中导航栏的设计规范。

iOS系统只有苹果公司在开发和使用,Android系统则对外开放并供各大手机生产商改进和使用。iOS系统和Android系统在近十年的发展过程中,从刚开始的相类似到现在区别越来越大,导致用户在转换平台(也可以说是转换手机系统)时学习成本或熟悉成本也变得越来越大。目前,在App设计中,大多数公司会优先选择iOS系统平台进行全部设计和实现,然后修改部分操作方式和设计内容,以适应Android系统平台规范,最后移植到Android系统上进行实现。同时,就UI设计师而言,从UI设计开始他们就要配合工程师兼顾两个平台的共性和特性进行设计。

» App界面大致包含的内容板块有哪些

下面介绍的是几乎所有App都有的一些UI结构和UI元素,它们都有规定的大小和位置,也是UI设计师必须掌握的基础知识。当然,App中还规范了一些其他元素的尺寸和使用方法,可以在网上查阅iOS系统和Android系统相关的App设计指南进行详细了解。

状态栏:显示时间、信号、电量及蓝牙状态等内容,在手机屏幕的最上方。

导航栏:有标题,显示当前界面的位置和名称。

搜索栏:在搜索框中输入想要搜索的内容的关键词,然后点击搜索图标,即可开始全站搜索。

工具栏:表示App可以完成的功能大类。

根据App的种类和使用人群,这里以购物类软件为例,介绍一些购物App首页必要的组成部分,这些内容大多根据软件需求来定义和划分,引导用户以较合理的方式和较快的速度找到想要的内容。由于购物类软件需要呈现的信息非常冗杂,因此需要产品经理、UI设计师及用户体验设计师等多人一起合作并完成设计,让用户在体验中感觉更方便、舒适和愉悦。首页必要的组成信息如下。

Banner:展示重要的促销广告。

功能分类:用图标排列的形式展示各种重要的软件功能,方便用户直接进入想要使用的功能界面,也方便用户直接获取软件的各项信息,全方位地了解软件。

首推内容:根据软件商品的类别和(营销)需求的不同,需要展示的功能和内容也不同,如秒杀、特惠、专题及榜单等。

满足用户需求信息:用户较关注的内容部分,里面包含一些用户较喜欢、较感兴趣的功能,如点击率高的商品、抽奖、免费试用、浏览过的商品列表及购物车里商品的广告等。