网站地图
【www.scfx8.com--教学工作总结】
篇：APP界面设计如何做APP界面设计
用户心态
用户在面对移动应用时，心态有三大特征：第一是微任务，我不会拿手机写一篇论，不会从头到尾看一部电影，使用是随时随地的；第二是查看周遭，也就是我所处的环境。我可能会打开手机，看有什么好的馆子，有什么好的电影，打折团购等等；第三个是无聊，很多移动用户更多情况是无聊的，打开手机，从左到右的翻，翻到最后再把手机关掉。
针对这三种特征的心态，我们怎么样去面对？第一，应用最好是小而准，不要大而全。越全的功能应用，只能代表着这个应用在各方面的都很平庸；第二个要满足用户的情景需求；第三个要帮助用户去消磨时间。
屏幕布局
一般来说，手机屏幕是从上往下布局的，重要的信息会放在上方。但是在操作上，大部分人都是单手拿手机，常用的操作，要放在界面的下方。
另外还有一个原则，最小的触摸单位，一般是44个像素。如果再小，你的拇指难以触碰，或者容易引发误操作。同时，也不要让界面太拥挤。
大家熟悉的，比如iOS的桌面，最主要的操作是在最下面，常用的四个钮，上面的内容可以来回滑动去选择。微信的操作也是在下面，重要的信息——我们的聊天内容放在上方。
一、简单
用户是要微任务的，心态是有点无聊的，我们要让APP变得简单。但设计更简单的体验，往往意味着要追求更极端的目标。因为你要充分理解用户的需求，理解用户现在想要什么，理解他现在的心态是什么，理解他的大情绪是什么。
1、隐藏或者干掉
不太重要，但是必要的东西，可以把它隐藏起来；无关紧要的东西，能干掉的就干掉，不要把什么东西都塞给用户。
比如邮件应用中，已发邮件、草稿、已删除这些功能，对一般用户来说，在最常用的场景里面，这些是不重要的，但是不可能把它去掉，就可以隐藏在下面。而签名、外出自动回复等，这些功能是更加不太使用的，可以把它藏得更深。
再比如Path，它把五个常用的按钮，集成到“+”里。点击加号以后，有拍照，音乐等功能。而界面上，打开这个应用，最直观的就是最主要的信息，没有其他的干扰。比如之前有多少人看过我的图片，它把这个信息直接集成在图片右上角，没有占据太多地方，点击之后，可以发表情、评论、直接删除等，做到了隐藏，是个非常干净、漂亮的页面。
2、分区
以酒店管家为例，酒店图片，酒店提供的服务设施，价格，这个是最主要的内容，放在首要位置；点评放在了其次；然后是交通状况，周边的设施等，有一个明确的分区。
用户一旦知道了这种分区方式，他下次再点开这个应用，想看哪个，他的眼睛会直接落在那儿。
3、帮用户决策
用户其实希望看到的是开发者直接给他们一个东西，非常简单，不用去记，不用去选择。 那么怎样帮用户做决策呢？
以酒店产品为例，当用户需要订酒店时，很多应用都是需要用户输入条件，比如城市、日期、价格区间、房型等，之后得到酒店列表。快捷酒店管家中，用户打开应用，看到就是酒店页面，没有任何选择。这并不是简单粗暴，而是对用户研究之后提供的功能。
快捷酒店管家的核心用户，是本地化的，要在本地找一个快捷酒店，住一晚上。比如说我在通州住，公司在石景山，这两个地方有60公里，晚上加班加到12点，我是打车回通州，还是说直接就在当地找一个快捷酒店，住一晚上，第二天洗个澡再慢慢悠悠上班。 我们要做的，先给用户定位，然后提供附近的快捷酒店。
二、爽快感和新奇感
刚才提到，用户很多时候是无聊的，我们的应用要能够让他感觉操作起来很舒服，让他经常使用，以干掉竞争对手；另外要让用户对应用产生好感，才有可能对应用评分，在微博分享。
1、视觉反馈
用户在操作应用的时候，要给他提供时时的视觉上的反馈。
快捷酒店管家中，选择了某个酒店某个房间后，可能会去选择日期。如果是订之后的日期，就有一个拖动的操作。从开始日期往后面拖，拖动的同时，会出现一个比较大的日期显示。为什么呢？
这并不是一个标准控件。之所以这么做，是因为这里的动作是拖动，不是点，拖的时候用户并不知道现在拖的是哪，所以需要一个提示。这个是视觉反馈，这种操作在一般的日历里头是看不到的。拖动本身是一种更好的交互方式，而明确的设置也让用户感到更舒服，很有意思。
2、隐喻
比如iOS6里面的Pabook，它的界面上就明显的用了隐喻。它本身算是一张数字化的贵宾卡或者说消费卡，界面做的也非常像一个消费券，这个界面非常精美，光泽、整个颜色的搭配等等都非常像真实的，而且就用了条形码。
大家对苹果的界面都感觉比Windows要好，就是因为苹果做的图标，界面都非常精美非常逼真，这也是苹果能够快速超越Windows的一个非常重要的地方。
3、操作方式的创新
比方说，我现在在这个位置，想知道某一些位置有什么好吃的，一种方式是定位了以后，直接就把附近所有东西显示出来。
还有一种方式，我的手在上面滑动，它会记录下轨迹，我只滑动这么一个区域，那就只会现显示这个区域内的商户。这种方式特别直观，而且用户想怎么样就怎么样，想画一个五角星就画一个五角星，想画一条线也可以，它只给你想要的地方的那些内容，这就是一种创新。
在设计中浸入情感
什么样的设计师，什么样的团队才算优秀？我们要对设计对应用浸入感情。它会给产品带来一些好玩、也可能让用户觉得有意思的地方。
比如定机票应用中，有头等舱和经济舱。经济舱是一个普通的人，而头等舱是一个戴着帽子，系着领结，胸前别着手帕的这么一个人，很酷的老板角色，体现出了头等舱和经济舱之间的区别。要做头等舱的人，一般都愿意自己看到自己这么一个形象。
再比如微信4.0，刚打开的时候有一张图片，非常文艺非常在都市的感觉的一张图片，配文字“如你所见，微信，是一个生活方式”。其实它在干嘛呢？它是在提示用户，新增了自己相册功能。它虽然是给用户介绍新功能，但是它把整个情绪融在里面。
第2篇：app设计报告App应用设计报告
指导老师：
陈乙雄 班级：土木建工12班 姓名：
李小阳 学号：
20116106
194559184.doc
目
录
1.课程设计内容 ...........................................................................3 2.课程设计目的 ...........................................................................3 3.设计背景和需求分析 .................................................................3 4.设计步骤 ..................................................................................4 4.1.界面设计.........................................................................................4 4.2.功能展示.........................................................................................6 5. ..................................................................................9
194559184.doc
《力学助手》设计展示
1.课程设计内容
在土木工程学生初次接触三大力学时，困难重重，特别是在动力学和静力学部分，能够学好的人屈指可数，大部分是由于无法空间想象出物体在三大力学规律下的运动轨迹或者变形规律，本软件以三大力学为基础，将工程计算模型简化，使其能更好更高效的计算以及模拟形变，是三大力学初学者的必备软件。
2.课程设计目的
本课程设计的目的是在于系统学完三大力学之后，能结合工程中的实际问题，运用力学的基本理论和手机操作方法，独立地计算工程中的典型零部件，以达到综合运用安卓软件解决工程实际问题之目的。同时，可以使学生将力学的理论和现代计算方法及手段融为一体。既从整体上掌握了基本理论和现代的计算方法，又提高了分析问题，解决问题的能力；既把以前所学的知识（高等数学、工程图学、理论力学、算法语言、计算机和材料力学等）综合输入软件简单计算，又为后继课程（专业课等）打下基础，并初步掌握工程中的设计思想和设计方法，对实际工作能力有所提高。具体的有以下六项： 1．使学生的三大力学知识系统化、完整化；
2．在系统全面复习的基础上，运用手机绘图知识解决工程中的实际问题； 3．由于力求结合专业实际，因而课程设计可以把计算机知识和专业需要结合起来；
4．综合运用了以前所学的个门课程的知识(高数、制图、理力、算法语言、计算机等等)使相关学科的知识有机地联系起来；
5．初步了解和掌握移动设备中的设计思想和设计方法； 6．为后继课程的打下基础。
3.设计背景和需求分析
三大力学是指:理论力学,材料力学，结构力学。
力学不像数学,似乎没有特别明确的分支。每一门力学学科的诞生几乎都有由现实工程需求而产生的。最初就是牛顿的经典力学。理论力学就是研究静力学,运动学,动力学,考虑的模型都是刚体(就是没有变形),而后随着科技的发展,工程
194559184.doc 应用中就要考虑材料的变形,从而开始把力学模型改变,考虑物体的变形,也就是所谓的材料力学,再只有随着建筑工程的结构复杂性的提高,又开始研究结构力学。每一门力学学科的建立(大多自然科学都是如此),都需要建立模型,也就是把实际的问题抽象化,而抽象过程就是把现实中对所研究问题不重要的因素忽略掉,也就是模型假设,从而建立于这个问题相适应的模型进行研究,如果有意义有价值,也就慢慢深入研究下去,从而形成一门学科,他们都是随社会的发展而发展形成的。
4.设计步骤
流程图：
4.1.界面设计
软件logo：该软件以力学为基础，其本质特征自然是力学，故采用古老的毛笔字体作为其标志，如图。
194559184.doc 进入界面：该界面采用淡蓝色星光斑点状作为界面主色图，象征着力学知识如蓝天般辽阔，且给人舒心安宁的感觉，不会有反感心理，见右图。
主界面菜单：主界面菜单有还原模型、基本计算、基本公式、基本结论、关于我们和意见反馈六个选项，每一个都经过精心设计，都以三大力学为基础，且通过意见反馈，还可以了解到市场需求，可以更加的满足需要，如左图所示。
194559184.doc 4.2.功能展示
模型还原：物理模型是人们为了研究物理问题的方便和探讨物理事物的本身而对研究对象所作的一种简化描述，是以观察和实验为基础，采用理想化的办法所创造的，能再现事物本质和内在特性的一种简化模型。该软件把题目中的过程和物体简化成理想的物理模型，以便于更好的解答，如下图。
绘图功能介绍（仿CAD）：力学助手仿照autoCAD绘图功能，提供铰支座，杆件曲线等简单绘图元素，可以完成学习过程中的各类题型输入，一次将一个复杂的图形简化为物理模型，再通过三大力学数据库解决问题，绘制界面如下图。
194559184.doc
绘图完成界面：在绘图完成之后，需检测是否合理，如下图，只有合理地图形受力才可正常的解决。
计算完成绘图：在绘图完成后即可进入计算，这时系统将根据数据库调用各种原理解决，在计算完成后将自动的画出该模型的弯矩图，以便于学生对照学习，如下图。
194559184.doc
理论公式界面：力学助手的基本公式和基本理论都将单独成为一个版块，以便学生查询，如右图所示。
194559184.doc 5.心得体会
通过本次设计，我深有体会，并出了以下几点：
1、一个成功的设计应该是以用户为出发点，始终在考虑“用户需要什么”，最不可取的做法就是以个人喜好来决定设计方向，《力学助手》就是考虑到广大理科生的需求才应运而生。一味从自我考虑，做自己喜欢的软件，最后会发现做出来的软件只有你自己喜欢。所以，以用户为中心比都什么都重要。
2、花哨不如实用，诚然，漂亮很多时候，是占很大便宜的。但是易用性比漂亮更重要。易用性是高于画面表现的,对于网站质量来说，漂亮只可用来加分，但不能打分；对于视觉体验来说，我认为实用是比漂亮更高层次的艺术。
3、简单些，这很重要，我们生活在一个浮躁的年代，简单在这个时候，是很重要的。在设计上，舍去一切可以舍去的内容，只保留无法舍去的东西，多利用玩家已有的知识和外在的条件，简化设计内容。
4、有亮点，有重点。设计上可以抄袭，可以复制，但是一定要有自己的亮点，不要落入平庸。设计上一定要有重点，要让使用者的精力经常聚集到你的重点上来。
5、真诚面对用户，使用意见反馈可以更好地使《力学助手》趋于完善，市场更广。
我相信，《力学助手》必将成为工科生的一把好手！
第3篇：注意App用户体验设计 杜绝僵尸APP注意App用户体验设计
杜绝僵尸APP
当苹果CEO库克在WWDC2014上宣布苹果App Store应用数量超过120万的时候，更多手机用户在惊叹之余或许也会感到困惑——为什么自己iPhone里用过的，总是那几十个App？
秘密就在这里了。应用数据分析公司Adjust宣布，App Store那120万个“浩瀚”的应用中，近80%都是“僵尸”。这些应用从出生、存在到消亡，几乎不可能被用户发现。
何为僵尸APP？按照Adjust的判断规则，在一个月内，有三分之二时间不能登上苹果App Store近四万个榜单中的应用，就应该称之为“僵尸”。这些应用很难被用户发现并下载，即使在App Store里存在，也没有生命力。
目前App Store中共有125万个应用，且每月平均再增加6万个。虽然应用规模不断扩大，但苹果提供的应用发现机制并没有提升。依赖榜单为应用提供露脸的机会，正在变得越来越低效。
僵尸APP的比例也在不断扩大。2013年6月，僵尸APP占苹果总应用的比例为70.4%；2013年12月，该数据为75.2%；2014年5月，比率进一步上升至77%；2014年6月，达到79.6%„„
App的普及应用无庸置疑，但也由于竞争者众，愈来愈多的App是属于没人下载、没人评分的殭尸App，怎样突破这样的的运营僵局，将是App开发及营运者最重要的课题。
移动应用发展逐步成熟，由于免费应用成主流． 无论是轻应用型的平台，或是开发商、服务商，仍是要回归实质，也就是用户体验。游戏规则变了，消费者越来越有主动权，越来越有话语权，因而用户的体验会变得越来越重要，要把东西做到极限，超出使用者预计，才叫体验。
让App应用拥有较高的用户参加度，有些企业会在在广告上面投掷大量资金。但往往效果不佳。事实上，假如你希望让用户又一次回到App应用上来，那么就需要对你的用户、以及它们使用App应用的习惯进行颗粒分析。而后，针对不同的用户定位营销活动，让它们回到你的App上面来，最后，为这些用户提供高度特性化的App使用体验。
以下重点讨论用户体验的三个方面:
〔1〕 app在开发中，针对不同的用户群体，A/B试验可以让你尝试不同的副本，创意，以及内容。这样你就可以了解哪些方式可以和用户出现最好的共鸣，哪些方式最有可能对你的App转化率和终身价值造成影响。针对不同的用户，你会发现哪些方式是有效的，哪些又是无效的，你可以依据特性化的消息和内容不断进行调整，以达到最好效果。当然A/B试验是建立在分析的基础之上的，分析可以帮助你区别用户群，在试验过程中，你要进行有效地控制，评估，并从每个试验结果中学习经验经验。
〔2〕推送消息必需要尽可能地高度特性化，这样才能引发用户的留意，这点十分重要。在这里，颗粒分析会帮助你规划推送信息内容、推送频率、以及推送时间等具体指标。假如没有深入的特性化分析，你推送消息的最后结果很可能会适得其反。举个例子，最近有数字现实，市场营销人员应当在不同的时间段里给美国和欧洲的用户推送消息，由于这些地区的用户使用App的类型是完全不同的。
〔3〕除此之外，优秀的导航栏设计将起到关键性作用，对不同的操作也当因地制宜地选则不同的设计方案。导航的设计是App设计发展过程中很值得玩味的地方，由于移动设备特别是智能手机的屏幕尺寸有限，设计者们通常会将屏幕空间尽可能留给主体内容，优秀的导航设计会让用户轻松抵达目的地而又不会搅扰和困惑用户。用户通过在内容页面左右滑入手指即可在不同的类别之间进行切换。这样的方式的用户体验改良了许多，特别在延续切换时其操作方式的延续性比很强，主体页面的过渡也愈加平滑，会出现愈加流畅的体验。自然也会有些缺陷，比方一次滑动仅能切换到相邻的类别，要想直接切换到对应类别可以点击上方的类别列表，不过由于类别过多，有时可能需要滑动一下类别列表才能完成操作。不过总体来讲，当需要在具备类似属性类别之间进行较频繁切换时，这样的设计方式很值得参考。
一款尽心仔细设计、操作便捷的App应用需要获得特性化的营销活动支持，这样才能更有效地吸援用户参加。让用户下载你的App仅是第一步，接下来你要做的，就是让用户不断地使用你的App，当然这也是最重要的一步。今日你所搜集和分析的数字，就会帮助你在将来吸引更多的用户。
第4篇：移动app软件设计广州移动app软件设计开发公司【启汇网络】分析，移动应用市场蓬勃发展也让众多的移动app软件开发者获利匪浅，也由此涌现出了许多优秀的app软件设计，随着用户的品质需求的上升，App界面设计也被提升到了全新的高度。 一：专业APP设计是影响用户第一印象的重要因素。
从2005年到2013年，技术让世界的细节发生了深刻的改变。互联网公司知道移动端在于现在和未来几年的重要性，都疯狂的争斗着入口。那些我们看不到的硝烟都在演化着未来。我们看到的是那些每天都有新意的App应用程序。如何设计出经典，如何在岁月里长久存留的经典！
移动应用实现了从互联网到移动设备的成功蜕变，从用户角度出发，对视觉、风格、操作方式、架构、内容呈现等各个方面进行设计挖掘，从而打造出最为精致的应用。
设计移动app软件注意事项汇总：
1.不要在没有流程图之就前开始设计或者画线框图
2.分工要明确 不要忽略开发预算。
3.不要使用低分辨率的图片 避免使用位图。
4.不要把点击区域设置的太小,大多数用户的食指宽1.6~2厘米。
5.不要随意使用介绍动画,事实上，这些介绍动画也延迟了用户接触App的时间。
6.别让用户空等,App加载时间过长很容易让用户以为出现了什么故障，也会带来糟糕的用户体验。
7.不要盲目照搬别的操作系统。
8.不要在高密度像素屏幕上填充过多信息或者UI组件。
9.不要觉得每个用户有着跟你一样的App使用方式。
10.不要忘记手势 但不要滥用。
二：优秀APP软件是功能与设计的相结合。
随着智能手机市场的扩大，平板与智能手机的普及使现在的移动市场成为各大企业必争之地，各种APP层出不穷，有昙花一现的，也有经久不衰的。
我们在设开发移动手机APP应用软件时要注意哪些要点：
1：降低用户使用的门槛。不少用户在第一次使用一个app软件时，出于对app客户端的陌生，都会先了解app的使用步骤。
2：不要让用户迷惑。让用户迷惑的东西包括：用户看不懂的功能、隐藏的功能、速度慢、当发现用户被这些功能“困住”不能给及时的反馈。
3：永远不要为了美观牺牲了功能。开发一款手机app应用软件不能忽视功能，只有解决用户需求，才谈到app的美感。
4：了解用户行为的原因。不管是移动APP软件开发还是网页端的开发，到最后做的都是做的用户体验。让客户得到最好的用户体验，能实现他想要的功能，这才一款好的APP软件。
启汇网络认为，对于所有的设计师和开发者来说，未来几年可以称得上是拥有非常美好市场的，随着移动逐渐成主流，开发者和设计师拥有更多的机会来展示自己，也通过app应用从中获取利润，当然谁也不能拍拍胸脯保证一定赢，因为无论何时，祸福总相倚，但只要对人心所向的App设计趋势深入了解并加以利用，相信在未来让人爱不释手的优秀应用一定会层出不穷。
第5篇：APP界面设计教程APP界面设计教程：移动界面设计尺寸篇
不知道大家还记得有哪些？
今天，小编决定再来梳理下关于APP界面设计尺寸。算是一个关于app设计尺寸的专题吧！
APPLE APP STORE ICON:512 x 512 PX IPHONE 4 App Icon：114 x 114 PX IPHONE 3GS App Icon：57 x 57 PX —————————————————————–
IPHONE 5 App UI：1136 * 640PX （设计时,高度还需要减去状态栏40PX）
IPHONE 4 App UI：960 * 640PX （设计时,高度还需要减去状态栏40PX）
IPHONE 3GS App UI：480*320PX —————————————————————– iPad 3：2048 x 1536PX (2倍于iPad2) iPad 2：1024 x 768PX —————————————————————– Android Phone App Icon：512 x 512 PX Android Phone App UI： 240x320PX 320x480PX 480x800PX 480x854PX 540x960PX (例如：HTC Sensation XE) Android Tablet App UI： 600x1024PX 720x1280PX 800x1280PX 因为Android设计单位是dp，而1dp等于1.5px。
设计稿以px为单位的情况下，元素尺寸需要是1.5的倍数，才可以在Android手机显示清晰图片。
下面是25学堂一路过程中分享的关于移动界面设计尺寸的文章或APP设计干货。
第一篇：iphone APP界面设计尺寸官方版
发布于： 2012 年 10 月 20 日
25学堂教程原创一：iphone界面设计尺寸（640*960）px 该Iphone界面设计是从苹果官方网站帮助中心提取过来，这也是我第一次帮公司产品设计iphone版的UI使用的尺寸。由于之前接触的比较少，只知道苹果手机的界面尺寸是640*960，其实真正的大小是320*480，因为人的视网膜关系，苹果公司放大了2倍。
第二篇：移动APP界面设计尺寸视频教程
【课程目标】快速了解Android与 iPhone手机界面设计规范，如在做效果图设计时需要注意的手机分辨率、界面尺寸、图标大小、如何切片等等… 【课程受众】正在学习Android与 iPhone手机界面设计的新手朋友们。
第三篇：APP界面设计指南|APP界面设计师必备信息图
发布于： 2013 年 5 月 16 日 2013年，APP界面设计已经越来越受到大家的关注和热捧！作为一个接触APP界面设计的老鸟，网站设计师们。一定得记住：用户体验设计放在首位！
第四篇：APP设计尺寸规范官方大全
发布于： 2013 年 8 月 17 日
正值25学堂一周年之际，同时站长和APP设计同仁们在群里（APP界面设计 UI设计交流群： 232778150，欢迎大家加入交流分享）。 第五篇：iPhone和Android界面设计尺寸规范汇总
发布于： 2014 年 1 月 8 日 by admin
iPhoneui界面设计的宗旨-简单为主，APP用户体验设计之上 我们做设计的或是交互的，现在都是以用户为主的iPhoneui界面设计，一定要走得人性化一点，才能引起用户的共鸣。才能赢得更多的用户的喜爱。
第六篇：iOS7设计尺寸大全
发布于： 2014 年 1 月 5 日
自从iOS 7的发布，APP设计人员和APP开发人员将需要调整自己的视觉语言来匹配的iOS的新的“扁平化”的设计。除了网格系统，图标和常用元素，排版和图像学的维度已经在许多方面更新的苹果。
第6篇：app商品设计书设计书
第一章项目概要
第二章技术和产品
产品功能：1.可以成功发送彩信到指定手机，2.可以成功计费，3使用方便满足用户使用习惯。4.有一定的内容可以根据节假日更新部分程序自带彩信内容。5，鼓励用户多用并帮助推广。
技术要求：1.可以读取已有图片；2.可以自拍和连拍5张处理，3.可以做简单的图片处理；
4.可以读取通讯录和最近联系人；5.可以读取发送来的彩信和已发彩信;6.可以自动记录免费发送剩余条数并同步网络；7.可以录音；8可以输入文字；9可以群发彩信
第三章项目环境分析
第三章市场竞争分析
第五章市场营销
第六章财务压力分析
第七章管理和利润
第八章其他
用户级促销方式：
1.前二条免费
2.发送完成有用户鼓励窗口。（恭喜为自己节省××话费啦！太棒了，你又和朋友拉进了
联系！）
3.交互指导用户使用软件，带有乐趣和轻松的感觉。
4.用户可以升级，更便宜的赠送，开始1元3条，30条后送1条，再50条后可以送2条。
5.推荐其它用户，赠送1条。（第一次）
6.抢断彩信接口，只要有接收到彩信，客户端主动打开提示查阅
7.每次发送带上本app的简短介绍和链接。
预留接口：
1.广告推广，
2.优秀彩信库，
3.在线用户间互发。
推广促销方式：
1.给每个下载后发送出彩信的，0.5元推广费
2.每个下载0.1元推广费
3.
第7篇：Web_app设计准则火龙果整理 uml.org.cn Web app设计浅谈
HTML5技术的强势发展，为互联网带来的最大改变就是： web从“已死”的预言中回过头来给Native app一记沉重的回马枪，web app成为举世瞩目的明星开始走在各大公司研发的时刻表中。Google、微软、苹果三大巨头紧锣密鼓地在web app的研发产品领域圈地设岗，并试图建立以自己为中心的”云“服务平台，企图在web app时代到来的时候充当霸主。
本文将围绕web app的设计，与大家讨论几点设计技巧。
什么是web app? Web app是一种通过网络（如互联网或内联网）访问的应用程序；也可以指计算机软件承载在浏览器支持环境下或使用浏览器支持语言（如JavaScript）并依赖于web 浏览器来渲染的应用程序。Web app的流行归功于网页浏览器的普及，以及使用这一轻薄客户端方便的用户体验。不必下载安装就可以实现更新和维护，具有支持跨平台的内在属性，是web app开始流行的关键原因。典型的web app产品包括web邮箱、web商店、wikis等等。
Web app的优点
◆通过兼容性浏览器实现配置而不需要任何复杂的“转出”步骤； ◆浏览器应用程序几乎不需要客户端上的磁盘空间； ◆新功能从服务器自动传递给用户，用户自己不必升级程序； ◆可以轻松整合进入其他服务类web程序； ◆跨平台的兼容性
火龙果整理 uml.org.cn 现阶段web app还很难有一个设计原则
HTML5技术仍在发展中且发展尚不完善， web app作为该技术的产物自然也是在不断试验中进步；此外，web app还要依赖兼容性浏览器更强大的渲染能力，俗话说“皮之不存毛将焉附”，在大家都期待的强大浏览器出现之前谁也难以预言web app需要做成什么样才算是一个合格的产品。在这种行业背景下，web app还难以有一个所谓的设计原则，起码现在还不构成总结一个合理设计原则的条件。
其实，所谓的设计原则本就是从已有的、典型的设计作品中倒推得出的。比如，解构主义设计风格的提出不是之前就有的，是理论家在分析总结了建筑设计师盖里、埃森曼、特斯楚米等大师的典型设计作品，结合这几位大师的设计理念后定义的一个流派名称。所谓的解构主义设计原则也是从权威大师典型作品中归纳总结的； 设计原则出现后继而可以对之后的设计起一定的指导作用。
因此本文不谈所谓的web app设计原则，现从已经上线的优秀产品中选择典型设计元素与大家讨论分享，寻找可以借鉴的地方，并借此增进对web app产品设计的认识。
Web app界面设计的8个实用技巧
Web app用户界面设计，核心是web设计；不过与一般意义上的web设计相比较，web app更加注重功能。为了在与桌面应用程序的竞争中展现其优势，web app需要提供简洁、直观、快速响应的用户界面，以便于用户在任务操作中节省精力和时间。
1.界面元素随需而变
力求简洁明了是用户界面设计的重要原则。在同一时间给用户展示的功能越多，用户需要寻找和思考的时间也就越多。同样，界面中存在的选项越少，可用功能就越明显、越容易浏览。不过简化界面并非轻而易举，尤其是你不想减少应用程序功能的情况下。
火龙果整理 uml.org.cn
以Kontain搜索模块为例，在搜索框中有一个下拉菜单，帮助用户细化搜索范围。用户可以通过菜单选择自己想要寻找的内容。该网站通过这些选项简化了搜索框。
将高级功能隐藏起来是一种有效的简化方法。搞清楚在界面中用户最经常用的是哪些功能，然后把其他功能隐藏处理。这些可由下拉式菜单和控件完成。例如，搜索栏中的高级过滤器可以做成尾部的特殊下拉菜单样式。当用户需要这些过滤器的时候只需要几次点击就可以使用。决定哪些功能保留展示哪些需要隐藏起来，并不是一个简单的工作，需要取决于功能控件的重要程度和被使用的频繁程度。
火龙果整理 uml.org.cn
擅长如此处理的还有CollabFinder， 如上图。用户点击搜索链接后并没有被马上带到其他页面；搜索框控件下拉下来，允许用户在当前页面内直接进行搜索操作。这样的设计方式，既保持了用户视觉焦点的稳定，又使得整个页面在不使用某个特定功能的情况下简洁清爽。
2.为模态窗口增加边缘阴影
弹出式菜单和窗口周边的阴影不仅仅是为了视觉美观。阴影一方面增大了菜单或窗口的尺寸，有助于将菜单或窗口从背景中区别开来；另一方面通过灰度化的边缘阴影可以屏蔽背景内容的噪音干扰。
这个技巧根植于传统桌面程序，帮助用户将注意力集中在弹出的窗口。由于很多模态窗口不容易从桌面程序内容页面中凸显出来，阴影可以使它们看起来具有立体效果、仿佛悬浮于其他内容之上，于是拉近了模态窗口与用户的距离。
火龙果整理 uml.org.cn
如上图，Digg的登录窗口边缘拥有厚厚的阴影，对下面内容的视觉噪音起到了有效的屏蔽作用。
为实现这样的效果，设计师往往将透明的PNG背景图片作为容器，再把内容填充到容器中，同时等距离填充弹出框各边缘。或者使用具有透明边框的背景图片，并将内容框绝对定位在其中。另外，也可以使用基于JavaScript的lightboxes命令或者CSS3中的 drop shadows命令，但需要注意浏览器是否支持。
3.空白状态时告诉用户可以做什么
当设计web app的时候，不仅需要关心一般情况下的信息展示，还要确保界面在空白状态时表现良好、具有指引作用。页面中还没有产生任何信息的时候，可以在空白区域放置一条帮助信息告诉用户如何开始。例如，一个项目管理的应用程序主页会列出用户的项目，假如还没有什么项目信息，可以为用户提供一个项目创建页面的链接。即使这个页面上已经存在了这样一个功能按钮，一个额外的帮助并不会有什么妨碍。
火龙果整理 uml.org.cn 如上图，Campaign Monitor在右边方向提供了一个建立新信息的快速入口。
Wufoo的表单页面有醒目的、友好的信息鼓励用户去创建新的表单。
这个技巧可以有效地鼓励用户试用该服务，并在注册后立即进行使用。通过应用程序的单一操作步骤可以帮助用户理解这个应用的优势以及对他们是否有用。
此外，只为用户展示最重要的功能选项也很关键。一股脑的将众多功能倾泻给用户并没有什么实际意义。需要牢记的是，用户通常想从应用中获得或多或少的信息，但却不想跳进细节中，用户没有时间也没有兴趣。
在空白状态中激励用户，可以显著地降低用户的流失率，并帮助潜在的用户更好的理解程序系统是如何工作的。
4.Button状态积极反馈
许多web app拥有自定义样式的按钮。默认的输入按钮可能不适合某些情景，文字链接有时候看起来又太含蓄。需要注意的是，把链接做成Button样式的时候，它们就应该有button的表现形式。比如，在点击button的时候它们应该会出现被“压”过的样子。这不仅仅是纯粹的视觉变化。及时反馈给用户，可以使web app感觉起来更灵敏，与桌面应用程序的用户体验更接近。
可以使用CSS添加按钮的“preed”等状态，实现在不同状态下显示不同背景图片的功能。
火龙果整理 uml.org.cn 例如Highrise中的按钮，在鼠标指针点击的时候会呈现 “preed”状态效果，为用户提供了灵敏的反馈感受。
5.使用上下文情境导航
在既定的情境下考虑用户希望看什么、需要什么是非常重要的。不需要在每一个地方都放置相同的导航控件，因为用户不是在任何情况下都需要它们。
上下文情境导航最好的一个例子就是Office 2007中，原先默认的工具栏集合被换成了带状控件形式。每一项tab控制着一组相关联的功能，如编辑图形、校对或者简单书写。 Web app可以从这种上下文情境导航中获益，仅展示用户需要的、而不是所有可用的功能，从而保持用户界面的整洁清爽。
例如上图中，Lighthouse 有非常典型的tab导航菜单；然而，在tab导航栏的下方它还有二级导航，在这个二级导航中只显示网站活跃部分的相关条目。
6.更加重视关键功能
并不是所有的控件都拥有相同的重要性。例如创建一个新的条目，页面中会有“创建”“取消”两个button.这里的“创建”就要更加重要些，因为这是大多数情况下用户即将要做的事情。极少的情况下用户才会去点击取消。虽然这两个控件并排放置，但是不要给予相同的重视程度。
为了将注意力引导到“创建”上，我们可以尝试使用不用的风格或样式。一种方式是将“创建”设计成button样式，“取消”设计成文字链接样式。另一种方式是在视觉上使用使用不同的颜色，并使button略有凸起的效果。这样便于抓住用户的目光。
火龙果整理 uml.org.cn
例如在Google+创建新圈子的弹窗中，创建按钮在视觉上具备了更加醒目的效果，拥有该页面中更高的重视等级。
7.嵌入视频
虽然图片和文字是向用户介绍应用程序功能的很好的方式，但如果资源允许的话，视频将是一个更优方案。近年来视频在网络上的使用越来越频繁。Web app的截屏视频经常被使用在营销网站中来展示产品的功能；然而这并不是视频使用的唯一方式。
GoodBarry 在其首页中使用截屏视频来展示产品。同时它还在应用中嵌入了视频来指导用户如何去开始。
火龙果整理 uml.org.cn
MailChimp在管理面板中使用教程视频以帮助新用户。
一些web app使用内部嵌入的视频帮助用户了解产品的特定功能。视频是快速演示产品如何使用的绝佳方法，因为与文字相比视频更容易被用户所接受，而且视频可以使用户准确地看到需要做什么，更加清晰。
8.让升级或降级的提示简洁、不扰民
在很多互联网产品中都会有不同权限的用户账户存在，比如邮箱、空间、网盘存储、SNS产品等。在用户拥有了一个账户后，他们可以对账户进行升级或降级。如何设计界面来提示用户他们可以升级而不去干扰用户的工作流程呢？设计师肯定不愿意在应用程序之外完成这件事情，这样的提示应该是和app是无缝连接的，而且最好是让用户感觉方便。因此升级账户的提示最好放在app内完成。
通过几个例子我们了解一下升级账户的处理方式。
火龙果整理 uml.org.cn
FreshBooks 的升级提示是一直存在的，被放置在了web app的底部。如上图。由于提示是在界面的工作区以外的位置，并不会对用户的工作流程造成影响。
火龙果整理 uml.org.cn
在Basecamp的升级提示中，用户可以很清晰地得知升级后将会有哪些变化。请看上图。
火龙果整理 uml.org.cn 在CompVersions中,各种升级后的变化情况很直观 ，整个页面简洁清晰。请见上图。
总结
Web app的设计细节远不止上文中提到的这些，本文只算作抱砖引玉，希望大家可以在已有的优秀产品中发现更多思考的触发点。当我们习惯了走马观花地浏览其他公司产品的时候，我们已经对太多的东西习以为常；当我们开始设计用户界面，开始处理细节的时候，却时常会有拿捏不准的感觉。如果平时多总结一下其他产品（不一定拘泥于自己的产品圈子）的细节亮点，相信很多东西在实际工作中可以为我所用。