手机界面UI设计须知的几个原则

在进行手机UI设计时，遵循一定的原则，是必须的，这可避免设计者片面的根据自己主观认识对产品做出择决。

手机UI设计原则一：用户界面应该是基于用户的心里模型，而不是基于工程实现模型

就是把后台本来很复杂的事情通过设计符合用户日常生活中常用的浏览方式或操作方式。其实这一点是设计师把生活中的细节和数据结合的凝聚点，用户的心理模型抓的越准，界面就会越优秀。

手机UI设计原则二：培养用户使用情景的思维方式做设计

要做到这个原则其实是很难的，需要长期的实战经验才能做到这点。

那我们都知道米聊出的比微信早，但后来被微信反超，这不光是QQ帮了微信很大忙，比如用户登录门槛低，用户来源，广告打得响之类的，其实在用户使用情景方面米聊研究的没有微信透彻。

对于一个社交即时通讯产品，添加好友的功能是好友汇聚的来源，虽然米聊微信都绑定手机通讯录，但话又说回来，用户找手机通讯录联系人语音聊天的还是比较少。添加好友是引导用户去发现好友，找好友,碰好友的一扇门。

所以对于这么重要的功能放置在应用程序的哪个位置，在产品前期就会让用户明显的去选择用哪个应用，因为聊天工具的前提是要有人和你聊天。

手机UI设计原则三：尽量少的让用户输入，输入时尽量多给出参考

移动端的虚拟键盘一直是科技界无法解决的一个难题，虚拟键盘的主要缺点：

1.输入定位无法反馈，所以无法形成高效的盲打;

2.虚拟键盘的空间限制，手指的点击经常造成误按。

光是上面这两点就让虚拟键盘在输入上大打折扣，所以我们在设计应用程序时，只要遇到Input Box的控件时，首先就要想到尽量让用户少输入，或者智能的给出参考。

手机UI设计原则四：全局导航需要一直存在，最好还能预览其他模块的动态

全局导航在Web交互设计中比较容易做到，在手机移动端全局导航要看产品设计的需求，什么功能需要全局导航。

社交应用通常是：消息，通知，请求;

音乐视频应用通常是：下载，搜索;

工具类产品经常是核心工具条(tool bar)比如浏览器，语音助理，音乐识别应用等等。

全局导航的价值在于可以让用户在使用过程中不会丢失信息，减少主页面和次级页面之间的跳转次数，当然全局导航中的info-task要能在当前页面完成，如果需要跳转到新界面，就会失去全局导航的意义。

因为当出现多个info-task的时候，就需要用户不停的进入全局导航页面来完成。

手机UI设计原则五：提供非模态的反馈，不打断任务流

模态弹出框的书面名称在iphone OS中称作：Alert-box，在Android OS 中称：Pop-up box,我们都知道弹框会打断任务流，所以在有限的屏幕上怎样让这些弹框弱化，或者说优雅、绅士的提醒用户，这个需要设计师来定义。

模态是指界面中只有提醒弹框才具有可交互行为，其他一切都不可操作;非模态不会把提醒做成弹框，可能会处理成List Notification,Toast list等方式来提醒用户。

手机UI设计原则六：不要让用户等待任务完成，用户还要发现更多有意思的地方

移动互联的核心就是给用户带来移动体验的方便和高效，这是移动互联网Apps需要考虑的，用户在使用你产品在很多情况下都是碎片时间，所以在设计上尽量让用户在短时间内熟悉我们的产品，知道这个产品的诚意。

特别是某些等待界面需要设计，不能把一个很枯燥的等待界面呈现在用户的面前，那用户很快就会换其他apps。

手机UI设计原则七：自动保存用户的输入成果

在移动端，由于输入面板的复杂性，而且触摸输入没有物理按键的反馈自然，特别是手机上去输入一段文字或者信息，对用户而言本身就是一件很痛苦的事情;

对产品而言，用户的在你的产品中输入是一个很值得庆幸的事情，所以设计人员需要让你的apps自动保存用户的输入成果。

手机UI设计原则八：为了程序响应的速度，设计有时候需要担任掩护的作用

科技并不是万能的，技术依然是移动互联网应用程序最需要优化和完善的，作为技术的盟友我们设计人员也需要辅佐他们，让用户觉得程序原本就应该是这么运行的。

特别是程序响应的速度很多时候不光是技术的问题，与网络环境也有很大的关系，这时候设计人员需要考虑这些客观存在的情况，帮助程序来掩护这些瑕疵，让用户感觉到在使用时是流畅的。

资料整理：莱茵教育

EMUI主题制作

·极易上手学习成本低，只需掌握如何替换模板资源 ·操作简单工具结构清晰，简单易用 ·实时预览所见即所得，实现制作界面的实时预览 ·一键打包无需切图、编码、打包，导入工具后直接生成主题包 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设计规范

iPhone 界面尺寸设备分辨率PPI 状态栏高度导航栏高度标签栏高度 iPhone6P、6SP、7P 1242×2208 px 401PPI 60px 132px 146px iPhone6 - 6S - 7 750×1334 px 326PPI 40px 88px 98px iPhone5 - 5C - 5S 640×1136 px 326PPI 40px 88px 98px iPhone4 - 4S 640×960 px 326PPI 40px 88px 98px iPhone & iPod Touch 第一代、第二代、第三代 320×480 px 163PPI 20px 44px 49px UI设计规范：IOS、Android系统主流尺寸整理

iPhone图标尺寸：设备App Store 程序应用主屏幕Spotlight搜索标签栏工具栏和导航栏 iPhone6P - 6SP - 7(@3×)1024×1024 px 180×180 px 114×114 px 87×87 px 75×75 px 66×66 px iPhone6 - 6S - 7 (@2×)1024×1024 px 120×120 px 114×114 px 58×58 px 75×75 px 44×44 px iPhone5 - 5C - 5S (@2×)1024×1024 px 120×120 px 114×114 px 58×58 px 75×75 px 44×44 px iPhone4 - 4S (@2×)1024×1024 px 120×120 px 114×114 px 58×58 px 75×75 px 44×44 px iPhone & iPod Touch第一代、第二代、第三代1024×1024 px 120×120 px 57×57 px 29×29 px 38×38 px 30×30 px

APP界面UI设计规范

一、APP界面设计规范（一）界面尺寸 1、IOS界面尺寸：常见为（宽度640px、高度1136px） 2、Android界面尺寸：常见为（宽度720px、高度1280px）其他尺寸：ldpi（240*320）、mdpi（320*480）、hdpi（480*800）3、Web Mobile尺寸：常见为（宽度640px、高度960px）（二）导航尺寸 1、IOS导航尺寸：高度60px，留白7px 2、Android导航尺寸：高度64px或48px，留白8px （三）标签尺寸 1、IOS标签尺寸：高度98px 2、Android标签尺寸：高度96px （四）工具栏尺寸 1、IOS工具栏尺寸：高度88px 2、Android工具栏尺寸：高度96px （五）列表高度 1、IOS列表高度：高度88px 2、Android列表高度：高度96px （六）资源状态对于资源通常设计弹起、点击、点击后、不可用四种状态，通常弹起、点击、点击后用不同颜色表示、不可用状态用低度灰色表示。（七）字体

1、IOS默认英文为HelveticalNeue，中文为黑体 2、Android列表高度：默认为 Droidsans fallback （八）字号字号通常按照标题及征文级别递减为42、36、34、30、24（九）ICON 1、IOS常用尺寸有1024*1024、512*51 2、120*120、60*60 2、Android常用尺寸有512*512、200*200、72*72、48*48（十）资源插图 1、长方形插图高度一般不超过背景宽度的二分之一 2、缩略图两张并列高度一般不超过200px，宽度要适中有留白 3、图文混排中图片一般不高过150*110

Android人机界面(UI)设计规范(带目录)

Android 人机界面设计规范 1Android 设计的依据 1.1 框架结构及流程是什么使得android 有着独特的用户体验？后台处理支持多任务功能正在进行和事件驱动的提示信息通过Widgets 和live folders 来实现实时信息的预览用户想用时，任一应用程序都可以挑选和选择 android 不是关于程序的，它是关于活动，把任务分层， 1.2 架构基础硬件平台 android 设备代表的是硬件和软件的完美组合。硬件辅助导航操作，并给android 提供更多更好的功能。当菜单没有开启，要把屏幕最大化时，菜单按钮可以在屏幕上提供更多的内容。返回按钮允许使用返回堆（back stack）。竖屏与横屏一般来说，用户界面开发竖屏与横屏。在新横屏也仍存在于新的Android 手机中。99％的android 布局支持横屏。焦点和菜单在触摸模式里没有焦点，只有轨迹球。Android 平台里没有鼠标焦点。确定你从未显示焦点。主菜单应该包括全部功能；它们与活动联系一起形成整体。菜单上的图标按重要性排序。如果有多于5 个图标，使用点击more menu 菜单来查看那些不太重要的菜单项。上下文菜单（长按）集中在一个特定对象。总是把那些与所选项最相关的行为放在长按菜单的顶部。需要记住的几点：设计时要考虑速度和简洁尽量分层来分等级屏幕上的活动尽量最小使用下载进度条，下载数据时，而不是让用户等待去看一个加载完全的页面。考虑活动流而不是线性行为 1.3 屏幕上的行为

android 设计了特定的行为方式。在你的应用程序里利用好这一点。应该坚持android 行为的标准，避免混淆用户。 1.4 表达细节使得产品集中在细节。程序的美学会帮助你集中注意在那些应用体验核心的关键任务上。API DEMO 是开始你的工具包的好地方。 2 用户界面原则这部分试图讲述创造一个好的用户界面的一些基本的交互设计原则。这些原则是基本的，不止能应用于android 的用户界面设计，也可以应用于其他。苹果建议开发者花费60％的开发时间来进行设计工作。下面的用户界面原则将为好的设计提供一个基础。 2.1 隐喻隐喻是构建一个基于操作任务心智模型的模块；用它们来传递应用程序的概念和功能。基于真实世界的应用对象可以帮助用户很快的理解该应用程序。当你设计你的应用程序时，要注意andriod 中存在的隐喻，不要重新定义它们。同时，检查你的应用程序执行的任务，看是否有些自然隐喻你可以使用。 2.2 反映用户的心智模型用户已经有了一个来描述你的程序正在进行的任务的心智模型。这个心智模型产生于真实世界经验、其它软件和一般电脑基本知识的结合。比如说，用户在真实世界里有写字、寄信的经验，也会产生特定的期待，像写一封新的信，选一个接受者，然后寄出信。一个忽略用户心智模型的电子邮件程序用起来会很困难和不舒服。这是因为程序强加给用户一个不熟悉的概念模型，而不是建立一个用户已有的知识经验模式。在设计程序用户界面之前，试着去发现你的用户的心智模型,这样帮助用户去执行任务。心智模型中内在的隐喻，它代表了任务的概念组成。在写信这个例子中，隐喻包括信件、邮包和信封。在涉及到照片的任务的思考模式中，隐喻包括照片、照相机和专辑。我们要努力地发现用户的期望，包括任务组成、组织、窗口布局的工作流、菜单和工具栏组织、控制面板的使用。要通过努力地何必把个下面的特征与用户心智模型相融合：熟悉性用户的心智模型主要是建立在经验的基础上简单化一项任务的心智模型通常是流线型，关注任务的基本组成部分。尽管对于一个给定的任务有很多可选的细节，但是基本的组成部分占大部分，并且不会占用用户的注意。可利用性Availability

移动互联网手机APP原型设计规范

移动互联网产品原型尺寸规范最近公司安排我带一下新来的交互设计师，我想给他制定一份交互设计规范。这样一来，即使新来的交互设计师没什么基础，也可以根据这一份规范，做出大致标准的原型图。因为Ui设计稿是先做iPhone6的，方便向上适配iPhone6Plus，也方便向下适配iPhone5和iPhone4的尺寸。所以，交互设计稿的尺寸，就按照iPhone6的尺寸来做。 1、iPhone6的界面布局是：屏幕是4.7英寸的，设计稿的大小为750x1334px。状态栏(status bar)：就是电量条，其高度为：40px；导航栏(navigation)：就是顶部条，其高度为：88px；主菜单栏(submenu，tab)：就是标签栏，底部条，其高度为：98px；内容区域(content)：就是屏幕中间的区域，其高度为： 1334px-40px-88px-98px=1108px 截图如下：

推荐3款测量工具为：MarkMan马克鳗，Dorado标注，PXcook像素大厨。2、关于iPhone6的图标的尺寸：导航栏的图标高度为44px左右，标签栏的图标尺寸为50x50px左右，最大为96x64px。关于iPhone6的文字的尺寸：导航栏的文字大小最大值是34px，标签栏的图标下方的文字大小为20px。内容区域的文字大小是：24px，26px，28px，30px，32px，34px。 3、（iPhone6设计稿尺寸是@2x），做原型图的时候，可以做成@2x的，即750x1334px；也可以做成@1x的，即375*667px。 4、设置界面的图标高度和开关滑动按钮的图标高度：58px。参考下图：

移动设备的界面设计尺寸规范

移动设备的界面设计规范作图的时候确保都是用形状工具（快捷键：U）画的，这样更方便后期的切图或尺寸变更关于页面比例，请按照ios以及android制作两套尺寸页面 IOS篇 1、尺寸及分辨率 iPhone 界面尺寸：320×480、640×960、640×1136 （以上单位都是像素，至于分辨率一般网页UI和移动UI基本上都是72 ppi）本次使用640×1136的尺寸设计。 2、界面基本组成元素 iPhone的APP界面一般由四个元素组成，分别是：状态栏、导航栏、主菜单栏以及中间的内容区域这里取用640×1136的尺寸设计，那我们就说说在这个尺寸下这些元素的尺寸：状态栏：信号、运营商、电量等显示手机状态的区域，其高度为：40 px 导航栏：显示当前界面的名称，包含相应的功能或者页面间跳转的按钮，其高度为：88 px 主菜单栏：类似于页面的主菜单，提供整个应用的分类内容的快速跳转，其高度为：98 px 内容区域：展示应用提供的相应内容，整个应用中布局变更最为频繁的，其高度为：910 px P.S. 在最新的 iOS8 的风格中，苹果已经开始慢慢弱化状态栏的存在，将状态栏和导航栏合在了一起 3、字体大小

iPhone 上的字体英文为：HelveticaNeue至于中文，Mac下用的是黑体-简，Win 下则为华文黑体。字体大小请保持在24px~36px之间（具体大小，请作图后放置手机中观看实际效果） 4、按钮大小：点击区域（包括按钮+空白区域）需要>44*44px Android篇 1、尺寸及分辨率 Android 界面尺寸：480×800、720×1280、1080×1920… （单位：像素） Android 比 iPhone 的尺寸多了很多套，本次设计建议取用720×1280 这个尺寸，这个尺寸720×1280中显示完美，在1080×1920 中看起来也比较清晰；切图后的图片文件大小也适中，应用的内存消耗也不会过高。 2、界面基本组成元素 Android 的 APP 界面和 iPhone 的基本相同：状态栏、导航栏、主菜单栏以及中间的内容区域。 Android 中我们取用720×1280的尺寸设计：状态栏高度为：50 px 导航栏高度为：96 px 主菜单栏高度为：96 px 内容区域高度为：1038 px（1280-50-96-96=1038）若Android功能键移到了屏幕中，高度也是和菜单栏一样的：96 px 3、字体大小 Android 上的字体为：Roboto，是android原生的字体，与微软雅黑很像。字体大小范围为16px~32px（具体大小，请作图后放置手机中观看实际效果） 4、按钮大小：点击区域（包括按钮+空白区域）需要>44*44px 要求篇

酷派手机主题设计大赛设计规范说明(确认)

酷派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界面设计规范二

一、Android设计常识开始介绍之前先帮大家梳理一下Android常用单位，方便各位亲们更好的掌握并了解Android端设计规范。 Android常用单位 per inch)：数字影像的解析度，也就是每英寸所拥有的像素数，即像素密度；PPI计算公式：ppi=√（长度像素数2 + 宽度像素数2）/屏幕对角线英寸数 per inch)：是指印刷上的计量单位，也就是每英寸上能印刷的网点数，我们设计用于显示器的默认为（72像素/英寸）就好了；屏幕尺寸（Screen Size）：一般我们所说的手机屏幕尺寸，比如3英寸、英寸等，都是指对角线的长度，而不是手机的面积；分辨率（Resolution）：是指手机屏幕垂直和水平方向上的像素个数，比如分辨率为：720*1280，是指设备水平方向有720个像素点，垂直方向有1280个像素点 pixels)：像素，不同设备显示效果相同（ point）：一个标准的长度单位，ios的逻辑单位，1Pt=1/72英寸，用于印刷业，非常简单易用；标注字体大小（72是早期台式机的DPI）（Scaled-independentpixels）：放大像素，安卓的字体单位；（Density-independentpixels）：是指设备的独立像素，不同的设备有不同的显示效果，它与设备硬件有关系； sp和dp基本一样，是android开发里特有的单位，都是为了保证文字在不同密度的显示屏上显示相同的效果；dp与设备硬件有关，与屏幕密度无关，sp与屏幕密度和设备硬件均无关；换算关系 android开发中，文字大小的单位是sp，非文字的尺寸单位用dp，但是我们在设计稿用的单位是px。这些单位如何换算，是设计师、开发者需要了解的关键。* dp：以160PPI屏幕为标准，则1dp=1px。 dp和px的换算公式：dp*ppi/160 = px。对于320ppi的屏幕，1dp x 320ppi/160= 2px。 * sp：它是安卓的字体单位，以160PPI屏幕为标准，当字体大小为100%时， 1sp=1px。 sp 与px 的换算公式：sp*ppi/160= px。

移动应用界面设计的尺寸规范

移动应用的界面设计画布尺寸设计多大（特别是Android）、图标和字体大小怎么定、需要设计多套设计稿么、如何切图以配合开发的实现？本篇将结合iOS和android官方的设计规范、搜集的资料以及工作中的摸索，来分享移动应用界面设计中的尺寸规范等问题，希望能给移动端的新手设计师些许指引。若有不当之处，欢迎斧正。一、android篇 1、android分辨率屏幕尺寸指实际的物理尺寸，为屏幕对角线的测量。为了简单起见，Android把实际屏幕尺寸分为四个广义的大小：小，正常，大，特大。像素（PX）代表屏幕上一个物理的像素点代表屏幕上一个物理的像素点。屏幕密度为解决Android设备碎片化，引入一个概念DP，也就是密度。指在一定尺寸的物理屏幕上显示像素的数量，通常指分辨率。为了简单起见，Android把屏幕密度分为了四个广义的大小：低（120dpi）、中（160dpi）、高（240dpi）和超高（320dpi）像素= DP * （DPI / 160 ) 例如，在一个240dpi的屏幕里，1DP等于1.5PX。于设计来说，选取一个合适的尺寸作为正常大小和中等屏幕密度（尺寸的选取依据打算适配的硬件，建议参考现主流硬件分辨率），然后向下和向上做小、大、特大和低、高、超高的尺寸与密度。典型的设计尺寸 ? 320dp：一个普通的手机屏幕（240X320，320×480，480X800） ? 480dp：一个中间平板电脑像（480×800） ? 600dp：7寸平板电脑（600×1024） ? 720dp：10寸平板电脑（720×1280，800×1280） Android SDK模拟机的尺寸屏幕大小低密度（120）ldpx 中等密度（160）mdpi 高密度（240）hdpi 超高密度（320） xhdpi 小屏幕 QVGA（240×320）480×640 普通屏幕WQVGA400（240X400） WQVGA432（240×432） HVGA（320×480） WVGA800（480×800） WVGA854（480×854）600×1024 640×960 大屏幕WVGA800 *（480X800） WVGA854 *（480X854） WVGA800 *（480×800）WVGA854 *（480×854）600×1024 超大屏幕1024×600 1024×768 1280×768WXGA （1280×800） 1536×1152 1920×1152 1920×1200 2048×1536 2560×1600 注意，ppi、dpi 是密度单位，不是度量单位： * ppi (pixels per inch)：图像分辨率（在图像中，每英寸所包含的像素数目）* dpi (dots per inch)：打印分辨率（每英寸所能打印的点数，即打印精度）

智能手机UI主题界面交互设计

摘要现如今，智能手机已经成为我们日常生活中不可或缺的一部分。年轻消费群体更是将大量时间耗费在手机上。技术的进步与市场的需求，合理设计智能手机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

移动应用界面设计的尺寸设置及规范

【总结】移动应用界面设计的尺寸设置及规范时间2014-05-04 15:15:07 青溪·札记原文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模式）。

《移动应用界面设计》教学大纲

《移动应用界面设计》课程教学大纲教务处制

《移动应用界面设计》教学大纲一、课程教学目标（一）知识目标《移动应用界面设计》是艺术设计专业（平面设计方向）的专业核心课程，在实践中注重对各专业基础课程如图形设计、编排设计、字体设计、构成设计等课程的统合和整体应用。通过对本课程的学习，使学生从心理学、人机工程学、设计艺术出发，掌握硬件人机界面与软件人机界面方法、理论与设计实例，探索新的交互技术。（二）能力目标通过本课程的学习，学生应该掌握软件的基本操作，并初步具备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．教学要求通过学习,掌握安卓系统的界面设计，针对其控件、导航、加载、引导页面进行临摹与创作练习。三、教学时间参考分配表

APP界面UI设计规范

UI设计规范一、APP界面设计规范（一）界面尺寸 1、IOS界面尺寸：常见为（宽度640px、高度1136px） 2、Android界面尺寸：常见为（宽度720px、高度1280px）其他尺寸：ldpi（240*320）、mdpi（320*480）、hdpi（480*800）3、Web Mobile尺寸：常见为（宽度640px、高度960px）（二）导航尺寸 1、IOS导航尺寸：高度60px，留白7px 2、Android导航尺寸：高度64px或48px，留白8px （三）标签尺寸 1、IOS标签尺寸：高度98px 2、Android标签尺寸：高度96px （四）工具栏尺寸 1、IOS工具栏尺寸：高度88px 2、Android工具栏尺寸：高度96px （五）列表高度 1、IOS列表高度：高度88px 2、Android列表高度：高度96px （六）资源状态对于资源通常设计弹起、点击、点击后、不可用四种状态，通常弹起、点击、点击后用不同颜色表示、不可用状态用低度灰色表示。

（七）字体 1、IOS默认英文为HelveticalNeue，中文为黑体 2、Android列表高度：默认为 Droidsans fallback （八）字号字号通常按照标题及征文级别递减为42、36、34、30、24（九）ICON 1、IOS常用尺寸有1024*1024、512*51 2、120*120、60*60 2、Android常用尺寸有512*512、200*200、72*72、48*48（十）资源插图 1、长方形插图高度一般不超过背景宽度的二分之一 2、缩略图两张并列高度一般不超过200px，宽度要适中有留白 3、图文混排中图片一般不高过150*110

小米主题设计教程

主题教程 (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.360docs.net/doc/d19670590.html,/download.html 注意：在针对新版主题客户端的测试方案上线之前，主题制作者只能在2.10.26开发版或之前版本进行测试 2.设计界面制作主题之前可先根据官方提供的主题界面模板，对主题界面进行设计，然后再进行切图，将设计稿切片，分成各个小部分，用与主题制作。 3.主题制作软件的安装官方主题工具：https://www.360docs.net/doc/d19670590.html,/thread-642823-1-1.html 使用此工具需要java环境的支持，未安装的同学请下载： https://www.360docs.net/doc/d19670590.html,/themeeditor/jre6_2.8.3_aajfe.zip 解压得jre6文件夹，将其放到到MIUIThemeEditor目录下(图1所示)。

手机页面IOS和安卓UI设计规范

本文整理汇总了一些界面设计（iOS系统）中常用的一些尺寸规范和方法，如控件间距、适配、标注、切图等，设计师在设计时并不一定要严格遵守，但对这些规范应有所了解，并融会贯通。目录 o界面设计尺寸及栏高度 o边距和间距 o内容布局 o界面图片设计比例 o建立统一风格的图标 o APP版式设计规范 o界面文字设计规范 o设计适配 o切图规范 o设计稿标注一、界面设计尺寸及栏高度目前主流的iOS 设备主要有iPhone SE（4英寸）、iPhone 6s/7/8（4.7英寸）、iPhone 6s/7/8 Plus（5.5英寸）、iPhone X（5.8英寸），它们都采用了Retina 视网膜屏幕，其中iPhone 6s/7/8 Plus 和iPhone X 采用的是3倍率的分辨率，其他都是采用的2倍率的分辨率，无论是栏高度还是应用图标，设计师提供给开发人员的切片大小，前者始终是后者的1.5倍，并分别以@3x和@2x在文件名结尾命名，程序再根据不同分辨率自动加载@3x或者@2x的切片。通过上面的讲解和图示我们了解了iPhone 不同设备的物理尺寸，那么他们的像素分辨率又是多少呢？也就是说我们用Photoshop 做设计新建画布应该设置多大呢？另外，iOS应用中的栏，包括状态栏、导航栏、标签栏、工具栏等，它们的高度又分别是多少呢？（注意：iOS 严格规定了各个栏的高度，这个是必须遵守的）通过下面的表格和图示来为你解答上面的问题。

注意：在进行iphone x 设计的时候我们依然可以采用熟悉的iphone 7 的设计尺寸作为模板，只是高度增加了290px，设计尺寸为750*1624（@2x）。注意状态栏的高度由原来的40px变成了88px，另外底部要预留68px的主页指示器的位置。

小米MIUI主题制作教程

主题教程一、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.360docs.net/doc/d19670590.html,/uQvUFn 注意：在针对新版主题客户端的测试方案上线之前，主题制作者只能在2.10.26开发版或之前版本进行测试 2.设计界面制作主题之前可先根据官方提供的主题界面模板，对主题界面进行设计，然后再进行切图，将设计稿切片，分成各个小部分，用与主题制作。 3.主题制作软件的安装官方主题工具：https://www.360docs.net/doc/d19670590.html,/2QVve2 使用此工具需要java环境的支持，未安装的同学请下载： https://www.360docs.net/doc/d19670590.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.360docs.net/doc/d19670590.html,mand”

android设计规范

android人机界面指南 1Android设计的依据 1.1框架结构及流程是什么使得android有着独特的用户体验？后台处理支持多任务功能正在进行和事件驱动的提示信息通过Widgets和live folders来实现实时信息的预览用户想用时，任一应用程序都可以挑选和选择 android不是关于程序的，它是关于活动，把任务分层， 1.2架构基础硬件平台 android设备代表的是硬件和软件的完美组合。硬件辅助导航操作，并给android提供更多更好的功能。当菜单没有开启，要把屏幕最大化时，菜单按钮可以在屏幕上提供更多的内容。返回按钮允许使用返回堆（back stack）。竖屏与横屏一般来说，用户界面开发竖屏与横屏。在新横屏也仍存在于新的Android手机中。99％的android布局支持横屏。焦点和菜单在触摸模式里没有焦点，只有轨迹球。Android平台里没有鼠标焦点。确定你从未显示焦点。主菜单应该包括全部功能；它们与活动联系一起形成整体。菜单上的图标按重要性排序。如果有多于5个图标，使用点击more menu菜单来查看那些不太重要的菜单项。上下文菜单（长按）集中在一个特定对象。总是把那些与所选项最相关的行为放在长按菜单的顶部。需要记住的几点：设计时要考虑速度和简洁尽量分层来分等级屏幕上的活动尽量最小使用下载进度条，下载数据时，而不是让用户等待去看一个加载完全的页面。考虑活动流而不是线性行为 1.3屏幕上的行为 android设计了特定的行为方式。在你的应用程序里利用好这一点。应该坚持android行为的标准，避免混淆用户。

1.4表达细节使得产品集中在细节。程序的美学会帮助你集中注意在那些应用体验核心的关键任务上。API DEMO是开始你的工具包的好地方。

APP界面UI设计规范

? UI设计规范一、APP界面设计规范（一）界面尺寸 1、IOS界面尺寸：常见为（宽度640px、高度1136px） 2、Android界面尺寸：常见为（宽度720px、高度1280px）其他尺寸：ldpi（240*320）、mdpi（320*480）、hdpi（480*800）3、Web Mobile尺寸：常见为（宽度640px、高度960px）（二）导航尺寸 ^ 1、IOS导航尺寸：高度60px，留白7px 2、Android导航尺寸：高度64px或48px，留白8px （三）标签尺寸 1、IOS标签尺寸：高度98px 2、Android标签尺寸：高度96px （四）工具栏尺寸 1、IOS工具栏尺寸：高度88px 2、Android工具栏尺寸：高度96px （五）: （六）列表高度 1、IOS列表高度：高度88px 2、Android列表高度：高度96px （七）资源状态

对于资源通常设计弹起、点击、点击后、不可用四种状态，通常弹起、点击、点击后用不同颜色表示、不可用状态用低度灰色表示。（八）字体 1、IOS默认英文为HelveticalNeue，中文为黑体 2、Android列表高度：默认为 Droidsans fallback （九）《（十）字号字号通常按照标题及征文级别递减为42、36、34、30、24 （十一）ICON 1、IOS常用尺寸有1024*1024、512*51 2、120*120、60*60 2、Android常用尺寸有512*512、200*200、72*72、48*48 （十二）资源插图 1、长方形插图高度一般不超过背景宽度的二分之一 2、缩略图两张并列高度一般不超过200px，宽度要适中有留白 3、图文混排中图片一般不高过150*110

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。这些单位如何换算，是设计师、开发者需要了解的关键。 * dp：Density-independent pixels，以160PPI屏幕为标准，则1dp=1px。dp和px的换算公式：dp*ppi/160 = px。对于320ppi的屏幕，1dp x 320ppi/160 = 2px。 * sp：Scale-independent pixels，它是安卓的字体单位，以160PPI屏幕为标准，当字体大小为100%时，1sp=1px。sp 与px 的换算公式：sp*ppi/160 = px。对于320ppi 的屏幕，1sp x 320ppi/160 = 2px。简单理解的话，px（像素）是我们UI设计师在PS里使用的，同时也是手机屏幕上所显示的，dp是开发写layout的时候使用的尺寸单位。为什么要把sp和dp代替px？原因是他们不会因为ppi的变化而变化，在相同物理尺寸和不同ppi下，他们呈现的高度大小是相同。也就是说更接近物理呈现，而px则不行。