浅析iPhone用户界面设计精粹，从细节成就卓越！（看）（转
载）
pingzia收录于2010-10-08 阅读数：查看收藏数：7公众公开原文来源
tags：网站设计资源
修改以文找文推荐给好友
如何对文章标记，添加批注？
作为一款革命性产品，iPhone（这里泛指iPhone和iPod touch，当然还有iPad）为我们带来了许多意想不到的创意和惊喜。过去两个月多的时间里，我们认真地咀嚼《iPhone Human Interface Guidelines》，感悟字里行间透露着的苹果的细致与智慧。兴奋、激动之余，有太多的惊喜想与大家分享。但无论从时间上还是精力上，130页的完整套餐肯定会让所有的人吃不消。我们收集了iPhone平台的专业设计师的意见，加上翻译过程的一点体会，整理出11条设计精粹。最后，希望这份130页浓缩而成的快餐不会让您觉得难吃，enjoy yourself！
1. 了解应用类型及各自特点
iPhone平台有三类型的应用：
● 效率型应用（Productivity Applications）
● 实用工具（Utility Applications）
● 沉浸型应用（Immersive Applications）
每一种都有各自不同的特点和应用场合。设计之前如果能够清楚产品的目标和特点，选择合适的应用类型可以更好地迎对。
效率型应用用于帮助完成日常的一些工作，如收发邮件、即时通信、照片管理与分享。用户快速查看、跳转、执行、完成，连贯的动作要求界面简单直接，让用户可以全神贯注于任务本身。这类应用一般都附带
自然的层级结构。所以，表格视图（table view）可以在这类软件里大派用场。
图
1.1 附带层级结构的效率型应用
实用工具用于执行一项简单的任务（如计算器，天气报告），简单，容易配置就可以了。
图1.2 实用工具之“天气报告”和“深
度睡眠”
沉浸型应用可以为用户带来极致的娱乐和游戏体验，这类应用可以进一步细分为游戏和虚拟仿真类。这类应用和标准的系统界面不同，用户希望这类应用能够给他们带来最大的娱乐，因此，界面设计的自由发挥度比较高，仿真的、可爱的设计风格往往能恰到好处。
图1.3 沉浸型应用
2. 熟悉系统布局和控件特点
iPhone 操作系统提供了非常出色的UI库，这些标准的控件和视图都得到了大量的研究才得以真正派上用场。另一方面，iPhone 用户已经对这些软件非常熟悉，不管是出于什么理由，如果没有更好更实用的创意，我们应该遵循iPhone的控件规范。至少，在我们打破iPhone的规则之前，“You must understand the rules before you can break them.”(你必须了解规则然后才能打破他们)。
iPhone 提供的UI组件从大到小，大致可列举如下（具体每种控件和视图的细节，请参考《iPhone 用户界面设计指南》第二部分）：
● 导航条，标签条，工具条和状态条
● 弹出对话框、操作面板和模式视图
● 表格视图（Table Views）, 文本视图（Text Views）, web视图（Web Views）
● 应用程序控件（如文本框、分页显示器、轮转选择器、进度条、更多按钮等）
3. 使用隐喻
隐喻为界面视觉提示和功能建立了直观的逻辑联系。将软件中涉及的元素和操作与真实世界关联起来能够更好地帮助用户理解。
iPhone内置的备忘录应用就是一个使用隐喻的典范。除了基本的删除和邮件这些图标隐喻，整个产品的外形：棕色的头部导航，米黄色的纸质背景，配合细致的行隔线和垂直的双细线，俨然就是一可爱的小小备忘本。将产品与实体对应起来，用户一看就知道软件的用途。
iPhone操作系统的隐喻不胜枚举，我们尚可尽量遵循，但如果有“更合适更贴切”的隐喻，你也可以放胆一试。
4. 一目了然，即看即点
用户在移动场景下不会长时间对着手机屏幕，他们可能“迅速打开音乐播放器随便播放一首就跳去其他应用程序或继续其他的事情”，不要以为用户有时间去研究怎样使用你的应用程序，这种注意力相对分散的情景要求你的应用程序界面必须尽量简洁，一目了然，用户看到就能马上理解。一般有三种方式可以简化界面：
● 删减软件功能：功能越少，界面越简洁。移动产品的设计，减法远比加法来得重要。请牢记移动产品设计里最重要的金科玉律：为移动场景下的大多数用户设计最常用的少数几个功能特点（Pick the few features,most frequently used,by the majority of your users,most appropriate for the mobile context）。
● 减少输入：尽可能地减少输入，直接为用户提供选项。如索引列表，既方便用户记忆，也可以帮助用户快速扫描并直接选中；轮转选择器，划上划下即可选中，减少打字耗时的同时省去繁多的错误检测。
● 避免不必要的交互：用户也不是你想像中那么傻的，不要一味提醒他们如何操作（帮助越多说明你的软件越难用），设计时应该关注如何更有效地引导用户集中精力快速完成任务。
内置的短信发送实在是太经典了，写信人和收信人左右区分，信息内容通过时间顺序排列下来，整个信息来回历史一目了然。呼叫程序同样出色，重新设计的数字键盘弱化了字母排列，突出数字，由此换来宽大容易点击的屏幕空间。
图4.1 一目了然的短信历史查看
和拨号呼叫
5. 考虑屏幕上下
不论单手操作还是两只手配合操作，屏幕上部分的可见性是最好的。所以，在设计应用程序时，应该将最常使用的的信息——一般是高度概括的信息，如导航，或者一些常规操作如添加、完成、保存、取消——置于屏幕顶端。
屏幕的底部一般是辅助性的工具栏或切换视图使用的页签栏。一些影响较大的操作如果出现在屏幕下半区域，必须仔细考虑它们的排列设计。如图5.1，一般情况下，操作面板的取消按钮放在最后，这样可以鼓励用户阅读完所有的选项，暗蓝色的返回按钮可以和一般的按钮区分开来，即便用户没阅读完也知道这是返回按钮。对于一些影响较大的操作（如删除），将其放在面板的顶部是最好的，因为顶部更容易被看到，再加上红色的警告暗示，用户选择起来会更为慎重。
图5.1 操作面板上的按钮排列6. 提供指尖大小的点击区域
如果按键布局过于拥挤，用户就要小心翼翼地花更多时间去操作，错误也会紧接而来。简洁易用的界面空间必须合理地控制按钮布局和交互元素，让用户更快更容易点击。
旧版内置计算器的按键是大号的，有效区域都为44*44px，非常容易点击。新版的计算器为了容下更多的按钮，按键大小做了一些调整，虽然高度上略有减小，但用户点击起来还算容易。对于经常使用的“=”号，整个目标区域都加大了，这种样式上的区分可以将主要操作和次要操作区分开来，以便更好地引导用户。
横屏的计算器完整模式可以容下更多的按键，按键大小相对竖屏的要小，尽管如此，用户点击起来还是得心应手。
图6.1 适合手指点击的计算器按键
7. 灵活运用手势支持
去到哪里，手指就跟到哪里，多种动作随时变换，直接感知与设备交互，如此自然直接的“输入”，如果能够灵活合适地运用，除了可以带来良好的用户体验，还能极大满足用户的控制欲望。
图7.1 手势操作：滚屏、长按、拖动、捏
当然，手指的一个最重要问题在于它比鼠标指针大得多，灵敏度和精确度会有所欠缺。一些同时使用鼠标和键盘的操作（如复制、粘贴、选择文字）是手指很难完成的。设计上应该考虑由此带来的影响，避免滥用。如果你的应用支持比较复杂的手势（长按、捏），确保用户能够理解他们的含义，并且为这些手势操作提供直接的响应反馈。
8. 考虑横竖屏方向变化
iPhone游戏里出现横竖屏设计比较正常，都是视具体的游戏类型来分。但一般的效率型应用或实用工具，也是横竖屏都有。林子大了，什么鸟都有，有些用户就是喜欢经常将屏幕旋转过来，而且还不在少数。他们或是喜欢横屏的浏览方式（如备忘录、音乐），或是希望打横可以看到更多的信息（如计算器）。设计的时候必须充分考虑用户的期望。有时将界面内容旋转就可以简单满足他们的需求，但有时也需要你重新去设计以展示更多的内容（如横屏的音乐会出现一个新的界面，展示所有的歌曲）。
图8.1
iPhoneQQ 横屏输入
竖屏情况下，输入键盘宽度只有320px，平均每个按键宽只有32px（320/10，这里忽略键与键的间隔）；横屏时每个按键宽可以达到48px，多了整整16px。如果是在小屏幕上输入，你更倾向那种方式？
如果你的应用程序界面只支持单一方向的展示，最好的做法就是保持界面固定，不随着设备方向改变而改变。例如，当用户选择去看一个iPod视频时，不管屏幕打横打竖，这段视频都是横向展示的。有了这个暗示，用户就会很自然地旋转屏幕到水平横向观看。翻转按钮也没有存在的必要了。
9. 合理的反馈
纵观所有的内置应用，反馈可谓无处不在。由于大部分的操作都是通过手势（其实还有抖动、语音输入方式）完成的，通过一些明显的变化来响应用户做出的操作，能够给予用户极大的信心。
图9.1 iPhone版QQ斗地主的音量大小调整
进入QQ斗地主的游戏设置页面调整音量大小时，手指的大小盖住了滑块，为了将选中的信息反馈给用户，两边的扩音器图标同时使用了外发光样式。
iPhone 操作系统提供了许多自动反馈的机制。动画就是其中一种。不过切记一点，动画的目的在于提升用户体验，而不是成为盲目追求酷炫的焦点。
10. 优化启动过程
iPhone OS4.0以前的应用都属于单任务的，用户会经常在多个应用程序之间切换，一个电话来了，用户不得不退出正在进行的应用程序。要确保用户回来时启动足够快速，以减少用户的等待，而且，为了将影响降到最低，应尽可能保存上次关闭之前的操作结果。这似乎都是工程师的职责，但作为一个优秀的设计师，你还可以为此做很多的事情。
开启时第一屏显示一个背景图或者简短的loading动画。即使是普通的效率型应用或者简单的实用小工具，启动时如果能够预先显示一个背景图，背景图与程序启动后首界面平稳自然地过渡，这种方式既可以带给用户即时的反馈，也可以“缩短”用户等待的时间。
图10.1 启动时的预加载背景
运行天气应用和iPhone QQ时，即使是很短的启动时间，预加载背景还是能够让人感觉启动等待的时间缩短了。
虽然iPhone OS4.0开始支持多任务，但不要天真地以为这种背景预加载的细节可以忽视了，应用程序应该一如既往地为用户提供这种流畅的体验，毕竟，用户启动的时候还是期望软件可以“快一点”。
启动时要切记一点：不要弹出一个说明性窗口，或一个刺眼的闪屏，或其它类似的启动体验（网络wifi
提示这些是例外）。这种方式很突兀，让用户立即使用你的应用程序就好了。
11. 为应用程序设计图标
应用程序图标是指放在iPhone屏幕上用来启动程序的图标。iPhone的屏幕大小只有480*320px，在这狭小的屏幕里，用户希望放下尽可能多的图标，这些图标必须具有突出的视觉效果才能方便用户辨认。要做到这一点，可以从以下两方面着手：
● 美观：确保图标简单美观，富有吸引力，这样用户才愿意让这些图标长久占据有限的屏幕空间。
● 可识别特点：要让用户在大量图标中轻松找到该应用程序，图标必须要有自己的特点，对于关联的产品，可以结合品牌进行设计。
图11.1 “企鹅”图标，一看就知道是QQ产品
为了与内置图标保持协调一致，iPhone操作系统一般会自动给图标增加一些视觉效果：
● 圆角
● 阴影效果
● 反光效果
图11.2 未添加视觉效果的的普通图标
图11.3 iPhone操作系统自动添加效果后的图标
为了确保你的图标可以利用这些视觉效果，你应该遵照以下图标设计规范：
● 图片格式：PNG
● 大小：57X57像素，90°直角（如果图像不符合标准，iPhone系统将自动按比例调整）
● 不要有任何发亮或有光泽的部分
● 不使用alpha透明
最后，将图标文件命名为Icon.png，放在程序的资源包中即可。
注：需要的话，可以要求iPhone操作系统不添加反光效果，详情请阅读《iPhone 应用程序设计指南》。
·极易上手 学习成本低，只需掌握如何替换模板资源 ·操作简单 工具结构清晰，简单易用 ·实时预览 所见即所得，实现制作界面的实时预览 ·一键打包无需切图、编码、打包，导入工具后直接生成主题包 EMUI 主题编辑工具 EMUI Theme edit tool
1.设计模板分为两部分——解锁和其他界面 2.锁屏：该工具暂不支持锁屏编辑，模板中提供基础通用模板，按照模 板替换墙纸可以满足基础需求。其他复杂设计效果需手动切图和配置，然后按照规定格式打包后导入工具一起输出主题包。 3.锁屏模板格式为——名称为unlock 的zip 压缩文件。里面包含unlock 文 件夹（包含切图和xml 配置）和锁屏预览（preview_unlock_0.jpg ）及锁屏墙纸（unlock_wallpaper_1.jpg ） 4.其他界面模板——psd 格式文件（图2） 注：如果桌面墙纸和锁屏墙相同，则此处不需要锁屏墙纸文件 图1——锁屏模板 图2——其他模板 注：模板名称不可更改
1.psd模板由两个层级构成，一级模板 为设计展示，二级模板为编辑界面。 2.一级设计模板中的图层名称不可随意 更改（如图2） 3.设计修改需在二级模板中完成（在一 级模板中双击进入智能对象进行编辑）4.二级模板中最下面为画布图层，切勿 删除！（如图4） 5..9图层编辑时，注意图层内容一定要 在.9边框内（如图5） 图1——一级设计模板图2——一级模板图层构成 图3——二级模板 图4——二级模板构成 图5——.9图层
工具使用说明 1.双击名为“ThemeTool.exe ”的文件启动应用。 2.步骤： 1. 选择“新建”或“打开” 新建——直接导入设计模板 打开——可打开最近编辑过的资源文件或hwt 主题包 2. 填写主题信息 3. 导入编辑好的解锁文件和psd 设计文件 4. 预览检查设计效果，可进行单个修改替换 5. 输出主题包或直接导入手机检查上机效果（目前只支持 进入“主题应用”手动点击应用主题）①② ③④
手机界面设计调研报告 概要 界面设计项目自金山企业带入我国问世以来，经过多年的发展，已经成长为新型设计行业的一大巨头，成为众多移动终端生产商和应用程序开发者青睐的选择。这次调研分析了手机界面设计的特点，介绍了手机界面设计的构架、市场占有率、各版本的更新，以及使用效果的简单分析。概括了手机界面设计行业能取得成功的原因，以及手机界面设计的发展面临的困难和问题。 UI UI即User Interface（用户界面）的简称。 UI设计则是指对软件的人机交互、操作逻辑、界面美观的整体设计。好的UI设计不仅是让软件变得有个性有品味，还要让软件的操作变得舒适、简单、自由,充分体现软件的定位和特点。 UI的实质 界面设计就像工业产品中的工业造型设计一样，是产品的重要买点。一个友好美观的界面会给人带来舒适的视觉享受，拉近人与电脑的距离，为商家创造卖点。界面设计不是单纯的美术绘画，他需要定位使用者、使用环境、使用方式并且为最终用户而设计，是纯粹的科学性的艺术设计。检验一个界面的标准即不是某个项目开发组领导的意见也不是项目成员投票的结果，而是最终用户的感受。所以界面设计要和用户研究紧密结合，是一个不断满足用户操作体验和视觉体验的过程。 UI的发展现状 目前在国内UI还是一个相对陌生的词。我们经常看到一些招聘广告写着：招聘界面美工、界面美术设计师等等。这表明在国内对UI的理解还停留在美术设计方面，认为UI的工作只是描边画线，缺乏对用户交互的重要性的理解；另一方面在软件开发过程中还存在重技术而不重应用的现象。许多商家认为软件产品的核心是技术，而UI仅仅是次要的辅助，这点在人员的比例与待遇上可以表现出来。 但这不是UI设计真正的价值体现，只是UI设计发展的一个必经过程。我们以物质产品手机行业为例，当手机刚刚进入市场的时候不但价格贵的惊人，而且
手机软界面设计——基础篇 一、界面设计的原则 (1) 二、定制界面版式 (1) 1界面层级 (1) 2界面构成的基本单位 (2) 1）状态区： (2) 2）标题区： (2) 3）功能操作区： (2) 4）公共导航区： (2) 3界面元素的分解与组合 (3) 1）界面三个信息区的图形切片 (3) 2）提供相关bgcolor的16进制色值及配色方案 (3) 3）提供数据准确的界面版式分割图及关键切片的坐标位置图示 (3) 三、视觉效果 (3) 1简约明快型 (3) 2趣味与独创型 (4) 3高贵华丽型 (4) 四、视觉元素的设计 (5) 1图形元素设计原则： (5) 2图形元素设计流程： (5) 1) 确定风格： (5) 2) 确定图标功能： (5) 3) 确定图标的造型： (6) 4) 进行界面设计制作： (6) 3设计注意事项 (7) 1）色彩问题： (7) 2）可实现性问题： (7) 一、界面设计的原则 手机软界面是置身于手机操作系统中的人机交互的窗口，设计界面必须基于手机的物理特性和软件的应用特性进行合理的设计，界面设计师首先应对手机的系统性能有所了解，例如：手机所支持的最多色彩数量、手机所支持的图像格式，其次应该对软件的功能详细了解熟悉每个模块的应用模式。从而做到最大限度的利用现有资源进行用户界面的开发。 二、定制界面版式 1界面层级 idle（待机界面）-- mainmenu（主菜单）-- submenu（二级菜单）-- third level menu （三级菜单）
2界面构成的基本单位 主要界面的构成被分为几个标准的信息区域（主要针对于按键手机，触屏手机相对灵活）： 状态区、标题区、功能操作区、公共导航区 Sony Ericsson 1）状态区： 标示手机目前运行状态及事件的区域，可以包含电池电量、信号强度、运营商名称、未处理事件icon及数量、时间等。状态区域并不是必须存在，可依照交互需求进行取舍。 2）标题区： 主要是LOGO、名称、版本以及相关图文信息。 3）功能操作区： 它是软件的核心部分，也是版面上面积最宽的部分。包含有列表（list）、焦点（highlight）、滚动条（scroalbar）、图标（icon）等很多不同的元素。不同层级的界面包含的元素是不同的，需要依据具体情况合理搭配运用。 4）公共导航区： 也称之为软键盘区域，它是对软件操作进行宏观操控的区域，随时可见，在这里它可以保存当前操作结果、切换当前操作模块、退出软件系统，实现对软件的灵活操控。 针对于嵌入式软件，界面版式的设定，在很大程度上需要借鉴相关手机系统界面的版式，以确保样式的相对统一，利于系统与软件的整合。当然也要考虑软件本身的应用特性，结合操作的可用性和可实施性，对版式进行合理的调整，使呈现信息的区域与区域之间协调统一，主次得当。确保用户可以方便快捷地进行功能操作。 对于整个手机的操作系统界面，需要根据不同的设计需求进行成体系的风格设计。
酷派CoolLife UI手机主题设计大赛 设计规范说明 一、锁屏 设计要求： 1、设计常态下的锁屏样式 2、展现基本锁屏细节(锁的造型可以自由设计) 3、锁屏界面规格：1080x1920像素（宽 x 高） 滑动解锁界面上的任意滑动解锁，以及图案解锁.也可以自由设计,设计师可以发挥自己的想象,设计出独具特色的解锁界面, 二、图标 设计要求： 1、设计32个必做常用系统图标，包括：拨号盘通讯录信息通话记录快速拨号闹钟互联网日历酷云应用商店酷管家记事本音乐视频照片相机酷秀派粉俱乐部爱酷天气酷健康设置酷派客服酷派备份文件管理我的下载系统更新导航录音收音机手电筒计算器电子邮件 2、设计23个选作图标：镜子 WLAN直连归属地导入联系人 UIM 卡应用搜索国际漫游设置演示模式 SIM卡应用指南针移动热点公交电影编辑 VIP Cool NFC 一键数据保护语音识别掌上证券汽车电台酷派商城用户手册地图 WLAN设置
单个图标内容尺寸：160 x 160 像素；单个图标画布尺寸：180x180 设计2个通用图标：文件夹2个（正常状态，打开状态）、图标背板(托盘尽 量边缘做宽一点,视觉效果会好一点) 3、设计一个遮罩资源和一个高光层资源（如果图标没有高光，可以放一个空 的图层作为高光层）另外，遮罩层必须为纯白
三、时钟（模拟时钟和数字时钟任意选作一个） 设计要求： 模拟时钟 1、设计1个时钟Widget，时钟大小：712X712（宽 x 高） 提示:时钟内容尺寸,可以相对做小一点,做得精致一些 指针最终实现效果是在切图资源的正中间,设计指针时请注意一下. 数字时钟 2、设计数字时钟,尺寸如下图 天气可以显示各种实时天气信息，可以自由设计天气的图标样式，以及数字时间的样式，位置尽量按照下图的标注来,更利于后期软件的实现. 尽量发挥你的想象力，设计更加生动的主天气界面。
手机app界面设计模板 导语： 随着移动互联网技术的发展，越来越多的app应用孕育而生。精美的app界面更吸引我们使用，那么它是如何设计与制作呢？我们一起来学习下！ 免费获取线框图原型图设计软件：https://www.doczj.com/doc/7215174401.html,/wireframe/ 模板丰富的手机APP界面制作工具 亿图图示这款国产的全类型图形图表设计软件，为用户提供精美的APP界面设计模板，可以免费使用。特别是针对没有绘图经验的开发者，有了APP界面设计模板之后，再也不愁APP界面设计的问题。亿图软件的符号库包含所有图标组，还能对单个图标进行修改，拖拽式的操作能帮助用户在架构设计上更加流畅。
线框图设计模板 线框图模板是经过打磨的备选素材，可供使用者直接套用，有效节省时间。亿图图示这款国产的全类型图形图表设计软件，为用户提供精美的线框图模板，在应用软件内容，用户可以免费使用。特别是针对没有绘图经验的开发者，有了线框图模板之后，再也不愁线框图的问题。 线框图模板一
线框图模板二
线框图模板三 更多绘图符号，助力线框图设计 亿图软件不仅提供模板，更有多套免费icon供用户使用。这些矢量的图标符号，可任由使用者进行二次编辑。精致的图标符号，加上合理的布局，瞬间让线框图设计加分不少。 UI矢量符号
触摸手势符号
IOS符号 亿图图示的模板和符号，欢迎您的尝试。如果想体验最新的模板和符号，也可以从线上直接获取最新素材。 获取更多线框图原型图软件使用技巧：https://www.doczj.com/doc/7215174401.html,/software/wireframe/
老吾老以及人之老 ——老年人手机设计 （2013届毕业生） 【内容提要】 孟子在《孟子·梁惠王上》中评论墨家的“兼爱非攻”时说：“老吾老以及人之老，幼吾幼以及人之幼”，其意是“在赡养孝敬自己的长辈时不应忘记其他与自己没有亲缘关系的老人；在抚养教育自己的小辈时不应忘记其他与自己没有血缘关系的小孩。” 老年人手机的设计，就是要将这样的“大爱”贯穿整个设计理念，一切从方便老人生活、方便老人使用的角度出发，让老年人手机成为所有老人的生活好伴侣和好帮手，让老人安享晚年平静、快乐、健康的幸福时光。 【关键词】 关爱老年人老年人手机功能简单操作便捷 目前市场上的老年人手机，并没有明确的概念和划分，一般用户会认为老年人使用的手机就是功能单一的普通手机，也不需要很多新的使用功能，就像普通的非智能手机甚至更古老的手机。这是由于对老年人的需求，以及对真正意义上的老年人手机了解不足造成的。 事实上，普通用户对于“老年人手机”的认识只有一点是正确的，那就是功能简单。我认为“老年人手机”绝对不是市场上的非智能手机这么简单，它需要针对老年人的特点进行全新的设计，使之更加具有实用性和方便性，成为老年人生活的不可或缺。 一、老年人使用手机的必要性 随着移动通讯技术的发展，手机成为人们生活的必需品，我国人口老龄化的加剧使得老年人手机市场逐渐得到社会的关注。 从上个世纪开始，全球已经逐渐趋向于老龄化。随着人口出生率的降低和寿命的提高，老龄人口在社会中的比例逐年上升，老龄问题已成为全球所关注的重大问题之一。据调查显示，
至2005年，中国大陆60岁以上人口达1.44亿，65岁以上约1亿多。随着空巢家庭和独居老人越来越多，外加补偿性消费心理的驱动，手机也逐渐成为老年人必备的与外界沟通的工具。可是，由于通讯业是近二十年才迅猛发展起来的，因此在移动电话方面专门为老年人设计的产品依然少见。 由于现在的手机集成了多种功能，导致其界面越来越复杂，操作也越来越困难。对于年轻人，功能齐全、色彩绚丽的手机可以丰富他们的生活。但对于老年人，这样的手机并不合适。 大三学习界面设计课时，老师组织我们参加“德赛关爱杯”老年人手机界面设计大赛。因此，我就老年人比较关心的几个问题制作了调查表. 我为这次针对老年人手机界面设计编写了调查表(后附)，并在几个居民小区、菜市场、超市发放调查表100份。其中男性48人、女性52人，年龄在50岁以上。其中50~60岁20%，60~75岁75%，75岁以上5%。 通过针对这次老年人界面设计调查,我归纳为两方面： 一、通讯方面： 1.这些人群中经常使用手机的占67%、一般使用33%。经过这次的调查发现。我国现在将老 年人的年龄划定在60岁，基本上都是退休人员，离开了工作岗位，与外界的接触自然就会变少，但与外界进行信息交流的需要仍然存在，尤其是在信息技术如此发达的今天，老人的交际心理表现的更加强烈。
摘要 现如今，智能手机已经成为我们日常生活中不可或缺的一部分。年轻消费群体更是将大量时间耗费在手机上。技术的进步与市场的需求，合理设计智能手机UI 交互界面的重要性显得格外突出，以用户为中心的体验设计也越来越被重视。手机主题设计作为界面交互设计中的一个新兴领域，满足用户追求个性化的需求，受到越来越多 UI 设计师的关注。 如何合理制定交互方式、确定用户界面风格、布局结构与信息展示方式，如何将手机主题界面设计与用户交互体验有机的结合在一起，是当下非常值得探讨研究的问题。论文通过研究智能手机 UI 主题界面的设计，在遵循手机主题设计的原则基础上，进行手机主题的系列设计，完成了本次的设计方案。希望通过该系列设计扩大设计手法的使用价值，为手机主题市场的蓬勃发展贡献力量。 关键词：UI 设计；智能手机；手机主题设计
Abstract Nowadays, smart phones have become an indispensable part of our daily life. Young consumers spend a lot of time on mobile phones. With the development of technology and the demand of the market, the importance of reasonably designing the UI interface of smartphone becomes more and more prominent. User-centered experience design has also been paid more and more attention. As a new field of interface interaction design, mobile phone theme design has attracted more and more attention from UI designers to meet the needs of users in pursuit of personalization. How to reasonably formulate the interaction mode, determine the user interface style, layout structure and information display mode, and how to organically integrate the mobile phone theme interface design and user interaction experience, are currently very worthy of discussion and research. By studying the design of UI theme interface of smartphone, this paper designs a series of mobile phone theme based on the principle of mobile phone theme design, and completes the design scheme. It is hoped that this series of designs will expand the use value of design techniques and contribute to the vigorous development of the mobile phone theme market. Key words: UI design; smartphone; mobile theme design
《移动应用界面设计》课程教学大纲 教务处制
《移动应用界面设计》教学大纲 一、课程教学目标 （一）知识目标 《移动应用界面设计》是艺术设计专业（平面设计方向）的专业核心课程，在实践中注重对各专业基础课程如图形设计、编排设计、字体设计、构成设计等课程的统合和整体应用。通过对本课程的学习，使学生从心理学、人机工程学、设计艺术出发，掌握硬件人机界面与软件人机界面方法、理论与设计实例，探索新的交互技术。 （二）能力目标 通过本课程的学习，学生应该掌握软件的基本操作，并初步具备UI界面设计能力。课程的设置面向职业岗位要求，职业岗位针对性较强，涉及的专业技能具有很强的专业性，其主要任务是培养学生的手机界面设计的制作能力，使学生了解当今界面设计制作的基本知识。 （三）素质目标 通过本课程的教学，我们重要的是培养学生观察生活、体验生活、体验、审美能力、吃苦精神和激发学生的创造能力的方法和手段。 （1）具有热爱所学专业、爱岗敬业的精神和强烈的法律意识； （2）具有胜任设计工作的良好的业务素质和身心素质； （3）具有运用所学知识分析和解决问题的能力； （4）具有自学能力、获取信息的能力，以及一定的组织、管理能力。 （5）培养学生的团结合作能力；运用所学知识分析和解决问题的能力，创新设计思维，美术欣赏造型审美的能力。
二、教学内容与教学要求 模块一界面设计基础篇 1、教学内容 A.iOS锁屏界面 B.iOS主界面 C.iOS系统锁屏+主界面创作 D.短信输入界面设计 E.拨号通话界面设计 F.天气界面 2、教学要求 通过学习,了解移动应用界面设计的一些基本知识，包括设计的基本元素、图形类型、主题风格等，并熟悉掌握图标设计的基本技法、iOS系统的相关界面设计。 模块二界面设计提高篇 1．教学内容 A.andriod主界面设计 B.andriod充电动画 C.控件设计 D.导航设计 E.加载设计 F.引导设计 2．教学要求 通过学习,掌握安卓系统的界面设计，针对其控件、导航、加载、引导页面进行临摹与创作练习。 三、教学时间参考分配表
手机界面设计调研 报告
手机界面设计调研报告 概要 界面设计项目自金山企业带入中国问世以来，经过多年的发展，已经成长为新型设计行业的一大巨头，成为众多移动终端生产商和应用程序开发者青睐的选择。这次调研分析了手机界面设计的特点，介绍了手机界面设计的构架、市场占有率、各版本的更新，以及使用效果的简单分析。概括了手机界面设计行业能取得成功的原因，以及手机界面设计的发展面临的困难和问题。 UI UI即User Interface（用户界面）的 简称。UI设计则是指对软件的人机交 互、操作逻辑、界面美观的整体设 计。好的UI设计不但是让软件变得 有个性有品味，还要让软件的操作变得舒适、简单、自由,充分体现软件的定位和特点。 UI的实质 界面设计就像工业产品中的工业造型设计一样，是产品的重要买点。一个友好美观的界面会给人带来舒适的视觉享受，拉近人与电脑的距离，为商家创造卖点。界面设计不是单纯的美术绘
画，她需要定位使用者、使用环境、使用方式 而且为最终用户而设计，是纯粹的科学性的艺 术设计。检验一个界面的标准即不是某个项目 开发组领导的意见也不是项目成员投票的结 果，而是最终用户的感受。因此界面设计要和 用户研究紧密结合，是一个不断满足用户操作体验和视觉体验的过程。 UI的发展现状 当前在国内UI还是一个相对陌生的词。我们经常看到一些招聘广告写着：招聘界面美工、界面美术设计师等等。这表明在国内对UI的理解还停留在美术设计方面，认为UI的工作只是描边画线，缺乏对用户交互的重要性的理解；另一方面在软件开发过程中还存在重技术而不重应用的现象。许多商家认为软件产品的核心是技术，而UI仅仅是次要的辅助，这点在人员的比例与待遇上能够表现出来。 但这不是UI设计真正的价值体现，只是UI设计发展的一个必经过程。我们以物质产品手机行业为例，当手机刚刚进入市场的时候不但价格贵的惊人，而且除了通话以外没有什么其它功能。由于当时的主导是技术，因此大家都把精力放在信号、待机时间、寿命等方面，对于产品的造型，使用的合理性很少关心。
浅析iPhone用户界面设计精粹，从细节成就卓越！（看）（转 载） pingzia收录于2010-10-08 阅读数：查看收藏数：7公众公开原文来源 tags：网站设计资源 修改以文找文推荐给好友 如何对文章标记，添加批注？ 作为一款革命性产品，iPhone（这里泛指iPhone和iPod touch，当然还有iPad）为我们带来了许多意想不到的创意和惊喜。过去两个月多的时间里，我们认真地咀嚼《iPhone Human Interface Guidelines》，感悟字里行间透露着的苹果的细致与智慧。兴奋、激动之余，有太多的惊喜想与大家分享。但无论从时间上还是精力上，130页的完整套餐肯定会让所有的人吃不消。我们收集了iPhone平台的专业设计师的意见，加上翻译过程的一点体会，整理出11条设计精粹。最后，希望这份130页浓缩而成的快餐不会让您觉得难吃，enjoy yourself！ 1. 了解应用类型及各自特点 iPhone平台有三类型的应用： ● 效率型应用（Productivity Applications） ● 实用工具（Utility Applications） ● 沉浸型应用（Immersive Applications） 每一种都有各自不同的特点和应用场合。设计之前如果能够清楚产品的目标和特点，选择合适的应用类型可以更好地迎对。 效率型应用用于帮助完成日常的一些工作，如收发邮件、即时通信、照片管理与分享。用户快速查看、跳转、执行、完成，连贯的动作要求界面简单直接，让用户可以全神贯注于任务本身。这类应用一般都附带
自然的层级结构。所以，表格视图（table view）可以在这类软件里大派用场。 图 1.1 附带层级结构的效率型应用 实用工具用于执行一项简单的任务（如计算器，天气报告），简单，容易配置就可以了。 图1.2 实用工具之“天气报告”和“深 度睡眠” 沉浸型应用可以为用户带来极致的娱乐和游戏体验，这类应用可以进一步细分为游戏和虚拟仿真类。这类应用和标准的系统界面不同，用户希望这类应用能够给他们带来最大的娱乐，因此，界面设计的自由发挥度比较高，仿真的、可爱的设计风格往往能恰到好处。
主题教程 (2.10.30) 一、MIUI主题 首先，我们手机的UI是由很多部分组成的，如锁屏、通知栏、桌面壁纸、图标等等。如果我们把手机比喻成一个房子，上述的部分可想象成房子的门、窗、地板、吊灯、座椅等。那我们可以认为原生的android系统就是一个毛坯房，MIUI是在这之上的一个简装，自定义主题就是你自己给房子做的装修。 MIUI提供主题自定义功能，其实就相当于帮你请了一个工程队，你可以用从众多装修方案（主题包）中选择自己喜欢的效果，最后交给工程队实施。而装修方案可大可小，大至全屋翻新，小到只换一盏灯。目前MIUI会自带两个主题包，达人们也可以设计自己的主题包，大家就可以借用达人们共享出来的设计。 二、准备工作 1.主题测试机器 工欲善其事必先利其器，做题之前首先得有一部能刷MIUI的手机作为测试机。MIUI现有支持v4的机型分成按分辨率，可分成两类480p（480*854和480*800）与720p（720*1280），分辨率对以后的主题制作有这影响，见后面详述。 480p的机子有： 小米手机1/1S (自带MIUI)、HTC Desire S、HTC Incredible S、Samsung I9100、华为Honor、索爱LT18i 、Google Nexus S 720P的机子有： 小米手机2(自带MIUI)、Google Galaxy Nexus、Galaxy S III I9300、Google Galaxy Nexus、华为Ascend D1、索尼LT26i、HTC One X、LG LU6200 附上刷机教程连接https://www.doczj.com/doc/7215174401.html,/download.html 注意：在针对新版主题客户端的测试方案上线之前，主题制作者只能在2.10.26开发版或之前版本进行测试 2.设计界面 制作主题之前可先根据官方提供的主题界面模板，对主题界面进行设计，然后再进行切图，将设计稿切片，分成各个小部分，用与主题制作。 3.主题制作软件的安装 官方主题工具：https://www.doczj.com/doc/7215174401.html,/thread-642823-1-1.html 使用此工具需要java环境的支持，未安装的同学请下载： https://www.doczj.com/doc/7215174401.html,/themeeditor/jre6_2.8.3_aajfe.zip 解压得jre6文件夹，将其放到到MIUIThemeEditor目录下(图1所示)。
手机界面ui设计 如果给你选择，你最想去哪里工作?多数人会回答：北上广。不过想要在这些城市扎根很难，需要一定的经济基础。而千锋UI女学员小李14K月薪入职上海一家金融集团公司，向人们证明了理想与高薪之间或许只差一个千锋。 众所周知，在互联网领域女生可谓是珍稀动物，她们美丽且实力强悍又被称为“程序媛”。目前很多女生想从事编程行业，而能够充分发挥女生审美优势的UI设计成为了热门选择。小李在参加千锋UI培训后收获了多家offer，不过她最终选择去上海一家金融集团公司担任UED，月薪14K，可谓是羡煞旁人。 “在千锋UI培训时，除了授课老师外，我还需要感谢我们的班主任老师和就业老师。从进入千锋开始，我的班主任老师就一直关怀照顾着我们，生活中
遇到难以解决的问题或者学习跟不上时，我都会向班主任老师寻求帮助。在我心中，班主任老师就是我的亲朋、我的好友。就业老师则是我踏入职场的导师，是我面试的依靠。当我面试失败时她会开导我，当我面试成功却无法抉择时，她会综合各方面因素让我确定方向。我很庆幸加入千锋UI培训，站在集团的大楼上，我想理想与高薪之间或许真的只差一个千锋。” 千锋UI培训课程有什么优势呢?千锋UI培训课程由大牛讲师全程面授，分阶段教学，多维度把控，最大限度调动学员的积极性与创造性;千锋UI培训课程采用真实的商业案例教学，秉承实战为王的超强理念，注重培养学员的实战能力。值得一提的是，千锋UI培训课程特别设置创意基础课，在潜移默化中培养学员创意思维、设计思维和产品思维的形成。 理想总是丰满，而行动是实现理想的唯一途径。想要加入互联网领域的你们是否不知从何下手，那就加入千锋，千锋开设HTML5、UI、PHP、JavaEE、Python等十大课程，总有一款适合你!加入千锋，为梦想起航！
主题教程 一、MIUI主题 首先，我们手机的UI是由很多部分组成的，如锁屏、通知栏、桌面壁纸、图标等等。如果我们把手机比喻成一个房子，上述的部分可想象成房子的门、窗、地板、吊灯、座椅等。那我们可以认为原生的android系统就是一个毛坯房，MIUI是在这之上的一个简装，自定义主题就是你自己给房子做的装修。 MIUI提供主题自定义功能，其实就相当于帮你请了一个工程队，你可以用从众多装修方案（主题包）中选择自己喜欢的效果，最后交给工程队实施。而装修方案可大可小，大至全屋翻新，小到只换一盏灯。目前MIUI会自带两个主题包，达人们也可以设计自己的主题包，大家就可以借用达人们共享出来的设计。 二、准备工作 1.主题测试机器 工欲善其事必先利其器，做题之前首先得有一部能刷MIUI的手机作为测试机。MIUI现有支持v4的机型分成按分辨率，可分成两类480p（480*854和480*800）与720p（720*1280），分辨率对以后的主题制作有这影响，见后面详述。 480p的机子有： 小米手机1/1S (自带MIUI)、HTC Desire S、HTC Incredible S、Samsung I9100、华为Honor、索爱LT18i 、Google Nexus S 720P的机子有： 小米手机2(自带MIUI)、Google Galaxy Nexus、Galaxy S III I9300、Google Galaxy Nexus、华为Ascend D1、索尼LT26i、HTC One X、LG LU6200 附上刷机教程连接https://www.doczj.com/doc/7215174401.html,/uQvUFn 注意：在针对新版主题客户端的测试方案上线之前，主题制作者只能在2.10.26开发版或之前版本进行测试 2.设计界面 制作主题之前可先根据官方提供的主题界面模板，对主题界面进行设计，然后再进行切图，将设计稿切片，分成各个小部分，用与主题制作。 3.主题制作软件的安装 官方主题工具：https://www.doczj.com/doc/7215174401.html,/2QVve2 使用此工具需要java环境的支持，未安装的同学请下载： https://www.doczj.com/doc/7215174401.html,/themeeditor/jre6_2.8.3_aajfe.zip 解压得jre6文件夹，将其放到到MIUIThemeEditor目录下(图1所示)。 1.windows下运行,“run-windows.bat“ 2.linux下运行,“run-linux.sh” 3.mac os运行,“https://www.doczj.com/doc/7215174401.html,mand”
【总结】移动应用界面设计的尺寸设置及规范 时间 2014-05-04 15:15:07 青溪·札记 原文jinjuan.me/appdesign-sizesetting/ 主题用户界面设计移动应用 刚接触移动应用的界面设计，最先跳入脑海的疑问是：画布尺寸设计多大（特别是Android）、图标和字体大小怎么定、需要设计多套设计稿么、如何切图以配合开发的实现？ 本篇将结合iOS和android官方的设计规范、搜集的资料以及工作中的摸索，来分享移动应用界面设计中的尺寸规范等问题，希望能给移动端的新手设计师些许指引。若有不当之处，欢迎斧正。 一、android篇 1、android分辨率 Android的多分辨率，一向是设计师和开发者非常头疼的事儿。尽管如此，对于多分辨造成的复杂问题，也是大家要优先解决的。Android支持多种不同的dpi模式：ldpi 、mdpi 、hdpi 、xhdpi 、xxhdpi 、xxxhdpi
注意，ppi、dpi 是密度单位，不是度量单位： * ppi (pixels per inch)：图像分辨率（在图像中，每英寸所包含的像素数目）* dpi (dots per inch)：打印分辨率（每英寸所能打印的点数，即打印精度）dpi主要应用于输出，重点是打印设备上；ppi对于设计师应该比较熟悉，photoshop画布的分辨率常设置为72像素/英寸，这个单位其实就是ppi 。尽管概念不同，但是对于移动设备的显示屏，可以看作ppi=dpi 。 ppi的运算方式是：PPI = √（长度像素数2 + 宽度像素数2）/ 屏幕对角线英寸数。即：长、宽各自平方之和的开方，再除以屏幕对角线的英寸数。 以iphone5为例，其ppi=√（1136px2 + 640px2）/4 in=326ppi（视网膜Retina 屏） 对于android手机，一个不确切的分法是，720 x 1280 的手机很可能接近320 dpi （xhdpi模式），480 x 800 的手机很可能接近240 dpi （hdpi模式），而320 x 480 的手机则很接近160 dpi（mdpi模式）。 来自友盟指数2014年3月份的数据（戳这里看最新数据）： 480 x 800的手机占比最高为31.9%，720 x 1280的手机占比为16.5%位居第二，而240 x 320的手机占比最少为1.0% 。xxdhpi模式的高分辨率1080 x 1920手机占比也越来越高，目前为6.1% 。 2、单位换算方法 android开发中，文字大小的单位是sp，非文字的尺寸单位用dp，但是我们在设计稿用的单位是px。这些单位如何换算，是设计师、开发者需要了解的关
设计页面要求及规范 主要是几个页面 1.欢迎页 2.首页 3.菜单框 4.注册与登录 5.弹出窗口 6.动态展示交互 7.详细页 8.搜索页 设计尺寸规范 状态栏(status bar)、导航栏(navigation)、主菜单栏(submenu)、内容区域(content)。 Logo出矢量图512*512 icon:29*29 72*72 512*512 iphone 1.尺寸以及分辨率 320*480，640*960，640*1136网页和移动的UI用72px 2.界面基本组成元素 iPhone的APP界面一般由状态栏、导航栏、主菜单栏和中间的内容区域组成。因为宽度是固定的，所以设计开发起来很方便。下面我们说说这些“栏”的尺寸吧：
状态栏：高度40px 导航栏：高度88px 主菜单栏：高度98px； 内容区域：高度为：734px 如果640*1136是910px iPhone5/5s的640*1136的尺寸，其实就是中间的内容区域高度增加到910px。 3.字体 32~36px32px，注释等提示文本28px。 不同则img-line.png，img-line@2x.png Android 1.尺寸以及分辨率 提到Android的尺寸，480*800、720*1280。点9切图所有手机的适配。Android界面尺寸：480*800、720*1280、1080*1920。
2.界面基本组成元素 与ios的一样，还是有状态栏、导航栏和主菜单栏，以720*1280的尺寸,状态栏的高度应为50px，导航栏的高度96px，主菜单栏的高度96px。内容区域高度为： 1038px(1280-50-96-96=1038)窗体底端 Android系统采用可自适应的屏幕支持,由于屏幕尺寸种类繁多,简单可归为ldpi (240*320)、mdpi(320*480)、hdpi(480*800)、xhdpi(720*1280) 字体：android原生的字体，与微软雅黑很像。字体大小范围为16px~32px IOS：宽度640PX 高度1136px iOS屏幕尺寸有这几种：320*480，960*480，1024*768 Ipad端 iPad界面尺寸：1024*768、2048*1536 单位：像素72dpi，在设计的时候并不是每个尺寸都要做一套，尺寸按自己的手机来设计，比较方便预览效果，一般用640*960或者640*1136的尺寸来设计。 单位
手机软件UI界面设计浅谈 作者：https://www.doczj.com/doc/7215174401.html, 随着科技的不断发展，手机的功能俞之强大，基于手机系统的相关软件应运而生，手机设计的人性化已不仅仅局限于手机硬件的外观，手机的软件系统已成为用户直接操作和应用的主体，它应以美观实用、操作便捷为用户所青睐。用户界面设计的规范性显得尤为重要。 一、界面效果的整体性、一致性 手机软件运行于手机操作系统的软件环境，界面的设计应该是基于这个应用平台的整体风格，这样有利于产品外观的整合。 1、界面的色彩及风格与系统界面统一 软件界面的总体色彩应该接近和类似系统界面的总体色调，例如：系统色调以蓝色为主，我们的软件界面的默认色彩最好与之吻合，若使用与之大相径庭的色彩，比如大红、柠檬黄，色彩的强烈变化会影响用户的使用情绪，假想你买了一款从外观到系统界面都很满意的手机，操作的时候突然发现内置的应用软件和系统界面不统一，你会有何感想呢？第一感觉不好的东西我们的用户还会去用它吗？所以我们要知道手机的外观和系统界面已经是由手机制造 商根据用户审美习惯定制的，它应该有他们的审美群体，我们要给这款手机做软件就应该有效地利用制造商基于此款手机的审美特征，以赢得喜爱此款手机的用户，使他们对系统界面的肯定和喜爱有效的转移到我们的产品上来。当然合理地结合系统界面进行设计还包括图标、按钮的风格及在不同操作状态下的视觉效果。 2、操作流程的系统化 手机用户的操作习惯是基于系统的，我们的界面设计在操作流程的安排上，也得遵循系统的规范性，让用户达到可以使用手机就会使用我们的软件，简化用户操作流程！ 二、界面效果的个性化
是不是我们追求整体性和一致性，就忽略软件界面的个性化呢?整体性和一致性是基于手机系统视觉效果的和谐统一而考虑，个性化是基于软件本身的特征和用途而考虑。因此这一点也是不容忽视的！ 1、特有的界面构架 软件的实用性是软件应用的根本，我们设计应该结合软件的应用范畴，合理的安排版式，以求达到美观适用的目的，这一点不一定能与系统达到一致的标准，它应该具有它所具有的行业标准，例如:证券交易、地图操作等界面特征，需要分析软件应用的特征和流程制定相对规范性的界面构架。界面构架的功能操作区、内容显示区、导航控制区都应该统一规范，不同功能模块的相同操作区域的元素风格应该一致，让用户能够对不同的模块的操作迅速掌握。从而也使整个界面统一在一个特有的整体之中。 2、专用的界面图标 软件的图标按钮是基于自身应用的命令集，它的每一个图形内容映射的是一个目标动作，因此作为体现目标动作的图标，它应该有强烈的表意性，制作过程中选择具有典型行业特征的图符，有助于用户的识别，方便操作。图标的图形制作不能太繁琐，要适应手机本身显示面积很小的屏幕，在制作上尽量使用像素图，确保图形质量清晰，如果针对立体化的界面，可考虑部分像素羽化的效果，以增强图标的层次感。 3、界面色彩的个性化设置 色彩影响一个人的情绪，不同的色彩会让人产生不同的心理效应，反之不同的心理状态所能接受的色彩也是不同的，不断变化的事物才能引起人的注意，界面设计的色彩个性化，目的就是用色彩的变换来协调用户的心理，让用户对软件产品时常保持一种新鲜度，它是通过用户根据自己的需要来改变默认的系统设置，选择一种自己满意的个性化设置，达到软件产品与用户之间的协调性。在众多的软件产品中都涉及到了界面的换肤技术，在手机的软件界面