当设计一个App UI的时,我们该考虑的问题
- 格式:docx
- 大小:4.47 MB
- 文档页数:27
相信很多人都在开发设计APP时会遇到很多界面上的问题,要以多大尺寸来设计?分辨率是多少?该怎么切图给开发等等下面的文字就给出一点点技巧总结,但也要给合团队在开发时的习惯。
每个工程师们所使用的控件,书写布局习惯来实际移交的图是不一样的,但八九不离十,都是遵循一个原则,便捷开发、自适应强的开发模式IOS篇一、尺寸及分辨率iPhone界面尺寸:320*480、640*960、640*1136iPhone6:4.7英寸(1334×750),iPhone6 Plus:5.5英寸(1920×1080)设计图单位:像素72dpi。
在设计的时候并不是每个尺寸都要做一套,尺寸按自己的手机来设计,比较方便预览效果,一般用640*960或者640*1136的尺寸来设计,现在iphone6和plus出来后有很多人会使用6的设计效果。
如果是我来做的话,我会使用640×1136,对plus做单独的修改适配,因为plus的屏幕实在是大了,遵循屏大显示更多内容的原则这里本应该是需要修的了。
有更好办法的话希望大家可以分享一下。
Ps:作图的时候确保都是用形状工具(快捷键:U)画的,这样更方便后期的切图或者尺寸变更。
二、界面基本组成元素iPhone的app界面一般由四个元素组成,分别是:状态栏(status bar)、导航栏(navigation)、主菜单栏(submenu)、内容区域(content)。
这里取用640*960的尺寸设计,那我们就说说在这个尺寸下这些元素的尺寸。
状态栏(status bar):就是我们经常说的信号、运营商、电量等显示手机状态的区域,其高度为:40px导航栏(navigation):显示当前界面的名称,包含相应的功能或者页面间的跳转按钮,其高度为:88px主菜单栏(submenu,tab):类似于页面的主菜单,提供整个应用的分类内容的快速跳转,其高度为:98px内容区域(content):展示应用提供的相应内容,整个应用中布局变更最为频繁,其高度为:734px至于我们经常说的iPhone5/5s的640*1136的尺寸,其实就是中间的内容区域高度增加到910px。
app界面设计报告为了让App界面的设计更加人性化和符合用户的需求,本报告将从以下几个方面进行介绍:一、App界面设计的目的和意义App界面设计是为了提升用户的使用体验,通过对界面进行优化,能够让用户快速地理解并且轻松地完成任务。
在App各种功能模块多样化的情况下,通过合理的布局、色彩搭配、字体选择、功能分组等操作,能够使用户造福业务目标达成,达到界面的最终设计目的。
二、App界面的设计原则任何一个好的UI设计都需要符合以下的设计原则:1. 一致性在同一界面,各项设计元素的样式与表现,应保持一致性,以增强整个App界面效果的和谐统一性并且增加用户使用的便利。
2. 简洁性在设计界面、排版、风格等方面,应尽可能保持简洁明了的状态,在信息呈现的时候能够更加清晰地表达所有的信息。
3. 可控性App的所有功能在操作和使用的时候,要让用户感觉到该界面及各个功能的可控性,能够在设计的操作界面上自如的操作使用,对App各项功能的使用体验将产生决定性的影响。
4. 自然性App的设计要尽可能与自然环境相吻合,在用户的体验中创造出自然、便利、和谐的感觉。
三、App界面设计的常用元素设计良好的App界面设计,要得到用户的青睐,除了内容以外,上下左右布局、颜色、字体、图标等都需要注意。
在App界面的设计中往往会涉及到以下的元素:1. 颜色:颜色在App的界面设计中是非常重要的一个因素,用好了善用了,会让界面变得非常的美丽和高端,但配色的使用就不容易了,一句话里蕴藏着数不尽的的配色理论。
2. 字体:字体也是非常重要设计元素,不同的风格、需求,配备班担当文字表现的情况也是不一样的。
3. 图标设计:图标也是界面设计的必要元素之一,图标的设计可以是直截了当的类型,也可以是有更多活力的图标类型,根据设计师的需求,设计制作出图标更能达到效果。
4. 布局设计:App的设计在很多情况下都需要通过良好的布局来达到完美的效果,先在纸和笔上形成一个大意,然后转化到开发的界面设计中来。
Q1:你为什么要做UI?你之前不是这个专业的,怎么想起来做UI的?我很早就知道UI这个工作,并且我有朋友是从事互联网这个行业的,在与他的交谈我们曾涉及过UI这个领域,也因此使我一直对UI都十分感兴趣,并且我也花费了大量的精力学习(时长:几个月至半年),身边也有业内辅导我。
目前互联网前景良好,特别是5G的到来,人工智能的发展,物联网、大数据的普及,UI设计比我自身所学的专业更有发展前景,因此我选择来从事UI行业。
Q2:请介绍一下你自己?你是怎么知道我们公司的?你对我们公司有什么了解?(针对该公司的近期的发展动向,组织相对的回答模式)例:某之前做网页的公司想开拓APP业务。
我曾做过n个APP的改版/我长期关注一些APP用户体验交互的现况,非常擅长APP的交互动画/色彩/排版/功能/产品定义。
我在应聘贵公司之前,对贵公司就有所耳闻,贵公司的XXX业务在行业中是处于XXX地位,可简述公司创始人及股东的资源来源。
贵公司的XXX(公司产品)最近是处于XX的状态,同时亦可分析竞争对手产品的优劣势。
Q3:你平时一般上什么网站?你收集了多少素材?你平时是怎么整理素材的?你一般去哪里找素材?在国内素材站有花瓣,(站酷)海洛,千图,昵图,我图等。
我的素材是不限于某一网站的,在此基础上习惯于将他们的优秀想法进行分类,同时也会根据色彩、风格等分类,目前已收集到一个硬盘的素材。
其实我个人在日常生活中也会画一些插画/启动页/2.5D/缺损图标。
Behance、Dribble、Pinterest也经常上。
另外,因为喜欢设计,我自己也是千图网的VIP会员。
Q4:你是怎么决定一个产品的配色的?首先,如果公司有VI企业识别,我会根据公司的VI企业识别,优先选择VI的配色。
其次,我会根据目标用户的喜好以及公司管理层对于产品定义的意见。
当然,对于产品配色大方向已经确定的情况下,我也会多出几个方案以供公司挑选(或使用用户调研的方式寻求最能让用户接受的配色方案)。
ui设计报告UI设计报告。
一、项目背景。
本次UI设计报告是针对某公司旗下APP的界面设计进行的总结和分析。
该APP是一款面向年轻人的社交娱乐类应用,主要功能包括社交互动、短视频分享、直播等。
由于用户群体主要是年轻人,因此对于界面设计的要求较高,需要具有时尚、个性化、易用性强的特点。
二、用户需求分析。
通过对用户群体的调研和分析,我们发现他们对于APP的界面设计有以下几点需求:1. 界面简洁明了,易于操作;2. 色彩搭配要时尚个性,符合年轻人审美;3. 功能布局要合理,方便用户快速找到所需功能;4. 动效设计要生动有趣,增加用户体验感。
三、UI设计原则。
基于用户需求,我们制定了以下UI设计原则:1. 简洁性,界面设计要简洁明了,避免过多繁杂的元素和信息;2. 时尚性,色彩搭配要符合时下流行趋势,吸引用户眼球;3. 易用性,功能布局要合理,便于用户快速找到所需功能;4. 生动性,动效设计要生动有趣,增加用户的互动体验。
四、界面设计方案。
1. 色彩搭配,采用明快的色彩搭配,如亮色系和鲜艳色系,增加界面的活力和个性;2. 图标设计,采用扁平化设计风格,简洁明了,符合现代审美观;3. 动效设计,适当运用动效设计,增加界面的生动性和用户体验感;4. 布局设计,采用简洁的布局设计,保持界面整洁,避免信息过载;5. 字体设计,选择清晰易读的字体,保证用户阅读体验。
五、设计实施。
在设计实施阶段,我们将按照以上界面设计方案进行具体的设计和实施工作。
在设计过程中,我们将不断与用户进行沟通和反馈,不断优化和调整设计方案,以确保最终的界面设计能够满足用户的需求和期待。
六、设计效果评估。
设计完成后,我们将进行用户体验测试和效果评估,收集用户的反馈意见和建议,对设计进行进一步优化和改进。
同时,我们还将根据用户的实际使用情况,不断对界面设计进行调整和改进,以确保设计能够持续满足用户的需求。
七、总结。
通过本次UI设计报告,我们对APP的界面设计进行了全面的分析和总结,制定了相应的设计方案和实施计划。
app ui设计规范App UI设计规范是指在进行手机应用开发过程中,为了确保应用的用户界面(UI)在外观、交互和功能上都能够满足用户需求和期望而制定的设计规范。
下面是一份1000字的App UI设计规范:1. 品牌形象统一在设计App界面时,需要保持应用的整体品牌形象统一。
包括使用品牌颜色、字体、图标等元素,以及保持一致的视觉风格和风格指南。
这可以帮助用户更好地识别和记忆您的应用。
2. 简洁明了的布局应用界面的布局应该简洁明了,避免杂乱无章的元素和信息堆叠。
有一个明确的信息层次结构,并确保主要功能和操作可见和易于访问。
3. 内容可读性应用的内容应该易于阅读和理解。
使用易于辨认的字体和适当的字号、行距和字距。
避免在背景和文本之间使用过于鲜艳的对比色,以保护用户的视觉体验。
4. 导航结构清晰应用的导航结构应该清晰明了。
使用明确的导航栏和底部标签栏来引导用户浏览和操作。
避免过多的嵌套菜单和混乱的导航路径,以提高用户的导航效率。
5. 易于操作的交互元素应用的交互元素应该易于操作。
按钮、输入框、滑块等交互元素应具备足够的大小和间距,以确保用户准确地点击或滑动。
同时,需要提供明确的反馈,如按钮点击后的动画或弹出的确认框。
6. 多设备适配应用的UI设计需要适配不同尺寸和分辨率的设备。
确保界面元素在不同设备上的显示效果一致,并且能够根据屏幕大小和方向进行自适应调整。
7. 错误处理和反馈应用应该有清晰的错误处理和反馈机制。
当用户操作错误或发生问题时,应提供有用的错误信息,并指导用户如何纠正错误。
同时,避免弹出过多的错误提示框,以免用户感到困扰。
8. 良好的可访问性应用需要考虑用户的可访问性需求。
确保界面元素具备足够的对比度,以方便视觉障碍用户的浏览。
同时,提供辅助功能,如语音导航和放大预览等,以满足不同用户的需求。
9. 高效的反馈时间应用需要提供高效的反馈时间,以增强用户体验。
减少加载时间和操作延迟,确保应用的响应速度在合理范围内。
ui设计师面试常见问题及答案一.基础问题0.请你先简单的自我介绍?1.请问你学历,是否有美术功底,是否有经验?2.为什么离职,为什么离开上一家公司?3.浅谈自己的作品偏什么风格?4.说出一个最喜欢的app,评价优缺点?5.有没有上线作品,如果没上线,为什么没上线?6.说说你们产品从需求到上线的流程?7.为什么选择我们公司,有哪些优势?8.你觉得什么是UI设计?9.平时获取资讯信息的渠道?10.了解我们的产品后,使用体验是什么?觉得目标客户是谁?11.浅谈职业规划?12.UI设计师那么多,说一下让我们用你的理由?13.你觉得这个APP做的怎么样?14.你觉得这个官网做的怎么样,如果让你做,你会怎么做?15.推动一个项目的视觉设计需要多久?16.讲一讲您对移动端的了解?17. 您认为您的性格特点是什么?在工作中有什么帮助?18.作为一名设计,当开发和客户对您的设计理念不赞同,您会怎么处理?19.聊一聊你最喜欢的设计师?二.专业问题1.UI和UE最大的区别在哪里UI即User Interface ,用户界面,业界一般指的是界面视觉设计。
UE即User Experience,用户体验,UE范围最大,不仅仅包含视觉与交互.研究的对象是用户使用这个产品过程中所有的感受,比如听觉视觉触觉嗅觉味觉等等。
2. 谈谈你对用户体验的理解?用户体验是产品设计的灵魂职位,通过分析用户心理模型与产品功能需求来设计任务流程,运用交互知识搭建产品的核心架构设计出产品原型以最终实现产品的可用、易用与好用。
3. Material Design怎么理解的?把物理世界的体验带进屏幕。
去掉现实中的杂质和随机性,保留其最原始纯净的形态、空间关系、变化与过渡,配合虚拟世界的灵活特性,还原最贴近真实的体验,达到简洁与直观的效果。
4. Material Design三大原则1.运用比喻鲜明、形象、2.深思熟虑3.动效表意。
产品设计方案APP类作为当今数字化时代必不可少的一个领域,APP设计已经成为了产品设计的重要组成部分。
因此,在市场竞争日益激烈的今天,一款好的APP产品设计方案显得尤为重要。
本文将以“产品设计方案APP类”为主题,从用户体验、UI设计、功能设计三个方面探讨好的APP产品设计方案的要素。
一、用户体验1. 用户研究首先,APP产品的设计方案需要充分了解用户需求、行为习惯和使用场景。
通过深入的用户研究,分析用户需求和用户行为,在产品设计过程中可以针对用户的具体需求,设计出更贴合用户使用习惯和场景的产品。
2. 简约易用产品设计方案应遵循简洁易用的原则,将用户操作引导至最简单的路径,确保在任何情况下都能正确操作。
良好的用户体验是提高用户留存率的重要因素,通过简单易用的设计方案,可以提高用户对APP的好感度和信任度。
3. 交互反馈APP产品设计方案应该考虑到用户交互反馈的重要性。
在产品设计中,应该为用户提供及时有效的反馈,比如声音提示、震动提示、动态效果等,让用户在使用产品时获得更好的交互体验。
二、UI设计1. 统一性和可识别性在产品UI设计方案中,统一性和可识别性是非常关键的因素。
应该使用相同的颜色、风格和UI元素,使得用户在使用过程中,能够快速地识别出与之前相似的界面,从而提高使用效率和舒适度。
2. 界面设计风格APP的界面设计风格也非常重要,应根据APP定位、用户画像、行业特点等进行设计。
同时,设计中应考虑到用户使用时长,简洁明了的UI设计方案,可以使用户在短时间内获得产品的核心信息。
3. 视觉设计与满足感视觉设计可以为用户带来更好的使用体验,通过配色、字体、图片等视觉元素的搭配,打造有温度、有情感、有主题的产品视觉。
在设计过程中,要考虑到用户的感性需求,让用户在使用过程中获得愉悦的感受。
三、功能设计1. 功能简洁明了一个好的APP产品设计方案应该是功能简洁明了。
要遵循“少即是多”的设计原则,提供用户真正需要的功能,保证用户操作的高效性和正确性。
app制作教程APP制作教程随着智能手机的普及和移动互联网的发展,APP(Application)成为人们生活中必不可少的一部分。
无论是用于社交、购物、出行还是娱乐,APP都能满足人们的各种需求。
如何制作一款实用且好用的APP,成为了许多开发者和个人用户关注的问题。
本文将为大家介绍一些APP制作的基本流程和技巧,希望能够为初学者提供一些帮助。
一、确定需求在制作APP之前,首先要明确自己的需求是什么。
你想要做一个社交类的APP,还是游戏类的APP?是为了方便用户购物,还是提供信息服务?确定需求是开发APP的第一步,它直接影响到后续的设计与开发工作。
只有明确需求,才能更好地制定开发计划和实施方案。
二、设计UI界面APP的UI(User Interface)界面对用户体验至关重要,一个简洁、直观且美观的界面能够吸引用户的注意力并提升使用体验。
在设计UI界面时,需要考虑布局、配色、字体等细节,力求做到简洁明了。
同时,也要根据不同页面的功能特点进行设计,使用户能够直观地理解和使用。
三、选择开发工具和语言在制作APP时,需要选择适合的开发工具和编程语言。
目前比较流行的APP开发工具有Android Studio(用于安卓开发)和Xcode (用于iOS开发)。
对于编程语言,安卓开发可以选择Java或Kotlin,iOS开发可以选择Objective-C或Swift。
根据自己的需求和开发能力,选择合适的工具和语言进行开发。
四、编写代码已经确定好需求、设计好UI界面并选择好开发工具后,就可以开始编写代码了。
根据APP的功能需求,通过编写代码实现各种功能和交互效果。
编写代码时需要注意代码结构的清晰和代码的可维护性,合理使用注释对代码进行解释和说明,以方便后续的修改和维护工作。
五、测试和优化编写完代码后,需要进行测试和优化工作。
在测试过程中,要注意测试各种不同的情况和场景,以确保APP的稳定性和可靠性。
测试过程中发现的BUG需要及时排除,优化APP的性能和用户体验。
ui设计对页面风格和标识的建议说到UI设计,大家可能会觉得挺枯燥,甚至有点像是背数学公式。
说白了,UI设计就是我们在使用各种App、网站的时候,看到的那些界面,换句话说,就是让我们使用起来既舒服又不那么累的“颜值担当”。
今天呢,我就来聊聊UI设计对页面风格和标识的一些建议,如何才能让你的页面看起来既高大上又不失亲和力。
你有没有遇到过那种界面设计得乱七八糟,连按钮在哪里都找不到的情况?好像整个页面都在跟你作对。
说白了,这种设计给人感觉就像是一个“高冷”的人,不仅不友好,还让你搞不清楚怎么和它打交道。
所以呀,页面风格和标识首先要做到的就是简洁明了。
毕竟谁不喜欢一眼就能看到重点的页面呢?举个例子,像大多数现代App或者网站,往往会把重要的内容放在最显眼的地方,比如导航栏上方或者首页的大图上。
这样的设计,就像是给用户走进来的第一道“欢迎门”,打开就是清爽和便捷。
再说到标识,它就像是一个品牌的身份证,能够让你一眼认出它是谁,甚至能告诉你这个东西是干什么的。
比如,支付宝的“收钱”图标,简洁明了,让你不看文字就能明白它的功能。
说实话,像这种一看就懂的设计,简直让人拍手叫好。
不要想着把标识做得花里胡哨,或者是把各种设计元素堆砌在一起,那样的标识不但没个性,反而让人眼花缭乱,根本不知道该从哪儿下手。
像那些成功的品牌,它们的标识往往是经过精心打磨的,简单又富有象征意义,能让人一眼记住。
说到页面的风格,大家可能会想到五花八门的颜色和花哨的背景。
其实不然,UI设计的“风格”并不是越多越好,而是越简洁越能打动人。
想想那些经典的界面,颜色可能不多,但搭配得恰到好处,整个页面看起来和谐统一,就像是一件精心制作的艺术品。
说实话,不需要大红大紫,也不一定要什么大牌设计师的亲自操刀,只要保持颜色的协调性,做到视觉的舒适,就能让用户在使用时心情愉悦。
至于配色,大家可以选择一些流行的颜色搭配,不妨参考一下目前设计界的流行趋势,适当地使用渐变色、暖色调、冷色调什么的。
第1篇1. 请简述UI设计的定义及其在产品开发中的作用。
2. UI设计主要包括哪些方面?3. 请解释什么是用户界面(UI)?4. 请说明什么是用户体验(UX)?5. 请列举一些常用的UI设计工具。
6. 请解释什么是原型设计?原型设计在UI设计过程中的作用是什么?7. 请说明什么是交互设计?交互设计在UI设计过程中的作用是什么?8. 请解释什么是色彩心理学?在UI设计中如何运用色彩心理学?9. 请说明什么是版式设计?版式设计在UI设计过程中的作用是什么?10. 请解释什么是图标设计?图标设计在UI设计过程中的作用是什么?11. 请说明什么是动画设计?动画设计在UI设计过程中的作用是什么?12. 请解释什么是响应式设计?响应式设计在UI设计过程中的作用是什么?13. 请说明什么是信息架构?信息架构在UI设计过程中的作用是什么?14. 请解释什么是用户研究?用户研究在UI设计过程中的作用是什么?15. 请说明什么是可用性测试?可用性测试在UI设计过程中的作用是什么?16. 请解释什么是无障碍设计?无障碍设计在UI设计过程中的作用是什么?二、UI设计流程与技巧1. 请简述UI设计的一般流程。
2. 请说明如何进行需求分析?3. 请解释如何进行竞品分析?4. 请说明如何进行用户研究?5. 请解释如何进行原型设计?6. 请说明如何进行界面设计?7. 请解释如何进行交互设计?8. 请说明如何进行色彩搭配?9. 请解释如何进行版式设计?10. 请说明如何进行图标设计?11. 请解释如何进行动画设计?12. 请说明如何进行响应式设计?13. 请解释如何进行信息架构设计?14. 请说明如何进行可用性测试?15. 请解释如何进行无障碍设计?三、UI设计案例分析1. 请以一款热门APP为例,分析其UI设计特点。
2. 请以一款热门网站为例,分析其UI设计特点。
3. 请以一款热门游戏为例,分析其UI设计特点。
4. 请以一款热门智能硬件为例,分析其UI设计特点。
当设计一个App UI的时,我们该考虑的问题一、品牌篇品牌色从大的来说是VI需要优先考虑的,考虑点如下:品牌色与行业属性之间的关系相对来说不同行业是有其固有的品牌色的,比如机械行业,通常给人的第一意向就是明黄;而科技、互联网企业给人的第一印象就是科技蓝(原谅我用这么俗套的词)等。
在对于品牌色的决策过程中,行业属性是其重要决策部分。
品牌与竞品之间的差异化通常在市场上我们会看到多个同时在满足用户同一需求,但是由于其品牌色的不同,会对用户对于app下载决策的影响。
小恩爱、Between、恋爱记三款产品的核心功能都是做情侣记录、聊天等的需求。
但是由于小恩爱的icon相对于其他两款app更加跳脱,因为在下载量和市场占有量上远超其他产品(当然还有产品功能和运营等多方原因,在此仅从色彩来谈)。
作为几乎同期同需求的产品,下载量差异巨大。
下载量数据来自腾讯应用宝品牌色的应用范围有一些产品最开始是从线上产生的,相对来说对于线下物料、VI的思考不足,同一颜色在不同屏幕的色差等。
因而会容易产生线下物料印刷等与线上视觉之间有较大色差,线上视觉形象线下实际应用较难等问题。
因而在最初考虑线上品牌的同时,也需要从VI的角度考虑产品后期的品牌营销传播等问题。
记得张小龙曾经说最后悔微信用绿色,因为在不同的Android手机上,绿色差异非常大。
(如果错误请纠正)品牌色与用户习惯认知之间的印象和策略相对来说,用户对于不同的颜色本身会有一个第一印象的直观理解,因而我们才考虑品牌色时,需要考虑到用户认知心理,并运用此心理来传达品牌诉求。
在考虑用色的时候,我们要时常提醒自己,需要传达给用户如何的品牌印象,这样的印象是否和产品策略是相符合的,这样的用色策略是否会和用户惯常认知是有差异的等等。
举例来说作为计算机,IBM的蓝色给人以专业和严谨,而同样作为同时代的电脑,APPLE却给人留下了Think Different 的品牌印象。
同样是做O2O外卖,饿了么选择了明度较高的蓝色,美团外卖选择了很好传达其外卖送达很快的明黄。
但是百度却用了桃红,水平不够,暂时没理解。
三家O2O外卖公司icon二、图标篇LOGO iconLOGO icon 是否清晰表达功能对于一些垂直领域来说,每个产品时有具体的功能的,比如省电类的主要聚焦在对于"电池"的管理上,因而金山的手机电池管理产品『金山电池医生』会用"电池"来直接表达,安全类主要聚焦在保卫手机安全,所以360安全卫士则直接把"盾"直接传达给用户。
邮件类产品,就算是google 的inbox和gmail都以考虑表达『邮件』这个功能为邮箱考量。
LOGO icon是否清晰表达品牌一些品牌会运用吉祥物或者品牌LOGO直接作为icon,比如QQ的企鹅,美团外卖的袋鼠,UC浏览器的松鼠等,都是很好的运用品牌策略来设计icon的方式。
不过值得注意的是,虽然都是运用吉祥物和LOGO,但由于用户对品牌的认知度的不同而选用不同的icon,比如阿里巴巴旗下的淘宝虽然有淘公仔,但是icon 还是用了一个『淘』字,相对来说『淘宝网』三个字比『淘公仔』更被用户所熟悉,而同为阿里巴巴旗下的天猫,由于『黑猫』的形象在一开始就传达给了用户,因而icon选用了猫的形象。
淘宝vs天猫iconLOGO icon 是否有表达情感所谓的卖情怀也好,装逼也罢,本质上是希望通过设计情感和用户的共鸣来引导用户产生设计行为。
泡过论坛的人应该都知道『灌水』是论坛的一个玩法之一,而锤子论坛就直接将这个用户常见的功能应用到图标的设计当中,从而用户每当看到这个图标总会会心一笑。
t锤子论坛图标LOGO icon是否给人留下深刻印象通常来说,用户在决策下载行为时,对于不了解功能的app更加倾向于下载图标好看的,因为它们看起来更可能好用且界面友好。
因此,在图标未能传达品牌、功能、情感的时候,只要icon足够好看也能较好的吸引用户的注意力。
在直播在整体app中未贯通使用此形象,但是由于logo形象有趣,因而下载量在同类产品中也算比较多的功能icon功能icon图形大小是否统一面积感一般来说,app的每个层级的icon一般来说是表达不同功能,因此形态、实际面积上其实是会有差别的。
但是在一定范围内,不同icon给用户呈现的面积感应该是一样的。
并不是说每个icon占据的像素要一样大,而是给用户传达的视觉感受是相同的、统一的。
如下图,三个图形,为了表达出同样的面积,三角形的图标要略微大于正方形。
同样在我们设计绘制icon的时候,也要考虑到不同形态对于人的视觉感受的问题。
只有在统一的面积感下,才可以给用户带来规整、一致的体验感。
表达方式无论是面形icon还是线形icon,甚至于是现在一些app用的断线形式的icon,在一个app的同功能中表达icon的形式手法应该是一致的。
例如下面这套icon,用红色作为点缀色,那么基本上所有icon在红色的应用的比例感觉都是类似的。
复杂程度这估计是比较难把握的一个地方,在同一app中,因为功能的不同,需要传达的信息不同,有些icon相对来说比较容易画,而一些icon因为则比较复杂。
这时,复杂的icon和简单的icon在表达上可能出现不一致的效果。
简单的可能几笔就表达出来了,而复杂的几乎都要快写实了。
这时表达起来需要高度概括。
但是无论是怎样,在一个app中的icon理论上复杂程度应该是一致的。
如下图这样,复杂的icon和简单icon的表达上就会显得很不一致。
这时候要调整每个icon的形式,力求达到相对一致的视觉效果。
反例!!正确例子功能icon风格是否符合产品功能在考虑icon是选用线型icon还是面型icon的时候,一定要从功能出发开始考虑,要考虑用户在看到这个icon的时候的点击感。
总体来说,图标选用的线形越来细,识别度相对越低,但同时更容易给人以精致的感觉,越粗识别度越高。
2px线形图标:由于在retine屏幕下,只显示非常细,相对识别度低,但容易给人以精致、时尚的感觉。
在一些时尚类app会考虑使用2px的icon。
3px线形图标:更多的会应用在一些工具性产品,因为它更稳定,且不会过分加重视觉图标在整体界面中的比例。
4px线形图标:4px的图标相较于2px、3px的图标,更加厚重,做得好的话容易给人年轻、潮流的感觉。
但同时4px图标在整体界面中的视觉占比会比较重,因而在图标大小和留白的比例处理上需要斟酌恰当才行。
面形图标:总体来说,一些偏功能类产品,比如邮件,因为该类产品更多的强调的是功能的识别度和点击的效率,面型图标相比于线型图标在识别上更有优势。
线面混合图标:一般以深色的线形勾画轮廓,加上填充色来填充整个形体。
从识别上比单纯的线形图标更容易识别,同时也比纯色的面形图标更加丰富。
但是并不是所有app 都适合这类图标风格,还是需要考虑产品需要营造的氛围和产品的诉求。
相关阅读:BESD:空心图标真的比实心图标更难识别吗?三、排版篇格式塔心理学在排版中的应用相似距离相近的各部分趋于组成整体。
当我们需要组织、分割信息的时候,运用格式塔心理学的方式,可以很好的梳理信息布局。
在信息以列表形式重复出现时,我们可以尽量的使相同颜色、大小、形状的图形或者文字尽量以重复的形式呈现。
“相似”的应用相近不同的元素当其距离相近的时候,用户从视觉上趋向于将其归于一个整体。
“相近”的应用当行间距较大时,其本身可以作为分割内容的一种方式。
连续一个图形的某些部分可以被看作是连接在一起的,这些部分会被我们知觉为一个整体。
这样我们可以在界面空间有限的情况下,引导用户的视觉流。
“连续”的应用相关阅读: 这个得学起来!超实用的格式塔原理小科普文字通常在中文app中一般都以一种中文字体作为默认字体,因此在此不讨论不同字体搭配对于app中视觉效果的影响。
文字大小在一定区域内,不同功能的文字大小的不同会直接影响用户浏览接受信息的程度。
通常选用28px~34px之间的字体大小比较合适阅读。
相对来说,文字越小,其被接收程度越低。
相同大小的文字在相近区域,用户浏览更容易理解为同一功能。
文字颜色明度的对比:在一个app中颜色的深浅除了受到底色的影响,同时也受到周围其他文本颜色对比的影响。
当不同信息优先层级的文字用统一颜色时,浏览者在理解上容易增大其关联度,从而容易造成信息理解混乱。
色相的对比:在黑白灰的颜色区域中,如果有局部颜色相对来说都会更容易吸引用户注意。
文字和背景文字和背景只有在高对比度下才能友好的被用户阅读,在应用不同颜色的文字和背景配比时,建议参考以下评估结论:间距图文与屏幕边距是否符合产品诉求通常来说,在图片和屏幕边距之间保留一定的像素边距可以更好的引导用户竖向往下阅读。
图为“豌豆荚一览”而当图片与屏幕边距为0的时候,用户更容易将注意力集中在每个图文内容本身,其视觉流线在往下浏览时,因为没有留白的引导,被图片直接割裂,造成在图片上的停留时间更长。
对比,当图片不留边距时,用户更加聚焦在每个图文本身,而非被留白引导往下翻阅行间距是否适合用户阅读在内容型文本中,文本行间距太窄会容易造成阅读困难。
通常的经验值,行间距大约是字体间距的1.2~1.5倍之间,总体阅读会比较舒服。
对比行间距 1.5倍VS 行间距1倍相关阅读: 新手福利!一份详尽全面的UI设计字体与排版指南四、微场景篇空白页空白页通常是因为新注册用户尚未在预定信息区域产生相关信息,因而当期浏览时,页面信息内容为空。
在设计时应从两方面来考虑:1、情景与内容的相关程度图片来源于易信app2、不同空白页之间的设计风格关联通常一个app内会有多个空白页,不同空白页之间相对独立,但是从一致性的角度来说,用户在浏览不同页面的时候,其空白页插画设计风格应该是一致的。
提示页提示页和空白页的不同在于其引导性更强,通常会通过阻断式弹层引导用户按照设计的行为进行操作,因而相较于空白页更需要气氛的营造。
同时弹层与弹层之间的尺寸大小、风格等也需要考虑一致性的问题。
图片来源于豆瓣app五、动画篇等待型动画在启动页或者等待loading、刷新页面,通过动画可以有助于吸引用户注意力。
减弱等待的焦虑感。
引导型动画动画相较于静态图片更容易吸引用户的视觉焦点,同时动画多伴随比例、形状、颜色的变化,其变化本身就是很好的引导用户行为的方式。
展示型动画通过动画可以更好的展示内容、数据等,使之从视觉角度更加丰富有趣。
转场型动画通过动效使得页面的层级更清楚的反应给用户,并使其转场体验顺畅。
图片来源于google inbox六、交互文案传达的有效性在app设计中“文案”也是很重要的一部分,从几年前提示很程序化,到现在的呆萌风格,可见产品对于用户的人性把握。
Google曾经提出文案的描述的具体建议在此不鳌述。