《Photoshop智能手机APP界面设计》学习笔记_photoshop中app首面设计-程序员宅基地
技术标签： 产品：原型设计
1.1 手机UI设计相关基本概念
1.1.1 什么是UI设计
UI(User's Interface)即用户界面，它不仅仅是美化界面，还需要研究用户，让界面变得更友好、简洁、舒适、易用。
用户界面无处不在。它可以是登录界面，也可以是软件界面，手机、PC上都有；
1.1.2 手机UI与平面UI的不同
手机UI将范围基本锁定在手机的APP/客户端上。平面UI范围则非常广泛，包括了绝大部分的UI领域。
1.1.3 什么是APP/客户端
APP(application)指的是应用程序。 客户端是APP的另一种叫法，其实是一样的。1.1.4 智能手机的OS种类
Android, iOS1.1.5 Photoshop和手机UI的关系
行业通例，大都用PS来开发；1.2 UI设计与产品团队项目流程的关系
UI设计者并不是一个独立的个体，他是属于产品团队的，会要和产品团队紧密协作！1.2.1 UI设计者与产品团队
UI设计者存在于一个叫“产品团队”的集体中，关于产品团队的人员划分可以归纳如下:
产品经理(PM / Product Manager)
产品设计师(PD / Product Designer)
用户体验师(UE / User Experience)
用户设计师(UI / User Interface Designer)
1. 产品经理(PM / Product Manager):
角色: 产品团队的老大
主要职责: 主要对用户需求进行细分调研，
针对用户的需求进行卖点的规划，
然后将规划陈述给公司高层，以此来争取项目所需要的各类资源(人力、物力和财力)。
附属职责: 比较全能的产品经理可以兼具另外一个PM(Project Manager,项目经理)的职责。
常用软件: PPT， Visio和Project等
2. 产品设计师(PD / Product Designer)
角色: 相当于小产品经理
主要职责: 侧重功能设计，
考虑技术的可行性和性价比。
常用软件: Word, Axure
举例: 比如看书类的APP中加入背景音乐的功能是否可行，能否增加APP的下载量；
3. 用户体验师(UE / User Experience)
角色: PD的合作者
主要职责: 了解商业层面的内容，从商业价值的角度出发，对产品与用户交互方面的环节进行改良
常用软件: Dreamweaver
举例: 播放音乐的APP中是否加入一个静音按键，加与没加有什么区别；
4. 用户设计师(UI / User Interface Designer)
角色: 美工
主要职责: 和UE有部分重合，
进行界面表现的实现和美化；
常用软件: Photoshop、Fireworks、Illustrator
不是所有的公司都是按上面的职责划分的，
通常是，PM和PD是一个人， UE和UI是一个人；
1.2.2 UI设计与项目流程步骤
在一个成熟且高效的手机APP产品团队中，通常UI设计者会在前期就加入项目中，针对产品定位、面向人群、设计风格等多方面进行探讨。
这样做的好处在于，保持了设计风格与产品的一致性，
同时，定下风格后，设计人员立刻可以着手效果图的设计和多套方案的整理，有效节约时间。
UI所参与的项目流程有以下几个部分，如图1-19所示。
Fig 1-19
1. 产品定位
产品的功能是什么？
做这个产品的依据是什么？
要达到什么目的？
想要达成什么影响？
2. 产品风格
产品定位直接影响产品风格。
根据产品的功能、面向人群和商业价值等产品定位内容，会产生许多不同的风格需求。
3. 产品控件
用多选框还是下拉菜单，用下拉滑动还是滚动条等；
4. 方案制订
当对产品的定位、风格和组件确定后，就可以开始制订方案。
一般情况下可以做出两套以上的方案，以便于对比选择。
方案可以采用原型图来表现，也可以是效果图，这根据项目的要求来做。
5. 方案提交
方案提交后，邀请各方人士（不仅包括产品团队，还包括技术和运营）来进行评定，
两套方案可以做A/B测试，选取用户体验更优的方案。
6. 方案选定
如果前期做方案时采用的是原型图的表现形式，
那在选定方案后，就可以以敲定的方案效果图为基准开始进行美化设计了。
1.3 UI的设计流程及方法
上一节是UI设计与项目的纵向划分，本节则是横向视角深入UI设计者的具体操作。当产品定位和风格达成一致意见后，UI设计者就可以开始方案起草。
方案起草一般由
定位指南、
核心功能确认、
ADS、
画草图、
还原原型、
视觉设计和
交付6个部分组成。
1.3.1 定位指南图
用来直观展现产品的定位。明确的定位更容易把握产品的风格。
Fig 1-20 产品定位指南
1.3.2 核心功能确认
大方向把握好后，就是核心功能的确认。APP最终是要为用户服务的，它能实现什么功能一定是一个重要的衡量依据。
下面介绍下KJ法，如图1-21所示
Fig 1-21
KJ法，又称亲和法，由日本Jiro Kawakita教授创造，可以帮助团队对产品最主要核心功能达成共识。
1. 准备黄色便利贴、笔和贴便利贴的场地。
2. 头脑风暴--让参与者在黄色便利贴上写下自己认为最主要的功能，写完贴在墙上。
3. 让每个人都将他认为的功能相似的便利贴排在一起，可以讨论，
当所有人对排列方式满意的时候，小组就确定了。
4. 再给参与者绿色便利贴，给这些小组命名，并写上命名理由。
5. 投票。
给每个人发三张便利贴，分别画上1星，2星和3星，代表优先级，分别贴在各个小组旁边。
最后统计星数，星数越高代表优先级越高，功能越核心。
可以看出，KJ法采用的是由下往上的归类总结法。
这样做的好处是，避免了细节问题上争吵而浪费时间，有效总结归类抓住重点。
接下来，只需要把这些便利贴上写的内容按优先级，归纳到ADS中去。
1.3.3 应用定义声明（ADS）
ADS(Application Definition Statement)就是应用定义声明。应用定义声明由3个不同的部分组成，根据受众区分解决方案，即:
定义(differentiator)、方案(solution)和用户(audience)，
基本结构如下:
定义(differentiator)、方案(solution) FOR 用户(audience)，
用一句话简短说明应用(APP)的作用，
它能为(哪些)用户(在什么情况下)解决(什么)问题？
从而展现出它的定位(娱乐/工具)，然后列出最主要的功能(Features)。
例如一个天气预报APP的ADS会是:
为在出游前想确定天气情况的用户提供随时随地查询天气情况的解决方案。
功能如下:
位置服务；
天气服务；
实景查看；
用户订阅；
ADS是苹果公司杜撰的一个名词，在APP开发的初始阶段被开发者广泛使用，
ADS用非常简单的一句话来概括APP的功能、目标用户和需求。
例如Entropy最近开发的一款podcast全球广播APP的ADS描述是这样的：
“The LBC Podcast App will allow LBC Radio enthusiasts
to subscribe, download, save, organize, and listen to their favorite LBC shows
and podcasts in a smooth and intuitive interface.”
APP的ADS描述应当打印出来钉在墙上，每天提醒开发者我们在干什么，为谁，以及为什么。
这一步看似简单，但极为重要。
再比如说我们准备开发一个尚酷男装网店，如果我们能准确写出以下这样的ADS:
“我们的目标买家的移动体验包括能够查找最近店面、开业时间和路线信息、快速查找打折信息。”
显然，这条ADS对产品功能和用户需求的定义与第一条ADS完全不同。
1.3.4 画草图
ADS是文字性的展示。要把它变成更为直观易于理解的形式，用画草图的方式再合适不过了，如图1-23所示。
Fig 1-23
画草图不要求很复杂，简简单单就好。
重要的是将思考的结果表现出来。工具加上一点技巧，任何人都能轻松上手。
1.3.5 低保真原型与高保真原型
低保真原型(也叫线框图)是指将草图通过 Axure、Mockup或Visio等线框工具还原，并移植到电脑上，无须纠结于细节效果，尽量使用黑白粗糙的线条来还原。
高保真原型因追求细节(如屏幕尺寸)而比低保真原型更加耗时，
为了避免高保真原型被否决而浪费大量时间，高保真原型通常是低保真原型得到确认后才开始制作。
如图1-28所示
Fig 1-28
1.3.6 视觉设计
在原型完成的基础上，就可以对其进行视觉设计。理论上不提倡使用用户不熟悉或奇怪复杂的界面元素(游戏类APP除外)。
如下图所示，是经过优化的界面:
Fig 1-29
Fig 1-30
1.3.7 切图与交付
把设计的界面成果和描述指南集中到一张大图中交付给开发人员。标注出原型图的尺寸及描述说明，并切图为PNG格式，以便于技术人员在开发APP时使用，
如图1-31所示。
Fig 1-31
1.4 色彩搭配
色彩搭配是否恰当，决定着你的设计水平品位的高低。1.5 各设备尺寸标准一览
下图是一个手机屏幕各类参数
Fig 1-46
1.5.1 英寸(Inch)
英寸其实就是我们常说的长度单位，14英寸笔记本电脑等。指的是屏幕对角的长度，手机屏蔽也沿用这个概念。
1.5.2 分辨率(Resolution)
分辨率是屏幕物理像素的总和。一般用屏幕像素宽乘以屏幕像素高来表示，如480px * 800px。
1.5.3 网点密度(DPI)
屏幕物理面积内所包含的像素数，通过DPI(每英寸像素点数)来计算，252DPI就是指每英寸点数为252.
DPI越高，显示的画面质量就越精细。
在一般平面设计上比较追求高DPI来呈现画面质感。
但在手机UI设计时，DPI要与对应手机相匹配，因为低分辨率的手机无法满足高DPI图片对手机硬件的要求 ，
显示的效果反而会变得很差。
1.5.4 屏幕密度(Screen Densities)
屏幕密度分为iDPI(低), mDPI（中等）、hDPI（高）。xhDPI（特高）四种，图1-46所示的mDPI和hDPI分别指中等密度和高密度。
Fig 1-50
图1-50中分成了屏幕密度(横列表头)和屏幕大小(纵列表头)两个维度。
与屏幕密度相对应的，屏幕大小也分四种:
小屏，普屏，大屏和超大屏。
因为，APP不是为某一个人而服务的，它需要满足一大部分手机用户，而这些用户的手机品牌，型号，尺寸都不同。
最基本的定律----想让越多不同的屏幕大小的手机能够适应你的APP，生成的图片屏幕密度版本要越齐全。
如图1-51所示:
Fig 1-51
比如你只生成了hDPI版本的图片，但有很多手机只支持HVGA分辨率，
那么你生成的图片在这些只支持HVGA的手机上，会显得很大很粗糙，用户体验就会很差。
图1-50中绿色区域的屏幕密度后面带有一个括号，里面填有120， 160， 240， 320这样的数值。
其实这些数值就是要在Photoshop设计中需要用到的。
Fig 1-52
图1-52在新建一个Photoshop文档时，在分辨率一栏中，选择像素/英寸模式，
再在前面输入框中输入相应的屏幕密度数值即可。
不过这样就出现了一个麻烦的问题，
假如一个APP有50张图要设计，每张图要生成4种不同的版本，那就是50x4，合计200张。
意味着要新建并填写200次分辨率，而且还得将图片内容不停地缩放大小，对于新手来说完全是一种折磨。
建议新手从最基准的分辨率--160像素/英寸开始设计，
设计完成后，按75%、150%、200%的缩放比率将图片缩小或扩大。
Photoshop菜单中的 图像->图像大小 命令，按Alt+Ctrl+l组合键，就能很好地完成这一功能，
如图1-53至图1-56所示:
Fig 1-53
Fig 1-54
Fig 1-55
Fig 1-56
转换完不要忘记命名并放置到相应的文件夹中，如图1-57所示。
Fig 1-57
当然，如果只针对Pad而设计的APP, 就只用生成相应的版本就可以了；
与Android相比，iPhone对密度版本的数量要求就没有那么多，它只有有限的几个版本。
1.6 图标尺寸大小与格式建议
本节介绍Android， iOS系统图标的尺寸要求，及对于图片采用格式的建议。1.6.1 图标尺寸大小
APP的图标(icon)不仅指应用程序的启动图标，还包括状态栏、菜单栏或是切换导航栏等位置出现的其它标识性图片。
所以icon指的是所有这些图片的集合。
icon同样采上节介绍的屏幕密度制约，
如下图所示:
Fig Android-icon屏幕密度
iPhone的屏幕密度默认为mDPI.
Fig iOS-icon屏幕密度
1.6.2 图标格式建议
任何关于图标格式的选择，都应该将实际情况需求纳入考虑范围。下面介绍最常见的图片格式。
JPEG: 照片基本格式，相同图像JPEG格式文件较PNG格式文件小，不支持背景透明。
GIF: 支持透明但会出现锯齿。
PNG: 支持透明，iOS推荐图片格式，相同图像在生成PNG格式后，文件会比JPEG格式、GIF格式大。
如果APP不涉及网上下载，且需要进行图片透明处理，那么PNG格式是最好的选择。
如果要保持图片色泽质量饱和度等，不需要透明处理时，就可以选择JPEG格式。
GIF格式占的空间小，在不要求背景透明和图片质量的前提下，可以考虑使用GIF格式。
1.7 APP布局说明
拒绝陌生感，统一布局风格。1.8 熟悉各系统组件
1.8.1 Android的基础UI组件
1. 文本显示 (TextView）2. 常规按钮 (Button)
3. 编辑输入框(EditText)
4. 复选框(CheckBox)
5. 单选按钮(RadioButton)
6. 开关按钮(ToggleButton)
7. 下拉框(Spinner)
8. 智能提示框(AutoCompleteTextView)
9. 时间选择框(TimePicker)
10. 列表显示(ListView)
11. 可扩展列表显示(ExpandableListView)
12. 网格式浏览(GridView)
13. 图片显示组件(Gallery)
14. 图片切换条(ImageSwitcher)
15. 进度条(ProgressBar)
16. 选择卡切换(TabWidgel)
17. 提示信息(Toast)
18. 快捷菜单(QuickActions)
1.8.2 iOS的基础UI组件
1. 文本显示 (UITextView）2. 文本标签 (UILabel)
3. 图片显示 (UIImageViews)
4. Web内容显示(UIWebView)
5. 地图显示 (MKMapViews)
6. 滚动条 (UIScrollView)
7. 警告框(UIAlertView 和 UIActionSheet)
8. 按钮 (UIButton)
9. 平行按钮组(UISegmentedControl)
10. 一键开关(UISwitch)
11. 滑动条 (UISlider)
12. 多图片浏览切换控件(UIpageControl）
13. 编辑输入框 (UITextField)
14. 表格排列显示 (UITableView)
15. 导航栏 (UINavigationBar)
16. 页面切换(UItabBarController)
17. 搜索栏 (UISearchBar)
智能推荐
攻防世界_难度8_happy_puzzle_攻防世界困难模式攻略图文-程序员宅基地
文章浏览阅读645次。这个肯定是末尾的IDAT了，因为IDAT必须要满了才会开始一下个IDAT，这个明显就是末尾的IDAT了。，对应下面的create_head()代码。，对应下面的create_tail()代码。不要考虑爆破，我已经试了一下，太多情况了。题目来源：UNCTF。_攻防世界困难模式攻略图文
达梦数据库的导出（备份）、导入_达梦数据库导入导出-程序员宅基地
文章浏览阅读2.9k次，点赞3次，收藏10次。偶尔会用到，记录、分享。1. 数据库导出1.1 切换到dmdba用户su - dmdba1.2 进入达梦数据库安装路径的bin目录，执行导库操作 导出语句：./dexp cwy_init/[email protected]:5236 file=cwy_init.dmp log=cwy_init_exp.log 注释： cwy_init/init_123..._达梦数据库导入导出
js引入kindeditor富文本编辑器的使用_kindeditor.js-程序员宅基地
文章浏览阅读1.9k次。1. 在官网上下载KindEditor文件，可以删掉不需要要到的jsp，asp，asp.net和php文件夹。接着把文件夹放到项目文件目录下。2. 修改html文件，在页面引入js文件：<script type="text/javascript" src="./kindeditor/kindeditor-all.js"></script><script type="text/javascript" src="./kindeditor/lang/zh-CN.js"_kindeditor.js
STM32学习过程记录11——基于STM32G431CBU6硬件SPI+DMA的高效WS2812B控制方法-程序员宅基地
文章浏览阅读2.3k次，点赞6次，收藏14次。SPI的详情简介不必赘述。假设我们通过SPI发送0xAA，我们的数据线就会变为10101010，通过修改不同的内容，即可修改SPI中0和1的持续时间。比如0xF0即为前半周期为高电平，后半周期为低电平的状态。在SPI的通信模式中，CPHA配置会影响该实验，下图展示了不同采样位置的SPI时序图[1]。CPOL = 0，CPHA = 1：CLK空闲状态 = 低电平，数据在下降沿采样，并在上升沿移出CPOL = 0，CPHA = 0：CLK空闲状态 = 低电平，数据在上升沿采样，并在下降沿移出。_stm32g431cbu6
计算机网络-数据链路层_接收方收到链路层数据后,使用crc检验后,余数为0,说明链路层的传输时可靠传输-程序员宅基地
文章浏览阅读1.2k次，点赞2次，收藏8次。数据链路层习题自测问题1.数据链路(即逻辑链路)与链路(即物理链路)有何区别?“电路接通了”与”数据链路接通了”的区别何在?2.数据链路层中的链路控制包括哪些功能?试讨论数据链路层做成可靠的链路层有哪些优点和缺点。3.网络适配器的作用是什么?网络适配器工作在哪一层?4.数据链路层的三个基本问题(帧定界、透明传输和差错检测)为什么都必须加以解决？5.如果在数据链路层不进行帧定界，会发生什么问题？6.PPP协议的主要特点是什么？为什么PPP不使用帧的编号？PPP适用于什么情况？为什么PPP协议不_接收方收到链路层数据后,使用crc检验后,余数为0,说明链路层的传输时可靠传输
软件测试工程师移民加拿大_无证移民，未受过软件工程师的教育（第1部分）-程序员宅基地
文章浏览阅读587次。软件测试工程师移民加拿大 无证移民，未受过软件工程师的教育(第1部分) (Undocumented Immigrant With No Education to Software Engineer(Part 1))Before I start, I want you to please bear with me on the way I write, I have very little gen...
随便推点
Thinkpad X250 secure boot failed 启动失败问题解决_安装完系统提示secureboot failure-程序员宅基地
文章浏览阅读304次。Thinkpad X250笔记本电脑，装的是FreeBSD，进入BIOS修改虚拟化配置（其后可能是误设置了安全开机），保存退出后系统无法启动，显示：secure boot failed ，把自己惊出一身冷汗，因为这台笔记本刚好还没开始做备份.....根据错误提示，到bios里面去找相关配置，在Security里面找到了Secure Boot选项，发现果然被设置为Enabled，将其修改为Disabled ，再开机，终于正常启动了。_安装完系统提示secureboot failure
C++如何做字符串分割（5种方法）_c++ 字符串分割-程序员宅基地
文章浏览阅读10w+次，点赞93次，收藏352次。1、用strtok函数进行字符串分割原型： char *strtok(char *str, const char *delim);功能：分解字符串为一组字符串。参数说明：str为要分解的字符串，delim为分隔符字符串。返回值：从str开头开始的一个个被分割的串。当没有被分割的串时则返回NULL。其它：strtok函数线程不安全，可以使用strtok_r替代。示例：//借助strtok实现split#include <string.h>#include <stdio.h&_c++ 字符串分割
2013第四届蓝桥杯 C/C++本科A组 真题答案解析_2013年第四届c a组蓝桥杯省赛真题解答-程序员宅基地
文章浏览阅读2.3k次。1 .高斯日记 大数学家高斯有个好习惯：无论如何都要记日记。他的日记有个与众不同的地方，他从不注明年月日，而是用一个整数代替，比如：4210后来人们知道，那个整数就是日期，它表示那一天是高斯出生后的第几天。这或许也是个好习惯，它时时刻刻提醒着主人：日子又过去一天，还有多少时光可以用于浪费呢？高斯出生于：1777年4月30日。在高斯发现的一个重要定理的日记_2013年第四届c a组蓝桥杯省赛真题解答
基于供需算法优化的核极限学习机(KELM)分类算法-程序员宅基地
文章浏览阅读851次，点赞17次，收藏22次。摘要：本文利用供需算法对核极限学习机(KELM)进行优化，并用于分类。
metasploitable2渗透测试_metasploitable2怎么进入-程序员宅基地
文章浏览阅读1.1k次。一、系统弱密码登录1、在kali上执行命令行telnet 192.168.26.1292、Login和password都输入msfadmin3、登录成功，进入系统4、测试如下：二、MySQL弱密码登录：1、在kali上执行mysql –h 192.168.26.129 –u root2、登录成功，进入MySQL系统3、测试效果：三、PostgreSQL弱密码登录1、在Kali上执行psql -h 192.168.26.129 –U post..._metasploitable2怎么进入
Python学习之路：从入门到精通的指南_python人工智能开发从入门到精通pdf-程序员宅基地
文章浏览阅读257次。本文将为初学者提供Python学习的详细指南，从Python的历史、基础语法和数据类型到面向对象编程、模块和库的使用。通过本文，您将能够掌握Python编程的核心概念，为今后的编程学习和实践打下坚实基础。_python人工智能开发从入门到精通pdf