文档库 最新最全的文档下载
当前位置:文档库 › 2015年度手机APP界面UI设计作品欣赏

2015年度手机APP界面UI设计作品欣赏

2015年度手机APP界面UI设计作品欣赏
2015年度手机APP界面UI设计作品欣赏

2015年手机APP界面UI设计作品欣赏

足不出户,便可搜罗全球商品。手机APP的发展,渐渐将人们从PC端解放出来。于是,各种为生活提供便捷性的APP应用而生。只有大众想不到的,没有做不到的,真心为设计师们的奇思妙想点赞。以下的作品均是与我们的生活联系紧密的手机APP界面UI设计作品。期待,有一天,这些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. 输出主题包或直接导入手机检查上机效果(目前只支持 进入“主题应用”手动点击应用主题)①② ③④

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

手机软件设计文档模板

文档管理信息表 文档变更纪录

文档主要评审意见

目录 1开发规划........................... 错误! 未定义书签。 开发人员.......................... 错误!未定义书签。 开发计划.......................... 错误!未定义书签。 开发环境和工具...................... 错误!未定义书签。 开发规范.......................... 错误!未定义书签。 2总体设计........................... 错误! 未定义书签。 概念术语描述........................ 错误!未定义书签。 术语1 ............................... 错误!未定义书签。 术语2 ............................... 错误!未定义书签。 基本设计描述........................ 错误!未定义书签。 系统总体逻辑结构图 .................. 错误!未定义书签。 系统部署结构图 .................... 错误!未定义书签。 主要界面流程描述........................ 错误!未定义书签。 功能1界面流程..................... 错误!未定义书签。 功能2界面流程..................... 错误!未定义书签。 模块列表.......................... 错误!未定义书签。 3数据结构........................... 错误! 未定义书签。 4接口规范........................... 错误! 未定义书签。 <模块1 API>. ................... 错误!未定义书签。 Interface1 ............................... 错误! 未定义书签。 Interface2 ............................... 错误! 未定义书签。 <模块2 API>. ................... 错误!未定义书签。 <模块3 API>. ................... 错误!未定义书签。 <数据库API> .................... 错误!未定义书签。 5模块设计........................... 错误! 未定义书签。 M)DULE设计 ........................ 错误!未定义书签。 模块设计描述 ...................... 错误!未定义书签。 模块界面描述 ...................... 错误!未定义书签。 M)DUL2设计........................ 错误!未定义书签。 6附录............................. 错误! 未定义书签。 第三方组件.......................... 错误!未定义书签。 参考资料.......................... 错误! 未定义书签。 附加文档.......................... 错误!未定义书签。

ios和Android APP设计规范要点

相信很多人都在开发设计APP时会遇到很多界面上的问题,要以多大尺寸来设计?分辨率是多少?该怎么切图给开发等等 下面的文字就给出一点点技巧总结,但也要给合团队在开发时的习惯。每个工程师们所使用的控件,书写布局习惯来实际移交的图是不一样的,但八九不离十,都是遵循一个原则,便捷开发、自适应强的开发模式 IOS篇 一、尺寸及分辨率 iPhone界面尺寸:320*480、640*960、640*1136 iPhone6: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界面进行风格统一 ,对界面元素的样式、颜色和大小设定统一的规范和使用原则。与设计、前端约定好统一的设计规范很重要,约定设计规范可以减少产品、设计、前端的沟通成本;可以使界面设计整洁、统一,减少界面元素的重复设计;可以减少设计素材,控制安装包的大小。 这一节主要讲解:app设计的用色规范。我们先看下色轮图。 然后我们再来具体的看下app设计的色彩规范实例。 这是一个非常详细的手机app色彩使用规范实例。值得大家好好的看看。《找车app》 标准色规范: x轴:重要、一般、弱。 y轴:色彩代码、色块、使用场景 标准色重要:重要颜色中一般不超过3种,这里的例子

重要颜色之一红色需要小面积使用,用于特别需要强调和突 出的文字、按钮和icon;而黑色用于重要级文字信息比如标题、正文等。 标准色一般:都是相近的颜色,而且要比重要颜色弱,普遍用于普通级信息、引导词比如提示性文案或者次要的文字信息。 标准色较弱:普遍用于背景色和不需要显眼的边角信息。 再次举例说明如何来定制属于自己手机app的色彩规范。这是一种表示方式。有这个规范,我们设计app和重构app 会清晰明了很多。 这是25学堂的老谭同学给大家精心整理的2种不能标 准色的表现形式。 app界面要给人简洁整齐,条理清晰感,依靠的就是界 面元素的排版和间距设计,还有色彩的合理、舒适度搭配。 其他的色彩运用原理以及需要遵循对比原则: 1:统一色调,针对软件类型以及用户工作环境选择恰 当色调: 如:安全软件,根据工业标准,可以选取黄色,绿色体现环保,蓝色表现时尚、紫色表现浪漫等等,淡色可以使人舒适,暗色做背景使人不觉得累等 2:如果没有自己的系列界面,采用标准界面则可以少 考虑此方面,做到与操作系统统一,读取系统标准色表

APP页面布局设计模板与讲解

在一个APP的使用过程中,优秀的页面设计与用户导航对用户体验影响极大。某些时候的第一印象与操作便决定了用户的留存率。对于一些新手开发,独立开发者或者小开发团队,往往程序员自己就承担了美工和设计工作。对于这些开发者来说,往往缺少这方面的经验,而如果缺少了这两项,产品的使用体验是非常不友好的。 用户体验是什么?用户体验(User Experience,简称UE/UX)是用户在使用产品过程中建立起来的一种纯主观感受。但是对于一个界定明确的用户群体来讲,其用户体验的共性是能够经由良好设计实验来认识到。计算机技术和互联网的发展,使技术创新形态正在发生转变,以用户为中心、以人为本越来越得到重视,用户体验也因此被称做创新2.0模式的精髓。在中国面向知识社会的创新2.0——应用创新园区模式探索中,更将用户体验作为“三验”创新机制之首。ISO 9241-210标准将用户体验定义为“人们对于针对使用或期望使用的产品、系统或者服务的认知印象和回应”。通俗来讲就是“这个东西好不好用,用起来方不方便”。因此,用户体验是主观的,且其注重实际应用时的产生的效果。 我们常经历到,一个产品从设计的初期到后期完善,都会经过一系列的迭代和升级。作为初期的设计人员,发挥的空间是很大,但历史的惨痛教训告诉我们,初期的设计往往又是失败居多,很多情况下是由于自己的局限性造成的,尤其在后期,架构不是想改就改,用户习惯不是想改就能改的,所有在前期,特别是上述提到的集美工设计开发于一体的人,要慎重考虑APP的架构设计,本文所阐述的两个方面,其一为页面设计,其二为用户导航。 APP页面功能设计包含了首页,注册页,。 APP用户导航,是App设计时要着重考虑的,常见的App框架有列表、网

app设计规则 (6页)

本文部分内容来自网络整理,本司不为其真实性负责,如有异议或侵权请及时联系,本司将立即删除! == 本文为word格式,下载后可方便编辑和修改! == app设计规则 篇一:APP设计的用色规范 我们先来回顾下。什么是手机APP界面设计规范? APP设计规范指对APP界面进行风格统一,对界面元素的样式、颜色和大小设 定统一的规范和使用原则。与设计、前端约定好统一的设计规范很重要,约定 设计规范可以减少产品、设计、前端的沟通成本;可以使界面设计整洁、统一,减少界面元素的重复设计;可以减少设计素材,控制安装包的大小。 这一节主要讲解:APP设计的用色规范。我们先看下色轮图。 然后我们再来具体的看下APP设计的色彩规范实例。 这是一个非常详细的手机APP色彩使用规范实例。值得大家好好的看看。《找 车APP》 标准色规范: X轴:重要、一般、弱。 Y轴:色彩代码、色块、使用场景 标准色重要:重要颜色中一般不超过3种,这里的例子重要颜色之一红色需要 小面积使用,用于特别需要强调和突出的文字、按钮和icon;而黑色用于重要 级文字信息比如标题、正文等。 标准色一般:都是相近的颜色,而且要比重要颜色弱,普遍用于普通级信息、 引导词比如提示性文案或者次要的文字信息。 标准色较弱:普遍用于背景色和不需要显眼的边角信息。 再次举例说明如何来定制属于自己手机APP的色彩规范。这是一种表示方式。 有这个规范,我们设计APP和重构APP会清晰明了很多。 这是25学堂的老谭同学给大家精心整理的2种不能标准色的表现形式。

APP界面要给人简洁整齐,条理清晰感,依靠的就是界面元素的排版和间距设计,还有色彩的合理、舒适度搭配。 其他的色彩运用原理以及需要遵循对比原则: 1:统一色调,针对软件类型以及用户工作环境选择恰当色调: 如:安全软件,根据工业标准,可以选取黄色,绿色体现环保,蓝色表现时尚、紫色表现浪漫等等,淡色可以使人舒适,暗色做背景使人不觉得累等 2:如果没有自己的系列界面,采用标准界面则可以少考虑此方面,做到与操作系统统一,读取系统标准色表 3:色盲、色弱用户,即使使用了特殊颜色表示重点或者特别的东西,也应该使用特殊指示符,着重号,以及图标等 4:颜色方案也需要测试,常常由于显示器、显卡的问题,色彩表现每台机器都不一样,应该经过严格测试,不同机器进行颜色测试 5:遵循对比原则:在浅色背景上使用深色文字,深色背景上使用浅色文字,蓝色文 字以白色背景容易识别,而在红色背景则不易分辨,原因是红色和蓝色没有足 够反 篇二:APP 界面 UI设计规则则 什么是UI?UI就是界面设计。专业的讲指对软件的人机交互、操作逻辑、 界面美观的整体设计。一个APP想要吸引并留住客户,美观实用简便的用户界 面设计是其重要的一环。在开发APP之初,就应重视选择经验丰富的开发团队,并 掌握UI设计的原则。 1依据手机的物理特性设计界面的原则 1)应尽量减少文字的输入。由于手机在输入上的低效性,澳环认为,在设计的过程中,应尽量减少用户的输入,如果有可能可以设置默认值,或者让用户选 择目标值。 2)信息结构好,屏与屏之间的逻辑关系清晰。由于手机屏幕相对较小,只能展示较少的信息量,这时候,在APP网站建设中,就需要有清晰的信息架构,让 用户能一目了然的知道APP的各个模块及能够自由切换。 3)移动APP的重要功能可以在界面中适当的提示,采取对重要高频使用的功能或信息放在首页或什么显眼的位置。2依据手机的移动特性设计界面的原则

手机个人图书馆APP设计方案(优选.)

最新文件---------------- 仅供参考--------------------已改成-----------word文本 --------------------- 方便更改 赠人玫瑰,手留余香。 设计人:陈玉梅 班级:2012级教育技术学班 提交时间:2015年1月4号 方案设计名称:手机上个人图书馆的APP设计方案

手机个人图书馆的APP设计方案目录 一、设计背景 二、APP设计细化分析 1、阅读环境的设计 2、登录界面的设计 2、用户界面的设计 3、退出界面的设计

三、结束 一、APP设计背景 随着智能手机和ipad等移动终端设备的普及,人们逐渐习惯了使用APP客户端上网的方式,而目前国内各大电商,均拥有了自己的APP客户端,这标志着,APP客户端的商业使用,已经开始初露锋芒。对于阅读来说也一样,由于电子阅读的成本低、便于携带、连接性强、能跨平台使用以及环保等的优点,使得越来越多的手机用户愿意用使用自己的手机客户端来阅读书籍,此方案就是基于这样一个趋势来进行设计的,设计一个手机上个人图书馆的APP。目的是使电子书的阅读更广泛,设计更齐全。 二、阅读环境的设计 很多用户会在移动中使用,要求此APP设计要求耗流量少,并且在移动中要保持网速,所以此APP设计占内存要求比较小,并且要求阅读所需流量小,才能保持网速正常。除此之外,还要对软件进行不断的更新及优化。

三、APP设计细化分析 1、登录界面的设计 界面的设计在一定程度上会影响使用者的心情,所以这次的方案会按登录界面,用户界面,以及退出界面等一系列流程下进行设计,已达到不仅内容齐全有序,更在界面的设计上进行分析,让观众在愉悦的环境下进行阅读的目的。 现在设计的这个手机阅读APP的登录界面有以下要求: 在登录界面,除了有用户名,密码之外,还有日历或者节日的提醒,用户名登录可以使用微博,QQ,微信,人人等账号,设计可以如下: (1)用户名: 密码: 2014年12月29日 (2)友好界面,节日的提醒设计在由登录界面进入用户界面的时候,可以选择节日具有代表性的图片或者文字渐渐消失的方式出现。 2、用户界面的设计 (1)搜索文章 请输入作者、书名、关键字搜索

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系统的App界面设计

基于Android系统的App界面设计 智能手机时代的来临改变了大多数人的生活习惯,时至今日智能手机已经成为了人们工作生活中的一部分,在工作生活中发挥着重要的作用。App作为智能手机应用程序的核心,构建以用户体验为核心的页面设计是智能手机App设计的核心与要点,同时也是满足用户使用需求的重要途径与方式。现今的智能手机App主要分为IOS与Android两大市场,与IOS的封闭不同的是Android系统具有极强的开放性,而这一开放性在为Android系统App带来无限可能的同时也使得基于Android系统所开发的App界面本身缺乏统一的规范,从而造成基于Android系统所开发的App界面具有极大的开放性。新时期为做好基于Android 系统App的设计需要从情感、认知以及感官三个层面入手做好基于Android系统的App界面的开发设计,使之具有良好的用户使用体验。 标签:Android系统;App;界面设计 Abstract:The advent of the smart phone era has changed the habits of most people. Today,smart phone s have become a part of people’s work and life,and play an important role in the work and life. As the core of smart phone applications,App plays an important role in the work and life. The design of page based on user experience is the core and key point of the App design of smart phone,and it is also an important way and way to meet the needs of users. Today’s smartphone App is mainly divided into IOS and Android two major markets,Different from the closure of IOS,Android system has a very strong openness,and this openness not only brings infinite possibility to App of Android system,but also makes the App interface based on Android system lack of unified specification. As a result,the App interface based on Android system is very open. In order to do well the design of App based on Android system in the new period,it is necessary to develop and design the App interface based on Android system from the three aspects of emotion,cognition and sense organ,to make it have a good user experience. Keywords:Android system;App;interface design 前言 Android系统是与IOS系统所并行的应用于智能手机中的两大智能系统,在基于Android系统App界面开发的过程中受多种因素的影响使得一些App的界面具有很大的不协调性,从而影响了广大用户的使用体验。本文在分析影响智能手机App界面设计因素的基础上对如何做好基于Android系统的App界面设计进行分析阐述。 1 影响智能手机App界面设计的因素分析 智能手机App是智能手机的灵魂,用户结合自身需求可以下载安装自身所

APP应用开发的设计规范与标准

APP应用开发的设计规范与标准 APP设计规范: APP界面设计规范指导APP设计过程中的设计标准。根据统一的设计标准,使得整个APP在视觉上统一。提高用户对APP的产品认知和操作便捷性。 APP设计规范的重要性: 统一的标准,一、便于在设计过程中的团队合作,二、提高用户对APP的产品认知和操作便捷性。 APP设计规范具体内容: 1.遵循统一的准则,确定标准并遵循; 2.颜色使用恰当,遵循对比原则:色彩标准、色彩对比,突出内容、显示测试; 3.光标、图标和指示图片、地图等:统一的构图布局,色调、对比度、色阶和风格; 4.Font:中文采用宋体,英文采用Microsoft Sans Serif。大小:MSS字体8磅,宋体小五号字(9磅)五号字体(10磅); 5.文字表达:在提示信息、帮助文档中的。用词、修饰及标点符号等等; 6.控件风格、布局; 7.布局的顺序:从左到右,从上到下;

8.快捷键、弹出菜单; 9.用户交互:按钮状态、弹出窗口位置、执行动作提示信息(视觉和听觉,甚至的触觉的); 10.联机帮助:HELP文档。 产品设计、用户体验、交互设计、视觉设计、开发、运营 —————————————————【←总结】·【参考→】————————————————————— 【开发苹果APP界面标准规范】 一:遵循一致的准则,确立标准并遵循 无论是控件使用,提示信息措辞,还是颜色、窗口布局风格,遵循统一的标准,做到真正的一致。 这样得到的好处: 1:使用户使用起来能够建立起精确的心里模型,使用熟练了一个界面后,切换到另外一个界面能够很轻松的推测出各种功能,语句理解也不需要费神理解 2:降低培训、支持成本,支持人员不会行费力逐个指导。3:给用户统一感觉,不觉得混乱,心情愉快,支持度增加做法: 项目组有经验人士,确立UI规范:

app,ui界面设计模板

竭诚为您提供优质文档/双击可除app,ui界面设计模板 篇一:手机appui界面设计原型草图 https://www.wendangku.net/doc/5f12896107.html, 手机app界面ui设计原型草图 任何一位设计师在设计app软件时,都会对该app的功能、界面布局、菜单设置、内容架构等方面进行详细的策划。只有在充分的策划前提下,才能通过应用软件的加工,将脑海中的构想变成一个个的app界面ui设计图形。 凭借草图,设计师也可从宏观的角度时刻把控app设计的每一个细节。以下为一款购物平台app的ui设计原型草图,从首页的设计规划,到搜索页,再到产品的详情页:篇二:app界面ui设计规范 ui设计规范 一、app界面设计规范 (一)界面尺寸 1、ios界面尺寸:常见为(宽度640px、高度1136px) 2、android界面尺寸:常见为(宽度720px、高度1280px) 其他尺寸:ldpi(240*320)、mdpi(320*480)、hdpi

(480*800)3、webmobile尺寸:常见为(宽度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列表高度:默认为droidsansfallback (八)字号

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

酷派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应用孕育而生。精美的app界面更吸引我们使用,那么它是如何设计与制作呢?我们一起来学习下! 免费获取线框图原型图设计软件:https://www.wendangku.net/doc/5f12896107.html,/wireframe/ 模板丰富的手机APP界面制作工具 亿图图示这款国产的全类型图形图表设计软件,为用户提供精美的APP界面设计模板,可以免费使用。特别是针对没有绘图经验的开发者,有了APP界面设计模板之后,再也不愁APP界面设计的问题。亿图软件的符号库包含所有图标组,还能对单个图标进行修改,拖拽式的操作能帮助用户在架构设计上更加流畅。

线框图设计模板 线框图模板是经过打磨的备选素材,可供使用者直接套用,有效节省时间。亿图图示这款国产的全类型图形图表设计软件,为用户提供精美的线框图模板,在应用软件内容,用户可以免费使用。特别是针对没有绘图经验的开发者,有了线框图模板之后,再也不愁线框图的问题。 线框图模板一

线框图模板二

线框图模板三 更多绘图符号,助力线框图设计 亿图软件不仅提供模板,更有多套免费icon供用户使用。这些矢量的图标符号,可任由使用者进行二次编辑。精致的图标符号,加上合理的布局,瞬间让线框图设计加分不少。 UI矢量符号

触摸手势符号

IOS符号 亿图图示的模板和符号,欢迎您的尝试。如果想体验最新的模板和符号,也可以从线上直接获取最新素材。 获取更多线框图原型图软件使用技巧:https://www.wendangku.net/doc/5f12896107.html,/software/wireframe/

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

【总结】移动应用界面设计的尺寸设置及规范 时间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模式)。

ios,app图标尺寸规范

竭诚为您提供优质文档/双击可除ios,app图标尺寸规范 篇一:ios界面设计尺寸规范 ios界面设计尺寸规范 一、尺寸及分辨率 iphone界面尺寸:320*480、640*960、640*1136、750*1334、1080*1920等。 ipad界面尺寸:1024*768、2048*1536等。 单位:像素72dpi,在设计的时候并不是每个尺寸都要做一套,尺寸按自己的手机来设计,比较方便预览效果,一般用640*960或者640*1136的尺寸来设计。ps :作图的时候确保都是用形状工具(快捷键:u)画的,这样更方便后期的切图或者尺寸变更。 二、界面基本组成元素 iphone的app界面一般由四个元素组成,分别是:状态栏、导航栏、主菜单栏、内容区域。 640*960的尺寸设计下这些元素的尺寸。 状态栏:就是我们经常说的信号、运营商、电量等显示手机状态的区域,其高度为:40px

导航栏:显示当前界面的名称,包含相应的功能或者页面间的跳转按钮,其高度为:88px 主菜单栏:类似于页面的主菜单,提供整个应用的分类内容的快速跳转,其高度为:98px 内容区域:展示应用提供的相应内容,整个应用中布局变更最为频繁,其高度为:734px [下图说明:] 至于我们经常说的iphone5/5s的640*1136的尺寸,其实就是中间的内容区域高度增加到910px。 ps:在最新的ios7的风格中,苹果已经开始慢慢弱化状态栏的存在,将状态栏和导航栏合在了一起,但是再怎么变,尺寸高度也还是没有变的,只不过大家在设计ios7风格的界面的时候多多注意下~ 三、字体大小 heitisc(黑体-简,黑体-简的英文名称为heiti sc。heiti为黑体的拼音,sc代表简体中文(simplifiedchinese)),是macosxsnowleopard(版本10.6)包含的简体中文字型,也是iphoneos 3.0(版本 4.0后改名为ios)及ipodnano第五代以来的预设简体中文字型。 黑体-简系为黑体,取代华文黑体成为macosxsnow leopard的预设简体中文字型。在过去,华文黑体是

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

APP+UI设计规范

APP UI设计规范(可公开版) 前言 APP UI设计,有何规律?从抽象到具体,前后台并行,大概要经过几个阶段,每个阶段,都有一些明确的阶段输出doc,具体: (上图是在著名的《用户体验要素》原图上进行改编) KPA#1:第一痛点创意

首先,要确定你的“第一痛点”(first-item)还没有人做过,最好的调查方式是到APP Store上搜索已有的APP程序。如果你发现已经有某个APP包含类似的痛点,那你需要比它做的“更好”,“更好”可以体现在体验(exp)创新上,也可以体现在功能(func)革命上。 中国的法律环境缺乏对APP痛点相关智识产权的严格保护,但并不意味着可以随心所欲地clone或“山寨”别人的痛点创意。为什么呢?任何APP都不是孤立存在的,受到APP 的资源、APP用户培育的节奏、社会大环境对APP生命周期的影响,简单clone成功可能性很小。 另一方面,第一痛点创意风险很大,所谓失之毫厘,谬以千里,推荐采用smc的《顾客需求确认表》做第一人称检验故事场景挖掘,最好能输出类似下面的脚本化体验故事/片段: 1.1)体验片段#1。比如定机票应用中,有头等舱和经济舱。经济舱是一个普通的人, 而头等舱是一个戴着帽子,系着领结,胸前别着手帕的这么一个人,很酷的老板角色,体现出了头等舱和经济舱之间的区别。要做头等舱的人,一般都愿意自己看到自己这么一个形象。 1.2)体验片段#2。比如微信4.0,刚打开的时候有一张图片,非常文艺非常在都市的 感觉的一张图片,配文字“如你所见,微信,是一个生活方式”。其实它在干嘛呢?它是在提示用户,新增了自己相册功能。它虽然是给用户介绍新功能,但是它把整个情绪融在里面。 1.3)体验片段#3:比如安心停车,该APP具备查找附近有剩余车位的停车场位置,以 及根据收费情况进行优先显示的基本功能,而当附近没有停车位时该APP应该按照“违章停车罚款概率”由低往高推荐免费停车地点,“违章停车罚款概率”来自违章停车处罚数据库中的地点数据,必须得到交警部门的支持。 KPA#2:‘交互界面’exp/func思维导图 ‘交互界面’(简称exp/func)是比草图还简单的交互界面,往往用一句话描述,包含必要的交互信息,比如点、选、录入等输入和文字、图片、动画、特效等输出。从“第一痛点创意”相关的1~3个exp/func出发,利用“思维导图”(简称mind-map)的发散思维模式,延伸、细化、穷举、关联一切‘交互界面’,就有可能将“第一痛点创意”真正落地,成为货真价实的“第一痛点”。 ‘思维导图’一般的呈现方式是“发散图形”,一般如下:

相关文档
相关文档 最新文档