移动端界面中的版式设计原理

2015-10-28 07:56:43

我要分享

0条评论

数十万互联网从业者的共同关注！

作者：justinlam

知乎专栏：遇见产品

作者授权早读课发表，转载请联系作者。

欢迎投稿到早读课，投稿邮箱：mm@https://www.360docs.net/doc/d211190364.html,

“我总觉得页面不太好看但是我又说不出来”，“我不懂设计，但是我就是觉得不协调”，“你觉得这好看？你的审美要加强啊”这些听着熟悉的话往往是产品和设计产生矛盾的开端。还有一种评价叫说不出哪里好也说不出哪里不好，相信很多人也有过感同身受的无奈。

其实设计本身就是一门理性的学科，审美因人而异，只有言之有理的设计才能够说服别人。当设计师拿到产品的原型开始做设计时，如果只是单纯的按照原型进行而不考虑任何规则，那么很多时候就会产生一些不协调的结果。设计完之后产品不满意，自己也不满意。在UI设计中其实也存在大量的版式设计原理，如果产品和设计都能对版式设计有一定的了解，那么设计师拿到原型的时候，评审设计输出稿的时候大家都能更好地理解对方的设计。以下我总结了几种常见的版式设计原理，是工作当中做出良好视觉效果的前提。

1.信息的排布

对任何信息进行排布的时候，首先必须要掌握的是对齐/重复/亲密/对比，贯穿设计的四大原则。

对齐除了能建立一种清晰精巧的外观，还能方便开发的实现。基于从左上至右下的阅读习惯，移动端界面中内容的排布通常使用左对齐和居中对齐，表单填写的输入项使用右对齐。

设计和做其他事情一样，也要有轻重缓急之分，不要让用户去找重点/需要注意的地方，应该让用户流畅地接收到我们想要传达的重要的信息。重复和对比是一套组合拳，让设计中的视觉元素在整个设计中重复出现既能增加条理性也可以加强统一性，降低用户认知的难度。那么在需要突出重点的时候就可以使用对比的手法，例如图片大小的不同或者颜色的不同表示强调，让用户直观地感受到最重要的信息。

在排布复杂信息的时候，如果没有规则地排布那么文本的可读性就会降低。组织信息可以根据亲密性的原则，把彼此相关的信息靠近，归组在一起。如果多个项相互之间存在很近的亲密性，它们就会成为一个视觉单元，而不是多个孤立的元素。这有助于减少混乱，为读者提供清晰的结构。

在设计表达的时候，一定要考虑内容的易读性。适当使用图形可以增加易读性和设计感，而且图形的理解比文字更高效。那些用文字方式表现时显得冗长的说明，一旦换成可视化的表现方式也会变得简明清晰，可视化的图形可以将说明/标题/数值这种比较生硬的内容，以比较柔和的方式呈现出来。

2.图片的使用

app的页面结构和文本确定之后，就要开始安排图标/按钮/图片的安排了，这时页面也就从单纯文本的“阅读”型结构调整为“观看”型结构，对于页面的易读性以及页面整体的效果会产生巨大的影响。页面中图片所占的比率叫做图版率，通常情况下降低图版率会给人一种宁静典雅、高级的感觉。提升图版率会有充满活力，使画面有富有感染力的效果。

实际中也跟选取图片的元素/色调/表达出来的情感有关系，合适的图片也能散发出整个应用的气质，直接传达给人“高级”，“平民化”，“友好”等不同的感觉。

在内容比较少但是又想提高版面率的话可以采用一些色块，或者抽象化模拟现实存在的物件，例如电影票，书本纸张，优惠券，便签等的效果，使界面更友好也降低空洞的感觉。通过这种方式也可以改变页面所呈现出的视觉感受，只是这种方法最多改变页面的色调/质感，并不能改改变“阅读”内容的比例，这点是需要注意的。

3.颜色的使用

不同的颜色可以带给用户不同的感觉，这点应该是常识。在移动端界面中通常需要选取主色，标准色，点晴色。移动端与网页端稍微不同，主色虽然是决定了画面风格的色彩但是往往不会被大面积的使用。通常在导航栏/部分按钮/icon/特殊页面等地方出现，会有点晴，定调的作用。统一的主色调也能让用户找到品牌感的归属，例如网易红/腾讯蓝/京东红/阿里橙等等。标准色指的是整套移动界面的色彩规范，确定文本/线段/图标/背景等等的颜色。点晴色通常会用在标题文本/按钮/icon等地方，通常起强调和引导阅读的作用。

主色在选择上可能不止一个，点睛色通常也由两三个颜色组成，标准色更是一套从强到弱的标准群，那么在点晴色与主色，主色与主色之间的选择上便有不同的方法。第一种是邻近色配色(色相环上邻近的颜色)，这种方法比较常用因为色相柔和过渡也非常自然。

第二种是同色系配色(色相一致，饱和度不同)，主色和点晴色都在统一的色相上，给用户一种一致化的感受。

第三种是点亮色配色，主色用相对沉稳的颜色，点晴色采用一个高亮的颜色，起带动页面气氛，强调重点的作用。

第四种是中性色配色，用一些中性的色彩为基调搭配，弱化干扰。这种方法在移动端是最常见的方法。

还有一些渐变，明暗调对比，多色搭配等方法在这里不一一说明，你感受一下。

4.留白的艺术

不单单是文字和图片需要设计，留白也是构成页面排版必不可少的因素。所有的白都是“有目的的留白”，带有明确的目的来控制页面的空间构成。

常见的手法有几种，第一通过留白来减轻页面带给用户的负担。首屏对一个应用来说十分重要，因此一些比较复杂的应用首评都堆积了大量的入口。如果无节制的添加，页面中包含的内容太多时，会给人一种页面狭窄的感觉，给用户带来强烈的压迫感，所以元素太多有时候反而不是好事。留白能使页面的空间感更强，视线更开阔，通过留白来减轻页面的压迫感，使用户进入一种轻松的氛围。

第二通过留白区分元素的存在，弱化元素与元素之间的阻隔。表单项与表单项之间，按钮与按钮之间，段落与段落之间这种有联系但又需要区分的元素用留白的方式可以轻易造成一种视觉上的识别，同时也能给用户一种干净整洁的感觉。

第四留白赋予页面构成产生不同的变化。版式设计中要有节奏感，这也是我一直强调了。传统杂志在每一页翻开都会有不同的视觉感受，我认为在app内很多板块之间的也是可以局部去突出个性或特点的。留白可以赋予页面轻重缓急的变化，也可以营造出不同的视觉氛围，通过留白去改变版式再配合四大原则可以产生出不同的效果。

值得注意的是，留白不是一定要用白色去填充界面，而是营造出一种空间与距离的感觉，自然与舒适境界。

5.视觉心理的灵活运用

在观看事物时，往往会产生一些不同的视觉心理，例如两个等宽的正方形和圆形放在一起，你一定会觉得正方形更宽。在版式设计中同样大量运用这些科学视觉方法对用户进行视觉上的引导，也能让设计师快速找到一些排版布局的方法。

(via 版式设计原理)

首先最常见方法是的是灵活运用黄金分割比，文本与线段的间隔，图片的长宽比等地方都可以通过黄金分割比快速的设定。比如通栏高度的设定等等。

移动端H5页面设计实战

移动端H5页面设计实战目录为什么要设计H5页面............................................................. 错误！未定义书签。赛程魔方3D旋转界面设计 ...................................................... 错误！未定义书签。双屏互动游戏设计................................................................... 错误！未定义书签。资讯与游戏的结合设计............................................................ 错误！未定义书签。刮刮乐在移动端互动游戏中的微创新 ........................................ 错误！未定义书签。互动调查小游戏的设计创新 ..................................................... 错误！未定义书签。设计小贴士 ............................................................................ 错误！未定义书签。

为什么要设计H5页面移动设备的普及给媒体和娱乐带来了一场革命。根据中国互联网信息中心（CNNIC）2014年7月的报告显示，中国网民中，手机使用率达83.4%，已经超过传统PC整体80.9％的使用率。其中，手机网络新闻的使用率为74.2%，仅次于即时通信和搜索，远超其他手机网络应用。在资讯移动化的趋势下，观察近期各大门户在重大事件报道中的表现，会发现移动优先、产品社会化、交互趣味化是三个重要的趋势。其中，基于HTML5技术的移动Web页面（以下简称H5页面），较完美地融合了上述三种属性，成为当下最受关注的内容报道形态，也引爆了社交平台上的大规模分享行为。就像CD取代磁带成为一种更高效的音乐播放方式一样，数字文件也将取代CD，依此类推，智能手机也将会替代PC的一部分重要功能。尽管仍有争议，但不可否认的是，移动互联网时代已经到来，随着用户从PC向移动端的迁移，从大屏到小屏，从鼠标键盘到多点触控，移动端逐渐成为媒体报道的前沿阵地。一提起移动端，大家首先想到的就是手机上安装的移动应用，比如微信、腾讯新闻客户端、QQ浏览器等。我们称这些应用为原生应用（Native App），因为它们是需要安装在用户设备上的软件，它们的代码和界面都是针对所运行的平台开发和设计的。这些原生应用能够最大程度地发挥用户设备的性能，例如使用存储空间实现离线阅读，利用图形加速实现界面动效，以及利用摄像头来上传图片，等等。但跟Web专题相比，移动应用的开发周期长，开发者需要将产品提交到应用商店供用户下载使用。以苹果的iOS应用开发为例，开发者在应用商店要发布应用，需要通过约耗时8天的人工审核。因此，把PC端的Web专题做成一个个移动应用是不现实的。除了原生应用之外，在移动端还有一种产品形态——移动Web页面。它源自于移动互联网诞生初期的WAP页面，有着和PC网页同样的优点：开发周期短、发布和更新方便。此外，用户只需要借助手机浏览器或者内嵌手机浏览器的应用就可以访问，比原生应用要方便得多。但在2014年前，因用户渠道和设备性能的原因，移动Web页面的形态通常都非常简单，也很少有用户互动。2014年，HTML5技术的普及、智能手机的更新换代和新闻客户端、微信等渠道用户的增长彻底改变了这一点。在移动端，要在网页上实现交互和动效需要借助HTML5技术（例如CSS3媒体查询、CSS3动画、Canvas等）。现在的手机浏览器大都支持HTML5的核心技术，例如对触摸事件和手势的响应、播放声音和视频、渲染CSS变换，以及获取设备的加速度传感器数据等。这些技术衍生了诸如互动小游戏、交互型动画页面、可视化新闻等，为市场营销、媒体报道等提供了大量不同形式的载体，同时为产品策划与视觉设计带来了更多的想象空间。

移动界面设计——移动设备的特点

移动界面设计——移动设备的特点对于设计而言，“适合”才是最好的。所以，当在考虑产品的设计和开发时需要明白，在此之前需要做到了解用户，才是产品在后期进行分析用户的痛点，功能的确定延展以及视觉设计风格确定的根本。那么，就产品而言，需要确定的是用户本身的生活以及工作习惯，包括痛点和需求以及当前用户人群的特点，并且还需要确定当前用户在使用这款产品的时候所处的环境差异，在什么环境中使用这款产品的几率较多? 这也是设计师在设计产品之前需要考虑的问题，例如是室内环境占主导还是室外环境占主导?网络运行环境是稳定的 Wifi 环境，还是户外，公共场合居使用流量的情况居多，一般在这种情况当中，通常用户在使用产品时的网络环境是不够稳定的，所以这就会影响的产品应该是以图片文字推送为主，还是以视频为主。甚至用户在进行信息输入时是保持传统的文字输入为主，还是需要加入语音输入来减小用户对于产品的操作成本，产品背景色是深色还是浅色为主，是否需要调取极速模式来应对一些特殊的网络环境等等。的产品都会被这些因素所影响，所以当设计和规划一款产品之前，需要考虑的方面是很多的，包括用户，也包括使用环境方面。那么其中一个重要的因素，就是的产品所存在的终端以及硬件。图 1-24 手势操作对于产品而言，它所存在的终端不同，用户在操作产品时的交互方式也会有很大的区别，对于移动互联这个时代来说，人们使用的终端更多是以智能手机为主来进行使用，当用户在进行人机交互时，其实更多是通过手指和屏幕的操作来进行的。其中，手势操作是最为常见的，也是最普遍的。(如图 1-24) 那么，随着智能手机为第三方应用(Application)提供的功能接口越来越丰富，传统的交互方式也在发生着不断的变化和更新。除了传统的手指点击之外，现有的交互方式中也加

版式设计在室内设计中的应用

版式设计在室内设计中的应用版式设计是现代艺术中一种重要的艺术表现形式，版式设计作为版式艺术中的基础理论已经渗入室内设计之中，成为现代室内设计的重要特征。研究版式设计理论与室内设计，挖掘版式设计理论丰富室内空间的方法，从版式设计的美学角度去理解分析其的理论有利于室内的设计及组织，提出借鉴和吸收版式设计艺术的精髓，以期版式设计艺术在室内设计中得到更好更充分的应用。版式设计是现代设计艺术的重要组成部分，是视觉传达的重要手段，表面上看，它是一种关于编排的学问；实际上，它不仅是一种技能，更实现了技术与艺术高度统一。版式设计可以说是现代设计者所必备的基本功之一。版面的装饰因素是由文字、图形、色彩等通过点、线、面的组合与排列构成的，并采用夸张、比喻、象征的手法来体现视觉效果，既美化了版面，又提高了传达信息的功能。装饰是运用审美特征构造出来的。不同类型的版面的信息，具有不同方式的装饰形式，它不仅起着排除其他、突出版面信息的作用，而且又能使读者从中获得美的享受。一、版式设计与室内设计版式设计是以轮廓塑形象，将不同的基本形按照一定的规则在平面上组合排列成图案。其重点研究形在二维虚拟空间上的组织方式及其视觉效果，运用点、线、面和律动组成结构严谨，富有极强的抽象性和形式感的一种构图；其构成形式主要有重复、近似、渐变、变异、对比、集结、发射、特异、肌理等，按构成的技巧和表现方法加以组织，进行形式美的创造。版式设计作为基础理论可以作为设计的方法，也可以直接应用到室内设计中的平面布置和界面设计中。而从构成基础的角度来看，版式设计甚至还可以延伸到室内设计中的立体空间中。室内设计就是在一定的地域空间范围内，运用室内艺术和工程技术手段，通过改造墙体（或进一步地形），摆放花草、装饰物，营造空间和布置功能等途径创作而建成的美的环境和生活的过程。室内设计的最终目的是要创造出景环境舒

html5页面设计

html5页面设计北京千锋互联科技有限公司是中国最早从事移动互联网研发和培训的机构之一,千锋集团旗下现有千锋教育、移动产业、项目研发、创业孵化业务，是国内最大的移动互联网人才培训和人才提供商。公司总部位于北京，目前已在深圳、上海、郑州、广州、大连、武汉、成都、西安成立了分公司。千锋集团旗下的千锋教育一直秉承“用良心做教育，做真实的自己”的理念，是中国移动互联网研发培训领导品牌，全力打造移动互联网高端研发人才服务平台。千锋教育每年培训和输送近万名移动互联网研发人员，是唯一真正获得企业一致好评的移动互联网培训机构，从千锋走出的学员在业界得到了广泛认可。2014年，千锋教育集团成为教育部教育管理信息中心“移动互联网应用开发指定实训基地”。截止目前，千锋教育已与500多家高等院校建立深度合作关系，并携手教育部教育管理信息中心举办《高等院校骨干教师iOS/Android暑期培训班》，千锋讲师团队技术水平得到业界一致认可，好评如潮。千锋教育组织的技术研讨会名企云集，是千锋和企业之间紧密合作的桥梁。千锋讲师发布的免费培训视频、学习资料、源码下载等浏览量近千万，每年约有数百万研发人才从中获益。一、千锋教育八大优势 1、中国移动互联网研发培训领导品牌，专注iOS、Android 、HTML5、UI等技术研发培训，坚持“用良心做教育，做真实自己”的理念； 2、业内唯一一家敢推出“两周免费试听，不满意不缴费”的政策，让学员更真实的了解千锋、了解自己是否适合做开发； 3、零学费入学，工作后分期还款，业内学员毕业薪水最高，培训就业协议明确写出薪水保障，平均薪水专科5000、本科6000、硕士7000； 4、权威资深师资阵容，业内最具责任心、最懂教学、拥有最强技术、有大型项目经验实战派讲师授课，由业内知名专家及企业技术骨干组成； 5、自主研发QFTS 教学保障系统，拥有自主知识产权的开发培训课程体系，讲练学相结合，课程内容紧贴当前前沿实用技术和企业实际需求； 6、企业级项目实战训练，从千锋科技及合作企业项目中研发出几十个企业级教学项目，让学员参与真实的企业级项目研发，最后让学员能够独立设计开发自己的上线项目； 7、最严格、最科学、最负责的教学就业管理制度，班主任、职业规划师全程跟班，把握每个学员的学习状态，并有专业的职业素养课和就业指导课，保证教学及就业质量； 8、免费加入千锋开发者联盟，为会员提供免费技术支持及终身就业服务，免费参加千锋举办的各类技

移动界面设计——移动设备APP的特点

移动界面设计——移动设备APP的特点以智能手机为例，通常在使用智能手机的时候是以竖屏并且更多是以单手进行操作。那么对于的智能手机屏幕来说的话，通常会以屏幕上半部分为眼部热区，下半部分为手部操作热区这两个区域来进行区分。所以，会通常把展示类型的信息，例如 banner 图，logo 等视觉元素放在上半部分的眼部热区进行展示，对于一些重要的操作和点击按钮会放在手机的中下部分，方便用户的手指点击。例如在有些 APP 当中，已经开始逐步将返回到上一级的“返回键“以及部分重要操作放在屏幕下方来进行展示。(如图 1-31 a 所示)以及也会经常发现手机移动产品的登录页面其输入框和按钮也会放置在屏幕中线以下来进行展示。(如图 1-31 b 所示) 图 1-31 a 返回键及重要操作图 1-31 b 登录页面另外还有一些特点总结如下: a)操作界面精致、界面操作性高,所以这也就需要设计师能够在手机屏幕大小，信息合理完整的传递和用户阅读，界面视觉效果的美观留白以及功能区域划分之间寻求平衡。 b)记忆负担尽量减少、尊重用户操作习惯,在使用移动端设备进行操作的时候，要求在使用产品的时候尽量减少用户的操作时间成本。以及增加产品的易学习型，并且能够尊重用户所形成的操作习惯，能够保证快速，智能，高效的完成用户需求。

c)设计风格和版本的一致性,在设计应用视觉效果的时候，不同的应用以及不同的系统要区别使用的视觉元素的风格，不要混合使用。同时也要注意版本更新过程当中视觉风格的延续以及重要功能操作图标要保持其一致性，保留产品核心功能以及遵循用户之前的操作习惯，所以当产品界面的视觉设计接近尾声时，通常要根据产品的视觉来总结“产品视觉规范性说明文档“来保证产品视觉风格的一致性。手机应用通常以页面刷新的方式为主，由于屏幕较小，所以对于手机应用的信息展示来说，通常都要以新的页面展示为主。那么列表页跳转到详情页就是一个很典型的例子。例如，社交平台中从好友列表进入到好友详情页面的时候，由于手机屏幕较小以及竖屏使用的情况，这两个功能页面通常会分别在两张页面进行展示，如果这两层信息放在一个屏幕中显示又势必会遮盖当前页面住更多的有效信息，所以把这种方式称为“页面刷新“或者”页面跳转“。(如图 1-32) 图 1-32 页面刷新/页面跳转页面跳转过于频繁的话，会无形中增加产品的点击深度，耗费用户更多的时间成本。所以面对这样的情况，IOS 系统当中结合苹果手机的屏幕特性加入了 3D touch 这样交互方式，来减少页面跳转。其目的也是为了寻求在页面刷新，信息展示和传递以及提升界面操作效率之间寻求平衡。属于是一种全新的人机交互方式。

版式设计课程标准

培养学生具备一定的手绘能力、观察能力和审美能力。（2）《PhotoShop应用》培养学生具备一定的位图图形制作与处理的能力。（3）《Coreldraw应用》培养学生具备一定的矢量图形制作与处理的能力。（4）《标志与广告设计》培养学生具备一定的标志与广告设计的理念。为后续《书籍装帧设计》课程打下良好基础。 (二)课程基本理念版式设计课程的教学目的是把版面上所需要的设计元素进行必要的编排组合，成为直观动人、简明易读、主次分明、概念清楚的美的构成，使其在传达信息的同时，也传达着设计者的艺术追求与文化理念；从而通过版式设计，给阅读者提供一个优美的阅读“空间”。何谓版式设计？版式设计又称编排设计，是平面设计中的一个组成部分，为视觉传达设计的重要环节。版式设计当然要调动各类视觉元素进行形式上的组合排列，但更重要的是：版式上新颖的创意和个性化的表现。同时能够强化形式和内容的互动关系，以期全新的视觉效果。版式设计的创意不完全等同于平面设计中作品主题思想的创意，既相对独立，又必须服务于其主题思想创意。（三）课程设计思路本课程的教学内容是以版式设计训练为向导，以典型版面构成方法为基点，综合理论知识，操作技能和职业素养为一体的思路设计。通过完成各种学习情境的学习，学生不但能够掌握版面构成的方法以及与色彩、文字、图形重组的专业知识和审美能力，还能够全面培养其团队协作、沟通表达、工作责任心、职业道德与规范等综合素质，使学生通过学习的过程掌握工作岗位所需要的各项

版式设计教案内容

课程名称：第一章版式设计的概述教学目的：（1）了解版式设计的目的（2）理解版式设计的相关原则（3）掌握版式设计的视觉流程教学要求：理解黑、白、灰整体分区概念；点、线、面在版式设计中的运用；各种设计原则及表现；把握具体设计内容与形式表现之间的内在关系，熟练掌握文字与文字、文字与图形、整体与局部之间的构成关系。教学重点：版式设计的视觉流程教学难点：字体、行距、字距。教学方法：理论讲授、图片分析并使学生展开对版式设计目的的讨论。教学用具：幻灯片，黑板教学课时: 4课时参考书目：1、《版式设计原理》佐佐木刚土著，武湛译中国青年出版社 2007年版 2、《版式设计》贺鹏等著中国青年出版社 2012年9月第一版教学过程：一、首先介绍课程的性质，通过看一些设计图片来引申出版式设计的目的与概念。二、深入教学，请学生从自身经验出发谈谈对版式设计的认识，并思版式设计的目的是什么。三．在对版式设计的概念有一定了解的情况下，思考并总结版式设计的原则。课程作业：上网搜索2个优秀的和2个不好的版式设计，并给予解释教学内容：

第一节版式设计的目的版式设计是一门特殊而关键的课程，更大程度上它又是一门专业基础课，它为以后的招贴设计、包装设计、书籍装帧设计以及一切需要通过平面来表达的设计课程打下基础。这就决定了这门课程主要是关于版式设计的基本原理、设计法则和审美把握，它是一门认识课程而不是技法课程。通过这门课程的学习，一是要理解版式设计的基本原则，掌握版式的设计法则；二是要培养和提高学生的审美能力，完善学生的审美结构；三是要训练学生和思维能力，开拓学生的思维意识，培养学生的创新思维；四是要养成学生的动手习惯，培养学生的实用技能。这就是版式设计的教学目标。版式设计随着时代的进步，它能体现出文化传统、审美观念和时代精神风貌等，被广泛地应用于广告、书刊、包装、装潢、展机、机构视觉形象和网页等传播领域。 1、有效提高版面的注意值当纷繁复杂的视觉信息展现在眼前的时候，哪些信息更能让我们愉快地去接受呢？哪些版式更能吸引人们的注意呢？很显然，那些美感突出，对比强烈的画面更引人注目。现代版式设计早已不是单纯的技术编排，而是技术与艺术的高度统一。人们的视觉习惯不断改变，设计师的观念也不断更新，新的版式效果不断呈现。那些形式独特、美轮美奂、现达完善的画面让人们过目不忘，注意值当然得到大大的提高。 2、有利于信息的有效传递版式设计本身并不是设计师的最终目的，它只是为了更好地传递信息的手段。凡是成功的版面，首先必须明确表达目的和主题思想，还要有上佳的创意策划和表现手法，做到主题鲜明、形象突出、美感强烈。在若干复杂纷乱的信息，无法让我理解，如果通过版式的精心设计，把各种元素根据特定内容进行组合排列，既可以使画面形式更加服从内容，提高信息的传达效果和效率，使版面更加风趣，富有内涵。 3、强化传达效果的持续留存当今视觉传达设计大多都带有商业色彩，主要宣传的是企业及品牌形象。因此如何让企业形象得到很好的传播和留存是许多设计师强调的重点。因此说优秀的版式设计，能够激发人们的兴趣，使画面生动、有趣、幽默，这样能够深度刺激大脑皮层，保持信息的持续留存。

移动界面设计论文

中北大学软件学院人机交互论文专业软件工程课程名称人机交互学号姓名

移动界面之手机短信界面设计近年来，随着计算机网络与移动通信借助层出不穷的新技术得到了迅猛发展。互联网与移动通信更是作为迈向信息社会的两个重要标志，它们分别满足人们对信息资源的丰富性以及信息获取方式的灵活性与移动性的需求。随着互联网的应用已渗透到商务、购物、娱乐以及信息获取等日常生活、工作的各个领域，人们已经习惯于移动通讯方式，手机的出现更为人们的日常生活带来了极大的便利。根据移动界面原则，本文介绍了手机短信界面的设计原则、过程以及可用性评估：一、手机交互界面设计原则手机用户界面设计的一个中心问题就是让手机用户界面达到便于用户使用。手机提供新功能、个性化服务的同时也增加了交互界面的复杂性，因此，手机视觉界面设计应遵循易识别、易理解、降低用户认知负担的设计原则。操作流程应简单、方便、高效。操作方式应符合人的心理和生理习惯。但是手机交互界面的设计也不能纯粹追求易用和高效率，同时要体现出情感化和人性化；其次，要注意细节的设计，让用户在细节之中体会到新功能、新技术的趣味性。在设计优秀的交互产品中发现，易用、高效与人性化、趣味性并不矛盾，比如， iPhone、iPod、android的交互界面设计，不仅高效易用，且操作的同时颇具趣味性。

手机是一种移动设备，交互界面的设计要考虑到手机的两大特征：移动性和便携性。由于手机大小的局限性，必须考虑到用户使用手机时空间的限制，不能在同一界面呆的时间太久，所以界面要体现简洁、易理解、使用户一目了然、提高操作效率的设计原则。对于用户常用的几个操作界面，要尽量简化，使用户操作更加方便快捷。总之，手机交换界面的设计要遵循易用性、易理解性、高效、人性化、情感化的设计原则。二、移动界面开发工具 1、手机采用J2ME架构。Java ME 以往称作J2ME（Java Platform，Micro Edition），是为机顶盒、移动电话和PDA之类嵌入式消费电子设备提供的Java语言平台，包括虚拟机和一系列标准化的Java API。J2ME 在设计其规格的时候，遵循着「对于各种不同的装置而造出一个单一的开发系统是没有意义的事」这个基本原则。于是 JAVA ME 先将所有的嵌入式装置大体上区分为两种 :一种是运算功能有限、电力供应也有限的嵌入式装置；另外一种则是运算能力相对较佳、并且在电力供应上相对比较充足的嵌入式装置。手机采用的是第一种装置。 2、手机操作系统采用嵌入式linux开发手机联盟（OHA）开发的Android平台。Android是一种以Linux为基础的开放源代码操作系统，主要使用于便携设备。三、手机短信界面设计

2014年移动端界面设计分析

2014年移动端界面设计分析移动互联网时代的悄然袭来改变着我们的生活方式，因此有大批设计力量涌入了移动端的设计领域中，这也说明了大家越来越重视用户在各个设备终端层面的体验。在规划产品时，往往会把PC端和移动端的产品放在同等重要的地位进行思考。然而，设备的多样性和产品形态的多样性为设计师们带来的既是更多的发挥空间，也同样是更大的挑战。这些产品在设计之间有何不同？如何规划不同平台上产品的功能？设计时有哪些差异？2014移动端的界面设计是非常值得探讨的话题。 1.唯一主色调 2014年，追求极简设计风格，主色调可能只是选定一种色彩，然后调整透明度或者饱和度，(说得通俗些就是将色彩变淡或则加深)，从而产生新的色彩，这样能够很好的表达界面层次、重要信息，并且展现良好的视觉效果。这样的页面看起来色彩统一，有层次感。当前上线的一些移动应用都采用极少的色彩，甚至放弃所有的颜色。仅仅用一个主色调就能展现良好的视觉效果。 2.多彩色风格设计 Metro引领的多彩色风格是与唯一主色调形成对照关系的设计风格，多彩撞色更多的表现于多种纯色块的使用，就是很简单的纯颜色，只需要注意多彩配色的方式，就能得到很好的视觉效果。多彩色拼接的设计风格，一屏式的页面排版布局，总体来说是时尚大气简洁的设计。“多彩撞色”的概念，在2014年手机端仍会继续发展。

3.信息框架扁平化在设计的表现形式上我们追求界面扁平，注重通过弱化视觉效果来强化应用的功能。在移动设备上，过多的层级会使用户失去耐心而放弃对产品的使用。而且移动端上页面小，没太多地方摆多层的tabs导航或者面包屑导航，就只剩下左上角的一个“返回”按钮作为导航了，可以一次接一次的深入，但跳转了三、四次后，再看左上角的“返回”按钮，你已经很难判断出将会返回到哪里了。应该从信息架构角度，再进一步的去应用扁平化的设计理念，信息框架扁平化的目的是减少信息层级，追求信息到达用户的最短距离，从根本上解决上述问题。扁平化思想是一种让设计者在界面设计过程中减少信息层级的思想。 4.动态数据可视化数据可视化设计是将枯燥繁琐的列表和文字转换为直观的饼图、扇形图、折线型、柱状图等丰富直观的设计元素，提高用户体验。而且现今数据可视化不只是静态展现数据，用户希望通过互动及时获取数据流，若以动态效果来呈现，能多维度呈现给用户实时信息，同时能与用户形成互动，提高数据表现的趣味性。动态数据可视化将更加强调数据转译实时更新的图形，以及动态的图形化表达。

版式设计课程标准 (1)

《版式设计》课程标准课程编号：052045 使用专业：电脑艺术设计专业课程类别：职业拓展领域修课方式：必修教学时数：44学时教研室：电脑艺术设计工作室编写日期：2012年5月一、课程定位和课程设计（一）课程性质与作用课程的性质：本课程注重设计前沿理论的研究和开发，是对学生艺术潜质、思维方式、创造能力等综合素质的全面开发和培养，帮助学生掌握科学的思维方法、搭建完备的设计理念构架、构建合理的设计知识体系，自觉地运用版式设计原理进行艺术设计。同时，本课程能有效地激发学生们的设计潜能，在艺术设计学习的过程中，不断地调整自己，从认识自我到超越自我，成为时代需求的艺术设计人才。本课程将积极组织并参与设计实践以及各种设计、创意大赛，使理论与实践结合，通过严格的基础训练和设计实践，使学生建立和掌握版式设计的概念和方法，并自如运用于艺术设计活动的各个领域。课程的作用：其前期必修课程是平面构成、色彩构成。与前续课程的联系（1）《手绘》培养学生具备一定的手绘能力、观察能力和审美能力。（2）《PhotoShop应用》培养学生具备一定的位图图形制作与处理的能力。（3）《Coreldraw应用》培养学生具备一定的矢量图形制作与处理的能力。（4）《标志与广告设计》培养学生具备一定的标志与广告设计的理念。为后续《书籍装帧设计》课程打下良好基础。 (二)课程基本理念版式设计课程的教学目的是把版面上所需要的设计元素进行必要的编排组合，成为直观动人、简明易读、主次分明、概念清楚的美的构成，使其在传达信息的同时，也传达着设计者的艺术追求与文化理念；从而通过版式设计，给阅读者提供一个优美的阅读“空间”。何谓版式设计？版式设计又称编排设计，是平面设计中的一个组成部分，为视觉传达设计

设计移动端报表,你不得不知道的五个原则

设计移动端报表，你不得不知道的五个原则随着移动互联的飞速发展，手机成为人们工作、生活中必不可少的工具，移动端报表被越来越多的企业所重视。数字化转型过程中，企业总少不了对移动端报表的需求。数钥分析云，除了支持PC端、大屏，也支持移动端查看，可以快速集成到企业微信、钉钉、致远M3中，让用户随时随地查看报表，实时掌握企业数据，辅助企业经营。我们在搭建或规划移动端报表时，常常会遇到一些问题： ?手机屏幕小，如何呈现核心业务指标？ ?布局固化，想要更多的布局交互模式… ?视觉效果不好，追求“高颜值”移动报表… ?指标太粗，看不出问题出在哪… ?指标太细，又看不到整体情况… 其实，我们仔细看这些问题，无非就是两点： 1、美观的需求：充分结合移动端的特点和产品优势，进行合理布局，凸显关键指标信息，合理美化，提高报表的美观度； 2、业务的需求：除了精美的外表外，更重要的是把控业务需求，在有限的屏幕范围内，呈现核心指标，指标粗细结合，全面展现业务状态。所以，在做移动端报表时，我们要综合移动端特点、业务诉求和分析云产品优势，做出一张符合需求的移动端报表。

设计移动端报表原则： 1、基本元素，简单明了移动端报表，主要以图表呈现，图形在信息的传递上具有更好的呈现效果。所以，合理使用图表，达到信息传递的效果。分析云移动端支持表格、柱状图、折线图、饼图、仪表盘…等各种图形，能够满足用户分析需求。 2核心数据，一目了然 1、移动端报表，最核心的元素置顶呈现，可以采用指标呈现，数字的表达更加醒目、简洁，且占用空间少，是最直接展示方式。

2、可以通过设置前景色、背景色的变化实现预警，让异常指标展现更加一目了然。 3、尽量在一屏内展现完整数据，减少滚屏的出现，如果表格较大，展示的数据较多，分析云也支持锁定前N列功能或横屏查看，保障用户清晰的看到数据内容。 3、布局清晰，条理性强与PC端报表不同，移动端报表的呈现形式主要是竖排展现。想要更多的布局交互模式，那就少不了分析云的分段器。分析云的分段器，可以帮助用户快速实现视图的切换，满足沉浸式阅读需求，大大方便了用户的应用。

让人印象深刻的7种移动端UI设计风格

让人印象深刻的7种移动端UI设计风格如果你是一个APP狂热分子，你会花大量的时间在各种APP的尝鲜中，你会明显感受到一些APP在采用着某种风格鲜明的设计语言，来标榜自己的独特之处，行成自己的设计风格，甚至引领设计风向。去年我们关注到随着Metro设计风格的影响和iOS7的发布，APP明显都开始尝试扁平化的设计语言了，除此之外，还有哪些显性化的设计语言崭露头角呢？在这篇文章里，我想分享一些日益显性的设计语言，让人一眼就记住它的风格，有一些已经随着优秀设计师的摸索，融入到国内移动产品设计里了，而有一些，确实是刚刚在萌芽阶段，需要更进一步的摸索和尝试。一、唯一主色调|Simple color schemes 为什么我们要定义一个界面多种颜色？仅仅用一个主色调，是不是就能够很好的表达界面层次、重要信息，并且能展现良好的视觉效果？事实上也正是如此，随着iOS7的发布，我们看到越来越多唯一主色调风格的设计，会采用简单的色阶，配套灰阶来展现信息层次，但是绝不采用更多的颜色。

卡塔尔航空公司卡塔尔公司航空就是这样的设计案例，整个界面采用粉色的主色调，从标题栏到标签页，从操作按钮到提示信息，除了黑白灰之外，全部采用粉色设计，这种简介的的配色风格，反倒起到了很好的信息传达效果，也具有良好的视觉表现力，设计师在内容排版上的技巧实在是加分。 Readability采用红色主色调设计，连提示信息背景色、线性按钮和图标都采用红色主色调，界面和LOGO也完全是一个色系的。而Vivino采用蓝色主色调设计，信息用深蓝、浅蓝加以区隔。Eidetic采用橙色主色调设计，其中的关键操作按钮甚至整个用橙色提亮，信息图标也用深橙色、浅橙色来表达程度。可以说唯一主色调设计手法，是真的做到了移动端APP的最小化（Minimal）设计，减少冗余信息的干扰，使用户专注于主要信息的获取。

版式设计11

版式设计，也称为（）。版式编排版面设计理论的形成，源自（20）世纪的xx。 19世纪中叶，英国设计师、色彩专家欧文琼斯写成《》艺术，该书通过大量有关美的设计原理、方法和实打印输出的色彩模式为C\M\Y\K,字母"C"代表的是什么?（） D、青色打印输出的色彩模式为C\M\Y\K,字母"K"代表的是什么?（） D、黑色打印输出的色彩模式为C\M\Y\K,字母"Y"代表的是什么?（） B、柠黄例，成为19实际设计师的一本“圣经”。、装饰法则工业美术运动的时间大约( )年。、1880~1910 工艺美术运动的领袖人物是英国艺术家、诗人（）。威廉.莫里斯在xx“风格派”的代表人物是（）。 D、杜斯博格)黄色在（）纸上的易见度最低。 D、黑色（）是降相同或相异的视觉元素作强弱对照编排所运用的形式手法。 B、对比属于名片造型构成要素的是（）。 D、标志名片标准尺寸： ( )mm。 C、90mm*54mm 平面设计基础元素中不包括以下哪种（）

B、版式。平面设计这一专业术语是（）年代出现的。 B、20世纪20年代（）年，xx创立了xx设计学院。 D、19年)1900年在敦煌千佛洞中发现了一卷刻本《金刚波罗蜜经》，是有什么印刷技术？（） A、雕版印刷) 书籍里说的脸是指？（）.Ａ．封面以文字为主进行图形创造时，要注意那个方面？（）Ｄ．以上答案都正确那种色彩搭配，能形成你中有我，我中有你的视觉效果？（）Ａ．对比色封面中的三大构成要素，一是图形，二是色彩，三是？（）Ｃ．文字我国现在发现最早的文字叫什么?（） C、甲骨文活字印刷术的发明人是?（） B、毕昇一般印刷的尺寸要超出页面的实际尺寸,在裁切时要切掉一部分,我们称之为（） C、出血印刷中一般出血为多少毫米?（）、 C、3页面空间的主体内容称之什么?（） D、版心显示器输出的色彩模式为?（）

版式设计原理在影视海报设计中的应用研究

版式设计原理在影视海报设计中的应用研究发表时间：2019-08-15T15:18:35.190Z 来源：《信息技术时代》2018年11期作者：吴倩 [导读] 围绕在我们身边的版式设计实例不计其数。随着社会的发展，经济与文化等主题充斥着我们的日常生活。不管哪一种主题形式的流行，都离不开对受众内心诉求的研究，最传统而最有效的实现用户体验研究的展示方法中，平面宣传是不可或缺的一部分。（四川工商学院，成都 610000）摘要：围绕在我们身边的版式设计实例不计其数。随着社会的发展，经济与文化等主题充斥着我们的日常生活。不管哪一种主题形式的流行，都离不开对受众内心诉求的研究，最传统而最有效的实现用户体验研究的展示方法中，平面宣传是不可或缺的一部分。关键词：版式设计；影视海报；版式原理平面视觉要素的有效合理的版面排布，便于消费者在既定的时间内进行准确的信息捕捉，并且能够通过版式的优化，呈现出营销主体本身的宣传诉求。比如商业店铺中的产品宣传册以及娱乐方式中的影视海报等，都需要进行一定的版式设计。在信息化特征愈加明显、迅速的时代，受众惯于接受视听效果相结合的媒体形式，所以影视主题在生活中一直保有稳定且发展的态势，影视宣传最直接的方式莫过于海报呈现。我们将在此就影视海报形式而言，探讨版式设计在其中的原理应用。在具体的平面载体版式设计过程中，需要遵循哪些设计原则呢？就版式设计而言，至今常见的设计原理包括：传统版式、网格版式和构成版式。其中构成版式的艺术效果和信息传递的有效性都具有明显的、有效的特征。所以在信息铺天盖地而来的现实生活中，我们往往采用构成版式这种设计方法进行版面的编排，使平面素材视觉焦点醒目、宣传诉求直接且有效。构成版式主要运用到以下几点设计原理：1、视觉流程原理；2、视觉极限原理；3、视觉织体原理。他们分别有自己特定的原理呈现形式，最终呈现出不同的平面视觉效果。目的是将固定的视觉要素，通过不同的构成原理，合理编排在版面中，以达到宣传主题的目的。其中视觉流程原理在视觉要素层面上的使用更为广泛，因为它的实现技法活跃，仁者见仁智者见智，没有固定的模板要求。视觉流程原理实现的过程是设计者率先制定出版面浏览的主次顺序，再将视觉要素按照该秩序编排出来，最后使受众按照既定的浏览秩序接受版面上的视觉要素。视觉流程的形成常见的方式为：分割和导向。分别从版面分割形成画面秩序美感、主体塑造的流程导向等方面对版式效果的协调设计进行实现。一、视觉流程分割原理：版面分割形成秩序图1 首先，把整体分成部分叫分割，能够调整画面的灵活性。其次，常用的分割方法有：等形分割，即分割后得到的形状完全一样，再把分隔界线加以调整使之相关联，达到再次的整齐划一的效果；自由分割，即不规则地、无限制地将画面自由分割的一种方式，它随意性分割，使画面产生活泼不受约束的感觉；比例与数列分割，即利用比例关系完成的构图，通常都具有秩序、明朗的特性。构成版式中的分割原理在版面上采用分割再拼凑的版面，以一种打破常规的版面构成形式，在视觉上吸引人们吸引人们注意，表达一种冲击活跃的版面效果。（见图1）复仇者联盟主题电影作为漫威集团旗下众多英雄集合的系列一直备受受众的关注。在2012年《复仇者联盟Ⅰ》影视海报的排版中，就采用了视觉流程分割原理。有效地将人物众多的图片元素有序地、平行地排布于版面中。由于每位英雄形象的视觉标准色彩以及角色道具不同，面面俱到地进行展示难免会使版面混沌。采用分割的原理能够有效规避这个问题，使每位英雄角色的图片形象在水平视觉方向上保持绝对一致。从故事情节方面以及构图方面来讲，都能够起到很好的统一作用。蓝色的分割线条在重色背景的烘托下能够很好地表现出对版面分割的规律性作用二、视觉流程导向原理：主体塑造的流程导向图2 图3 导向视觉流程，是设计师引在设计中使用能诱导观者视线的诱导性元素，令观者的视线能通过诱导按照设计师的布局进行一定顺序的运动，将所有元素从主到次、从大到小构成一个有机整体，形成一个重点突出、流程动感的视觉组合。能够构成导向性的元素有很多种，常见的有：文字导向，利用文字的排列组合后的线、面特点来引导视觉走向；肢体导向，利用人体的肢体语言或是手部动作的方向性，来引导视觉走向；指示导向，利用符号箭头的方向性特点，将视线引向主体；形象导向，利用众多事物形象特征来引导视线，如人或者动物的视线、钟表指针等。如《花木兰》影视海报（见图2），使用的是文字导向视觉流程原理。在海报背景大部分留白的基础之上，底部采用的是横向构图的军队素材置入。与此正好形成构成方向上醒目对比的便是主题文字，以及花木兰本身的人物形象。两者在方向上组成了垂直版面的统一。并且通过“花木兰”字体设计变形的方式与人物形象恰好衔接成战场角色的统一体。便于受众瞬时间获取电影主题以及人物形象的视觉关注点。又如《泰坦尼克号》的影视海报（见图3）。将与电影相关的两大元素主题即人物爱情和沉船事件在版面上有效结合，采用了形象导向视觉流程原理。用巨大而尖锐的船头指向电影男女主人公。这种导向形式的使用，不仅从电影情节方面做到了人与物的形象统一，而且在视觉上船头的指向性很好地带领受众目光凝聚在主人公本体。有效地将凄美的爱情故事融入在整个沉船历史背景题材之下。避免了海报过于冰冷的故事性还原，能够更好地对电影本身起到宣传的目的。单纯地了解到版式设计的重要性对于审美要求而言是最基本的。关键环节在于版式排布的具体实施。能够明确判断出视觉要素的分布规律以及具有怎样的外观形式美感，是版式设计过程的必备技能，这就是设计原理的体现。版式设计原理是版式设计的核心所在，能真正地达到切合主题诉求的审美标准。参考文献 1]金晓丹.招贴设计中的版式编排设计初探[J].艺术科技,2017,30(08):298+408. 2]王黎芳.平面设计中版式编排的视觉空间运用研究[D].山西师范大学,2017. 3]周蕊.招贴中自由版式设计的应用与研究[D].苏州大学,2017.

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

移动应用的界面设计画布尺寸设计多大（特别是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)：打印分辨率（每英寸所能打印的点数，即打印精度）

移动界面设计分析

移动界面设计分析随着信息化的来临，产品自身的信息化属性也越来越健全，根据人们日常的需要，设计师们在产品的设计方面需要考虑到人机的交互。科技的日益进步促成了计算机的发展，可以遥控停车的全自动汽车、可以远程控制开关的家用电器等，这些电子产品的快速发展是大家有目共睹的。手机作为日常生活中最常见的个人电子产品的终端，集娱乐、资讯、生活于一体，其终端性质决定了手机在人机交互界面上更加功能集成化、人性化、趣味化等。随着电子科技技术的飞速发展，手机的功能也得到了迅速拓展，通讯功能不再是其唯一的重要功能，随着信息技术与网络技术的融合，手机的交互方式发生了很大的变化，其交互界面也更加多样化。针对移动应用的界面设计也已成为人机交互技术的一个重要研究领域。移动界面指的是通过手机平板等移动终端设备呈现的用户能够体验到的图形形态，主要表现为移动应用平台。而由于移动设备的便携性，置不固定性和计算能力的有限性，以及无线网络的低带宽，高延迟等诸多的限制，使得移动界面设计又存在着自己的特点。首先，先谈谈移动界面存在的许多限制和特点吧。 1．资源相对匮乏由于受到成本，能耗以及移动性的要求，移动设备往往计算能力比较差存储容量较小，显示屏幕小，分辨率低。例如，一般网站的默认分辨率可达1024*768，而手机的显示分辨率也不过320*240因此，手机只有通过设计专门的浏览器才能直接访问一般的网站。其次，移动界面比桌面系统的用户界面更加简单。桌面系统用户界面采用的一般是并行展示各种选择可以在一个大小可调的屏幕中同时显示出来，而在移动界面中，用户需要逐屏逐页寻找合适的选择，当选择过多，就会给用户带来不便，从而引发用户不满意。因此，移动界面设计的难题就是如何在有限的资源条件下有效地为用户提供信息服务，提供的选择必须根据重要性排列。 2．移动设备的种类繁多由于移动设备的种类极其繁多，软硬件平台规范各不相同，互相之间的兼容性不是太好，其计算能力、储存能力以及声音效果等也千差万别，使得在开发移动应用时很多情况下需要专门针对某一

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

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