Task6 Web应用设计 - xueyuan123/519 GitHub Wiki
交互设计是web应用的可视性、动态性、功能性和技术性元素的交织，其目的是很好地将这些元素综合并解决相互之间的冲突，以提供给用户感兴趣的、有吸引力、一致的和易于理解的体验。其中最主要的就是用户交互。
首先，用户登录的界面我们需要用户通过点击按钮从而提交表单，该表单包括账号以及密码。当用户输入正确的账号以及密码的时候，用户就可以进入自己的主界面，否则，网站就会根据用户的输入的情况提醒不同的信息。例如，账号不存在或者密码错误。 当用户进入主界面之后，我们提供了许多诸如链接的交互方式。因此，用户可以通过这些链接与网站进行交互
由于本web应用的应用页面经常需要展示大量的信息、信息上的操作，以及信息之间的关系。因此，我们需要合理的组织用户界面，这样就会使用户更加清晰地明白地理解这些信息的含义。在本web应用中，我们采用导航的方式来组织用户页面，并且节点一次以大HTML页面方式发送给用户，不包括脚本。
在全局导航上，我们设置了一个搜索框，方便用户随时进行全局内容搜索，这在全局导航上是最直接，最高效的导航方式。同时提供了多个链接关联到与用户信息设置有关的页面。这两方面的导航已经足够用户在组织为网络结构的内容信息中快速准确地找到自己感兴趣的内容。 在局部导航上，我们根据用户所处节点的种类提供不同地导航策略，例如，用户在访问其他用户发布的图片内容时，我们的导航包括所访问用户的信息浏览，所访问图片的信息（包括描述和其他用户的评论），还有对该图片进行评论的导航；而在访问图片类别搜索页面时，我们提供多种图片种类信息导航，搜索出的特定图片导航。原则1：用户界面应该是基于用户的心里模型，而不是基于工程实现模型
原则2：培养用户使用情景的思维方式做设计
原则3：尽量少的让用户输入，输入时尽量多给出参考
原则4：全局导航需要一直存在，最好还能预览其他模块的动态
原则5：提供非模态的反馈，不打断任务流
原则6：不要让用户等待任务完成，用户还要发现更多有意思的地方
原则7：自动保存用户的输入成果
原则8：为了程序响应的速度，设计有时候需要担任掩护的作用
此网站本着简单易用的原则，以用户使用的习惯为第一要义。网站首选是以注册为主题，防止用户找不到注册苦恼。将节目尽可能简洁化，但又不失新颖性和美观，以一副很美的照片作为背景，并将登陆选择放在左下角，整体上体现简洁性易用性为主，并保证组件清晰明亮，融入照片中，保持其可观赏性。登陆时和注册时采用不同的照片，增加页面的多样性
进入后为保证用户的习惯，采用大家较为习惯的微信朋友圈的形式展示照片，上面有一副不断变化的背景照片，下面则是各用户所传的照片。对于每个照片的组件，为就像大多数分享信息类网站，小图标，然后可显示多少赞，多少评论。组件简单，用户是否感兴趣，看了照片之后可点击进入大照片，之后以白色为主，采用简洁易懂的logo，使用户可以清楚的分辨赞和评论，然后可在图片下评论，评论保证其可伸缩性，用户可自行就行浏览。在主界面的上方有分别的标志蓝，可进行不同的操作，如进入主界面，进到个人主页
在个人主页里面，还是以照片为背景，因为是一个图片分享网站，所以到处都会充满着照片，然后采用简明易懂的logo，是用户一下就可以明白logo所代表的含义，如已经传了多少个照片，有多少好友等
整个网站采用了多种logo，布局以上面照片，下为主题为主。界面布局以静态为主，但通过不同背景照片的切换，增加了生动性，丰富了效果。组件的照片均采用线框，具体logo和美工细节在此不一一加以详述
a.注册页面，访问本网站默认第一步进行注册。注册页面以简洁实用为原则， 正中间是用户名，密码和昵称的注册
b.登陆页面，同注册页面相似，只是中间只需要用户名和密码的输入，另外背景照片有 所变化，布局设计仍然以简洁实用为主，登录和注册页面都采用了静态的布局设计，追求了画面的美观效果
c.pages页面，这一页面主要有上下两部分构成，最上面是一个bar包括了pages Home information；页面上部分是可以自动横向滑动变化的三张图片；下面部分则是图片动态区域，可以看到好友发布的图片状态，每张图片都是自成个体，嵌在一个相框中，相框下部有点赞和评论的数量。点开一张图片生成一个新的次级页面，照片在左侧，右侧从上到下分别是，发布人，评论操作栏，评论文字输入区域，评论记录栏。游客在浏览的时候可以在本页面看照片的同时进行评论。用户可以查看评论内容并了解多少人对此张照片点了赞，游客可以对照片写下自己的评论。所有照片以行列布局，简洁大气，易于观看翻阅。上半部分才用动态的照片滚动，丰富了内容，下半部分才用了静态布局，内容明确。
d.Home页面，类似于通常所见的个人中心，最上面是一个bar包括了pages Home information；上部分还是一张图片；中间是一行信息栏，包括了头像，昵称，照片数量，好友数量，访问数量，点赞数量，和上传发布的按钮；下部区域则是属于用户本人所发布过的图片库，图片库的布局和pages中图片库的布局相同。
a.登陆页面用白字标识出了网站的理念“Share your photo.making your dream”。
b.登录和注册按钮采用了圆角设计。
a.注册页面以一张主色调偏深蓝植物与天空的照片为背景，给来到本网站用户的第一印象是，沉稳却不老调，新颖而不浮夸。
b.“share your photo，making your dream”的理念朗朗上口富有创意，也体现出网站建立的初衷，给人愉悦的感受。
由于本次设计的web应用属于小型的web应用，并且给web应用的内容只包含用户发布的图片以及对该图片的描述文字，还有用户之间的评论，所以该web应用所包含的信息并没有非常严格的分类要求，所以我们采用自底向上的信息设计方法，通过分别设计系统各个不同组成成分的内容信息，再逐步自底向上，将不同组成成分的信息进行链接。 对该web应用中的信息进行分类，我们不难发现该应用中信息相互之间关联度较高，且类别比较单一，因为web应用初步规划中对web应用主题的限制（即图片社交），所以对于用户发布的内容，初步只提供对于图片，简单文字（包括评论、互相之间简单对话）的支持。在信息的组织上，我们初步分类为图片与简单文字；而简单文字又细分类为用户信息、图片描述、用户评论、用户聊天文本，其中除用户聊天文本为私密信息只能被特定用户访问，其他信息可以在web应用的搜索功能中搜索访问到。而在用户访问信息时，我们推荐用户对信息协助进行分类，所以最后用户访问到的图片分类信息基于多个用户的推荐产生，并且我们会周期性地对分类信息根据用户协助分类情况进行更新。
在内容的组织方式上，本web应用使用网络结构进行组织，由于用户可以随时访问其他所有用户发布的内容（假设用户未被拉黑的情况下），所以其内容架构类似于网络架构，并不包含明显的层次性，但是在网络架构内的每一个独立节点（如某个用户的信息或者用户发布的某一条图片信息）中，我们的内容组织又具有局部的层次结构，比如对某条图片信息的描述以及其他用户对该图片的评论从属于该图片，或者某用户的id与注册信息从属于该用户节点等。选择这样的内容组织方式是因为该组织方式既兼顾了内容信息获取的灵活性，也兼顾了一定的结构性。用户通过web应用的搜索即可一步访问到其他特定用的信息，而不用一层一层的获取冗余信息，同时在进入其他用户节点后又能根据节点中的特定层次结构轻而易举地获取该节点中某一段特定内容信息。
为方便用户在该web应用中可以容易而又规范地获取相应内容信息，我们采用了在全局上提供搜索导航以及常用设置导航，在局部对独立节点中信息进行精细导航的策略。
在全局导航上，我们设置了一个搜索框，方便用户随时进行全局内容搜索，这在全局导航上是最直接，最高效的导航方式。同时提供了多个链接关联到与用户信息设置有关的页面。这两方面的导航已经足够用户在组织为网络结构的内容信息中快速准确地找到自己感兴趣的内容。 在局部导航上，我们根据用户所处节点的种类提供不同地导航策略，例如，用户在访问其他用户发布的图片内容时，我们的导航包括所访问用户的信息浏览，所访问图片的信息（包括描述和其他用户的评论），还有对该图片进行评论的导航；而在访问图片类别搜索页面时，我们提供多种图片种类信息导航，搜索出的特定图片导航。我们的web应用提供了如下几个功能：注册、登陆、分享图片、浏览图片、关注用户、查看关注用户的图片、评论图片、点赞图片、修改个人基本资料等基本功能。
注册使用邮箱注册，登陆时有用户名即邮箱的检测提示等功能，忘记密码则通过邮箱找回密码。 分享图片则支持各类型的图片格式如jpg、png、jpeg、gif等，在每张上传图片时会附加一个120字以内的描述。 浏览图片时提供的是缩略图模式的浏览形式，点击之后以模态框的形式展示原图以及可以评论、点赞转发等均在该模态框内实现。 分享图片则可以转发，其他关注你的用户也能够看到你分享的图片。 关注用户则可以在个人页面中查看你所关注的用户上传的图片，在index界面显示的是所有用户上传的图片按照时间以及点赞数排序。 评论支持30字以内的文字评论。 修改个人基本资料包括：头像的修改、昵称的修改以及个性签名的修改等.