B端界面设计文章及欣赏

超实用的格式塔原理小科普

用心设计

整体的统一感知:大脑会将复杂的视觉内容简化为容易理解的整体,如图所示;

23gst20151101

隐秘而伟大!FACEBOOK 好友图标的设计改版背后的故事

博博

为了对称,我将她肩膀上的缺口补上了,但是作为一个形象剪影,她的头发太像《星球大战》中黑武士的头盔了,所以发型还需要进行一些调整。马尾辫足够现代,也非常女性化,看起来会给人年轻的感觉,但是在32像素的宽度之下,马尾辫的效果看起来像是某种啮齿动物。如果改成长发披肩或者其他的造型,在如此低的分辨率之下也难以准确表达、消除歧义。所以,最终我使用了一个更加爽利精致的短发形象。

更新完女性剪影之后,问题来了:旧的男性剪影似乎也有些僵硬而过时。于是,我调整了男性剪影的发型,令其更加平滑,让肩膀的弧度更大。在更新这个图标设计的时候,我发现Facebook的常常会用男性单人图标来表示“添加好友”。这样的设定似乎并不公平,或者说是不准确,难道所有的朋友请求都应该用男性标识来传达么?唯一的性别图标是不恰当的,所以我准备了一组。

成功的用户界面拥有的8个特性

用心设计

清晰度是用户界面设计最重要的元素。事实上,用户界面设计的所有目的是为了使人们能够与您的系统通过沟通和功能来进行交互。 如果人们不知道你的应用程序怎样工作或在你的网站上应该去哪里,他们会困惑和沮丧。

成功的用户界面拥有的8个特性

UX/UI,使你的产品拥有病毒式传播力

用心设计

当你已经定义了你的目标用户而且只想通过一张嘴来提升产品,你应该直击它们的心灵和感受。如果你创造出了强烈的感受,你会使大家都在谈论这个产品。 因此,你应该分析他们的需求和典型的人口特点来创造显著的情绪反应,这种情绪愿意与他人分享。顺便说一句,这种反映的不同取决于产品的目标不同:你可以敬 畏他们,震撼他们,惊讶他们,鼓励他们,迷惑他们——任何强烈的感受将会鼓励用户告诉其他人这种体验,并且与他人分享。

拿什么拯救你,“尴尬”的UI界面?(一)

用心设计

在我的小心脏都快停跳了的时候,我的电影突然出现了。

这一点都不人性化好吗?

相比之下,播放影片的界面就好多了。在远程遥控上点击”播放”后,屏幕中显示出整洁的提示,告诉我影片即将开始播

appletv

巧用视错觉 UI更有趣

用心设计

巧用视错觉 UI更有趣

格式塔原理解释了人们如何以视觉方式感觉物体,以及图像的结构,视角,大小等要素是如何影响我们的视觉的。

在下面这篇文章中,我们首先会简单介绍一下格式塔原理中的基本概念,然后再详细探讨一下如何将它们应用于今日的UI设计中。

洗脑推荐!有哪些色彩丰富的极简APP设计?

周周

colorful-minimalism-app-design-1

自从几个互联网公司的产品带领了白色简洁设计,所以现在在国内不用白色的设计便不能叫做好设计。我们打开所有的应用,从娱乐到阅读,到社交工具到备份工具等等,一切都是白色。这一期我们来洗洗脑吧,看看国外优秀的其他色设计吧 >>>

5大黄金准则,设计你的移动端邮件

用心设计

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供有效的UI界面设计BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

每一个扁平化界面设计,都是我们的心灵碰撞致力于最棒的 metro ui 设计

来源:莫贝网

 如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

移动设备上的邮件设计不仅仅是一个内容填充列表,它涉及诸多设计元素。

对于移动设备的设计从来不是一件简单的事情。人们采用不同的方式使用网络,我们需要考虑一个全面的方案,特别是在小屏幕上使用邮件。

让我们一起来探讨关于移动设备上的邮件设计需要考虑的问题,这些讨论并不意味着能够解答手机邮件设计上的所有问题,但这是一个好的起点。

1.保持简洁

严禁复杂—尤其是在邮件上。始终避免使用复杂的结构,否则在小屏幕上渲染时一定会失败。请记住许多设备是不支持媒体查询的(例如谷歌邮件),所以我们不能指望成熟的内容重排技术。

一个线性简单的布局在大多情况下都能表现良好。

邮件的整体大小也非常重要,如果它超过了预设的大小(大概100KB),你的邮件将不能完全加载。我在所有的客户端上都没有测试出这个问题,但是谷歌邮件和IOS设备出现了这个问题。

下面这张截图里,你能够看到用户是如何通过点击一个链接查看整个信息:这使得用户不必阅读全部邮件。

1425382039long_mail

 

2.注重邮件目标和折叠

虽然我不是“above the fold”问题的粉丝,不过在移动设备上阅读邮件意味我们要把上半部分放在非常重要的位置。

让用户能够轻松地看到摘要目录,在大多数情况下都能快速浏览内容,从而引导读者深入阅读。

邮件顶部的小段落可以做到这些。

截图

这使得一些重要的客户端(如谷歌邮件,或者IOS和OSX上的邮件)工作更便利。

截图

 

3.调整字体和图片

这个话题只适用那些支持媒体查询的设备。不幸的是,对于那些不支持的设备我们没有任何办法,他们会自己调整文本与图片。

目前,媒体查询能够被所有IOS设备支持,安卓原生邮件应用也支持(但是有一点问题并且Lollipop抛弃了这一特性支持谷歌邮件),还有的黑莓手机和少数的其它手机支持。

IOS设备在字体与图片尺寸上有两个主要问题:

  • 小字体在默认情况下被放大
  • 邮件宽度基于最大的单元

字体被放大通常不能说是一个严重的问题,但是在很多情况会导致文本超出你的布局被剪切。

在你的CSS代码中加入这一行能够轻松解决这一问题。

1
{ -webkit-text-size-adjust: none; }

下面的截图你能够清楚地看到通过添加-webkit-text-size-adjus,红色区域的文本大小是如何改变的,左边的是添加后的,右边的是没添加。

截图

字体调整也影响移动设备上的用户体验。小字体在桌面设备上能够轻松阅读,但是小屏幕上就有完全不同的影响。

看下面这个例子,右边的文字被放大了能够轻松阅读,吸引用户的目光。

截图

一般来说,在移动设备上放大文本字体是一个非常好的做法,特别是对邮件来说。因为阅读的时间很紧张你需要快速抓住用户的关注。

关于图片

你可以为那些支持媒体查询的设备加载针对性图片(可以看看这两篇文章A Slick, New Image Swapping Technique for Responsive EmailsOptimizing images for mobile

4.自定义链接和按钮

移动设备上的邮件设计对于链接需要一点技巧。

首先考虑到将被手指点击,所以保持良好的间隔并严格限制数量。

确保他们很容易点击并可见。此外,永远记住在内联CSS样式表中为锚添加规则:Gmail应用程序链接的样式为蓝色,默认情况下强调他们。

一个潜在的小问题是,Gmail和IOS自动为电话号码,URL和电子邮件字符串(只是Gmail)添加链接。

为避免IOS自动生成电话链接,你可以在你的代码中添加meta标签。

1
<meta name=”format-detection” content=”telephone=no”>

Gmail的解决有一些狡猾:它通过加入一些不可见的字符,以确保字符串不会被识别为一个潜在链接。

我用HTML实体和“中性”span标签做了一系列测试。只有用span标记打破链接的每个部分,才能获得预期结果。

5.添加间距

对于邮件的设计我有一个的建议就是考虑增大文本内容的内边距,这能够显著提升邮件可读性。

医疗软件界面设计系列一:简约的医疗APP应用程序扁平化APP设计案例欣赏

蓝蓝

Bloodnote -控制血压的评论,顾客评级,屏幕截图等,是日常记录和控制你的血压是一个免费的iPhone应用程序。

是由马特Ludzen和彼得Bajtala的BloodNote旨在使具有最小的设计和专业的功能更容易跟踪健康。而不是试图跟踪多个方面的健康,下钻,以帮助一个特定的用户群,使他们能够快速,直观地每天跟踪他们的血压,并随着时间的推移。已经获得不少的融资。

日历

链接

blogger

蓝蓝 http://www.lanlanwork.com

存档