手机银行系统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. 输出主题包或直接导入手机检查上机效果（目前只支持 进入“主题应用”手动点击应用主题）①② ③④

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

酷派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、设计数字时钟,尺寸如下图 天气可以显示各种实时天气信息，可以自由设计天气的图标样式，以及数字时间的样式，位置尽量按照下图的标注来,更利于后期软件的实现. 尽量发挥你的想象力，设计更加生动的主天气界面。

智能手机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

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

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

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

小米主题设计教程

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

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