sara.liu

ui设计

JailJT:

Twitter Profile Design

这款设计我可以毫不掩饰地说:太棒了!

Timeline 在中间,其他次要版块两边 "站"

主要的功能键的位置在贴近边框位置,因此可以更方便的点击到

最底部的一抹阴影也让人印象深刻!

缺点也少不了,字体能更粗,更大些就更好了

设计师:Bluroon

神马呢

JailJT:

Timeline 时间轴、既可爱又新颖的播放界面

当然,拍扁的图标设计和红点菜单栏通知

以及回复栏、Emoji 表情这些细节也是非常到位的!

总结:动感 + 霸气 + 文艺!

设计师:Sergey Valiukh

不一样的app

JailJT:

好久没分享与手机 App 有关的设计啦~

今天给大家带来一款风格与众不同的作品

虽说大体给人的感觉与传统的触控屏应用设计有什么不同

但是几乎所有的功能按钮的位置及符号都被细心调整过了

同时整幅作品的渲染也足够给力!值得好评!

设计师:Eric Hoffman

高端中国风

Vivi weilai:

这是一款iPad IOS端的APP ,产品定位方向——高端消费人群以及喜爱传统文化的外国友人。创作这款APP的初衷是想让这个世界多一点可能性没那么无聊。因为在分析竞品Web端的一些产品的时候普遍都是以大红色调为主且内容繁多,千篇一律。所以在这款APP的视觉定位上我用到了新古典主义和一些日式和风的元素~给人以精炼,简朴,雅致的感觉。希望大家喜欢!同时也欢迎大家踊跃拍砖提建议~嘿嘿

搜狐焦点细节设计盘点

细节决定成败呀

awoke|man:



写此文的目的,就是为了和各位探讨一下设计思路,所以没有从整体设计角度出发,只盘点了一些非常琐碎的设计细节,如有不同意见欢迎随时跟我交流。








  1.  登录框设计细节







(由于焦点的门户性质,用户对登录需求不强烈,所以我选择电子交易平台e购房的登录界面做分析。)







  • 设计初衷是为方便用户






登录模块设计了邮箱的自动填充,但是并没有常用的@163、@qq、@gmail等等,而都是搜狐旗下的公司邮箱,这个设计主要是为了让用户提高输入效率,次要是推广搜狐旗下的品牌,但结果却是用户找不到自己的邮箱后缀而不得不手动输入,主要设计目的没有达到,于是这就成了一个本末倒置的设计体验。






搜狐焦点细节设计盘点



优秀细节:

在选择自动填充邮箱后,焦点切换到密码框, 用户登录动作更连贯。




可改进建议:

输入密码时,应该增加大写开关提示,例如:





搜狐焦点细节设计盘点




改进小建议:若是想要简化页面登录注册按钮,也可将登录和注册界面合并.



例如,亚马逊新用户注册与老用户登录整合在一个界面里,降低用户认知学习成本,界面依旧简洁高效


搜狐焦点细节设计盘点






  1.  搜索框设计细节






搜索框在网站设计中比较突出,在焦点这种信息量巨大的网站中尤为重要,是用户使用最频繁的组件,所以优秀的网站在搜索框中的设计一定是最细致的。二手房为例,搜索框采用选择下拉框和搜索框组合,提高搜索结果精度。















  • 反馈要及时也要有记忆








首页搜索模块采用下拉分类搜索, 当输入只一个字母时下拉列表就已经及时的显示了相关结果.


搜狐焦点细节设计盘点






美中不足的缺点,搜索框反馈的内容排序是固定的, 
并不能记住我刚刚输入过的内容.这个设计可以参考百度搜索的设计.(虽然是细微的设计,却充满了诚意,也能让用户爱上你的网页)



搜狐焦点细节设计盘点






可能改进的建议:当鼠标hover状态,下拉列表没有展开,而是需要用户点击操作,连续选择本是一个连贯动作,但每次需要点击鼠标中断了用户流畅的动作。






搜狐焦点细节设计盘点








  • 别让用户遗憾的走








当我准备在回龙观矩阵小区租房,但是我以为小区叫矩阵人家,于是我在搜狐焦点租房板块,搜索矩阵人家结果出现了这个结果...







搜狐焦点细节设计盘点






没有找到搜索结果让我很震惊,我只记得小区名字,不知道其他查询办法,于是我断定这个网站收录信息太少,含泪默默关闭了搜狐的网页,打开了ganji.com...






搜狐焦点细节设计盘点








赶集网的结果显然要好很多,主要几点:



1.给出建议,减少用户思考,防止用户不知所措。



2.结果配合吉祥物卡通图片,降低用户认知成本,强化品牌概念,用户倍感亲切。



3.对关键词作出判断,系统根据我的搜索关键词,给出我可能要找的结果,大大增加用户再搜索的操作成本,用户好感度大增。






在设计关联导航时,应该为用户设计好“下一步”操作和相关联的链接,避免出现空空的界面和用户不知所措的看着屏幕。考虑周全的设计会建立起网站内部关联的关系网络,推荐访客可能相关的操作或结果,不应该留一片空白给用户,否则只能看着用户带着遗憾离开你的网站。












  1.  信息架构的细节设计








(以二手房页面为例)处理多个搜索结果是很头疼的事情,将信息分类,给商品贴标签已经成为组织成网站信息架构的有效手段。下面是条件检索中手动输入限制条件的设计。











  •  
     温和的对待用户








以价格为条件将商品分类的时候,网站支持用户手动输入价格区间,本是很人性化的设计,却留下了一些影响体验的遗憾。







搜狐焦点细节设计盘点






当如图所示,输入5000-1000的区间后,系统会弹出一个对话框,提醒你按照价格范围(也就是从小到大的顺序)输入。






这是一个很不友好的操作提示,让用户本来流畅温和的体验突然被弹出窗口打断,而给用户心理造成了厌恶感,不仅影响流畅操作也给用户心理造成压力。在设计过程中应该极力避免弹出窗口。






这一点设计可以参考淘宝网的设计。






搜狐焦点细节设计盘点






淘宝网的手动筛选当输入5000-1000,系统会智能理解用户而不是只理解数字逻辑,显示结果为1000-5000区间的商品。



并且输入框还限制了输入内容只能为数字,当你输入字母或标点后光标抖动,这样不会有对话框打断用户的操作(焦点二手房的输入框是允许输入非数字的,输出结果当然也是弹出对话框)。


这种识别程序应该被设计的更有智慧,优秀的设计能默默纠正错误而用户毫无察觉。







  1. 合理的信息展现形式







简洁的页面让用户更舒服,能更好的传递想表达的信息。门户网站的首页信息密集,用户难以找到需要的内容,Hick定律告诉我们面临选择越多,用户决定的时间越长,需要辨别信息的思考也增加,同时用户耐心会降低,导致用户离开网站不会再来。



那么面对门户网站繁多的信息,合理的信息架构和内容组织就至关重要了,不仅能使网站变得简洁,还能保留信息被用户发现。










  • 巧妙的广告投放位置






如下图,搜狐焦点家居主页左侧,有四个展开信息列表,列表上层导航按钮处加入了沙发和卫浴的广告,由于导航栏要与整个左侧页面宽度对齐,所以这个广告投放巧妙地利用了导航栏多余的位置,从观众熟知的广告位脱离出来,引起观众注目增加了转化率、点击率,同样也节省了主页的空间。






搜狐焦点细节设计盘点







同样巧妙的还有亚马逊左侧全局导航的广告设计






亚马逊利用导航栏自动展开的空白出,放置了与该导航页面相关的广告,大大提升广告和用户相关性。





搜狐焦点细节设计盘点








合理的信息架构和内容组织可以大大节省页面的空间,提升页面层次感,还能提升转化率,并且最重要的是提升用户体验。



还有很多广告展示的细节,比如hover显示更多内容、随着鼠标轨迹动态展示等,都合理地利用了信息架构展示原则。








  • 焦点通的去全局导航设计







进入搜狐二手房板块,每个页面都有顶部的搜狐导航甚至是搜索框,唯一没有顶部全局导航就是焦点通的页面。焦点通是针对房产经纪人的房屋发布管理平台,由房产经纪人登录后进入。



由于使用者是房产经纪人,考虑到他们的使用场景(同时管理多个网站的帐号,只对自己发布的房源信息感兴趣,没有浏览其它网站内容的需求),所以焦点通的设计思路也是,功能工具化、页面差异化、尽量简洁页面,去除一切不需要的信息,这就是去除全局导航的关键原因。








搜狐焦点细节设计盘点







设计网页功能应该充分考虑用户使用场景,了解用户真实需求才能有的放矢,否则再华丽的设计也会是徒劳无益。







我也试试

暇~-~:

Cup noodles:

就要开始IOS7项目了,先练练手。=0=宅男常用软件,不知道小伙伴们看不看的出来。

交互设计师应该如何设计作品集

好东西,收下啦!

暇~-~:

史蒂夫的交互研究/UX:

作作品集是反映设计师设计水平最直观最有说服力的材料,而作为一个交互设计师,应该如何设计自己的作品集来证明自己的专业水准?知乎、Quora、ux.stackexchange.com等论坛都有相关的讨论,本文总结这些观点并针对自己求职的体会,探讨交互设计师的作品集应该如何设计,以期为旨在从事交互设计工作的同仁提供帮助。

既然是交互设计的作品,则不同于GUI或平面设计,也不是用户研究的结论展示,而应该是面对问题,综合考虑提出最佳的解决方案并将其实施执行,因此交互设计师的作品集应该重点突出实际项目中面对问题提出解决方案这一系列过程,以及最终的效果。

1. 设计案例最好是实际项目,而不是自己做的再设计

交互设计师在实际工作中会遇到各种问题,面对的需求也可能五花八门,需要与很多不同工种的同事进行沟通,面对这些限制和问题如何找到最本质的需求,在所提出的各种方案中找到最优解是非常重要的能力,这些只有在真实项目中才会遇到,而自己所做的再设计方案并不能遇到这些问题,因此作品集应该尽量展示这些实际项目。

尽量选择实际项目

2. 说明解决问题的过程,以及效果

交互设计是对需求和问题提出最优的方案,单一的方案并不能很好的展示自己的专业性,设计案例应该描述项目或者需求的内容、存在的问题、设计师的提案及相应分析、最终方案的优越性,最好能展示该方案最终的实际效果,例如带来了多少流量、注册量等。建议使用故事版、流程图等直观的形式来展示这些内容。

展示解决问题的整个思考过程

2. 使用去掉视觉效果的线框图

加上视觉效果的设计稿容易让人将更多注意力置于非交互的部分,因此交互设计案例应该尽量展示线框图和流程图,并配上一定的文字说明。线框图可以采用多种形式,包括手绘图、Visio或者Axure做的线框图,尽量采用多种设计工具来展示自己的专业性。

使用线框图

3. 尝试使用具有交互效果的展现形式

单纯的方案截图并不能很好的展示设计元素的各种模态、交互流程和效果,特别是移动产品的设计,因此使用动画效果来展示方案,但是不应该使用过多繁复的操作增加阅读者的成本。

交互性的展示

4. 注意图片尺寸,展示设计细节

每个设计方案图片应该突出一两个重点来阐述该方案的优越性,而且太大的图片会增加页面的加载速度。单纯的图片也不能很好的说明方案成立的原因,需要添加一定的文字说明。

方案的细节说明

5. 注意整个作品集的品味、审美素质

交互设计师虽然更关注产品的信息架构、操作流程等方面,但也应该注意作品集的整体性和美学性,注意作品集给用户带来的体验,这也可以更有说服力的展示设计师的专业性。

注意作品集的品味

6. 提供最能体现自己水平的作品

阅读者在浏览作品集时通常会认为这就是设计师最好的作品,因此应该细致的打磨作品集中的每一个案例,尽量展示最能体现自己专业素质的设计,而对于自己所做的设计小品,本人认为与交互设计关系甚远的应该删去。

提供最佳的作品

7. 避免设计案例版权问题

实际项目中的设计方案,很多时候都涉及版权问题,设计师在选择案例时也应该有所注意,未上线的项目或者签了保密协议的项目更应该

by:由jupeterlee供稿,转载请注明来源。