文档库 最新最全的文档下载
当前位置:文档库 › 预订酒店IOS界面参考

预订酒店IOS界面参考

预订酒店IOS界面参考
预订酒店IOS界面参考

1.首页

2.首页_酒店位置选择

3.首页_入住离店日期选择

4.首页_关键字/酒店/地址选择

5.首页价格星级选择

6.查找结果界面:根据首页输入的条件点击“查找酒店”进入到查找结果界面

7查找结果_我的收藏界面:点击左上角心形图标进入

8查找结果_地图查看:点击左上角地图形图标进入

9.查找结果_修改入住离店日期:点击日期控件进入

10.查找结果_浏览历史:点击界面浏览历史按钮进入

11.查找结果_只看优惠条件下拉选择框:点击只看优惠弹出

12.查找结果_底部菜单筛选按钮

13.查找结果_底部菜单区域位置按钮

14查找结果_底部菜单价格星级按钮

15查找结果_底部菜单排序按钮

16.酒店介绍界面:通过点击查找结果酒店列表中的一列进入

17.酒店介绍界面_酒店房间图片浏览:通过下拉操作可以进入

18酒店介绍界面_酒店位置

19酒店介绍界面_住客评价

20酒店介绍界面_酒店详情全部信息界面

21酒店介绍界面_入住离店日期选择界面

22酒店房型报价界面:通过点击酒店介绍界面中房型列表进入

23酒店房型报价界面_房型详细信息:通过点击酒店房型报价界面列表中一行进入

24订单填写界面:通过点击酒店房型报价界面中的“订”按钮进入

25订单填写_房型详情

26订单填写_房间数选择

27订单填写_最晚到店时间

28订单填写_入住人:手动填写

29订单填写_入住人:选择常用入住人:通过点击入住人行右侧图标进入

30订单填写_接收通知的手机号码:可手动填写也可到手机通讯录进行选择

31订单填写_订单费用详情:通过点击界面底部明细图标进入

32订单填写_提交订单(到店付):点击提交订单按钮

33订单提交成功(到店付)

34订单提交成功(到店付)_订单详情

35订单提交成功(到店付)_订单详情_修改订单

35订单提交成功(到店付)_查看酒店地图

36订单提交成功(到店付)_订单凭证

37订单填写(预付):其他订单填写信息和到店付一样,需要预付的订单界面下部是“去支付”按钮

38订单填写(预付)_支付订单

手机软件设计文档模板

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

文档主要评审意见

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

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

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

手机个人图书馆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)搜索文章 请输入作者、书名、关键字搜索

IOS设计规范

刚入门UI的小伙伴是不是不知道app该怎么切图、规范是什么?怎么和程序员同学配合,用什么工具更方便,怎么标注自己的设计稿,怎么做到一稿适配多种机型,这篇文章将一一解答你的疑问! 依旧声明:这里写的不是一种规范,只是一种工作方法,大家在具体工作中,一定要灵活运用。另外,技术的更新是非常快的,所以,还是要灵活运用~ 我本身是一名GUI设计师,所以我只站在GUI设计师的角度去把APP从项目启动到切片输出的过程写一写,相当于工作流程的介绍吧;公司不同,流程不尽相同,但是终究还是能有些帮助。 这里我们只说IOS系统下的设计,至于Android,因为尺寸太多,涉及的东西比较乱,我整理好以后再说吧。 页面篇幅比较长,不推荐一次性看完,那样你潜意识里就会对它厌烦了,所以可以有时间读一读,看一看。 Part 1 项目立项 完善的公司会把项目相关人员聚集起来,产品经理会把产品详细的用原型展示出来,包括产品定位,市场需求,主打卖点,产品性质以及各模块具体功能,逻辑跳转演示一下;之后会评估项目用时,各部门协调,项目启动。 话不多说,接到原型,那我们应该做什么准备工作呢?

在项目设计之初,就该进行项目归档整理,我的习惯是“项目名称+版本序列”; 没有最正确的工作方法,只有最适合自己的工作习惯。 我个人习惯把不同类型的文件划分到不同类型的文件夹里,有的设计师习惯全都放在一个文件夹里,如果文件少还说的过去,如果页面过多,就知道这样的利弊了。 工欲善其事必先利其器,基本上我做界面设计用的最多的就是PS和AI了,版本无所谓,用着舒服就行,推荐版本高一点的,低版本好多方便功能都没有。 标注工具: PxCook,目前我还没用上Mac,所以也不知道传说中的Sketch到底多神奇。PxCook在Windows上标注还比较顺手,虽然它还附带切图功能,但是比较鸡肋,不推荐用它切图。 切图工具: Cutterman 点击下载一款PS的插件,切图非常方便,但不支持绿色免安装版本PS,而且对PS版本要求比较高,针对CS 6的已经不维护更新了。推荐安装官方完整版PS cc,然后自行破解。官网上有安装使用教程,自己研究下吧,因为我也是最近才开始接触这款插件。 Assistor PS 也是一款PS的切图标注插件,也被誉为神器;我使用了下,感觉相当不错,就是标注还没太适应,推荐一下这个。 标注工具以及这两款插件我都会上传,至于安装方法去“百度一下”吧,易学易用。

基于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是智能手机的灵魂,用户结合自身需求可以下载安装自身所

UI必知之MD和IOS设计规范的区别

UI必知之MD和IOS设计规范的区别

在UI设计师日常工作中,很重要的一个工作前提就是要熟知设计规范,那么对于移动端的设计规范,你们知道吗?那么,接下来就让小编给大家着重地分析一下MD和IOS设计规范在阴影、导航和配色这三个方面有什么区别吧,希望对大家能够有所帮助! Material Design(以下简称MD)是谷歌研发的一套视觉语言设计规范,主要应用于安卓类应用。

iOS Human Interface Guidelines(以下简称iOS)是苹果公司针对iOS 设计的一套人机交互指南,目的是为了使运行在iOS上的应用都能遵从一套特定的视觉以及交互特性,从而能够在风格上进行统一。 相对来说,我们对于iOS的设计规范更加熟悉。因为考虑到成本,设计师进行产品设计的时候只会出一套iOS的设计稿,然后去适配安卓机型。很少会针对安卓机型再出一套MD风格的方案,这种现象虽然存在但是并不合理。不同的系统/平台采用了不同的设计语言,不同的设计语言会培养出不同的操作习惯。 例如使用安卓手机的用户平时见到的都是MD风格的界面,突然下了一个iOS风格的应用,那么操作起来就会很不习惯,增加了学习成本。为了让产品可以适用不同平台用户的操作习惯,提供MD和iOS两套设计稿是非常有必要的。 区别一:阴影 MD意味着大色块+阴影,为什么MD如此痴迷于阴影?从它的名字就可以看出来,Material Design,这里的material指的是纸张。因为来源于现实生活,所以MD非常喜欢使用真实世界元素的物理规律与空间关系来表现组件之间的层级关系。 而阴影就是最常见的表现形式:

app,ui界面设计模板

竭诚为您提供优质文档/双击可除app,ui界面设计模板 篇一:手机appui界面设计原型草图 https://www.wendangku.net/doc/dc11246929.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 (八)字号

历代iphone分辨率、IOS UI设计尺寸规范

iPhone、ipad常见设计尺寸 iPhone: iPhone 1G 320x480 iPhone 3G 320x480 iPhone 3GS 320x480 iPhone 4 640x960 iPhone 4S 640x960 iPhone 5 640x1136 iPhone 5S 640x1136 iPhone 5C 640x1136 iPhone 6 750x1334 iPhone 6 Plus 1080x1920 (开发应按照1242x2208适配) iPhone 6S 750x1334 iPhone 6S Plus 1080x1920 (开发应按照1242x2208适配) iPhone SE 640x1136 iPhone6-iPhone8这段时间苹果新手机的物理像素都是750x1334px。所有Plus手机的物理像素都是1242x2208px iPhone 7 750x1334 iPhone 7 Plus 1080x1920 (开发应按照1242x2208适配) iPhone XS Max:1242 x 2688 px iPhone XS:1125 x 2436 px iPhone XR:828 x 1792 px

但是如果我们用点的单位看就会得到: iPhone XS Max:414 x 896 pt (iPhone Plus分辨率宽度)iPhone XS:375x812 pt (iPhone 6/7/8分辨率宽度)iPhone XR:414 x 896 pt (iPhone Plus分辨率宽度)iPod Touch: iPod Touch 1G320x480 iPod Touch 2G320x480 iPod Touch 3G320x480 iPod Touch 4G640x960 iPod Touch 5G640x1136 iPad: iPad 11024x768 iPad 21024x768 The New iPad2048x1536 iPad mini1024x768 iPad 42048x1536 iPad Air2048x1536 iPad mini 22048x1536 iPad Air 2 2048x1536 iPad mini 3 2048x1536 iPad mini 4 2048x1536

手机app界面设计模板

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

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

线框图模板二

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

触摸手势符号

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

ios视觉设计规范

ios视觉设计规范 篇一:ios用户界面《UI》设计设计规范 相信很多人都在开发设计APP时会遇到很多界面上的问题,要以多大尺寸来设计?分辨率是多少?该怎么切图给开发...... 下面的文字就给出一点点技巧总结,但也要给合团队在开发时的习惯。每个工程师们所使用的控件,书写布局习惯来实际移交的图是不一样的,但八九不离十,都是遵循一个原则,便捷开发、自适应强的开发模式。 一、尺寸及分辨率设计图单位:像素72dpi。在设计的时候并不是每个尺寸都要做一套,尺寸按自己的手机来设计,比较方便预览效果,一般用640*960或者640*1136的尺寸来设计,现在iPhone 6和Plus出来后有很多人会使用6屏幕尺寸来设计。 相比之下,使用640×1136,对Plus做单独的修改适配,效果会更好,因为Plus的屏幕实在是大了,遵循屏大显示更多内容的原则这里本应该是需要修的了,有更好办法的话希望大家可以分享一下。 Ps:作图的时候尽可能确保都是用形状工具(快捷键 U)画的,这样更方便后期的切图或者尺寸变更。

二、界面基本组成元素 iPhone的app界面一般由四个元素组成,分别是:状态栏(status bar)、导航栏(navigation)、主菜单栏(submenu)、内容区域(content)。PS:在最新的iOS7的风格中,苹果已经开始慢慢弱化状态栏的存在,将状态栏和导航栏合在了一起,但是再怎么变,尺寸高度也还是没有变的,只不过大家在设计iOS7风格的界面的时候多多注意下~ 三、图标尺寸四、字体大小 iPhone 上的字体英文为: HelveticaNeue ,而中文,Mac下用的是黑体-简,Windows下则为华文黑体,所有字体要用双数字号。 下图是百度移动用户体验部(MUX)做过的一个小调查,可以看出用户在iOS app中可接受的文字大小。五、切图山东华软科技股份有限公司是一家专业从事棋牌游戏定制开发的专业性公司。现有完善PC端,手机端棋牌游戏平台。详情咨询QQ1557924069 切图是APP设计中的一个重要过程,关系到APP的界面实现,及各种适配性还有各种性能苹果在没6 Plus前,我们只需要提供两种图,普通图及视网膜屏幕图。 以640×1136(640×960是一样的)做的设计图的话

iosapp设计规范

竭诚为您提供优质文档/双击可除 iosapp设计规范 篇一: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的预设简体中文字型。在过去,华文黑体是

IOS设计规范

一款APP的设计稿从设计到切图 第一部分项目立项阶段 在项目设计之初,就该进行项目归档整理,一般是是“项目名称+版本序列” 第二部分Photoshop IOS的各种分辨率。 1.640*960 iPhone 4时代的尺寸,我最开始用这个尺寸设计,还是拟物的时代呢(基本上现在应该没人用这个尺寸设计了吧); 2.640*1136 iPhone5/5S/5C,一更新,咱们设计也得跟着与时俱进(应该还有人用这个设计尺寸),进入扁平的时代了; 3.750*1334 iPhone6 目前是我做设计稿的设计尺寸,iPhone的尺寸,向下可以适配iPhone4,iPhone5,向上可以适配iPhone6 plus;我记得iPhone6推出后,

我问我的设计总监(从业12年)应该用什么尺寸设计,他是就用iPhone6的尺寸吧,好适配,切出来就是@2x了,上下都能照顾到。 所以,我推荐做设计稿的时候使用iPhone6的尺寸进行设计。 iPhone6的尺寸其实相比于以前的5来说很多地方并没有变化,只是高度也就是内容显示区域发生了变化。下面是IPhone 6的空白文档,我建立了参考线。▼

里面已经设置好了参考线,文档建立之初就设置好参考线是个很好的工作习惯我希望更多的设计师可以养成更完美的工作习惯。

上下的参考线很容易设置,因为是根据iPhone自身系统设置的,左右的参考线我习惯设置为24px,也就是显示内容距离边框的距离。这不是绝对的,究竟是设置为左右30px还是24px比较好,通过对国内国外各种APP的对比,觉得24px更适合一些,不宽不窄,这个完全是设计师个人的设计习惯,所以不要当成什么规范, 第三部分标注 下面讲标注的问题,页面怎么标,标哪里,可能我涉及不到所有类型页面,但举一反五足够了;切片输出以及切片命名我们下期再说(如果有错误,请一定要及时帮我指出,我不想误人子弟)。 标注是重中之重,工程师能不能完整的还原设计稿,很大一部分取决于标注;如果不清楚你该怎么标,别怕丢人(我知道有些设计师,特别是刚接触工作的设计师并不敢张嘴去问),一定要和工程师沟通!包括怎么标,怎么切。 每个工程师实现效果的方法不同,我在这里所说的,是我的标注习惯,也就是我们工程师的开发习惯,但应该适用于大部分的设计师和工程师。 不需要每一张效果图都进行标注,你标注的页面能保证工程师开发每个页面的时候都能顺利进行即可;当然,这要看跟你配合的工程师的习惯,比如我现在搭档的两位IOS工程师,一位要求我全都要标注,另一位要求我标注代表性页面就好(记得标注之前一定要沟通清楚)。

ios设计规范中文版

ios设计规范,中文版 篇一:IOS设计规范 刚入门UI的小伙伴是不是不知道 app该怎么切图、规范是什么?怎么和程序员同学配合,用什么工具更方便,怎么标注自己的设计稿,怎么做到一稿适配多种机型,这篇文章将一一解答你的疑问! 依旧声明:这里写的不是一种规范,只是一种工作方法,大家在具体工作中,一定要灵活运用。另外,技术的更新是非常快的,所以,还是要灵活运用~ 我本身是一名GUI设计师,所以我只站在GUI设计师的角度去把APP从项目启动到切片输出的过程写一写,相当于工作流程的介绍吧;公司不同,流程不尽相同,但是终究还是能有些帮助。 这里我们只说IOS系统下的设计,至于Android,因为尺寸太多,涉及的东西比较乱,我整理好以后再说吧。 页面篇幅比较长,不推荐一次性看完,那样你潜意识里就会对它厌烦了,所以可以有时间读一读,看一看。 Part 1 项目立项 完善的公司会把项目相关人员聚集起来,产品经理会

把产品详细的用原型展示出来,包括产品定位,市场需求,主打卖点,产品性质以及各模块具体功能,逻辑跳转演示一下;之后会评估项目用时,各部门协调,项目启动。 话不多说,接到原型,那我们应该做什么准备工作呢? 在项目设计之初,就该进行项目归档整理,我的习惯是“项目名称+版本序列”; 没有最正确的工作方法,只有最适合自己的工作习惯。 我个人习惯把不同类型的文件划分到不同类型的文件夹里,有的设计师习惯全都放在一个文件夹里,如果文件少还说的过去,如果页面过多,就知道这样的利弊了。 工欲善其事必先利其器,基本上我做界面设计用的最多的就是PS和AI了,版本无所谓,用着舒服就行,推荐版本高一点的,低版本好多方便功能都没有。 标注工具: PxCook,目前我还没用上Mac,所以也不知道传说中的Sketch到底多神奇。PxCook在Windows上标注还比较顺手,虽然它还附带切图功能,但是比较鸡肋,不推荐用它切图。 切图工具: Cutterman点击下载一款PS的插件,切图非常方便,

手机APP设计毕业论文

毕业论文手机APP设计

摘要 手机移动设备不断普及,对手机设备的软件需求越来越多,界面视觉效果良好,且具有良好体验的应用留在自己的手机上长期使用,因此,手机ui设计在当今移动互联网迅猛发展的时代中显现的尤为重要。我的作品是一款拥有时尚前卫的手机社交APP设计,把一些潮流的动感元素融入,转化为有形的,可以看到的平面艺术中去,以平面化的表现方式进行美的表现,带给人以此时无声胜有声的更高境界。时尚的红色带着少女的朝气,视觉艺术的转化基础是人类基本的心灵感受,它使人们具有相似的或共同的审美体验。界面在表现形式中也不同于常见的平面化界面,以平面设计中"立体化"的视觉表现形式为切入点进行创新,此款手机APP产品设计主题突出、明确,整体色彩虽运用单色系列却不显现单调,界面风格整体统一,是一款人们值得拥有社交类APP,给予现在年轻人不同的社交体验。作品独特、具有视觉冲击感,创意设计灵魂体现在每一个界面,如:柔美的线条,构成少女美妙的身姿,仿佛在跟随着音乐起舞,在交互操作中会带给人意想不到的惊喜体验;细节决定一切,人性化的细节设计如:定位时间、地点以及日期、精确到每一个像素等细节呈现着令人赏心悦目的视觉效果。我的APP旅游产品设计将以实用和独特的想法呈现给用户便捷、新颖、贴心的交互体验。 关键词:创意设计,地点定位,时间定位,精细分类 目录

摘要....................................................................................................... II 1项目概述 . (1) 1.1项目目的和内容 (1) 1.2项目分析 (1) 1.2.1行业背景分析 (1) 1.2.2典型用户分析 (2) 1.2.3同类型APP分析 (2) 1.3基本要素 (3) 1.3.1设计风格定义................................. 错误!未定义书签。 1.3.2标准色定义 (3) 1.3.3规格定义......................................... 错误!未定义书签。2概要设计 . (4) 2.1创意来源 (4) 2.2产品的风格定义 (4) 2.3手机APP流程图 (4) 3详细设计 (6) 3.1开场界面 (6) 3.1.1原型图 (6) 3.1.2效果图 (7) 3.2登录界面 (6) 3.2.1原型图 (6) 3.2.2效果图 (6) 3.3首页界面 (7) 3.3.1原型图 (7) 3.3.2效果图 (7)

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

Ios界面设计规范

Ios界面设计规范 美学完整性 美学完整性指的并非应用界面有多漂亮,而且应用外观与功能的整合程度如何。比如,允许用户完成创造性任务的应用通常会将精致的装饰性元素放在背景之中,同时通过提供标准控制和行为等方式来突出任务。假如此类应用有着过分复杂的用户界面,用户或许就会对其感到相当迷茫。 在提供拟真性任务的应用(游戏邦注:比如游戏)中,用户期待能够看到有趣的漂亮界面。尽管人们并不期待能够在游戏中完成某种创造性任务,但他们依然希望游戏的外观能够与体验相符。 一致性 界面的一致性允许他们将某款应用中获得的知识和技能用于其它应用中。一致型的应用并非对其他应用毫无独创性的复制,这种应用利用的是人们已经熟悉的标准和范例。 要判断应用是否符合一致性原则,你需要考虑如下问题: 1、应用是否与iOS标准保持一致?是否正确使用系统提供的控制、视图和图标?是否以可信赖的方式整合设备的功能? 2、应用本身是否具有一致性?文字是否使用的是统一的属于和字体?相同的图标是否代表着相同的含义?当人们在不同的地方实施相同的动作时,他们能否预测出结果?应用中的自定义用户界面元素的外观和行为是否相同? 3、应用是否与先前的版本保持一致?词语和含义是否与之前相同?基本概念是否保持不变? 直接操作 如果用户可以直接操作屏幕上的物体,他们就更能为人物所吸引,也更容易理解动作的结果。iOS用户的直接操作感因多点触控界面而得到增强。使用手指来操作使他们更能感受到对屏幕上物体的操作杆,因为他们无需使用鼠标之类的工具就可以直接点击这些物体。 比如,如果要直接放大或缩小某区域的内容,用户无需点击聚焦控制,只需要在屏幕上做出滑动手势即可。在游戏中,玩家移动屏幕上的物体来与之直接互动。比如,游戏可能会在屏幕上显示组合锁,让玩家滑动来解锁。 在iOS应用中,人们可以体验的直接操作包括: 1、旋转或移动设备来影响屏幕上的物体 2、使用手指来控制屏幕上的物体

APP用户界面设计基础

APP 用户界面设计基础 1、各设计部尺寸标准一览 为了避免在首页 UI 设计时出现不必要的麻烦,如设计 尺寸错误而导致显示不正常的情况发生,设备尺寸的标准 如单位,分辨率,密度等)都是我们必须了解清楚的。 图 1 手机屏幕各类参数 首先让我们来看图 1 所示。如果没有接触过手机界面 设计,对下图中的各种数值很可能会一头雾水, Inch 是什么? 320X480 代表什么? DPI 又是什么单位? HDPI 和 MDPI 又分 内容。 1)英寸 (Inch) 英寸其实就是我们常说的长度单位, 14 寸笔记本电 脑,30 寸纯平彩电, 指的就是屏幕对角的长度, 如图 2 所示, 手机屏幕也沿用这个概念。 图 2 图解英寸概念 2)分辨率 分辨率是屏幕物理像素的综合,一般用屏宽像素数 480px*800px , 320px*480px 等, 别代表什么呢?下面我们来 介绍这些设备尺寸相关的 以屏高像素数来表示,比如

像素是显示屏规范中的最小单位。 图3 分辨率示意图 图4 像素示意图 图3 所示是一张分辨率为420px*320px 的图片,把 它放大后,所见图片就变成图4 所示这种全是正方形格子,而每个正方形格子就代表一个像素。这些格子数是有规律的,如果您有兴趣去数一下,屏宽的格子数为420 个,屏高的格子数为320 个,也就是分辨率的宽与高。 3)网点密度(DPI ) 屏幕物理面积内所含的像素数,通过DPI (每英寸 点数)来计算,图1所示的252DPI 和180DPI 就是指每英寸点数为252 和180。 DPI 越高,显示的画面质量就越精细,在一般屏幕 设计师上追求高DPI 显示画面质感,但在手机UI 设计时, DPI 要与相应手机相匹配,因为低分辨率的手机无法满足高 DPI 图片对手机硬件的要求,显示的效果反而会变得糟糕,所以就涉及了一个新的名词-屏幕密度 4)屏幕密度 屏幕密度分为DPI (低),MDPI (中等),HDPI (高), XHDPI(特高)四种。 图5 屏幕密度一览表

相关文档