优质ui优化案例推荐word版 13页Word文档下载推荐.docx

1、教学难点：掌握UI是什么。教学准备：课本、参考图形教学方法：讲授、讨论、案例分析教 材：教学时间：8课时教学内容：UI在中国的发展，以及UI是什么UI即User Interface（用户界面）的简称。UI设计则是指对软件的人机交互、操作逻辑、界面美观的整体设计。好的UI设计不仅是让软件变得有个性有品味，还要让软件的操作变得舒适、简单、自由,充分体现软件的定位和特点。 第一节 UI是什么软件设计可分为两个部分：编码设计与UI设计。编码设计大家都很熟悉，但是 UI设计还是一个很陌生的词，即使一些专门从事网站与多媒体设计的人也不完全理解UI的意思。UI的本意是用户界面，是英文User和 interf

2、ace的缩写。从字面上看是用户与界面2个组成部分，但实际上还包括用户与界面之间的交互关系。在飞速发展的电子产品中，界面设计工作一点点的被重视起来。做界面设计的“美工”也随之被称之为“UI设计师”或“UI工程师”。其实软件界面设计就像工业产品中的工业造型设计一样，是产品的重要卖点。一个电子产品拥有美观的界面会给人带来舒适的视觉享受，拉近人与商品的距离，为商家创造卖点。界面设计不是单纯的美术绘画，他需要定位使用者、使用环境、使用方式并且为最终用户而设计，是建立在科学性之上的艺术设计。检验一个界面的标准既不是某个项目开发组领导的意见也不是项目成员投票的结果，而是终端用户的感受。所以界面设计要和用户研

3、究紧密结合，是一个不断为最终用户设计满意视觉效果的过程。第二节 UI设计师是做什么的在中国，UI设计还是一个需要不断成长的设计领域，但eicodesign,Tigocn, lkkui design, Robin design等国内知名设计机构已经进入了探索UI设计的道路。UI设计从工作内容上来说分为3个方向。它主要是由UI 研究的3个因素决定的， 其分别是研究工具，研究人与界面的关系，研究人。研究界面图形设计师Graphic UI designer国内目前大部分UI工作者都是从事这个行业。也有人称之为美工，但实际上不是单纯意义上的美术工人，而是软件产品的产品外形设计师。这些设计师大多是美术院校

4、毕业的，其中大部分是有美术设计教育背景，例如工业外形设计，装潢设计，信息多媒体设计等。研究人与界面的关系交互设计师，interaction designer在图形界面产生之前，长期以来UI设计师就是指交互设计师。交互设计师的工作内容就是设计软件的操作流程，树状结构，软件的结构与操作规范（spec）等。一个软件产品在编码之前需要作的就（来自: : ui优化案例 ）是交互设计，并且确立交互模型，交互规范。交互设计师一般都是软件工程师背景居多。研究人用户测试/研究工程师User experience engineer任何的产品为了保证质量都需要测试，软件的编码需要测试，自然UI设计也需要被测试。这个

5、测试和编码没有任何关系，主要是测试交互设计的合理性以及图形设计的美观性。测试方法一般都是采用焦点小组，用目标用户问卷的形式来衡量UI设计的合理性。这个职位很重要，如果没有这个职位，UI设计的好坏只能凭借设计师的经验或者领导的审美来评判，这样就会给企业带来严重的风险性。用户研究工程师一般是心理学人文学背景比较合适。综上所述UI设计师就是：软件图形设计师、交互设计师和用户研究工程师。其中交互设计师：“UI”的本义是用户界面，是英文User和interface的缩写。UI设计师则指从事对软件的人机交互、操作逻辑、界面美观的整体设计工作的人。工作内容：负责软件界面的美术设计、创意工作和制作工作；根据各

6、种相关软件的用户群，提出构思新颖、有高度吸引力的创意设计；对页面进行优化，使用户操作更趋于人性化；维护现有的应用产品；收集和分析用户对于GUI的需求。篇二：常见UI设计模式交互设计师在设计线框图原型时，熟知常见的web设计模式很有帮助，做到“心中有数”才能创造出符合需求，用户易学易用的界面来。所谓“没有必要重复发明轮子”，模式往往容易解决常见问题，正确的模式能帮用户熟悉界面、提高效率。常见的UI设计模式如下图：下面分别进行具体分析，遇到不同需求的时候就可以选择合适UI设计模式。01.主体/细节（Master/Detail）模式主体/细节模式可以分为横向和纵向两种。如果想让用户在同一页面下，引导

7、他们在类目下高效地切换，这无疑是一种理想的方式。如果主体信息对于用户来说更重要，最好选择横向布局。或是主体部分不仅条目多而且包含信息也多，那也该选择这种横向布局。举例来说：Windows窗口属于纵向排布Mac mail的横向排布0.2分栏浏览（Column Browse）分栏浏览也分为横向和纵向两种。用户可以通过它，选择不同的类别点进并逐步引导用户找到需要的信息。举例：Outlook采用逐级分栏的界面，用户可以选择进入“收件箱”“某封收件”“具体邮件内容”0.3搜索/结果（Search/Result）搜索屏幕模式对于想快速、直接看到具体结果的用户来说非常便捷。从很简单的到非常复杂的都有。Gma

8、il采用简单搜索而对于google学术的用户，高级搜索限定更复杂的搜索条件会提炼出用户更期望得到的信息。0.4过滤数据组（Filter Dataset）分为横向和纵向。开始定义一些已知信息，之后通过限定条件对搜索后的结果进行再过滤。51job用户在使用简单搜索输入所需职位后，纵向布局的左边面板提供诸如“发布时间、薪金”等条件，进一步优化信息篇三：Android UI 优化有一句古话：不论黑猫白猫，能抓到耗子就是好猫。这个也许在某些方面是有道理的，但对于我们追求精益求精的思想是背道而驰的，往往就是因为满足于一个结果，而放弃探求更加优化的处理方法。当关注应用程序或者游戏所达到的结果时，往往非常容易

9、忽视一些优化的问题，例如内存优化，线程优化，Media优化和UI优化等等。不同的模块都存在更为巧妙的方式来对待一般性问题，所以每当我们实现一个行为后，稍微多花一些时间来考虑目前所作的工作是否存在更为高效的解决办法。这一次我们对常用的UI Layout优化说起，这个例子转载于 Android developing blog 在Android中最常用LinearLayout表示UI的框架，而且也是最直观和方便的方法。例如创建一个UI用于展现Item的基本内容。如图所示：线框图：直接可以通过LinearLayout快速的实现这个UI的排列：?url=javascript：;View Code/url

10、XML xmlns:android=android:layout_width=fill_parentlayout_height=attr/listPreferredItemHeightpadding=6dipid=+id/iconwrap_contentlayout_marginRight=src=drawable/icon /orientation=vertical0diplayout_weight=1gravity=center_verticaltext=My ApplicationsingleLine=trueellipsize=marqueeSimple application that shows how to use RelativeLayout尽管可以通过Linearlayout实现我们所预想的结果，但是在这里存在一个优化的问题，尤其是针对为大量Items。比较RelativeLayout和LinearLayout，在资源利用上前者会占用更少的资源而达到相同的效果，以下是用 RelativeLayout实现的代码：layout_alignParentTop=layout_alignParentBottom=+id/secondLine26diplayout_toRightOf=id/iconlayout_alignParentRight=layout