软件详细设计说明书.docx
《软件详细设计说明书.docx》由会员分享，可在线阅读，更多相关《软件详细设计说明书.docx（21页珍藏版）》请在冰豆网上搜索。
软件详细设计说明书
实验室研究生信息系统
详细设计说明书
软件名称：
实验室研究生信息系统
开发团队：
北京化工大学信研14级
指导教师：
李征
DOCID:
LAB_SYS
VERSION:
1.0.
DATE:
2014-11-5
目录
1、引言2
1.1编写目的2
1.2背景2
1.3定义2
1.4参考资料3
2、MaterialDesign介绍3
2.1概述3
2.2MaterialDesign的目标：
3
2.3MaterialDesign的设计原则4
2.4MaterialDesign深度解读8
3、利用MaterialDesign开发应用12
3.1MaterialDesign使用教科书（Google）12
3.2基于MaterialDesign的AndroidL界面设计14
3.3较低版本使用MaterialDesign风格15
3.4卡片布局使用MaterialDesign风格16
4、软件界面示例20
1、引言
1.1编写目的
本计划书编写的目的是更清晰地了解实验室研究生系统界面的视觉设计的相关规划，本文档中包含了materialdesign的设计原则及设计理念。
1.2背景
MaterialDesign初次亮相是在Google发布的Google+应用升级中，它更换了新图标和字体，并拥有更加统一的界面层次。
整个界面的设计都建立在Google称为「合理化空间与动作系统的统一理论」的基础上。
这一设计语言将重新定义Android与网页端应用。
谷歌安卓操作系统用户体验主管马蒂亚斯·杜拉特（MatiasDurate）在I/O开发者大会主题演讲中表示：
“我们想象着，如果像素不仅有颜色，还有深度，那会是怎样的一番情景？
如果有一种材料可以改变它的质地，那又会如何？
这种畅想最终让我们开发出了我们称之为MaterialDesign的设计语言。
”
1.3定义
MaterialDesign：
谷歌推出的全新的设计语言MaterialDesign。
这种设计语言旨在为手机、平板电脑、台式机和“其他平台”提供更一致、更广泛的“外观和感觉”。
MaterialDesign语言的一些重要功能包括系统字体Roboto的升级版本，同时颜色更鲜艳，动画效果更突出。
谷歌还基于这种新的设计语言对本公司旗舰应用进行了重新设计，包括安卓和网页端的Gmail和Calendar。
经过了重新设计的Gmail，界面更干净、更简约。
在安卓平台上，这种新界面被称为Material，支持各种新动画效果，具有内置的实时UI阴影，以及可在不同屏幕之间切换的hero元素。
1.4参考资料
网站:
知乎（如何评价Google的MaterialDesign）：
2014GDGBeijingDevFestWebsit：
创建MaterialDesign风格的Android应用：
http:
//blog.isming.me/2014/10/21/creating-app-with-material-design-two-list/
2、MaterialDesign介绍
2.1概述：
设计是创造的艺术，我们的目标就是要满足不同的人类需要。
人们的需要会随着时间发展，我们的设计，实践，以及理念也要随之提升。
我们在自我挑战，为用户创造了一个可视化语言，它整合了优秀设计的经典原则和科学与技术的创新，这就是MaterialDesign。
2.2MaterialDesign的目标：
打造一种视觉语言，将高品质设计的经典原则与科技的创新与无限可能性融为一体。
开发一个重要的系统，实现不同平台和不同设备尺寸之间的统一体验。
移动概念是基础，但触摸、语音、鼠标和键盘都是第一流的输入手段。
利用我们熟悉的触觉手段，与众多元素进行融合，与扎根于现实的视觉线索建立联系旨在让用户使用materialdesign打造的产品和服务的体验更美好。
它的设计美学可以融入到所有的平台之中，包括ChromeOS和网页，以及移动设备，它也将形成一个统一的外观，将所有的产品捆绑在一起。
扁平化的设计，加上明亮的色彩，形成MaterialDesign吸引人的外观。
此外，它对动画效果也做了相应的调整，让体验变得更加有趣。
2.3MaterialDesign的设计原则：
1、材料是个隐喻
材料隐喻是合理空间和动作系统的统一理论。
谷歌所谓的“材料”是基于触觉现实，灵感来自于对于纸张和墨水的研究，也加入了想象和魔法的因素。
2、表面是直观和自然的
表面和边缘为现实经验提供了视觉线索。
使用熟悉的触觉属性，可以直观地感受到使用情景。
3、维度提供交互
光、表面和运动是展现交换的关键因素。
逼真的光影效果显出了各部分分离，划分了空间，指示了哪些部分可以进行操作。
4、适应性设计
底层设计系统包括了交互和空间两部分。
每一个设备都能反映出同一底层系统的不同侧面。
每一设备的界面都会按照大小和交互进行调整。
只有颜色，图标，层次结构和空间关系保持不变。
5、目录用黑体和图形设计，并带有意图
黑体能突出层次、意义，显现焦点。
深思熟虑的色彩选择，层次分明的图像，大范围的铺陈和有意的留白可以创造出浸入感和也能让表达更清晰。
6、颜色、表面和图标都强调动作效果
用户行为就是体验设计的本质。
基本动作效果是转折点，他们可以改变整个设计，可以让核心功能变得更加明显，更为用户指明了“路标”。
7、 用户发起变化
操作界面中的变化来自于用户行为。
用户触摸操作产生的效果要反应和强化用户的作用。
8、 动画效果要在统一的
所有动画效果都在统一的环境下显示。
即使发生了变形或是重组，对对象的呈现也不能破坏用户体验的连续性。
9、动作提供了意义
动作是有意义的，而且是恰当的，动作有助于集中注意力和保持连续性。
反馈是非常微妙和清晰的，而转换不仅要有效率，也要保持一致性
2.4MaterialDesign深度解读
纸的形态模拟
MaterialDesign并不是一种去拟物的设计，也不是一种强调拟物的设计。
我们知道电子屏幕是完全平面化的，不像现实当中的物体是3D的，。
一本书里每一页纸之间的空间关系是很清楚的，但电子屏幕的所以物体都在一个平面上。
虽然电子屏幕没有空间感，但信息内容是有空间层级的关系。
而MaterialDesign的解决方式就是把现实世界中纸张的特性挪到电子屏幕里，把信息内容呈现在这个虚拟的纸上，纸（信息内容）跟纸之间有上下层级关系，用投影模拟纸张的空间感。
MaterialDesign的投影并不是过去我们常用的使用图片或者样式代码实现的投影，而是系统根据纸张层级所在位置实时渲染的，投影会随着纸张的空间关系而改变大小。
几年前推行的Card设计就是模拟纸张物理形态的一种设计方式，但MaterialDesign把它提升到了系统信息架构层面的高度。
2.转场动画
（动态图见PPT）
过去我们的页面只有X与Y轴，打开一个新的页面则是生硬地直接跳转到新的页面，并没有点出页面的空间层级关系。
而iOS7与Material则强调Z轴，即页面之间的空间层级关系。
iOS里打开一个app，页面将从你点击的app图标为中心点扩散出来，同样的设计在AndroidL上也随处可见。
通过转场动画告诉我们，这个页面从哪里来，到哪里去，在整个APP或者系统里的空间位置是什么。
另外，不仅仅是页面层级的动画过渡，对象操作也伴随着动画过渡，从动画里能感受到操作的过程变化。
例如删除时，垃圾桶图标会有一个倾倒的动画，或者通过指示条的旋转告诉你删除的过程。
另一方面，过渡动画赋予了界面控件一种物理特性，在空间被拉伸、回弹时模仿了橡皮筋的物理特性。
值得一提的是，在转场动画的设计上，FacebookePaper的非常突出。
3.icon动画
（动态图见PPT）
交互动画在一些app里已经大行其道，特别是FacebookPaper的动画让人印象深刻。
在以后，交互动画将成为标配，随之而来，更多设计师把目标转移到icon上来。
Icon主要分为入口功能和操作功能，操作功能的icon在完成点击操作之后，通常会转为对应的另外一种形态。
如“返回”与“菜单，”“选择”与“未选择”，“收藏”与“已收藏”“点赞”与“取消点赞”的状态之间切换。
现在的设计里，icon在两种状态之间的切换通常显得生硬，icon动画将使得点击之后的反馈更佳强烈，并且让界面活起来，性感起来。
4.大面积色块actionbar
MaterialDesign设计语言让人眼前一亮的除了丰富的交互动画外，还有大面积使用了鲜艳的色块。
过去的Android或者网页设计让人觉得冰冷科技感，让人有一种距离感。
而新的设计采用了与过去相反的做法，在系统里大面积使用色块，用色块来突出主要内容和标题，让界面的主次感更佳突出，也让原本灰黑色为主的界面拥有了时尚和活力。
色块的颜色选择多使用饱和度高、明度适中的颜色，整体拥有比较强烈的视觉冲击，但并不会太刺眼。
Actionbar也同样从过去的灰黑颜色改为彩色，并且让状态栏与之融为一体，这点与iOS7的设计非常相似。
5.FAB按钮（FixedActionButton）
在Google的宣传片里，最引人注目的新玩意，就是这个淘气的圆形小按钮了。
从宣传片里来看，这个按钮的功能并不局限于“新建”“播放”“收藏”“更多”等功能。
它于整体界面的配色形成比较大的反差，因此会让这个按钮在界面里显得非常耀眼，从这样的设计来看，这个按钮所背负的任务将会是整个界面的主要操作。
虽然有点类似与Path里的“+”按钮，但由于iOS系统本身并没有这样的设计，这将会成为最区别于iOS的一种交互设计，对交互设计师和产品经理来说都可能会成为一种挑战。
6.无边框按钮
在iOS7的设计里，我们已经看到了这样的影子。
最典型的便是“返回”按钮只有箭头和文案，去掉了原本的按钮质感。
MaterialDesign的actionbar也同样采用了这样的设计，直接用icon来表达按钮功能。
尤其是Material的键盘设计风格，最早对键盘风格进行极简设计的是微软的WindowsPhone，Android和iOS相继跟进。
而这次Material走得更极端，把键盘的按钮边框全部去掉，只保留了英文字母的按钮。
我们不能说这样的设计一定是好的，这样的设计可能让用户对点击的精准度无法更快地判断，缺乏安全感。
好处是在屏幕不大的手机上，去掉边框的拥挤感会给字母更大的空间。
另外，无边框按钮的设计也体现在提示框的按钮上。
如何让无边框的按钮区别于内容文字，这需要设计师除了考虑配色外，还需要考虑按钮出现的场景，对设计师的在应用场景的解读上也是一个挑战。
7.聚焦大图
一张与屏幕等宽，竖方向占据半个屏幕左右的大图，去掉actionbar，只保留返回按钮的设计，在一两年前十分流行的summly应用上就已经非常火了。
后续也有一些应用跟进这样的设计（例如淘宝），但并没有大面积流行起来。
MaterialDesign很大胆地使用了这样的设计。
在Google的引导下，这样的设计风格将很有可能风靡起来。
3、利用MaterialDesign开发应用
3.1MaterialDesign使用教科书（Google）
首先首先Google在设计规范中增加了两个大的分类：
“WhatisMaterial？
”和“What’snew”。
在“WhatisMaterial？
”中，MaterialDesign构建的是一个3D的环境，每个对象都有X、Y、Z三个纬度。
在这三个纬度中，Z轴的高度是统一的，X、Y轴的尺寸我们则可以根据需要自行安排。
当然，由于整个环境是3D的，所以我们开发实验室研究生管理系统的客户端时应该以一个立体化的视角来审视里面的对象。
比如来说，对象可以堆叠但不可以互相穿越、光影的正确分布等等。
设置“WhatisMaterial？
”这个新分类，主要是想让新来的访客在进入实质化的内容之前更好的认识MaterialDesign的世界。
“What’snew”分类顾名思义就是让你可以更方便的追踪MaterialDesign的更新。
在AndroidDesign中，是在每个分类中直接做更新，这样很明显不利于人们持续发现新内容。
“What’snew”则提供了一个全新的板块让人们直接获取这些内容。
除了增加了这两大分类，在若干已有的分类中有了多达十几项的更新。
像时间选择器组件、更加详细的导航抽屉设计指导、导航过渡效果、滑动技巧、刷新技巧、错误规范、图标设计指南等都包含在内。
由于AndroidLollipop已经正式发布，所以这次materialdesign还针对设计师群体放出了更多素材。
无论是系统图标信息还是调色板和字体文件都得到了更新，有助于对实验室研究生系统客户端界面进行更丰富的渲染。
总结来说的话，MaterialDesign的主要特点就三个：
有触感的表面、大胆的平面设计以及流动化的动作效果。
采用materialdesign的原则和相关素材开发本次设计的实验室研究生管理系统的客户端：
第一点可以让设备对人体动作及时做出反馈；第二点可以让用户（学生、教师）聚焦内容本身；第三点则可以让用户（学生、教师）了解整个系统是如何运作的，进而让人们更好的使用各个平台操作实验室研究生管理系统。
3.2基于MaterialDesign的AndroidL界面设计
android5使用MaterialDesign风格，并为android提供了三种MaterialDesign风格Theme。
分别是：
1@android:
style/Theme.Material（darkversion）
2@android:
style/Theme.Material.Light（lightversion）
3@android:
style/Theme.Material.Light.DarkActionBar
LightmaterialthemeDarkmaterialtheme
我们可以以这三个Theme来定义我们的Theme，比如：
--inheritfromthematerialtheme-->
Theme.Material">
--Mainthemecolors-->
-- yourappbrandingcolorfortheappbar-->
colorPrimary">@color/primary
-- darkervariantforthestatusbarandcontextualappbars-->
colorPrimaryDark">@color/primary_dark
-- themeUIcontrolslikecheckboxesandtextfields-->
colorAccent">@color/accent
我们可以修改每个位置的字或者背景的颜色，每个位置的名字如下图所示：
3.3较低版本使用MaterialDesign风格
要在较低版本上面使用MaterialDesign风格，则需要使用最新的supportlibrary（version21），可以直接把项目引入工程，或者使用gradle构建，增compile dependency:
dependencies{
compile 'com.android.support:
appcompat-v7:
+'
compile 'com.android.support:
cardview-v7:
+'
compile 'com.android.support:
recyclerview-v7:
+'
}
将上面的AppTheme style放到res/values-v21/style.xml，再res/values/style.xml增加一个AppTheme，如下：
--extendoneoftheTheme.AppCompatthemes-->
--customizethecolorpalette-->
@color/material_blue_500
@color/material_blue_700
@color/material_green_A200
这样可以同样实现很多对象的MaterialDesign风格,但是由于低版本不支持沉浸式状态栏，有一些效果还是无法实现。
3.4卡片布局使用MaterialDesign风格
3.1和3.2中陈述了主题应用MaterialDesign的样式，卡片布局也是MaterialDesign的重要组成部分，下面说在程序中创建复杂的MaterialDesign样式的List和Card如何进行。
可以使用RecyclerView和CardView组件,这两个组件是在最新的supportv7包（version21）中提供的。
因此需要引入依赖包：
dependencies
{
compile'com.android.support:
appcompat-v7:
+'
compile'com.android.support:
cardview-v7:
+'
compile'com.android.support:
recyclerview-v7:
+'
}
创建List
RecylerView组件是一个更加高效灵活的ListView。
这个组件时一个显示大数据集的容器，可以有效的滚动，保持显示一定数量的视图。
使用RecyclerView组件，当你有数据集，并且数据集的元素在运行时根据用户的操作或者网络事件改变。
RecylerView类简化大数据集的显示和处理，通过提供：
布局管理者控制元素定位。
在通用的元素上操作上显示默认的动画，比如移除和增加元素。
使用RecyclerView组件，你需要指定一个Adapter和布局管理器，创建一个Adapter继承RecyclerView.Adapter类，具体的实现细节要根据数据集合视图的类型变化，具体信息，看下面的例子。
一个布局管理器定位Item视图在RecyclerView中，决定什么时候去回收它当他不再可见时。
当重用（或者回收）一个视图时，布局管理器可能会请求适配器（Adapter）去替换子视图中的内容用不同的内容。
通过这种方式回收重用视图，可以减少view的创建和避免更多的findViewById（），从而提高性能。
RecyclerView提供了以下内建的布局管理器：
LinearLayoutManager显示Item在一个水平或者垂直的滚动列表中。
GridLayoutManager显示Item作为网格布局。
StaggeredGridLayoutManager显示Item在交错的网格布局。
也可以自己通过继承RecyclerView.LayoutManager类创建自定义的布局管理器。
RecylerView组件
动画：
RecyclerView默认情况下就有动画，在删除或者增加Ite的时候。
如果需要自定义动画，继承RecyclerView.ItemAnimator类，并且使用RecyclerView.setItemAnimator（）方法将定义的动画设置到我们的视图中。
下面开始看例子：
1.首先在xml布局文件增加一个RecyclerView
--ARecyclerViewwithsomecommonlyusedattributes-->
android:
id="@+id/my_recycler_view"
android:
scrollbars="vertical"
android:
layout_width="match_parent"
android:
layout_height="match_parent"/>
2.然后在我们的Java代码中使用，附加Adapter和数据就可以显示了。
publicclassMyActivityextendsActivity{
privateRecyclerViewmRecyclerView;
privateRecyclerView.AdaptermAdapter;
privateRecyclerView.LayoutManagermLayoutManager;
@Override
protectedvoidonCreate（BundlesavedInstanceState）{
super.onCreate（savedInstanceState）;
setContentView（R.layout.my_activity）;
mRecyclerView=（RecyclerView）findViewById（R.id.my_recycler_view）;
//usethissettingtoimproveperformanceifyouknowthatchanges
//incontentdonotchangethelayoutsizeoftheRecyclerView
mRecyclerView.setHasFixedSize（true）;
//usealinearlayoutmanager
mLayoutManager=newLinearLayoutManager（this）;
mRecyclerView.setLayoutManager（mLayoutManager）;
//specifyanadapter（seealsonextexample）
mAdapter=newMyAdapter（myDataset）;
mRecyclerView.setAdapter（mAdapter）;
}
...
}
3.Adapter提供访问数据集中的Item，创
升级会员 