61阅读

浅谈日式平面设计-拒绝平庸:浅谈用户登录页面的设计表现形式

发布时间:2017-09-10 所属栏目:新中式平面设计

一 : 拒绝平庸:浅谈用户登录页面的设计表现形式

用户活跃度是检验产品成功与否的重要指标之一,传统行业的商家极为重视门面的装潢,因为一个好的门面可以聚集人气,招揽更多的顾客。古时候的大户人家院子门口的石狮子或其他的摆件的摆放极为讲究,有一定的风水学说道理,更能彰显主人家的身份地位。由此可见,“门面’就如人的脸面之于人的形象一样重要,而WEB的登录页面就相当传统的“门面”。

现在越来越多的大型网站把登录和首页放在一起设计,由此可见登录页面的重要性,一个出彩的登录界面,将提升产品的品质,赋予产品独特的气质,登录界面也是一个发挥情感化设计,提升用户体验,拉近与用户之间距离的兵家必争之地,本文不谈趋势,不讲交互大道理,不涉及技术,就侃侃用户登录页面的一些设计表现形式。希望这些设计表现手法能给大家带来一些启发和灵感。

优雅大方

如果说iPad是介于传统电脑和手机之间的产品,那么tumblr则是介于blog和twitter之间的服务。相比twitter,它的功能更复杂、内容展示性更强、更加重视多媒体的应用。Tumblr做为轻博客的鼻祖,带来一种全新的视觉体验, 安东尼·德·圣-埃克苏佩里曾说过,“完美就是多一点则太多,少一点则太少。” Tumblr的登录页面没有过多的视觉干扰,优雅大方,一切元素的存在都是为了用户更好的登录,登录过程非常流畅。

 拒绝平庸:浅谈用户登录页面的设计表现形式

精致的质感表现

iCloud是苹果公司所提供的云端同步服务,用户有5GB的免费存储空间。 负责Macintosh用户界面设计的柯戴尔·瑞茨拉夫回忆说:“乔布斯会一个像素一个像素地检查屏幕上的每个细节,确保相关的图像准确对齐。他非常重视细节,细致程度居然达到了像素的层面。如果发现问题,乔布斯就会立即冲着某个工程师大吼起来。”iCloud登录页面的设计继承了苹果公司对细节的苛求, 细致的纹理,微妙的阴影,精致的质感,完美的细节,金属光泽可以随着鼠标指针移动,底部的图标可以随着分辨率的大小自适应,改变排列方式,确保用户的浏览体验。

iCloud给我们上了很好的一课,有句大家都听过却未必做到的话——细节决定成败,丰富的细节可以提升设计的价值,也是判断一个设计高下的一条很重要的标准之一,精致舒适的质感纹理,给用户一种沉浸式,充满惊喜的登录体验,是一种很棒的表现方式。

 拒绝平庸:浅谈用户登录页面的设计表现形式

小清新的插图

在网页设计中,插图非常具有表现力,它与绘画艺术关系密切。所以大部分设计职位,对手绘能力出众者格外青睐,许多表现技法都是借鉴了绘画艺术的表现技法。插画艺术与网页设计的的结合,具有独特的艺术魅力,从而更具表现力。越来越多的设计师,将插画运用到网页设计中来,生动有趣温情的清新插图,能迅速的抓住用户的眼球,让登录界面的更加具有亲和力,

163邮箱的登录页面就采用了大幅的插图,小邮差很快唤醒了80后等待来信的记忆,有故事的插图与用户建立情感的联系,唤起用户的心灵共鸣,让用户更有归属感。

 拒绝平庸:浅谈用户登录页面的设计表现形式

Vimeo是一家提供高清视频存放服务的网站,在这里可以找到很多来自世界各地非常有创意的设计师。相信登录过Vimeo的朋友都对Vimeo的登陆页面记忆深刻。

 拒绝平庸:浅谈用户登录页面的设计表现形式

人文关怀的品牌传达

设计以人为本,以人为本的设计不仅能提高产品的品质,还能提高设计的艺术水平,而登录页面是体现人文关怀,传播品牌理念的绝佳位置。

QQ邮箱登陆页面每一次刷新都能看到不同的内容,或用海子的诗,或用迈克尔。杰克逊的歌词,唤起用户的共鸣,设计手法简洁,主体信息突出,引导清晰,并没有多余的元素,界面中最重要的操作“登录”按钮使用了交通中通行的绿色,而没有使用常用的蓝色,细节设计非常考究,对每个细节都注入人文的关怀。

 拒绝平庸:浅谈用户登录页面的设计表现形式

新浪微博将登录框设计成一条围脖的样式,用户的每一次登录都是一次品牌传达的过程,切合新浪力推的围脖品牌理念,织围脖的概念深入人心。

越来越大的登录框

越来越大的输入框设计,让用户输入起来感到心情舒畅,登录过程非常愉悦,在显示器越来越大的今天,mailchimp大输入框显的霸气十足,并且一反常态的可以看到自己的密码,第一次在WEB登录框里见到这种设计,非常贴心。正是这种不拘一格的设计,让mailchimp从一个内部项目蜕变成一个该公司最成功的商业产品。

 拒绝平庸:浅谈用户登录页面的设计表现形式

简约而不简单

WEB设计的风格越来越趋向于简洁,登录页面大量地使用留白可以让登录框更加突出。最大程度的减少用户分心,从视觉的角度来看,简约的设计是平静的,砍掉了多余的元素,颜色,形状和纹理,不能使用让人眼前一亮的设计元素,只能靠空白去做视觉吸引力。布局的权衡及简化设计做的不到位的话很容易变的单调乏味,wordpress后台登陆页面采用适当的投影,灰色的巧妙运用,以及出错的抖动提示,让整个登录页面简约而不简单。堪称典范。

 拒绝平庸:浅谈用户登录页面的设计表现形式

随着互联网的高速发展,移动互联网的到来,WEB设计越来越呈现多元化。尽管一个好的设计并代表产品就一定会成功,但却能为产品加分,为产品注入设计DNA,创造独特的风格和视觉感受, 好了,今天就先侃到这,作为用户使用的入口,希望这篇小文可以让大家对登录页面重视起来,设计出更多精彩的登录页面。

文章来源:Tencent CDC Blog

二 : 浅谈网站前端的交互式设计的一些要点

交互设计如今已是一个十分常见的问题,但许多设计者和开发者仍不知道它的具体意义。今天,我们将从不同于以往的方面:我们将会深入讲解能使你的网站拥有良好交互性的用户界面和设计原则。

首先,何为IxD
交互设计(即IxD)是一块发展迅速的新领域,大致出现于10-15年之前,源于一些体现设计问题的研究,后来被专业设计者鉴别和接受。
交互设计促进人与环境的交流,这里我们指的是人和网站的交流,交互设计师只要考虑用户和电脑的交互,毋须像UX设计者那样思考软件或系统所有涉及用户的方面。你也许在不同大学里听说过人机交互度——这些度基本是在IxD领域中培养的。

一个交互设计师会思考谁是产品的目标用户以及谁会使用它。用户研究者或是信息架构师会提供这些信息。在这些研究的基础上,一个交互设计师为了用户与软件交流,要耗费很长时间但要尽快地创作出这种令人称奇的交互方式。
设计师必须识别出关键交互并且画出线框图, 所以要不停地画草图。有的设计师会直接画出来,有的设计师会用软件来辅助(文末展示了一些不错的例子),还有其他一些设计师会或单独或合作地创作界面。
201676142714467.jpg (600×800)

交互设计(IxD)不断地展现出新的交互方式,因为用户总是期望网站出现新的事物。但交互设计师需要意识到这些特性会如何影响用户,然后在许多想法中选择真正要实现的和可以放一段时间的。
下面我们将会看到一些驱动交互设计的概念。

目标驱动设计
尽管IxD不需要做,但为了获得最好的设计反馈,用户研究查至关重要。用户使用软件时,一般在心里有一些目标,你的应用程序应当很好地满足这些目标。为了成功地结合设计和功能,用户研究恰恰是最重要的元素。
这是如此的重要,以至于许多用户研究员也能找到做交互设计师的工作,就是因为他们在分析用于软件的人类行为模式方面的技能。
简单化

人们不知道用户界面是什么。事实上他们也不关心。他们不知道有人在网站的背后策划着他们所见到的一切。他们只知道他们需要一个简单的网站。他们要一个易用的系统,加载/响应速度快,不要让用户思考并且不给用户伤痛的理由。

情景和模式
我们使用的一些产品通常功能设计的很明确,因此每一个人都知道怎么使用它们。拿剪刀做例子吧。一个三岁的小孩都知道怎么使用它,两个手指伸到两个环中,只有一个活动方式能使用它。没有比这更简单的了。你的网站应该向一把剪刀一样简单易用。
为什此处使用“情景”这个单词呢?因为这个词表达了一个网站或者系统背后一些列的功能。
关于模式,用户界面应当由一系列用户熟知的组件组成,如果用户想提交一个表单,他们首先会找到提交按钮。这个按钮就是个常见元素,设计者没必要在接受一个新项目时每次都重复早轮子。
201676142746362.jpg (600×450)

有些人会说了仿照现有的模式,不重新造轮子会让人感觉没有创新性。在易用性没得到保障时讨论创新简直就是白痴。记住,易用性和创新性是两码事。
如果你想创新,你仍然需要了解已知的模式。但是,如果你追求高易用性,没有人鼓励你去重复造轮子,因为用户需要时间去适应你的轮子。
创建一个高易用的系统需要交互设计师对约定,情景和web易用性有较深的理解。
现在你了解了一些交互设计的原则,接下来让我们看看一个伟大的交互设计是如何影响用户的。

访客定位
交互设计师需要了解他们的设计面向哪些用户,因此他们能通过用户给产品做好定位。
页面上显示出用户停留的地方,这样的体验不会让用户在浏览时感到困惑。用户也能知道如何从一个页面跳转到另一个想去的页面。让用户知道当前所在的位置这是非常重要的,不要让他们陷入死胡同中。当搜索没有查询出结果,没有告诉用户下一步操作的选择,这样的交互体验是很糟糕的。

持续对话
交互设计把大量精力专注于给予用户持续的反馈。告诉用户他们做的是对还是错,即使在无意识的层面上,这也是一个受用户欢迎的元素。 你只须在用户完成动作的时候,告诉他们已经成功了。
当你在亚马逊上买一件东西时,你会在浏览器上和你的邮箱里获得一份确认书。当你通过联系表单提交邮件时,你会在页面中获得一份确认书。
201676142809993.jpg (600×433)

这使得交互不仅仅停留于网站的浏览和特性使用,更是把交互带到了一个新的层面:它帮助用户更好地理解他们当前的状态,并把疑惑和问题减到最少,同时也去除了用户的挫败感。

IxD还要考虑工作流。如果你有一张注册表单,用户用它提交信息是会有什么事发生?页面会刷新吗,会跳转到首页吗,会显示确认信息吗,会跳转到登陆页面,或者同时跳转到上两个页面吗?
It’s about having many choices and choosing the one that will fit your users expectancies best. 提及的所有元素都是网站工作流的一部分。每次交互后应该紧跟下一个符合逻辑的步骤,并且与你网站之前所创造的体验相符。

视觉层次
为了让用户照你的意思操作,你可以使用视觉层次来帮助他们。你可以使用布局、元素大小和颜色组合达到视觉突出的效果,以此来引导用户的双眼。
你也可以使用视觉层次使用户找到他们想要的东西。你想租车吗?保证你能使用视觉层次来引导用户来到“租赁”页面。

三 : 腾讯全新ROM今日正式开启内测:界面扁平化设计

腾讯的全新ROM Tencent OS今日正式开启内测,而从之前官方给出的消息看,这并非Tita项目的再次启动,而是重新构建的新产品。

对于腾讯来说,虽说Tita项目失败,但他们却不会在这个领域坐以待毙,而Tencent OS可以看作是他们想要通过ROM抢占移动互联网入口的又一个新措施

从目前放出的界面图来看,腾讯全新ROM的采用了现在流行的扁平化设计,内置的软件有天气、文件管理、浏览器等,看起来还比较干净,而官方也是表示,希望让用户拥有更自主的选择权。

同时这个新ROM的壁纸、颜色和字体搭配起来,感觉还是不错的。

 官方网站地址:

http://bbs.tos.cn/

腾讯全新ROM内测:扁平化设计
系统界面以简约为主基调

腾讯全新ROM内测:扁平化设计

本文标题:浅谈日式平面设计-拒绝平庸:浅谈用户登录页面的设计表现形式
本文地址: http://www.61k.com/1101613.html

61阅读| 精彩专题| 最新文章| 热门文章| 苏ICP备13036349号-1