移动应用ui设计模式

移动应用ui设计模式（共8篇）

篇1：移动应用ui设计模式

文章描述：据调查称，iPhone用户特别注重设计的高质量性，这也就是为什么大多数苹果公司相关的网站都有一个独具特色的有吸引力的设计，在本文中，将展示50个漂亮的iPhone应用程序网站设计作品，以供借鉴欣赏。

文章描述：据调查称，iPhone用户特别注重设计的高质量性，这也就是为什么大多数苹果公司相关的网站都有一个独具特色的有吸引力的设计。在本文中，将展示50个漂亮的iPhone应用程序网站设计作品，以供借鉴欣赏。

文章描述：据调查称，iPhone用户特别注重设计的高质量性，这也就是为什么大多数苹果公司相关的网站都有一个独具特色的有吸引力的设计。在本文中，将展示50个漂亮的iPhone应用程序网站设计作品，以供借鉴欣赏。

文章描述：据调查称，iPhone用户特别注重设计的高质量性，这也就是为什么大多数苹果公司相关的网站都有一个独具特色的有吸引力的设计，

在本文中，将展示50个漂亮的iPhone应用程序网站设计作品，以供借鉴欣赏。

文章描述：据调查称，iPhone用户特别注重设计的高质量性，这也就是为什么大多数苹果公司相关的网站都有一个独具特色的有吸引力的设计。在本文中，将展示50个漂亮的iPhone应用程序网站设计作品，以供借鉴欣赏。

文章描述：据调查称，iPhone用户特别注重设计的高质量性，这也就是为什么大多数苹果公司相关的网站都有一个独具特色的有吸引力的设计。在本文中，将展示50个漂亮的iPhone应用程序网站设计作品，以供借鉴欣赏。

文章描述：据调查称，iPhone用户特别注重设计的高质量性，这也就是为什么大多数苹果公司相关的网站都有一个独具特色的有吸引力的设计。在本文中，将展示50个漂亮的iPhone应用程序网站设计作品，以供借鉴欣赏。

篇2：移动应用ui设计模式

官网：http:/// 2017移动端UI设计总结

移动端APP在2017年经历了诸多的变化，人工智能、聊天式的界面、响应式设计、虚拟现实（VR）和增强现实（AR）让设计师不断面临新的挑战。研究表明，用户每天耗费在手机和平板上的平均时长为158分钟，其中127分钟是耗费在各类APP中，可以看出移动端APP的快速发展都是不争的事实，在我们不断吸收新的东西和掌握新的潮流的同时，还需要确认这些设计趋势是否被验证了。

以下是2017年移动端产品最有影响力的趋势： 1.卡片视图

创想设计学院

官网：http:///

官网：http:/// 随着移动端设备在互联网中的地位越发重要，产品的打磨中，如何使得移动端和桌面端UI之间的界限更为模糊，用户体验更加无痕，则是设计师迫切需要解决的问题。卡片视图则很好的解决了这个问题。

作为交互信息的载体，卡片以浓缩的形式提供了快速并且相关的信息，还会用另一种委婉的方式去要求一次交互。设计精美的卡片视图能够快速抓住用户眼球，完全适配响应式，还有极高的可读性。

在较小的屏幕上灵活组织和安排内容的意义是无价的，卡片提供了文本、图像和视频等多种媒体内容的一体化解决方案，目前为止，App Store，Facebook、Google和Twitter已经完成了卡片式设计的迭代更新，相信这股趋势仍然会在2018年保持强劲势头。2．微交互

创想设计学院

官网：http:///

官网：http:/// 从2016开始，微交互一直出现在趋势盘点类的文章中的热点话题，在这篇2017的回顾当中，我们仍然回避不了微交互这个主题。

在移动端产品中，小屏幕上以动画形式呈现的微交互对用户体验和界面都有着至关的作用。对于用户体验来说。微交互提供给了用户直观而人性化的反馈方式，并且能够传递某种微妙的状态和预知感。

创想设计学院

官网：http:///

官网：http:/// 微交互之所以会起作用是因为它引起了人们总是想了解更多信息的原始欲望。用户在进行某个操作后能瞬间得到视觉上的反馈，这会让人充满继续操作下去的欲望。微交互也可以用来引导用户进行正确的操作。

具体来说，聪明的设计师通过有趣的加载动画，顺滑的图标切换等微互动同时起到吸引和明确通知用户的作用。从长远来看，微交互不会变成昙花一现的投机取巧的小把戏，反而会成为一个更为庞大的丰富的话题，值得设计师们不断探索和创新。3．拉长滚动和视差

创想设计学院

官网：http:///

官网：http:/// 拉长滚动能够很好的把桌面端内容转化到移动端浏览，并且滚动这一交互方式本身跟移动端上的触摸控制浑然一体，有助于用户在单向滑动中获取大量内容保持不中断。

不过拉长滚动总的来说已经较为普及，这里更多的是想提到视差滚动。视差的原理是让前景和背景以不同的速度进行滚动，从而创造一种深度的视觉观感。在此基础上，不少设计师已经开始尝试多图形元素的视差滚动，仅仅通过滚动和图形就能够呈现一个完整的故事。

创想设计学院

官网：http:///

官网：http:/// 对于产品而言，恰如其分的滚动效果会不单单能够高效率、分层次地传递内容和信息，还能够优雅流畅地提高产品本身的精致感。

这款网站是长滚动视差效果的最佳案例，有兴趣可以看看：http://everylastdrop.co.uk/。4.移动端原型设计更方便

在用户体验和界面设计不断一体化的大趋势下，原型设计在产品设计中的地位更加不可或缺，而快速、高效率和可视化则是行业对原型设计的潜在要求，今年各色原型设计工具也在不断地创想设计学院

官网：http:///

官网：http:/// 进行升级优化，例如Mockplus最新的3.2版本支持快速的数据自动填充，一键导出页面流程图，加速了移动端原型设计上的效率，从而改善整体工作流程，留出更多时间思考用户体验。还值得一体的是，Mockplus在今年举行的原型设计比赛对移动端产品设计的优化发展也开了个好头，产品经理和设计师们也需要一个更为开放的平台分享和展示对产品设计行业的理解和思考，从而让整个行业更加百花齐放，生机勃勃。5.全屏视频

创想设计学院

官网：http:///

官网：http:/// 视觉永远是人们感知最强烈的。巨大的单幅图片已经成为了几年来的主流设计趋势，而大幅图片的成功和带宽的发展也为全屏沉浸式视频铺垫了道路，动态的视频在产品设计中的出场率越来越高，甚至出现了内容丰富、互动强劲的全屏视频的展示模式。

巨大、动态和美观的视觉观感其实正是符合了人类本身的自然审美追求，沉浸式的视频对于产品主页来说价值可以得到充分发挥，让背景排版更为大气华丽。6.半扁平化设计

扁平化风格已经占领了设计风潮的半壁江山，在卡片视图的影响下，为了更加突出内容和观感，扁平化设计变得更为立体和多维度，采用了大量的阴影和对比。

平滑的阴影能够增强界面深度和复杂性，同时也不会对原有风格造成冲突，相信在之后，扁平化风格不会止步于现在的整体的风格，还会融合更多模式不断优化创新。7.AR增强现实

创想设计学院

官网：http:///

官网：http:///

随着iPhone X上Animoji的推出，2017年成为AR技术在移动端应用上井喷的一年。在技术的进步下，今年的AR产品在信息集成、实时交互和精准定位上都有着巨大的突破。此外AR如今已经不单单用于儿童的科普和教育认知，在移动端产品运用范畴上已经得到了极大的丰富，如今已经涵盖了军事、医疗、建筑、教育、工程、影视和娱乐等领域。

比较值得一提的是宜家《家具指南》APP，早在两年宜家已经开始了AR领域的尝试，限于技术当时的体验相对不佳。目前这款App已经能够用3D的形式较为精准地呈现宜家的各色产品了，通过用户手持手机旋转角度，即可让虚拟家具等比例的出现在家里任何角落，家具采购的体验得到了极大提升。8.渐变色

创想设计学院

官网：http:///

官网：http:/// 自从Instagram的logo更改以来，渐变色逐渐进入了人们的视野。归根其原因在于扁平化风格极其容易造成同质性，追求视觉丰富度的设计语言又开始回归。除了上面提到的半扁平化风格，更具视觉冲击的渐变色能够牢牢抓住用户眼球，简洁的图形和高饱和度的渐变色能够较好兼顾设计的便利度和视觉的分量感。

色彩上的精准运用，有利于唤起用户情绪并且建立一个有个性的产品，让用户通过色彩深刻地感知你的产品。

创想设计学院

官网：http:///

官网：http:/// 总结

2017年是承上启下的一年。一方面例如AI、AR和VR技术的发展对于产品设计本身如同更换了引擎，未来的走向和进程有无数未知的可能和机遇。另一方面，设计上以人为本的基本精神会继续指引产品设计走向更正确的方向。不管趋势如何，设计师更要坚持自己的判断的想法，从而持之以恒的学习和创新。

创想设计学院

篇3：移动天气系统UI设计

移动应用项目的生命周期起始于产品的创意策划,成功的移动应用自创意阶段就应充分各项准备工作严格遵循企业的设计流程,这需要我们在确定项目的同时,能够冷静地分析自己的设想,理性定位自己的市场目标和产品用户,深入地了解你所面对的用户群体,针对他们的需求、习惯和欲望,做有价值的、能触动人心的应用。

1 前期准备阶段

移动天气应用是指通过移动通信网络将客户的移动设备与天气信息后台数据接口进行连接,客户通过手机客户端的方式发出查询指令,在手机界面上直接查看各种天气状况的新业务系统。本系统的优越性主要优点是快捷方便,信息指数丰富。用户能够利用移动天气APP实时查看自己所需的各种天气信息,免去了打开电脑进行查询或是按指定时间收听广播的限制。

随着技术的发展和各种软件的丰富,现在的用户对于天气软件的需求除了信息查询功能外,更多地去关注软件的用户界面是否美观舒心、简单易用和个性化,因此软件的UI设计变得越来越重要,直接关系着一款软件是否能够从众多软件中脱颖而出被用户所接受,能否给公司带来盈利。

设计软件产品首先要对使用者,使用环境,使用方式的需求进行分析,明确什么人用,什么地方用,如何用这三方面因素,设计者软件要考虑不同类别用户都各有不同的特点和需求。因此在对移动天气进行需求分析时先对功能需求进行分类,分析不同人群在不同情况下的需求差异。比如,移动天气APP首先应具有基本天气信息的查询功能,如当前和未来的天气情况、温度、湿度、日出日落等信息;还应具有一些特色的可选增值业务,如定位功能、城市选择对比、出行提示、穿衣指数以及当前人民关注极高的污染指数等。除此之外还需要了解同类竞争产品,分析同类产品的用户下载量和评价,只有取其精华去其糟粕,做出真正被用户需要和喜爱而又有自身独特个性的产品。

根据以上分析,我们首先使用头脑风暴法对移动天气的创意进行行了了研研究究,,得得到到了了如如下下图图所所示示的的功功能能树树形形图图。。

2 原型草图阶段

在使用“头脑风暴”结束后,我们得到了若干个创意思路和设计灵感,但是这些创意还是抽象的概念和词汇,下一步我们把它们具体化,变成直观的设计效果---原型草图。

我们设计原型草图通常需要进行两个步骤,它们分别是“手绘”的原型草图和使用原型工具和原型设计软件设计的原型草图。根据我们分析得到的树形图,明确了产品的定位、结合竞争产品的分析资料确认了本产品的设计意义和用户关注的重点功能。通过对产品功能需求进行归纳整理,将产品的功能按照其重要性和逻辑性进行排列分组,设计出几种不同风格的UI产品界面效果。此阶段的设计应包括界面的数量、逻辑关系和组织关系、操作方法、各界面的展示效果,控件使用情况、对用户的操作引导等。

3 高保真原型图设计

原型草图方案确认后,我们应再使用原型设计工具将手绘草图在计算机上进行实现,设计出一套完整的可模拟的产品原型。通过此高保真原型图我们能够看到软件实现后的基本效果,模拟体验到软件的操作逻辑。

UIDesigner,简称“UID”,是腾讯CDC(用户研究与体验设计部)团队研发的一款针对交互设计师、产品经理、程序开发工程师的软件界面原型设计的工具。它拥有强大的模板和预制功能,具有团队协作、整合设计流程、版本管理、快速原型等特性,拥有强大的模板和预制功能,能够快速地搭建起软件界面的高保真原型。可以实现设计师、产品经理、程序开发工程师三者间的快速沟通,减少不必要的工作内耗,有效提高设计效率。

4 导航设计

为了防止用户在使用移动应用时迷失在界面中,无法返回到自己出发的界面里,科学而合理的导航设计可以帮助用户迅速而准确的找到“回家的路”。通常情况下,IOS平台常用的导航模式为平铺导航、标签导航和树形结构导航,安卓平台大致分为标签和树形导航。但不论针对哪一种平台进行设计,我们都应该遵循扁平化的设计原则,简化导航的层次不要超过四层。

5 图标设计和启动画面设计

无论我们的设计工作多么艰辛和漫长,现在都快接近尾声了,而图标设计是整个应用设计过程中真正的重点,也是对设计师考验的最大一关了,也是平面设计里难度最大的一门学问。图标设计和标志设计有很大区别,一个是讲究直观和隐喻,一个是追求象征和抽象,但是它们的可识别性和符号化的特点,以及对设计师图形造型能力的高标准要求是相同的。

图标设计形式美不是关键,能不能准确地被识别是设计的第一目标。要求:一目了然、内涵明确、符合大众经验判断,使用户迅速判断出含义。同时进行图标设计时必须要遵守各个平台的设计规范。

启动图标是移动应用给用户的第一印象,我们的目标就是要建立完美的第一印象。

6 验证和改进

UI设计的好与坏最终的裁判是用户,使用者感受的好与坏才是最重要的,因为UI最终就是为用户设计的。我们可以将设计好的高保真原型分发给一些目标用户进行体验,收集这些体验者的感受和建议,进行分析整理后就可以得到目标用户最喜欢的方案。后期我们就要根据用户的喜好和建议对产品进行下一步修改了,力求将我们的UI设计做到细致精细,功能清晰,使用便捷,界面时尚。改正以后的方案经过开发环节,我们可以上线把其推向市场,继续收集用户反馈,为以后的升级版本积累经验资料。

7 盈利模式思索

对于企业而言,最终的目的是开发产品获取利润。移动天气APP如何能实现盈利呢?经过分析移动天气APP的也很容易实现盈利,主要方法有如下几种:

1)流量。我们的应用适用于互联网行业的“用户=流量=金钱”的公式,移动天气是影响到人们日常生活工作的重要应用,我们的产品只要被用户接受和使用就有足够的流量,利用这些流量使用广告类、增值服务类、购物类、流量分成等都可以实现流量变现,给企业带来丰厚的回报。

2)个性化定制。目前的很多应用都有其个性化定制方案,这也是一个非常好的盈利机会。比如我们的用户可根据自己的喜好定制适合自己的信息,获取这些信息享受特有功能是需要额外付费的。

3)物联网功能。随着科技的快速发展,智能家居将会普及,通过天气APP的温度、天气、空气指数预测,紫外线字数等功能,可以控制家庭的空调、加湿器等电器设备的开关,保证家庭环境的清新,也是将来必不可少的市场机遇。

8 总结

在移动天气APP应用的生命周期中,UI设计师应遵守企业规范,严格按照UI设计流程,做好充分的市场调研和产品对比,分析移动天气产品的特点和功能,完成每个环节的职责,确保每个流程准确有效地得到执行,从而提高产品的可用性,提升产品质量。

摘要：UI设计即用户界面设计,主要目的是提高应用软件的用户体验满意度。UI设计的成败直接关系着软件的成败和生命力。该文主要讲述移动天气应用APP系统用户研究和界面的设计过程,内容包括用户研究,交互设计及界面设计三个部分。

篇4：移动应用ui设计模式

关键词：色彩语义学 移动互联网应用 UI界面 色彩设计

随着科技的不断创新，互联网信息产业的迅速崛起，我们已经进入了“互联网+”时代。可以说互联网无处不在，操作简单、便携的智能手机移动互联网应用已经渗入到我们生活的方方面面。但是在海量的信息资源充满的移动互联网应用当中同质化现象却日趋严重，这与日益增长的用户的精神与文化需求形成了鲜明的反差。作为移动互联网应用的“面子”——界面设计，它直接影响到用户体验的效果，界面设计称为在激烈的市场竞争中赢得互联网市场的关键因素。

马克思曾说：“色彩的感觉是一般美感中最大众化的形式”。在界面设计的所有设计元素当中，色彩是移动互联网应用的用户体验中最为重要的组成部分，界面色彩设计的优劣成为良好的用户体验的关键。优秀的色彩设计能够引起用户的注意，并吸引和引导用户去找到其所需要的信息。

一、色彩语义学

语义即语言的意义，语义学是语言学的一个分支，它是一门研究语言的意义的科学。二十世纪六十年代，设计界把这一科学引入到了产品设计中，形成了产品语义学。产品语义学主要研究的是人造物的形态在使用情境中的象征特性，及如何将它应用在产品设计之中。产品语义学认为产品不仅要具备物理功能，还应该能够向使用者解释或暗示出如何操作使用，同时产品也应该具有象征意义，能够构成人生活当中的象征环境。也就是说，产品语义学考虑的不仅仅是物理和生理的功能，还有心理、社会和文化的语境。它的目的就是要使产品成为一个用来沟通和表达的媒介，通过运用造型、肌理、材料和色彩来传达意义。

色彩语义学是在产品语义学的基础上发展而来的。色彩语义学主要是针对色彩进行的具体的研究，即色彩所要表达的意义。色彩语义学研究的核心内容是：色彩在产品使用中向使用者传递的特定含义的信息，在设计中如何通过色彩设计让消费者对产品属性和操作方式有更直接、准确的了解，并且在满足消费者功能需求的同时增加其精神上的满足。

色彩本身也是物质与精神的结合，色彩是一种感知，是真实的感受，而不是什么抽象的想法或概念。色彩体验是以光的刺激带来的心理反应开始的，因此色彩对人来说，是非常复杂的物理与心理的结合。色彩从人类开始出现就一直伴随着人类的生产、生活的方方面面，人类对色彩产生了独特的认知，色彩能激发出人们内心的共鸣。约翰内斯·伊顿在《色彩艺术》书中提出：“色彩效果不仅在视觉上，而且在心理上应该得到体会和理解。……它能把崇拜者的梦想转化到一个精神境界中去。”

二、移动互联网应用UI界面的色彩设计原则

UI界面的色彩设计不仅仅是为它赋于漂亮的颜色，而是应该深入地探讨附上这些色彩之后对产品本身或者对用户使用上的意义，以及所使用的色彩是否能够引导用户进行操作。色彩在界面设计中比图像和文字更为直观、更富有魅力。色彩可以将人们在长期积累中形成的共识建立起相应的语义，人们也通过自己对色彩产生的生理、心理上的反映来领会色彩传达的语义，因此在进行色彩设计时色彩语义的研究就显得尤为重要。将色彩设计与移动互联网应用的精神和功能表达得更完美，从而引起用户共鸣，抓住用户的心理，得到用户认可和理解，是进行UI界面色彩设计的主要目标，以色彩语义学为理论指导进行UI界面的色彩设计，结合移动互联网应用产品的特点，才能更准确地表达出该产品的意义。

第一，要根据产品的主题来选择主色调。色彩是一种客观现象，人们虽然有着不同的生活环境和生活习惯，但是却具有共同的对自然和生活经验的感受和积累，人们会对色彩产生具体的或抽象的联想，因此在一定程度上会获得对色彩语义的共识，把这种共识运用到界面设计里，无形中会拉近与用户的距离。如购物类移动互联网应用的色彩设计通常使用红色、橙色，因为红色、橙色是波长最长的色光，它的色彩语义是明亮、兴奋、愉悦，这样的色彩能够保持用户的兴奋度，促进销售的达成。比较具有代表性设计的是京东、当当、淘宝、百度外卖等应用，醒目的红色、橙色激发了消费者的购物热情。再如家政、洗衣类主题的移动互联网应用的色彩设计，色彩多以蓝、蓝绿色为主，因为它们是水的象征色，同时蓝色、蓝绿色会给人以清新、洁净的感觉。采用了与用户色彩语义一致的色彩会赢得用户的好感。

第二，需要考虑目标用户的定位而进行UI界面色彩设计。设计理论家布德克认为：设计并不只是产生一个物质实体，它还必须得实现其“沟通”功能。由于人们在长期的生产生活经验中积累的色彩体验是相对固定的，色彩所产生的意义也是约定俗成的，因此形成了相对稳定的色彩语义，当我们在进行UI界面设计时应该选择目标用户所熟悉的色彩语义，并且还要通过色彩语义特征来传达移动互联网应用产品的文化内涵，体现出它社会的时代感和价值取向。例如为女性提供信息服务的移动UI界面设计，经常会采用粉色系，这个色系是大部分女性所喜爱的色彩。例如美丽说、么么搭等应用的界面设计，是以粉色和玫粉色作为主色调。再如儿童教育类应用，在色彩设计中，为了符合儿童对色彩的喜好，则要使用鲜艳、活泼的色彩，如纯度比较高的的红色、黄色、绿色、蓝色等。

第三，在UI界面色彩设计中为了突出色彩的语义认知，应该避免使用太多的颜色。一个设计优良的UI界面要有一个主色调，而且主色调色彩要在界面中占有一定面积，并且根据目标用户对色彩语义的认知进行色彩搭配。如果使用过多的色彩，界面的设计很容易产生混乱的感觉，会降低界面的美感。最好在界面中使用3～4个颜色，另外要保证基本色的比例，主色调、辅色调及装饰色可采用70%、25%、5%的用色比例设计，以保证界面色彩在色彩语义认知中的识认性。

第四，美国当代视觉艺术心理学家布鲁默说：“色彩唤起各种情绪，表达感情，甚至影响我们正常的生理感受。”色彩能够使观者产生具有感情因素的联想。因此要使用适合的色彩语义应用在界面设计中。例如红色是能够激发视觉刺激的一种色彩，容易引起人们的注意，也容易使人兴奋、激动，另外在中国传统色彩语义识别中红色带有喜庆的意味，这个代表着中国的色彩广泛应用在很多的移动互联网应用界面当中，会让用户产生温暖和热情之感。

第五，色彩语义学不同于传统色彩设计只注重外形装饰、审美；而是更加注重色彩与功能、工艺及产品与环境之间相互协调。色彩语义学将色彩划分为功能性色彩、市场性色彩和构成性色彩。例如在UI界面设计中，主体色就是市场性色彩，而文本与背景色的色彩选择就是功能性色彩。UI界面核心内容是传达信息，因此在设计界面时，必须确保文本为主体的原则，要保证文本的清晰度，保证内容的可读性，文本的颜色应选择与背景色具有一定对比色的色彩，使文字更加醒目，简洁易懂，界面中的背景色只是起到烘托、陪衬的作用，另外在UI界面上的按钮的色彩的处理也属于功能性色彩。UI界面的主色调与按钮的色彩，也是属于主体与背景的色彩关系，因此按钮与主色调也要有对比关系。用对比的色彩突出按钮，才能导引用户很准确的找到它并进行后续的操作。

三、总结

日本色彩学家小林重顿在《色彩战略-市场开发中最尖端的感性化时代的商品技术》一书中所提出的：色彩的广泛应用已经成为新时代的重要标志，人们已经进入了“色感时代”。优秀的色彩设计让人获得美感，同时它也在各个方面影响着我们的心理活动，它影响着人们的购买欲望，影响着消费者的情绪、情感，甚至影响着用户的思想与行为。随着色彩语义学研究的更加深入，会给我们的设计带来更大的影响，也会提高UI界面的设计品质。

篇5：移动应用ui设计模式

张伟，网名Rokey，现担任微软亚洲工程院移动设备组UI设计师，曾任金山软件公司(Kingsoft Corp.)UI设计师/网易公司(NetEase.com.)UI设计师/国际知名Icon设计师，专注于软件界面/图标设计与交互研究，其个人作品全球累计下载量已过百万次。个人网站：www.Rokey.net。

采访时间：9月20日

采访地点：北京知春路某茶馆

采访人：张海新 廖翔 樊鹏

视觉同盟：请问您是学什么专业的?在什么学校毕业?

张伟：很多人都问我这个问题，我是哪个学校毕业的，我觉得这个真的不是特别重要，学校真的没有给我太多专业设计方面的帮助，给的更多反而是那些社交上往来的一些，怎么由一个男孩变成一个男人吧，然后，我觉得，更多的还是通过自学吧，我学的是广告专业，广告设计专业的，本来一直打算毕业之后可能会从事广告设计领域，但是我后来发现自己通过目前的广告设计宣传和自己想象的有太大差距，所以后来就加入了IT行业了。

视觉同盟：你当时怎么从广告设计专业转到UI设计上来的?

张伟：当初其实最开始的时候是两年多前是国外网站上有一些很漂亮的关于界面还有图标，主要是以图标设计为主的一些，因为那会儿苹果电脑刚推出新的操作系统，然后就有很多的128×128象素的那种大图标，所以出现很多关于图标方面的艺术设计，然后我特别喜欢这种，然后就是一个相对封闭的小的环境里头一种形象的塑造，然后我非常喜欢然后我就去模仿，后来就是有一些自己的创作，然后我个人比较喜欢去表现，比较喜欢把自己做成的大家去分享，就在论坛上发表自己的这些作品，然后就被大家知道了。当时金山也在招这种人才，我后来在金山的同事当时把我招进去的，然后就加入IT行业了。

视觉同盟：能讲讲进入微软工作的经历吗?

张伟：我加入金山之后，金山软件公司之后，然后后来是跳到了网易，然后在网易做了一年UI工作之后，然后在微软亚洲研究院他有一个与UI设计相关职业的一些需求，然后我觉得机会不错，然后就又从广州回到北京，然后加入微软。

个人认为，并不是需要特别强的外语能力，我觉得但是要保证起码的一种书面语，口头工作的交往要保持的顺畅，因为将来要跟外国人开会或者是你接触的文档都需要是英文的，你必须对这些要有所了解，要有一个心理准备，我觉得在这个过程中，你也有个人的提高。

视觉同盟：谈谈Stardock主办的GUI国际奥林匹克的获奖感受吗?

张伟：那次STARTOUT那个公司办了一次奥林匹克GUI大赛，他也是第一次作这个事情，但是这个公司在业界里是非常非常出名的，尤其是为微软WINDOWS操作系统做平台美化，是非常出名的，出了非常多软件，他当时办这个活动我觉得非常非常好，当时的我们是组成一个团队参加这个竞赛，有很多很多全世界特别著名的这方面的设计师都报名参加这个活动，所以大家都对这个都很重视，最终的结果是我在这个上面获得了一个图标设计类的全场大奖，和另外一个图标设计类的创意的第三名。

我还是挺希望能够参加的，然后主要一个问题就是说现在工作比较繁忙，可能时间上会比较紧张，但是如果有这种真的是要做这种比较重要设计的比赛还是非常非常乐意参加的。

视觉同盟：我们知道你的很多图标作品造型非常棒 你是如何将图形融入到图标当中的如何才能达到这样的造型能力?

张伟：我觉得还是两点，一个是这种灵感完全来源于生活，另外就是来自于其他一些优秀的作品，我觉得都能得到灵感，首先一个人非常要爱设计的话，首先他必须非常爱自己的生活，他能够从生活里得到很多很多灵感，另外，他不仅要关注于本身的设计领域，也一定要看很多很多关于其他设计领域甚至不是设计领域，其他领域的一些知识，然后去了解，都能得到不同的灵感，然后我觉得这个对设计很关键的。

视觉同盟：你在金山网易这些国内的软件网络企业工作过，现在在微软，能比较一下国内和国外企业的不同吗，尤其是设计部门。

张伟：我觉得还是有区别的，国内我觉得把设计人员当作应该就是普通的一个员工而已，他不是一种角色的定义，在不同企业之间，而是说一个工作环节和工作环境的问题，而这种问题的话导致的一个结果就是，国内这种企业环境很宽松，很不规范，可以说，导致你的工作效率低下，不会有什么可能自己太满意的作品，就靠一种自发性的创作去完成，国外这种企业更规范，他更注重个人职业生涯的一种培养，对你个人能力的一种提高，在这个过程中，你能得到——能学习到很多，就是这样的一种，在创作的同时能够提高，

视觉同盟：微软的产品，他有没有自己视觉上的一种风格，包括设计啊、样式啊、色彩啊，有没有一个指导设计师工作的设计规范?

张伟：应该说是有的，虽然微软现在他整个的一个设计方向，未来的设计方向，可以从，现在已经有几个未来的产品已经被发布，可以看到一些倪端，比如象Office12 ，然后还有未来要发布，应该在明年发布的下一代windows Vista界面的一些都有一个非常统一的方向，我觉得是更贴近自然与人那种和谐，更靠近lifestyle(生活方式)那种风格，而不是把它塑造成一种机器的形象，就是非常自然融洽的一种氛围的渲染，在公司内部也是对这种风格进行反复的探讨，然后拿图片进行那种对比，这应该是微软未来，就是近期未来一些产品设计风格的走向吧。

视觉同盟：之前在金山和朗尼都是设计PC上的软件，然后现在是围绕着移动设备设计的一些界面，你能对比两者的区别吗?

张伟：这两者的区别的话，我觉得可能在基于桌面平台的这些软件可能发挥余地，你可以创作的东西更宽泛一些，更多一些，而在windows mobile这个平台上你会受到一些限制，不过你能在受限制的情况下，把一个东西表现的更好，这也是一种能力的体现，是对自己的一种挑战吧。

视觉同盟：你对苹果 Mac OS系统的界面设计做何评价?

张伟：这种系统我现在认为已经过时了，我觉得它已经过时了，非常笨重，这是我个人的看法，但是我觉得他确实创造了一个时代，我非常非常崇拜创造这种风格的设计师，但是我觉得他现在已经过时了。

视觉同盟：作为一个UI设计师，除了图形方面，还应该注意什么?

张伟：我觉得应该有对交互设计的分析能力，不仅是有这种能力，应该有这种非常敏锐的直觉去能够随时参与到这种交互设计当中，因为图形设计很多时候跟这种交互设计有交叉的地方，而且掌握这种知识是对一个人逻辑思考的一种锻炼，是一个人素质的一个体现，我觉得应该具有基础的这种直觉。

视觉同盟：你认为国内UI设计的状况和前景怎么看，将来会继续从事UI设计吗?

张伟：我觉得特别让我欣喜，或者挺高兴的一件事，现在国内的设计水平一点也不比国外的差，而且在很多很多地方甚至是，可以说跟国外是一样的，甚至比国外做的更好，因为在国内，我觉得虽然这个产业是刚兴起，但是有很多很多人在关注，有很多很多非常好的设计师在做，我觉得国外同样处在跟国内相同的一个情形，就是说，他也同样缺少大批的优秀的UI设计师，我觉得这是非常重要的，就是说，国外和国内，国外他虽然说起步早，这个行业的排头兵还都是在国外企业，比如说象theskinsfactory等，他们确实是站在世界的顶端，似乎是一种遥不可及的地位，但是国内的水平并不是和他们差距那么大，完全可以赶上的。

视觉同盟：我们在设计院校中有什么读者，如果他们想毕业从事UI设计工作，作为一名知名UI设计师，您会给他们什么建议?

张伟：我的建议是首先是他们有这个兴趣他们就做，如果没有兴趣就不要来，我觉得做一件事情刚开始功利心太强做不好，我永远是这句话，我希望他们喜欢这件事情，真正自发的喜欢这件事情的话，那么他就来做，就一定能做好，我觉得这是一种学习的过程的一个，就像你学会了去做一件事情，这个过程应该能应用于六件，就是很多的其他的领域，比如说你要去，你喜欢这件事情，你一定会有时间去做他，你就一定有时间去学，只不过是你要找到你能找到的资源而已，我觉得自发性是最重要的，发自内心的创造欲望是你能够把这件事情做好最重要的一个因素。

专业技能上，其实我觉得初期可以临摹、模仿一些自己比较喜欢的作品，我觉得临摹特别特别重要，特别特别忌讳的一点不是要把他临摹的非常像，而在于这个过程是什么样的，也许临摹完到最后是一个完全不同的作品，但是你在过程中，你思考了这个作者所思考的问题，你了解了他完成这个作品所需要的一些思路，那OK了，你达到你所要的东西了。

视觉同盟：听说UI设计师要联合出版一本UI设计的书并策划召开一系列活动，您是怎么看这个事情的?

张伟：觉得这件事特别好，能够起到一个为这个行业树立里程碑的一个作用吧，也很荣幸，就是说，他们来邀请我把自己的作品加入到里面，我非常荣幸。我觉得这本书应该能让大家了解到UI是什么，什么是好UI，应该是这样。

视觉同盟：对视觉同盟的读者说几句吧?

张伟：如果你有兴趣，你就来吧。

(左)微软亚洲工程院移动设备组UI设计师张伟，(右)视觉同盟主编廖翔

篇6：浅淡UI设计和UI设计前景

信息时代的软件与互联网产品靠什么吸引用户？今天的用户早已不满足于简单界面功能的使用而更注重情感体验。与之相应，近几年，一个新兴的名词在设计领域悄然而生，以之命名的诸多部门相继成立，与之相关的专业也在各大院校应运而生，这个词就是“UI”。那么，什么叫UI设计？什么是UI设计师？他们就业前景怎么样？

目前在国内UI设计还是一个相对陌生的词，即便是一些设计人员也对这个词不太了解。我们经常看到一些招聘广告写着：招聘界面美工、界面美术设计师等等。这表明在国内对UI设计的理解还停留在美术设计方面，缺乏对用户交互的重要性的理解；另一方面在软件开发过程中还存在重技术而不重应用的现象。许多商家认为软件产品的核心是技术，而UI设计仅仅是次要的辅助，这点在人员的比例与待遇上可以表现出来。但这不是UI设计真正的价值体现，只是UI设计发展的一个必经过程。

UI即用户界面设计，也称人机界面，最普遍的应用是在软件开发中，主要是指程序的用户操作界面的设计，随着Web应用的普及，UI也应用在了Web的用户界面规划上了。网站用户界面（W UI）要经过规划、美术设计、制作几个过程。简而言之，UI一般指网站界面、软件界面、手机应用界面等所有图形用户界面的设计，手机操作系统、游戏操作系统、各种网站网页的界面设计，也属于UI设计范畴。

但专业、顶尖的UI设计师不仅仅局限在网页、APP应用程序上的界面设计，更应掌握人机交互的技能。以用户体验为基础进行的人机交互设计，能考虑用户的背景、使用经验以及在操作过程中的感受，从而设计符合最终用户的产品，使最终用户在使用产品时愉悦、符合自己的逻辑、有效完成并且高效使用产品。交互设计的目的是使产品让用户能简单使用。

以Iphone手机的锁屏界面为例。设计师除了要考虑界面的整体美观，还要让人不阅读说明书的情况下，知道如何去操作，一眼便能找到开机的按钮并且知道去移动，当移动滑块，机器会发生什么样的变化，并让操作者确定已经成功。滑块移动到一半放手，又会是什么样的变化。整个人与机器的交流过程便是人机交互。

篇7：UI设计UI图标设计初阶要先型

UI最重要组建之一就是图标，随着扁平化设计的发展趋势，越来越注重图标的简洁与寓意表达，平面图标已占主导地位，每位设计师所处的阶段所关注的要点是不一样的，我把图标设计分为2个阶段–初阶与高阶，这样分是为了有步骤性的学习和进阶的加强，当然，能人的话一步到位，对于新人来讲会较难，需要实际工作中辅导与自己经验总结。我不会华丽高大尚的语言，但是我可以分享一些实实在在的基础方法，也是这几年会给带的学生反复必讲的入门辅导，有自己成熟方法表达的设计师可忽略这里，这里先说初阶的设计关键要点。

【一】概念类别

扁平化图标大部分无非就是剪影表现，而这里为什么重点是讲图标的形状设计，而非色彩，因为一切先有形才考虑下一步。形不好再怎么营造整体风格都白费力，好比建筑造型与装修的关系，而色彩等营造的风格都可另起文章分析 。图标造型表现上无非就是典型的2种：面与线 。运用这两种基础元素去造型也可以进行多种组合不同的表现 。组合造型一般有单体造型、多个元素组合造型，线与面之间的独立与结合的变化。

l 简化的微写实图标

这类通常是彩色一体表现，造型和组合上较写实，不是纯剪影，是写实过渡来的简化，又接近剪影，扁平简化设计，这里主要是利用面和颜色来进行造型的设计。质感风格上也有6种(已有人分析)，大概是纯平面、折叠、轻质感、折纸风、长投影、微立体。这种相对剪影的好画很多，也更加容易塑造风格，更多是在色彩上有得发挥和考究，用在界面里也是最为突出的。最近还非常流行用色块来进行二维、三维的装饰表达，叫所谓的“低面建模”,感兴趣的去搜一下。

上面提到的元素组合，比如下图这个图标目前是2个元素–信封加信纸，如果还要再加什么功能状态示意，最多在右上角加个很小的消息提醒。因为元素越多越复杂，所表达的含义也就越多，同时也会影响造型的调动。不管多少个元素总有一个最重要的对象，其他为辅助图形，在塑形大小复杂度上有区别。

1.1本文半原创图例

l. 剪影的正负形图标

这类通常是单色表现，当然也有综合彩色的。其更加简洁抽象， 言简意赅，高度提炼精华，讲究表象意境，具有理解的门槛。所以这才是最难设计的一关。非常考究设计的理性与感性之间在功能传达上的逻辑思维。也是UI界所谓现代极简主义的代表，注意，没把握好就会变得很“空虚”，把握好了就是时尚的feel啦~

负形图标是以线绘制的图形，高度的轮廓概括，就跟画骨骼一样的要求精准到位，也叫线形图标。负形剪影是所有图标中最讲究也最难表达型的一种风格，如果画不好就很容易俗气和简陋。

正形图标是以面绘制的图形，也有和线综合表现情况，自己根据需要进行创造变化吧。通常与负形图标之间做当前状态的转换，手机tab上最常见，如ios7。

优点：简洁清新优雅;极具现代感(虽然远古时代就有高度概括的符号表达，这里指的范围是互联网上的全新应用);具有设计与涵义综合的拓展性;还可以完成一些抽象词汇的图形传达。

1.2本文原创图例

图标为上传到云端的之意，这里的主对象是云，所以箭头和云的比例是不同的，上传箭头是辅助图形。了解界定多元素之间的主次关系，就能够把握一个整体的造型走向。典型的基础表现就是上面两种，然后在实际绘制中根据自己的喜好和设计来进行融合，可以得出更加丰富的表现。

【二】设计技法要点1、关键节点绘制法

拟物化设计就是尽可能的绘制繁琐细节，追求丰富和相似度。而剪影图标则是相反，以简练为绘制手段。但是细节就没有吗，不是的，而是更加谨慎认真的注重每一笔，且越来越优雅。这里举例剪影图标绘制方法技巧，3步骤可以搞定，看似又简单又难，简单的是只是绘制参照物轮廓，保留基础识别性，步骤很少;难的是这调整的过程与产品环境的融合性，易用性，还有你自己的创意想法。说简单点就是去繁择简并经过思考改造过的设计过程。而最基本的最需要犀利眼神抓准的是造型的关键节点，雏形出来后再根据想法调整。

l.提炼精华勾勒轮廓

通常在绘制已有参照物的基础上去设计一个图标，可以根据你喜欢的造型参照物去进行分析，先抓取到参照物的关键节点，几何绘制出来一个相似的基本图形。

2.调整线锋优雅得体

基础雏形出来后就开始加入自己的想法调整线锋，线条走向决定造型。这个时候就得要调多几个版本了。设计师的处女座精细和纠结情结就在这里洒汗了，不断调整对比，挑选出一个最优再进行下一步。

3.增特有细节出风格

最后一步的塑形，就是画龙点睛!造型的特点就在这一步去完成，

2.1 本文原创图例

对于新老设计师来说，这样的方法都是比较可取好用的，交互设计师也可以这样快速入门哦亲!尤其是第一步骤，能否非常快速的出雏形。下面是其他案例的设计方法欣赏，跟我上面总结的一样道理。

2.2图例来源于Digial Art

2.3图例来源于iconwerk

2、精致的基础要素

精致即精细极致。看似简单的图标其实并不是随便了事，但知道了这些基本要素你就可以完成一个合格的图标了。好的图标是谨慎认真的注重每一笔每一像素每一矢量锚点的，尽可能的往精美优雅的方向努力吧骚年~

1.犀利清晰

需要锻炼厉害的眼睛，使出你的火眼金星捕捉每个像素之差，像素满格才能清晰的呈现，细分出来通常会遇到以下3种情况，这也是最影响图标基本质量的问题点。

1)轮廓发虚

图标一定要用矢量绘制，但是新手很容易犯的第一个错误就是图标模糊的问题，也不清楚为何会这样。其实就是矢量边缘模糊产生的问题，也是个人绘制的不良习惯造成。避免这个问题，必须在100%画布上绘制图形，而且不能直接推动图标放大缩小，即使这样改变大小了也要放大画布调整路径的锚点，反复查看及校正是否对齐1px网格，而不是0.1~0.9px，正是不满1px格才会生产虚线。而圆形的绘制保证十字架4个边缘点对准就可以了。

2.4本文原创图例

2)斜形发虚

斜线也是会有模糊与精致之分的，不仔细对比其实是比较难看到问题，可能很多人都会碰到图形进行倾斜效果时是有锯齿的，那就是角度的处理问题了，自己进行多角度对比下试试，会发现哪一个角度最清晰。也可以将图层进行双层叠加，会非常犀利哦~

2.5本文原创图例

3)像素不够或多余

看下来都是像素发虚与清晰的原因都是一样的，下面这个例子是箭头在小尺寸情况下可点阵矢量像素绘制，如果是大尺寸(如上面最大的箭头示例)可以直接钢笔绘制。

2.6本文原创图例

总结一下上面的处理方法，坚持最少发虚原则：

2.7本文原创图例

2. 比例协调

图形内部结构要注意元素构成之间的比例，有黄金比例分割也有感性的平衡方法。严谨的图标比例可参照苹果IOS图标规范案例，打好内部统一结构线进行图形绘制和比例分配。

2.8来自苹果图标及来自Seevi Kargwal图例

如果头眼昏花嫌麻烦，也可靠经验感觉快速完成一个具有平衡感的图标。

2.9本文原创图例

3. 视差平衡

同一个尺寸规格，但根据不同形状的图标，会导致面积占比引起的视差大小不同，但要在参考尺寸范围内绘制进行调整。以下图标示例都是撑满方框边缘绘制，按道理这好像是准确的，但由于人的肉眼会有视差问题，所以做的设计就要暂时抛开科学，以人的真实情况去判断再调整。

2.10本文原创图例

【三】系列成型图标

能够熟悉掌握完以上基础要素，恭喜你可以大胆的去创造系列图标了，当个数图标设计确定好后，接力的图标必须延展其风格设定：造型规则、样式、细节特征等要素统一设计–繁衍具同视觉与内在含义属性的图标。

3.1图例来源于iconwerk

Ps：我非常欣赏iconwerk的图标设计，只因我在5年前发现他的剪影图标作品一直到现在都是那么爱。传送门：iconwerk.de/iconwerk10/

3.2本文原创图例

3.3图例来源于Yorlmar Campos

3.4图例忘记来源于哪位设计师了

3.5图例来源于Jee

【结尾】

篇8：移动软件开发中的UI设计

关键词：界面设计,移动软件开发

对于用户而言, 应用程序中最重要的就是用户界面, 对相当一部分用户而言, 用户界面就是应用程序。桌面系统的应用程序可以有相当复杂的用户界面, 但是移动设备上的用户界面最好的应用程序中最重要的单一功能。针对目前移动设备的运行平台主要是Android和IOS, 本文讨论的移动设备中主要是指Android平台下的移动设备。

1 桌面系统软件开发中UI设计的规则

界面色彩要求, 用户在较长时间使用后不感到视觉疲劳, 要避免颜色种类过多。整个界面要主次分明, 要将最重要的内容放在最易引起用户注意的位置, 例如最上部或者左边栏。整个界面的排版要整齐, 样式要统一, 设置导航以方便用户的使用, 排版应当留有一定的间隙。

需要展示的数据应当集中显示, 在视觉上使用户容易察觉数据之间的关系。在有较多文本信息的情况下, 对文本字体、色彩上增加格式的变化, 使内容有层次变化, 更容易辨识。页面适当留白, 以增强可读性, 例如在段落间添加空行的做法, 可以减轻用户的视觉疲劳。

页面相应速度要快, 实在无法响应, 应当有提示弹出等变化告知用户。鼠标移动的距离应当尽量的短, 并且点击时鼠标状态应当有变化。

2 移动设备的特点

移动设备的屏幕要比桌面系统的屏幕小得多, 所以对显示控件的数量要进行严格的限制。同时移动设备的应用轻便也是其主要特性之一, 移动设备上不会采取复杂的类似PC输入端的操作, 相比输入大量的信息, 用户更加偏向用手指写写画画选择信息, 从而取代在移动设备上输入长篇大论。

由于无线网络的不稳定性, 对移动设备本地缓存数据要优于通过无线方式获得数据。同时, 用户在一次屏幕更新后, 应该尽量获得较多的信息, 避免切换时等待时间较长。

由于移动设备的高携带性, 用户很有可能是在移动的环境下进行对设备的操作, 开发相应应用程序时, 就应当注意针对移动环境下, 例如抖动和行走, 进行相应设计。

移动设备的平面尺寸比较小, 同时使用的环境一般情况是比较多样, 例如, 夜晚, 应当考虑用户读取信息的方便和容易, 设计针对夜间光线模式以及放大字体都是比较好的选择。

由于不同设备有不同的屏幕尺寸和分辨率, 针对不同的设备尺寸和功能进行相应的测试是十分必要的。一般存在下列几种屏幕:特大屏幕, 指比大屏幕更大的屏幕;大屏幕, 比标准智能手记的屏幕大, 一般指平板电脑或者上网本大小的屏幕;中等屏幕, 与智能手机典型的屏幕大小一样, 一般为3.2英寸;小屏幕, 比标准的智能手机屏幕小。

像素密度是另一个需要考虑的问题, 常见的几个标准像素密度有:Idpi指像素密度在100dpi-140dpi;mdpi的像素密度一般在140dpi-190dpi;hdpi的像素密度大于等于190dpi;xhdpi的像素密度为320dpi。

移动设备更广泛的利用了触控技术进行操作, 支持通过设备的上下左右摇摆, 以及手指对屏幕的触控进行功能项的操作。

3 构建移动UI的策略

受移动设备屏幕尺寸的影响, 不应当让用户看到太多的表单元素。受移动性的影响, 用户可能在各种各样的情况下使用移动设备, 可能是在早上繁忙的交通工具中, 也可能是在户外运动中, 此时, 表单元素应当足够的大, 并方便用户的使用, 当然对于屏幕比较小的设备, 表单元素也应当适合屏幕。

由于不同设备有不同的屏幕尺寸和像素密度, 针对不同的设备尺寸和功能进行相应的测试是十分必要的。值得注意的是, 移动设备屏幕有着越来越大的倾向, 例如目前市场上出现的5英寸智能机, 甚至出现了7~8英寸的智能设备。根据Google在2010年8月进行的一次调查, 大约97%的设备拥有mdpi或hdpi像素密度, 在开发时, 我们完全可以假定设备拥有较高的像素密度。具体操作中, 需要注意以下几点:尽量不使用绝对定位;避免在代码中直接设置像素值;在多个物理设备中对各种配置的应用程序进行测试。

对于菜单的处理, 移动设备的屏幕空间是非常珍贵的, 比较大屏幕的桌面系统, 菜单的要求更加灵活, 要求既可以提供程序功能, 同时又不占用额外屏幕空间的机制。多级菜单和上下文菜单都是不错的处理方式。

允许滚动控件。合理使用虚拟键盘。提供状态列表, 方便用户选择使用。提供自动完成功能来输入一些特定的值, 例如国家、地名等。合理使用位置服务来获取用户当前的位置, 减少对地址信息的输入。

4 总结

移动软件开发是目前发展十分迅速的一类软件开发, 同时移动设备具有高携带性, 轻便性, 以及屏幕较传统PC小等特点。针对移动设备进行软件开发时, 应当根据设备的特点, 进行软件UI设计, 本文正是针对移动UI设计的讨论, 整理提出了一些通用的设计策略。

参考文献

[1]Wallance B.McClure, Nathan Blevins, John J.Croft IV, etc.C#开发Android应用实战——使用Mono for Android和.NET/C#, 清华大学出版社, 2013, 1

[2]http://developer.android.com/design/get-started/uioverview.html 2014-3-13

[3]王东明.精彩绝伦的Android UI设计:响应式用户界面与设计模式, Juhani Lehtimaki, 中国科技信息, 2013, 20