首页

用Airbnb 的产品,帮你快速理解尼尔森10大可用性原则!

资深UI设计者

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

本文聚焦 Airbnb 产品,描述10大可用性原则的应用场景,希望能够帮助你更系统地理解10大可用性原则。

一、系统状态的可见性

Visibility of system status

The system should always keep users informed about what is going on, through appropriate feedback within reasonable time.——Nielson

系统应该在合理的时间内通过适当的反馈,始终让用户了解正在发生的事情。

这项原则通常被遵循并使用在如下几个场景:

  • 系统导航、Toast。让用户明确知道「我在哪」;
  • 按钮、图片等元素可被交互的表达与反馈。通过视觉、与空间上的反馈,向用户传达页面元素是可以被交互的,引导用户前往下一站;
  • 用户完成交互动作和系统操作后,系统需要给予用户对应的反馈。比如操作成功、完成注册等;

Airbnb 的房源详情页顶部导航,可以通过点击快速定位到房源的某类信息,让用户清晰地知道「我在哪?我还能去哪?」

在发布房源时,系统顶部模拟了进度条,显示出了当前步骤,以及当前的发布进度。

二、贴近用户的真实环境

Match between system and the real world

The system should speak the users’ language, with words, phrases and concepts familiar to the user, rather than system-oriented terms. Follow real-world conventions, making information appear in a natural and logical order.——Nielson

系统应该说用户的语言,用户熟悉的单词,短语和概念,而不是系统导向的术语。遵循现实世界的约定,使信息以自然和合乎逻辑的顺序出现。

这项原则说的直白一些,就是:「说人话」。

产品简单到傻瓜也能操作,是乔布斯和张小龙做产品的核心理念。坐拥10亿用户的微信之父张小龙说过,做产品要有傻瓜心态。不要炫耀自己的智商,不要让用户觉得自己是白痴,请用最简单直白的语言描述状况;就好比自然世界里,你和他人说话的时候必然使用简单的白话文进行直白的沟通以保证交流顺畅。

在房源的详情页、Airbnb PLUS 介绍页,系统用了大量高质量的摄影图片传达一种空间氛围感。同时,在介绍文案的措辞方面,简洁易懂,语言逻辑清晰。

三、用户有控制和来去自由的权利

User control and freedom

Users often choose system functions by mistake and will need a clearly marked 「emergency exit」 to leave the unwanted state without having to go through an extended dialogue. Support undo and redo.——Nielson

用户通常会错误地选择了系统的某个功能,并且需要一个明确标记的」紧急出口「来离开不想要的状态,而不必进行扩展对话。支持撤消和重做。

用户拥有自由使用和控制系统的权利,最为常见的就是系统会为用户提供「撤销、重做、返回」的入口。

在故事专栏,当用户在浏览器当前标签页进入下一级页面时,系统都为用户提供了返回按钮,一方面方便用户来去自由,另一方营造出了一定的沉浸式浏览体验。

四、系统的一致性

Consistency and standards

Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform conventions.——Nielson

用户不应该怀疑不同的话语、情况或行为是否在表达同样的一件事情。系统设计需遵循平台惯例。

  • 移动端 APP 内的返回按钮位置通常会被放在左上角,当然有些 APP 会将返回按钮统一放在左下角,虽然返回按钮的位置不同于大多数 APP,但对于此 APP 的返回交互来说,其实还是一致的;
  • 除常用按钮位置需要符合一致性原则外,icon 的视觉设计也要遵循一致性原则,一个对象对应一个 icon.

在房源、故事集列表页,系统统一用了卡片式的视觉风格,并且每个卡片里的文字与背景图片的层次也都保持一致。

在房源详情页,系统使用了统一的 iocn 风格和文字风格,传达房源的设施属性。

五、防止错误

Error prevention

Even better than good error messages is a careful design which prevents a problem from occurring in the first place. Either eliminate error-prone conditions or check for them and present users with a confirmation option before they commit to the action.——Nielson

比良好的错误提示信息更好的方法是:一个走心的设计可以提前防止错误的发生。系统要么消除容易出错的情况,要么检查它们,并在用户采取行动之前向用户提供确认选项。

  • 比如某些操作不能进行,那就置灰或隐藏,不要在用户点击后才提醒不能操作。如果有某些内容不能选择,就置灰或者隐藏,不要等用户点击完成时才告知不能使用;
  • 同样,在用户容易出现错误操作的场景下,需要给出二次确认,如:删除和取消重要信息的操作。

如果房源在某天或多天已被预定或暂时不开放,则日历里将这些不可预定的日期置灰。

用户在修改个人重要信息后,系统会让用户输入密码二次确认。

六、系统识别胜过用户记忆

Recognition rather than recall

Minimize the user’s memory load by making objects, actions, and options visible. The user should not have to remember information from one part of the dialogue to another. Instructions for use of the system should be visible or easily retrievable whenever appropriate.——Nielson

通过使用对象,动作和选项的可视化表达,最大限度地减轻用户的记忆负担。用户不应该记住从对话的一部分到另一部分的信息。

  • 为用户保留查看和搜索历史是一个很常见的系统识别的例子;
  • 用户在填写一个长页面表单时,系统可以根据实际情况提供一个实时预览的功能,避免出现用户填了下面忘了上面的情况;
  • 用户在填写完表单(比如订单页面)后,系统可以再次向用户展示所填信息,以最终确认;
  • 用户为了完成一项目标任务,从一个页面跳转到另一个页面后,系统可以再次展示上一个页面内与目标任务相关的核心信息,以减轻用户的记忆负担。

系统会在首页第一屏为用户展示浏览历史(登录后)。

搜索框也会保留最近5次的搜索历史。

七、灵活易用的使用体验

Flexibility and efficiency of use

Accelerators — unseen by the novice user — may often speed up the interaction for the expert user such that the system can cater to both inexperienced and experienced users. Allow users to tailor frequent actions.——Nielson

一些被精心设计的体验也许会被专家用户察觉到,使系统需要能够满足无经验和有经验的用户。允许用户进行频繁的操作。

当用户在滚动屏幕浏览房源详细信息时,系统将预定的基本信息(如:价格、日期、人数等)固定在浏览器的右侧,方便用户在浏览过程中随时开始预定步骤。

八、美观和简约的设计

Aesthetic and minimalist design

Dialogues should not contain information which is irrelevant or rarely needed. Every extra unit of information in a dialogue competes with the relevant units of information and diminishes their relative visibility.——Nielson

对话中不应该包含无关紧要或很少需要的信息。在对话中每增加一个相对重要的信息,就意味着需要弱化其他信息。

高颜值不需要理由。

九、帮助用户识别,诊断,并从错误中恢复

Help users recognize, diagnose,and recover from errors

Error messages should be expressed in plain language (no codes), precisely indicate the problem, and constructively suggest a solution.——Nielson

错误信息应该用通俗易懂的语言表达(不要用代码),较准确的反应问题,并且提出解决方案。

实在无法避免的报错时,不要单纯只是报错,要提供解决方案。就好比小时候犯错,你绝不能光说:「啊,我错了。」老师或家长必然会追问:「错哪儿啦?」你要是说不出缘由,则必定被认为认错不诚恳不真心。

当用户填写错误时,系统会及时给出提示以及解决方法。

十、帮助文档

Help and documentation

Even though it is better if the system can be used without documentation, it may be necessary to provide help and documentation. Any such information should be easy to search, focused on the user’s task, list concrete steps to be carried out, and not be too large.——Nielson

如果系统能让用户不需要阅读文档就会使用那是最好的,但通常情况下还是需要帮助文档的。任何信息应该容易被搜索,且专注于用户的目标任务,并列出具体的步骤来告知用户。

  • 对于一些可以用一句话说清楚的帮助,可以直接在对象旁边提供鼠标悬停出发的 tips,或者简明的辅助说明;
  • 对于较复杂的,一两句话说不清楚的帮助,则需要跳转至对应的帮助页面;
  • 系统需要有一个帮助中心,为用户提供模糊搜索、分类搜索,来为用户提供更全面的帮助。

在个人资料页面,对于用户关心的隐私信息,系统会给出非常有亲和力的解释文案。此外,在系统很多页面都有对应功能的帮助链接以跳转至帮助中心。

系统的帮助中心,提供了搜索和问题分类引导,方便用户快速定位问题。

△ 本文图片版权归 Airbnb 所有

总结

号称以设计驱动的 Airbnb 公司,的确在产品设计、用户研究、UX设计方面展现出了较高的功力。网站甚至移动端APP 的框架层、范围层、视觉层的设计都体现出了高度的用户体验一致性和品牌感。可以看出,Airbnb 对 design system 的重视一级高度的执行力。什么是好的产品品牌认知和识别,我可以简单的理解为:「脱掉」Logo,用户照样认识你。

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

掉进这6个陷阱,可能会毁了你的原型设计!

资深UI设计者


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


很难想象,如果没有原型设计,如今的数字产品设计流程会变成什么样。原型的存在,让产品团队在制作和开发过程中更加直观,就像那句话说的:展示,而非表述。

现如今,许多产品团队借助原型来测试想法,甚至销售产品。不过,原型设计本身并非是万无一失的,设计师依然会面临许多陷阱,并且拖累整个产品的进程。

今天的文章,总结了6个常见的原型设计的陷阱。

1. 目标不明确的原型设计

我们先设计出来,然后弄明白如何使用它。

在这种说法的指引下,设计和开发团队需要花费大量的时间来处理那些没有任何价值的事务,在没有特定目标的情况下制作原型,会浪费大量的时间。

每个原型的设计目标应该是非常明确的,原因应该是清晰的。这个目标可以是源自于一个特定的想法,或者某种假设,产品团队在这个方向的指引之下,利用系统化的知识来构建符合目标的原型。

在创建原型之前,设计师应该问自己一个问题,「通过创建这个原型我们要试图解决什么问题?」如果能够找到一个明确的答案,那么这个原型是清晰且具有凝聚力的,有助于减少潜在的开销。

2. 制作原型过程受阻

产品团队通常会力图制作出有效有用的原型。当制作出来的原型不可用甚至根本无法完成的时候,整个团队会为之气馁,而这种消极的心态可能会拖垮整个项目。

为了提率,设计人员应当将失败的情况视作为整个原型制作过程中自然的组成部分。原型在很多时候是用来测试假设和想法的,并非每个假设都是有效的。这就是为什么创建工作原型不应该是原型制作工作最重要的结果。原型制作工作最重要的成果应该是获取有用的信息和新的知识。因此,将焦点从失败的情绪上,转移到学习新的知识上来,成功和失败的原型,都能够让你的产品进步。就像大家常说的,失败是成功之母。

3. 对第一个想法精雕细琢

产品团队常常在拥有第一个想法的时候,就想坚持住,将它打磨成为最终的解决方案。随后,团队花费大量的时间来出揣摩尝试,调整细节,制作原型,甚至直接开始设计视觉稿。

结果,花费无数小时创建和打磨的原型,在可用性测试早期,就呈现出不理想的状况,接下来,设计师和团队会意识到最初的想法其实不够好。

经验丰富的团队知道,想要探索和测试一系列的想法是必不可少的,并且只有通过测试之后,效果最好的方案,才是值得坚持做下去的。花费更多的时间来思考,团队才能针对问题空间继续挖掘下去,并且找到潜在的解决方案。

4. 爱上你的原型

原型的设计者常常会对于自己的设计有大量的投入。这种投入是会造成一种「投资偏见」——你在某个事情上花费的时间越多,它对你来说就越有价值。值得注意的是,它对于你的价值会越来越高,但是对于别人而言并非如此。而原型设计同样如此,当设计师对于自己的原型过度沉迷的时候,产品可能就会暴露在危险之下了:你会很容易忽略它们存在的缺点,即使这些缺陷很明显,设计师也会忽略团队成员和其他人的反馈。

不要拿原型当传家宝。

在打磨原型上花费太多宝贵的时间和精力,会剥夺设计师对于反馈应有的注意力和敏锐度。让你的原型在细节和复杂度上保持在一个合理的度上。

原型并不是艺术品,它应该是帮你找到答案的工具。

如果你倾向于采用尽可能完善的设计,那么请采用最小可行原型——添加足够的细节,但是尽可能确保可行。将原型视作为一次性的工具。每个原型都有特定的用途,一旦达到目标,就尽可能用更好的东西替换它。

5. 忽略草图的重要性

「当我们拥有强大的原型工具的时候,为什么还要使用纸和笔呢?」设计师跳过手绘阶段,并且直接使用计算机来绘制数字原型的时候,他们相信数字化的设计是可以节省时间的。但是实际上,手绘的草图能够帮助设计更快地起步。

当你下次不知道如何解决问题的时候,可以试着从笔和纸开始绘制草图。只需要开始绘制草图,勾勒出所能想到的变化,然后把它们贴在墙上,并且和你的团队一起从技术和业务的角度上讨论可行性。

6. 为原型选择错误的保真度

保真度是描述细节程度的一种度量,我们常说的线框图细节简略,是低保真的,而视觉稿则常常会用到丰富的细节刻画,它是高保真的。原型的呈现形态是非常多样的,可以是低保真的也可以是高保真的。制作一个高保真的原型是非常诱人的,但是一定要抵制住这样的诱惑。值得注意的是,原型的保真度应该和你想法的保真度相匹配。

这意味着,设计师应该根据他们的设计过程所处的阶段来选择保真度。当设计师违反这一规则的时候,往往会带来糟糕的结果。比如过高的保真度会让处于早期阶段的设计师陷入「投资偏见」。

当团队设计产品尚且处于初期的时候,尽量采用低保真的策略来进行绘制,比如使用草图。

△ 低保真的草图原型

当你想要与真实的用户一起测试你的想法的时候,尽量使用保真度更高的设计,比如数字化的可交互的原型。使用高保真的原型来进行可用性测试,能够产生更真实、具体的反馈。高保真的原型展示给利益相关者来看也非常有用,他们会更好地判断产品的功能和内容。

△ 在 Adobe XD 中创建高保真的原型

因此,考虑最终的目标和你所拥有的时间,来确保原型的最佳保真度,尽早与期望达成一致。

结语

原型设计在每个产品设计项目当中都是至关重要的,正确地设计原型,才能尽早地构建真实的产品。

One more thing

关于原型设计,乔布斯在1992年 MIT 的演讲上说到的一个事情非常有意思。彼时,他还未回归苹果,而是在制造名为 NeXT 的高端电脑,并且对于面向对象编程有着极高的热忱。

我们已经有2年时间没有构建任何工程上的原型了。这意味着,从产品开始设计的第一天,工程师和整个制造业就已经参与进来了。很多时候,在构造原型的时候,生产工具和技术根本是无法与之匹配的,而当你在原型设计的时候所积累的东西,在投产的时候就得完全抛弃,然后重新开始。因为我们始终紧密地和技术结合起来做,因此我们不会抛弃任何东西,并且不浪费时间,这也是我所见过的设计、工程和制造团队之间,最健康的关系之一。

现如今,身为设计师的我们在使用 Photoshop、InVision 等工具制造原型的时候,实际上开发可能是与之脱节的。产品团队中,设计和开发之间的矛盾,从来没有仅此减少过。而「全栈设计师」这一概念的提出,又何尝没有来自这种矛盾的压力呢?

诸如 Sketch 和 Figma 这样的新工具在做原型设计的时候,已经或多或少地开始在设计和开发之间找到协同的点,试图在设计验证和技术验证之间,找到结合的办法。

更好的原型设计,更合理的技术和设计的结合点,这也许是我们未来的探索方向吧。


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


UI速递

蓝蓝设计的小编

我们不会放过一套好的ui素材,一定会把他们分享出来,而今天分享的就是由云瑞整理的2017年11月新出炉的ui套装源文件下载,这些套装都是极简主义和扁平化风格的,都是当下最流行的,包含web和手机app界面ui,希望对您有用

UI设计新手有福了:手把手教你断线图标规律,还不快快收藏?!

博博

UI设计新手有福了:手把手教你断线图标规律,还不快快收藏?!

我是你们的学霸姐 2017-12-13 11:01:13

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

对于图标如何断线,如果是经验丰富的设计师,估计靠感觉做就可以了,但不是大神的我们怎么办呢?总得有点规律让我们参考参考吧,虽然有些规律不能全盘通用,但这次总结一定能给你带来帮助。

来,看下大纲:

1.先考虑在拼接处断线

2.平衡视觉复杂度

3.避免正中间处断线

4.尽量让图标一笔画完

1.先考虑在拼接处断线

如果你觉得此篇文章对你有作用,请收藏转发分享给你的朋友,把自己的收获写在评论区,小编会解答。

如果一个物体是由两个部分组成,当我们选择在拼接处断开:

UI设计新手有福了:手把手教你断线图标规律,还不快快收藏?!

我会觉得两个部分还没组装好,是一种很自然的分开。

但如果是下面这样的:

UI设计新手有福了:手把手教你断线图标规律,还不快快收藏?!

我会觉得它坏了,很不舒服。

我们做断线图标的时候也一样,可以先考虑在物体的拼接处断线,让断口看起来自然和谐!

举个例子:

下图是一个“我的”图标:UI设计学习群:583915450,领取100G学习资料,备注:资料领取

UI设计新手有福了:手把手教你断线图标规律,还不快快收藏?!

如果现在让我给它来做断线,我就先找到拼接处,分析如下:

UI设计新手有福了:手把手教你断线图标规律,还不快快收藏?!

虽然例子有点血腥,但事实确实如此,拼接处就在头和身子连接的地方,所以尝试在这里断开:

UI设计新手有福了:手把手教你断线图标规律,还不快快收藏?!

哎呦,我觉得还ok。

行,那再来个例子!

下图是个消息的图标:

UI设计新手有福了:手把手教你断线图标规律,还不快快收藏?!

再来分析,它的外形是由一个矩形和一个三角形组成的:

UI设计新手有福了:手把手教你断线图标规律,还不快快收藏?!

我们还是在拼接处断开,得到如下图:

UI设计新手有福了:手把手教你断线图标规律,还不快快收藏?!

嗯,也还行!

所以一般来做断线图标,我就会先利用这一个规律看可不可行。

如果可行,就继续优化细节,如果不可行再尝试其他方法。

2.视觉复杂度要平衡

有时候,我们的图标不好将其拆解,这时候我们就可以尝试去考虑图标的视觉复杂度。

来个例子,下图是一个皇冠的图标:

UI设计新手有福了:手把手教你断线图标规律,还不快快收藏?!

经过分析,我们可以得出,图标红色区域的复杂程度要比蓝色区域高:

UI设计新手有福了:手把手教你断线图标规律,还不快快收藏?!

所以我选择在蓝色区域断口,来增加蓝色区域的复杂程度,达到平衡的效果:

UI设计新手有福了:手把手教你断线图标规律,还不快快收藏?!

那如果在红色区域断开是什么样的呢,我们来分析对比一下:

UI设计新手有福了:手把手教你断线图标规律,还不快快收藏?!

所以,通过对视觉上复杂程度的解析后发现,方案一会平衡协调很多!

再来个例子,下面是个通讯录图标:

UI设计新手有福了:手把手教你断线图标规律,还不快快收藏?!

图标的左侧要比右侧复杂:

UI设计新手有福了:手把手教你断线图标规律,还不快快收藏?!

如果我们选择在左侧断线,那左侧就会更复杂,这样两边的复杂度就会失调,所以我选择在右边断线:

UI设计新手有福了:手把手教你断线图标规律,还不快快收藏?!

这样图标左右都有细节,视觉平衡多了!

3.避免正中间处断线

有朋友会说了,那有些图标没有拼接处,复杂程度也都一样,比如下面这种:

UI设计新手有福了:手把手教你断线图标规律,还不快快收藏?!

怎么办呢?

很简单,这种图标只要尽量避免在正中间断线就ok,因为正中间断线显得过于呆板:

UI设计新手有福了:手把手教你断线图标规律,还不快快收藏?!

其它地方都可以尝试,例如左上角、左上角、右上角、右下角等等。

4.尽量让图标一笔画完

这也是一个很重要的知识点:如果可以的话尽量让图标外轮廓一笔画完,如下图:

UI设计新手有福了:手把手教你断线图标规律,还不快快收藏?!

其实很多时候,只要我们能从拼接处断线,基本都是可以一笔画完的,所以大家注意一下就好了。

当然,如果实在不能一笔画下来,也不必勉强,因为强扭的瓜不好看!

总结

这四个知识点就是目前为止菜心所整理的关于断线图标的规律,个人经验,供大家参考。

不过提醒大家,这些方法难免会有少数不适用的时候,遇到不适用的情况,千万不要因为规则而被困住,多多尝试,敢于不同,也许可以找到更合适的解决方案。

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


超实用!UI设计图标欣赏,绝对激发你的灵感

博博

超实用!UI设计图标欣赏,绝对激发你的灵感

我是你们的学霸姐 2017-08-17 20:13:23

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

身为一名Ui设计师的你是否会有灵感枯竭的时候呢,下面本学霸会向大家分享一组简约却不简单的图标设计作品,希望大家在看完后能够激发自己无穷的灵感哦~

超实用!UI设计图标欣赏,绝对激发你的灵感

有需要的小伙伴可以加群661690541一起学习,还有免费资料等你领取哟~

超实用!UI设计图标欣赏,绝对激发你的灵感

超实用!UI设计图标欣赏,绝对激发你的灵感

超实用!UI设计图标欣赏,绝对激发你的灵感

超实用!UI设计图标欣赏,绝对激发你的灵感

超实用!UI设计图标欣赏,绝对激发你的灵感

超实用!UI设计图标欣赏,绝对激发你的灵感

超实用!UI设计图标欣赏,绝对激发你的灵感

超实用!UI设计图标欣赏,绝对激发你的灵感

超实用!UI设计图标欣赏,绝对激发你的灵感

超实用!UI设计图标欣赏,绝对激发你的灵感

超实用!UI设计图标欣赏,绝对激发你的灵感

超实用!UI设计图标欣赏,绝对激发你的灵感

超实用!UI设计图标欣赏,绝对激发你的灵感

超实用!UI设计图标欣赏,绝对激发你的灵感

超实用!UI设计图标欣赏,绝对激发你的灵感

超实用!UI设计图标欣赏,绝对激发你的灵感

超实用!UI设计图标欣赏,绝对激发你的灵感

超实用!UI设计图标欣赏,绝对激发你的灵感

超实用!UI设计图标欣赏,绝对激发你的灵感

超实用!UI设计图标欣赏,绝对激发你的灵感

超实用!UI设计图标欣赏,绝对激发你的灵感

超实用!UI设计图标欣赏,绝对激发你的灵感

超实用!UI设计图标欣赏,绝对激发你的灵感

超实用!UI设计图标欣赏,绝对激发你的灵感

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

UI设计中的布尔运算由浅及深,深入解析,图标瞬间高大上!

博博

UI设计中的布尔运算由浅及深,深入解析,图标瞬间高大上!

UI设计栈 2018-03-26 19:24:14

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

平时我们提到的布尔运算其实就是AI路径查找器(pathfinder),通过路径【加】【减】运算绘制出各种各样的形状,是成为一名优秀的UI设计师必备的技能之一。

对于初学者来说,刚开始可能模糊不清,确实不容易理解,下面栈长奉上最全的布尔运算深入解析教程,希望对迷途中的UI设计小白有所帮助。

UI设计中的布尔运算由浅及深,深入解析,图标瞬间高大上!

图片来源于网络

UI设计中的布尔运算由浅及深,深入解析,图标瞬间高大上!

图片来源于网络

UI设计中的布尔运算由浅及深,深入解析,图标瞬间高大上!

图片来源于网络

UI设计中的布尔运算由浅及深,深入解析,图标瞬间高大上!


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


UI空状态设计

蓝蓝设计的小编

UI空状态404错误页可以帮助网站避免丢失用户的信任,并正确引导用户返回其它页面,减少客户的流失量。404页面的设计也是提高用户体验的一种表现形式。下面我们以去哪网404页面为例来为大家具体讲解一下404的构成。

jQuery-瀑布流

seo达人

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

html与css:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
/* 标签重定义 */

* {
margin: 0;
padding: 0;
border: none;
}

body {
background: #ddd;
}

img {
border: none;
}

a {
text-decoration: none;
color: #444;
}

a:hover {
color: #999;
}
/* wrap */

#wrap {
position: relative;
width: auto;
height: auto;
margin: 0 auto;
}

#wrap>div {
float: left;
box-sizing: border-box;
width: 280px;
height: auto;
margin: 10px;
padding: 10px;
border-radius: 5px;
background: #fff;
}

#wrap>div>img {
width: 260px;
margin: 0 auto;
}

#wrap>div>a {
display: block;
font-size: 18px;
font-weight: bold;
line-height: 40px;
text-align: center;
}
</style>
</head>


<body>
<div id="wrap">
<div>
<img src="img/1.jpg">
<a href="http://www.imooc.com" target="_blank">第一张 路飞与艾斯</a>
</div>
<div>
<img src="img/2.jpg">
<a href="http://www.imooc.com" target="_blank">第二张 艾博</a>
</div>
<div>
<img src="img/3.jpg">
<a href="http://www.imooc.com" target="_blank">第三张 路飞</a>
</div>
<div>
<img src="img/4.jpg">
<a href="http://www.imooc.com" target="_blank">第四张 艾斯</a>
</div>
<div>
<img src="img/5.jpg">
<a href="http://www.imooc.com" target="_blank">第五张 女王</a>
</div>
<div>
<img src="img/6.jpg">
<a href="http://www.imooc.com" target="_blank">第六张 香吉士</a>
</div>
<div>
<img src="img/7.jpg">
<a href="http://www.imooc.com" target="_blank">第七张 艾斯</a>
</div>
<div>
<img src="img/8.jpg">
<a href="http://www.imooc.com" target="_blank">第八张 霸气</a>
</div>
</div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</body>

</html>

JS:

var waterfall = function(wrap, boxes) {
// 获取屏幕可以显示的列数
var boxWidth = boxes.eq(0).width() + 40;
var windowWidth = $(window).width();
var colsNumber = Math.floor(windowWidth / boxWidth);


// 设置容器的宽度
wrap.width(boxWidth * colsNumber);


// 定义一个数组并存储每一列的高度
var everyHeight = new Array();
for (var i = 0; i < boxes.length; i++) {
if (i < colsNumber) {
everyHeight[i] = boxes.eq(i).height() + 40;
} else {
var minHeight = Math.min.apply(null, everyHeight);
var minIndex = getIndex(minHeight, everyHeight);
boxes.eq(i).css({
'position': 'absolute',
'top': minHeight,
'left': boxes.eq(minIndex).position().left,
'opacity': '0'
}).stop().animate({
'opacity': '1'
}, 1000);
everyHeight[minIndex] += boxes.eq(i).height() + 40;
};
}
};


// 获取最小列的索引
function getIndex(minHeight, everyHeight) {
for (index in everyHeight) {
if (everyHeight[index] == minHeight) {
return index;
};
};
};

$(document).ready(function(event) {
var wrap = $('#wrap');
var boxes = $('#wrap').children('div');
waterfall(wrap, boxes);
});

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

js json的格式、存储与发送

周周

1.Json的格式

其实json就是对象。源生的js代码并没有类的概念。对象救就是object。对象有自己的属性,也可以有自己的方法。json是一种轻量级的存储和交换信息的语言。他有自己的格式。

较为简单的json。里面只有简单的对象,key+value的形式:

  • var CellInfo = {


  •                 "CellId":         document.getElementById("CellId").value,


  •                 "UEAmount":         document.getElementById("UE value").innerText,


  •                 "BearAddDel":         document.getElementById("bearvalue").innerText,


  •                 "UEAttachDe":         document.getElementById("attachvalue").innerText,


  •                 "TotalDLTP":         document.getElementById("dlvalue").innerText,

  •               "TotalULTP":         document.getElementById("ulvalue").innerText,


  •                 };



每个元素之间用逗号隔开。调用每个key的值可用语句。例如:CellInfo.UEAmunt,就可取出其中的值。

较为复杂的json。里面包含了对象。


  • var UEGroup1 = {



  •                 "UEAmount": ua[1],



  •                 "DBR1": {



  •                         "DLPackageSize": DS[1],



  •                         "ULPackageSize": US[1],



  •                         "DLTP": DP[1],



  •                         "ULTP": UP[1],



  •                         "QCI": QCI[0]



  •                 },



  •                 "DBR2": {



  •                         "DLPackageSize": DS[2],



  •                         "ULPackageSize": US[2],



  •                         "DLTP": DP[2],



  •                         "ULTP": UP[2],



  •                         "QCI": QCI[1]



  •                 },



  •                 "DBR3": {



  •                         "DLPackageSize": DS[3],



  •                         "ULPackageSize": US[3],



  •                         "DLTP": DP[3],



  •                         "ULTP": UP[3],



  •                         "QCI": QCI[2]



  •                 }



  •         };




例如这个UEGroup1,里面的元素不仅有简单的key+value,还包含了三个对象。对象里的元素用{}括起来,彼此之间用逗号隔开。想具体访问某个元素的值也是通过逐层key,例如:UEGrooup1.DBR1.DLPackageSize

动态的往json只增加元素,增加对象。

前面说的几个都是静态的,提前写好的。那如果临时想加一个元素,例如在Cellinfo这个json中相加一个number的元素:

CellInfo.number=10;

对于往json中添加对象。例如我们想把Cellinfo和UEGroup1这两个object作为两个元素加入到另外一个大的json中:

  • var PETInfo = {};//声明了一个空的对象



  • var CellInfo = {



  •                 "CellId":         document.getElementById("CellId").value,



  •                 "UEAmount":         document.getElementById("UE value").innerText,



  •                 "BearAddDel":         document.getElementById("bearvalue").innerText,



  •                 "UEAttachDe":         document.getElementById("attachvalue").innerText,



  •                 "TotalDLTP":         document.getElementById("dlvalue").innerText,



  •                 "TotalULTP":         document.getElementById("ulvalue").innerText,



  •                 };



  • str_CellInfo = JSON.stringify(CellInfo);//将CellInfo转为字符串对象



  • PETInfo.CellInfo=str_CellInfo;//在PETInfo中添加名为Cellinfo的属性,并赋值


2.json的发送

json写好后,发送给后台。至于后台怎么处理数据我们不关心。发送json的函数如下:

  • function post(path, params, method) {



  •         method = method || "post";



  •         var form = document.createElement("form");



  •         form.setAttribute("method", method);



  •         form.setAttribute("action", path);





  •         for (var key in params) {



  •                 if (params.hasOwnProperty(key)) {



  •                         var hiddenField = document.createElement("input");



  •                         hiddenField.setAttribute("type", "hidden");



  •                         hiddenField.setAttribute("name", key);



  •                         hiddenField.setAttribute("value", params[key]);



  •                         form.appendChild(hiddenField);



  •                 }



  •         }



  •         document.body.appendChild(form);



  •         form.submit();



  • }

    参数分别是后台的地址,变量,方法。变量就是我们自己写好的json,方法默认为post。例如我们想发刚刚的PETInfo

    $.post('http://10.140.160.64:3012/users/ueinfo', PETInfo);

    数据的发送、并获取结果的实例:

    需求描述:用户填写一系列的输入框,前端获取数据,封装成json并发送给服务器,服务器会返回一个返回值,表示状态。前端需要展示这个内容提示客户。

    • function sendBook(){



    •         var Book={



    •                 "openstackIP":document.getElementById("openstackIP").value,



    •                 "RAPName":document.getElementById("RAPName").value,



    •                 "RAPVer":document.getElementById("ver").value,



    •                 "OAMIP":document.getElementById("OAMIP").value



    •         };//json封装用户输入的数据



    •         $.post('http://10.140.160.64:3012/servers/env/book', Book)//调用post传输数据



    •         .done((resp) => {//传输后获取服务器的返回值



    •         alert(resp);//展示返回值



    •        // window.location.href = 'Environment-List.html';//选择性界面跳转



    •     });



    • }

    3.json在本地的存储

    存储数据有很多方法。这里我用的是localStorage。localStorage与cookie的区别如下:

    ① cookie在浏览器与服务器之间来回传递。
    sessionStorage和localStorage不会把数据发给服务器,仅在本地保存

    ②数据有效期不同:
    cookie只在设置的cookie过期时间之前一直有效,即使窗口或浏览器关闭。
    sessionStorage:仅在当前浏览器窗口关闭前有效。
    localStorage  始终有效,长期保存。

    ③cookie数据还有路径的概念,可以限制cookie只属于某个路径下。
    存储大小也不同,cookie数据不能超过4k,sessionStorage和localStorage 虽然也有存储大小的限制,但比cookie大得多,可以达到5M或更大。

    ④ 作用域不用
    sessionStorage不在不同的浏览器窗口中共享;
    localStorage在所有同源窗口中都是共享的;
    cookie也是在所有同源窗口中都是共享的;

    WebStorage 支持事件通知机制,可以将数据更新的通知发送给监听者。Web Storage 的 api 接口使用更方便。

    用localstage存储json的实例:

    • str_PETInfo=JSON.stringify(PETInfo);//将json转为字符串对象



    • window.localStorage.setItem("PET",str_PETInfo);//存入本地,该json的key为PET


    将json取出来:



    • var PET=JSON.parse(window.localStorage.getItem("PET"));//将字符串转化为json



    • var CellInfo=JSON.parse(PET.CellInfo);//json中的Cellinfo对象转化为json



UI设计规范

博博


惹不起的设计师 2017-02-20 15:03:14

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


UI设计抛开视觉设计不谈,更多的是尺寸、适配等一些问题。这些问题往往是初学者比较难以理解的问题。更多的应用于简化开发过程、使多个产品拥有一致的体验,是落到实处的东西。由于负责各个产品线的产品经理并非同一人,如果此时设计师们又是渗透到各个产品组中,那么产品之间的体验就根本让用户感觉不出是一个部门设计开发出来的。规范是大型项目必须的,可以简化开发成本、减少各个部门之间的沟通成本。

这是你苦苦追寻的UI设计规范,赶快收藏!

这是你苦苦追寻的UI设计规范,赶快收藏!

这是你苦苦追寻的UI设计规范,赶快收藏!

这是你苦苦追寻的UI设计规范,赶快收藏!

这是你苦苦追寻的UI设计规范,赶快收藏!

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


日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档