E-TASK--(3) 设计登录界面

12-7-18

前天，开始指导老师找到我们的团队开了个会，认为我们要赶紧开始完善界面。于是决定，让我暂停前台代码的学习，直接开始学习和进行界面的设计。 

然后，又过了两天。

 

第一天，由于一直在学暂时什么都用不上的代码，一直期待开始着手项目的界面设计。但是突然机会来了，却有点无所适从。

一下午都在思考怎么样完成这个界面方案。结果想太多了，脑子一团浆糊。思维的惯性始终缠着我，走到哪里都在想这个，但是越想越糟糕。整个人都好纠结…… 

第二天，决定摒弃这种糟糕的状态。一个人急躁的心态下不能完成一个成功并且让人愉快的设计。听听音乐，看看杂志，换个心情，找找创意。接着学习《交互》，感受设计的美妙。让脑子活过来。 

第三天，今天。

 

Oops, not an easy thing. 

我加入这个团队的时候，需求挖掘和交互界面设计已经完成了，并且大家已经使用一个较简略的界面开始了功能的实现。我要做的工作实际上主要是系统的视觉设计。 

了解项目背景，确定界面风格，设计典型界面，完成所有界面。 

e-task系统，是一个基于微博的任务管理系统，提供给公司、企业使用。使用者以微博的方式收发“消息”和“任务”，收发消息的功能和当下流行的微博类似，便于使用者表达和交流，而多出的收发任务的功能，则可以让使用者在部门、上下级之间布置或接收任务，同时每个任务都有相应的任务空间，任务可以查看和更新进度，转发、评论等等，同时系统中贯穿一些细节，最终目的，帮助公司行政实现可视化、扁平化。

总结一下产品性格：效率/简洁。亲近/清爽。严谨/条理。

 

微博是一个方便人交流的工具，它旨在让人们的生活更加轻松愉快，因此大多微博网站都选择了轻快的蓝色和清淡的界面。而公司管理，强调的是效率，给人一种有压力的感觉。怎样把这两个几乎矛盾的性格融合到一种界面中去，让我大伤脑筋。这都是后话了，再难也要自己一步一步来。这是个题目，但没有人能告诉我正确答案，它就没有正确答案，嗯，是个好题目。

 

下一步，头脑风暴。根据开始在网上查找图片，随意翻看制作优良的网页。不过看的时候，要紧紧地盯着刚刚总结出来的产品性格！它将是之后所有任务的纲领。留心让你有和这个几个关键词感觉类似的图片和设计，有感觉了就收集下来，或许它就成了你设计的一个元素。

《交互》上面贴心地提供了几个实用的网址：

全景网：www.quanjing.com

国外图片网站汇总：www.qkankan.com/photo 

翻看了大量的图片和网站，我得到了很多启发。别人脑子里的奇妙想法让我思路大开，恩，这就是分享的伟大力量啊！

 

按照组长的安排，我从一个登录界面着手，尝试实际的界面设计。

先介绍一下登录界面的交互设计吧。e-task的登录界面要求实现两个功能：用户登录+员工照片展示。设想的员工照片（当然同时有员工的姓名、部门等）展示目的是让上下级或者员工之间，在登录该系统的时候，能够有一个窗口互相了解，这也是我们帮助企业实现扁平化管理的一个细节。按照指导老师的设想，页面分为左右两块，一边登录，一边展示。 

那么我现在想要做的，就是以这个作载体，尝试寻找和确定我的界面风格。 

这个过程中我一直在想象界面的细节，想想怎样的配色和模块风格才适合这个界面。头一次认真做界面设计，我知道我会碰很多壁，但是无论如何，其中创造的过程和最终得到作品的结果的乐趣是无法阻挡的！加油吧，少年~

之前的设想得几个配色方案：

最终觉得最妥帖的是深红、深蓝和灰白黑的搭配，因为在我心中对这个项目的诠释，严谨终究占了上风，只有轻快的颜色会让界面失去这种品质，而像褐灰、橙灰这一系的颜色似乎又少了点活力，深红、深蓝、墨绿这些颜色与灰色性搭配感觉就很不错，相搭配，除了红绿相差太大，都很不错，而之所以倾心红蓝使因为，e-task实际上是为PICC准备的，而PICC企业的主体色是红色所以选红色以迎合该企业的审美，而且主流微博的颜色基本都是蓝色，出于对前辈行事的尊重（虽然深蓝和浅蓝差别太大），我偏执的选择了它。但是实际上，光看这几个颜色，还是觉得比较死板，怎样体现出微博的灵动轻快，就要看具体的细节处理了。

 

在网上搜索各种设计以后，Tweeter登录界面和爱奇异、朋友网的几个界面让我有了点子：

上方的一大块纯色背景，大气，简洁。下面是照片。不过，这种照片size只不过能起到一个点缀美观的作用，对于我需要的功能来讲偏小了。

看~左右两边布局……左边是图片展示，右边是其他功能。这是一个不错的方案。

这个左右布局更清爽了，更接近我想要做的。啊，我可以想象我的照片展示出现在左边是多么可爱~~

 

用PS简单借这几个精彩的界面为素材按我想要的方式变换重置实现一下，看看大致效果：

相当不错！

弄完这些，时间也不早了。好好的自恋一下，欣赏一下自己的点子，啊，真是不错啊~哈哈哈哈哈…… 

明天，用PS实际绘制该界面的设计图稿。