首页

想用设计化腐朽为神奇，你得先想明白这10个问题

涛涛


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


今天的译文同样来自设计师 Eugen Eşanu，他将经典设计书《Don‘t Make Me Think》中的内容梳理出来供你参考。这些老问题依然能够给我们今天的新局面以启发。

「好设计应该是显而易见的」，这句老话在过去的几个世纪当中影响到了各个不同的领域，从美食到音乐，从建筑到哲学，我们如今的生活几乎是在这句话的影响下被逐渐被塑造出来的。

但是同样的，人类的进化并没有我们想象中那么快速，我们的思维和本能仍然被深刻地影响着我们的决策。换句话来说，人类的行为模式有着很长的保质期，在许多事情上，20年前很难做，在今天依然不那么容易去执行。

重温《Don’t Make Me Think》

Steve Krug 的这本《Don’t Make Me Think》中文译本名字是《点石成金：访客至上的网页设计秘籍》，译名可能没有它的原名那么直接，但是也传递出这本书所要表达的核心概念。

这本书成于2000年第一次互联网泡沫时代之后，Krug 在这次浪潮之后提出了不少实用的设计原则，直到今天仍然有着极高的价值。这本书随后多次再版和修订，其中的设计案例几经迭代升级，我们可以看到现代网页设计的提升和进步，同时也能从中感受到，用户——人类行为本身的模式化。「访客至上」的表述太过客气，「不要让我思考」这一表述更能表现用户行为的特征，而今天我们所面对的绝大多数的优秀产品，无论是手机电脑还是汽车，同样遵循着这一原则。

这本书的成功是建立在无数痛彻心扉的教训之上，这也使得它本身的价值无与伦比。今天的文章本质上也是一篇读书笔记，设计师应该对于用户、人性有足够的认知，方可作出足够优秀的设计。下面的10个总结，既是常见的认知错误，也是成就好设计的契机，就看你怎么把握了。

1. 对于内容，用户从来都是扫视，而非用心阅读

当我们在查看内容和信息的时候，绝大多数情况下我们都会下意识寻找让自己感兴趣的东西。比如，我们很少会完整地浏览网站上所有的文本和内容，为什么？绝大多数的用户打开网站都是在试图完成某项任务，达成某个目标，而网页中的不同部分的内容往往是服务于不同的功能和目标的，我们努力达成目标即可，并没有阅读全部的必要。不过，作为网站的设计者，我们往往还是提供了足够丰富的内容和完善的功能，一方面是因为我们觉得人们需要知道，另一方面也是应对不同用户的需求。正如有的设计师所说的，它们「增加了体验」。

所以，通常而言，我们可以作出下列优化：

  • 大量使用标题：通过标题告诉用户这些内容都是和什么相关的，确保用户能够在扫视的时候快速明白并做选取。
  • 保持段落精简：在长段落中，用户可能稍分神就迷失了，而短段落更容易阅读，也更容易汲取其中的信息。
  • 使用列表展示：几乎所有的信息都可以分割为列表来展示，甚至一个使用多个逗号分割的句子，都可以制作成为列表。当然，值得注意的是，注意列表之间的行间距，确保可读性。
  • 突出关键信息：用户在扫视的时候，主要是在定位关键词。将关键词使用粗体等方式标注出来，便于用户扫视和定位。不要强调太多的内容，这样会失去强调的作用。

2. 创建卓有成效的视觉层次

视觉层次是确保用户快速扫视能够获取到信息的重要助力。视觉层次能够呈现出页面中不同元素之间的优先级和关系，在设计的时候，同样需要遵循下面的几个原则：

  • 重要性越高，越突出。最重要的元素，要么越大，要么越醒目，使用特定的色彩标注出来。
  • 在逻辑上有关联的元素，在视觉上应该相关的，例如使用相同的色彩或者相同的视觉样式。

3. 不要重新发明轮子

我们明白，用户总会期望看到新东西，但是，市面上有太多的工具和应用，如果各行其是，忽略约定俗成的规则，特立独行地采用自己的规则，会让每个应用的学习成本都提高，这对于用户几乎是毫无益处的。

当设计师被要求设计某个东西的时候，内心是充满重新发明的冲动的，这个我们都明白。而设计出和别人相似的东西看起来又有点「政治不正确」，甲方总会希望设计作出点不一样的东西。更何况，这还是一个少有鼓励和赞扬的行业，也很少为「最贴合用户需求」的产品颁设计奖。

但是设计仍然需要在各方之间作出最佳的平衡。

在重新发明轮子之前，你必须了解破坏和创新所意味着的真实的价值（时间，体验，耗费的精力和所需的知识）。

4. 产品说明没必要存在了

我们的工作是要让产品清晰明了，让事情便捷易行。即使做不到明显，也应该尽力向着不言自明的设计靠拢。说明书这种东西是没有人会主动去看的，它们的存在意义本身就不大，你需要通过合理的设计，让产品本身发挥指引性的效果。即使说明书必须存在，也尽量让它简短明了。

如果功能并不明显，我们应该尽量让它明显一点，让目标更明显。

以宜家为例，一个需要买回家组装的柜子，绝大多数的用户可以在简短的指引之下就可以轻松正确地组装，为什么？因为绝大多数情况下，一个柜子长什么样，用户眼前有清晰的画面，哪怕说明只有几张简单的图片，用户也不会犯错。

5. 用户并不在意产品是怎么运作的

绝大多数的用户并没有兴趣了解你的产品的工作方式，并不是因为他们不够聪明，仅仅是因为他们不在乎。所以，一旦他们确定你的产品是能用的，就很少会去注意其他的部分。

以苹果的无线耳机 AirPods 为例，从价格上来说，它并不亲民，但是它的交互方式和使用体验确实非常的独特和优秀，这也不难理解许多用户会选择它。用户在购买它之后，并不会去思考它是如何运作的，其中所包含的诸多新技术，对于用户而言，只是润物细无声地发挥着作用而已。

我的母亲就使用的 AirPods ，她从来不会问我它的原理，但是她很清楚，耳机需要放在充电盒中充电，和手机配对之后就能用了，并不复杂。

6. 来去匆忙的人们，从不主动寻找「微妙的线索」

这一条可能是我最喜欢的。我们设计师总喜欢为用户带来微妙的视觉效果，来给用户带来乐趣。对吧？可是如果我告诉你，用户并不关心它们，你会怎么想呢？他们也根本不会告诉你他们有多在意或者多不在意，也不会在一次又一次看到的时候对于这些设计有多少感觉。

为什么会这样？生活环境赋予每个用户以复杂多变的情境，他们很少有机会去感受微妙的设计所带来的奇妙情绪。风在吼，狗在叫，小孩还在满屋跑，水壶里面水开了，老婆在耳边抱怨着工作中的细微末节，而你正在填写着表单准备预订明天的高铁票，在那个时刻，APP 当中微妙的动效和视觉线索，手一抖，你可能还会多买一个没有必要的捆绑销售的酒店折扣券。

但是另外一方面，对于优秀体验的追求不应该因此而放弃，还有很多用户会从中受益，这也是促成优秀产品的必须因素。只不过确实有很多用户没法去在意它们罢了。

7. 焦点小组的任务不是做可用性测试

焦点小组是做什么的？一小群人围坐在桌子旁边，讨论他们对于产品的看法，他们过去的经历，它们的感受和对于新概念的理解。焦点小组的作用是帮你更好地界定目标用户，目标用户的感受等等。

可用性测试则是另外一回事。做可用性测试的时候，通常是为了测试产品而观察一个特定的用户使用产品的过程。在测试中，你需要测试人员执行特定的操作，以此来查看整个设计中的概念是否直观，功能是否需要完善。面对焦点小组的时候，你需要倾听观点，梳理思路，在进行可用性测试的时候，更多需要的是观察，并且解决具体的问题。

8. 不要让个人情感替代整个用户历程

我们在设计产品的时候，常常会从自己的需求出发：「我也是一个用户，所以我知道什么好什么不好。」我们对于自己的喜好有着强烈的感受。

我们会说，当我们的产品具备_____的时候，我们会很喜欢，又或者，我们认为_____是一个巨大的痛点。当我们真正和团队成员坐在一起讨论产品的时候，大家都有各自的看法和各自的情绪，所有人的都有着极强的个性和独特的看法，这个情况就很尴尬了。因为我们常常会倾向于认为绝大多数的用户和我们自己一样。事实上并不一定如此。

9. 问对问题，才能让产品走向对的方向

无论是设计产品功能还是测试产品的时候，问对问题都很重要。测试的时候，问用户「你们喜欢下拉菜单吗」这样的问题，不仅销量不高，而且不会带来价值。这个问题，应该这么问：「在这个情况下，在这个页面上，下拉菜单这种设计是否能够给你带来良好的用户体验？哪里让人觉得不舒服？」

诸如「用户喜欢这个产品吗」这样宽泛的问题意义不大，用户也很难提供针对性的、具体的回复。

而且，作为设计师我们不应当专注于用户是否喜欢这样的问题，这样会失去动力和专注力。可用性测试可以帮你消除各种「喜欢」相关的问题，并且帮你找到真正要做的事情。这才是重点。

10. 不要让用户思考问题

我在哪？我要干嘛？

我应该点哪里开始？

他们在这放的这个控件是干啥的？

这个页面是用来做什么的？

他们为什么这么称呼这个功能？

这个是广告还是内置的功能？

在使用产品的时候，如果触发用户大脑中的各种问题，只会增加用户的心理负荷和工作量，分散用户注意力并不是好事，而且用户本身并不喜欢解决各种难题。

每当用户点击某个控件而不起作用，或者它看起来是个链接实际上并不是，会消耗用户对你的信任感，降低产品的可靠度。

One more thing

炫酷的概念和新颖的趋势不仅吸引用户，同样是设计师的心头好。但是我们在新的时代，新的局面之下，始终面对的是以往的用户，看似千变万化的需求背后是不变的人性。

至少《Don’t Make Me Think》这本书一直在探讨的问题，经过20年的世事变迁，几次互联网浪潮，在这个号称互联网4.0时代，仍然发挥着作用，依然是那么具有启发性。

新状况之下潜藏着老问题，想要洞悉本质，设计师要懂心理学和行为学。在之前的几篇文章当中，我一直在试图梳理出不会随着时间改变，而一直存在的、亟待解决的问题以及可供使用的原理。

《为何如今的产品总给人千人一面的感觉？》揭示的是「特征蔓延」和「竞争驱动式设计」是如何让产品走向平庸和毁灭，解决方案藏在结尾。

《熟知用户行为的这7个层面，你的设计才会走进人心》则介绍了唐纳德诺曼的用户行为的7个层面，这是一套分析用户行为，设计产品流程的有效方法，拥有持久生命力的产品的设计策略，和这套方法不谋而合。

《这7种广泛存在的认知偏差，影响了我们太多的决策》 则帮你梳理了7种常见的认知偏差，认识自己了解用户，这些知识能消除误解，同样能够帮你洞悉真相，是不可多得的利器。

设计的方法和工具成千上万，想明白道理，问对问题，接下来的路更容易走通。


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



评论(0) 浏览(2966)

学会UI设计中的留白，还怕作品没有表现力？

鹤鹤

留白对于设计的价值，已经得到相当广泛的认可了。尽管留白看起来不复杂，但是在复杂多变的设计环境之下，往往并不是一件简单的事情。优秀的留白设计能够在简约的风格和功能的可用性之间达到平衡，而要做到这一点，需要相当的实践和积累。

评论(0) 浏览(3212)

优秀UI界面设计评析

蓝蓝设计的小编

男生运动鞋商店支付界面，颜色搭配非常舒服，鞋子摄影也很漂亮，字体字号运用非常到位。

评论(0) 浏览(5095)

React Native原生与JS层交互

seo达人

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

最近在对《React Native移动开发实战》一书进行部分修订和升级。在React Native开发中，免不了会涉及到原生代码与JS层的消息传递等问题，那么React Native究竟是如何实现与原生的互相操作的呢？

原生给React Native传参

原生给React Native传值

原生给JS传值，主要依靠属性，也就是通过initialProperties，这个RCTRootView的初始化函数的参数来完成。通过RCTRootView的初始化函数你可以将任意属性传递给React Native应用，参数initialProperties必须是NSDictionary的一个实例。RCTRootView有一个appProperties属性，修改这个属性，JS端会调用相应的渲染方法。

使用RCTRootView将React Natvie视图封装到原生组件中。RCTRootView是一个UIView容器，承载着React Native应用。同时它也提供了一个联通原生端和被托管端的接口。

例如有下面一段OC代码： 

NSURL *jsCodeLocation;

  jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index.ios" fallbackResource:nil]; NSArray *imageList = @[@"http://foo.com/bar1.png",
                         @"http://foo.com/bar2.png"]; NSDictionary *wjyprops = @{@"images" : imageList};

  RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
                                                      moduleName:@"ReactNativeProject" initialProperties:wjyprops
                                                   launchOptions:launchOptions];
    
    

        
  • 
            1
        
    • 

        
  • 
            2
        
    • 

        
  • 
            3
        
    • 

        
  • 
            4
        
    • 

        
  • 
            5
        
    • 

        
  • 
            6
        
    • 

        
  • 
            7
        
    • 

        
  • 
            8
        
    • 

        
  • 
            9
        
    • 

        
  • 
            10
        
    • 

        
  • 
            11
        
    • 

        
  • 
            12
        
    • 

        
  • 
            13
        
    • 

        
  • 
            14
        
    •

下面是JS层的处理： 

import React, { Component } from 'react'; import {
  AppRegistry,
  View,
  Image,
} from 'react-native'; class ImageBrowserApp extends Component { renderImage(imgURI) { return (
      <Image source={{uri: imgURI}} />
    );
  }
  render() { return (
      <View>
        {this.props.images.map(this.renderImage)}
      </View>
    );
  }
}

AppRegistry.registerComponent('ImageBrowserApp', () => ImageBrowserApp);
    
    

        
  • 
            1
        
    • 

        
  • 
            2
        
    • 

        
  • 
            3
        
    • 

        
  • 
            4
        
    • 

        
  • 
            5
        
    • 

        
  • 
            6
        
    • 

        
  • 
            7
        
    • 

        
  • 
            8
        
    • 

        
  • 
            9
        
    • 

        
  • 
            10
        
    • 

        
  • 
            11
        
    • 

        
  • 
            12
        
    • 

        
  • 
            13
        
    • 

        
  • 
            14
        
    • 

        
  • 
            15
        
    • 

        
  • 
            16
        
    • 

        
  • 
            17
        
    • 

        
  • 
            18
        
    • 

        
  • 
            19
        
    • 

        
  • 
            20
        
    • 

        
  • 
            21
        
    • 

        
  • 
            22
        
    • 

        
  • 
            23
        
    •

不管OC中关于initialProperties的名字叫什么，在JS中都是this.props开头，然后接下来才是key名字。 

{"rootTag":1,"initialProps":{"images":["http://foo.com/bar1.png","http://foo.com/bar2.png"]}}. 
    
    

        
  • 
            1
        
    •

使用appProperties进行参数传递

RCTRootView同样提供了一个可读写的属性appProperties。在appProperties设置之后，React Native应用将会根据新的属性重新渲染。当然，只有在新属性和旧的属性有更改时更新才会被触发。 

NSArray *imageList = @[@"http://foo.com/bar3.png", @"http://foo.com/bar4.png"]; rootView.appProperties = @{@"images" : imageList};
    
    

        
  • 
            1
        
    • 

        
  • 
            2
        
    • 

        
  • 
            3
        
    •

可以随时更新属性，但是更新必须在主线程中进行，读取则可以在任何线程中进行。

React Native执行原生方法及回调

React Native执行原生方法

.h的文件代码： 

#import <Foundation/Foundation.h> #import <RCTBridgeModule.h> @interface wjyTestManager : NSObject<RCTBridgeModule> @end
    
    

        
  • 
            1
        
    • 

        
  • 
            2
        
    • 

        
  • 
            3
        
    • 

        
  • 
            4
        
    • 

        
  • 
            5
        
    • 

        
  • 
            6
        
    • 

        
  • 
            7
        
    •

.m的文件代码： 

#import "wjyTestManager.h" @implementation wjyTestManager RCT_EXPORT_MODULE();

RCT_EXPORT_METHOD(doSomething:(NSString *)aString withA:(NSString *)a)
{ NSLog(@"%@,%@",aString,a);
} @end
    
    

        
  • 
            1
        
    • 

        
  • 
            2
        
    • 

        
  • 
            3
        
    • 

        
  • 
            4
        
    • 

        
  • 
            5
        
    • 

        
  • 
            6
        
    • 

        
  • 
            7
        
    • 

        
  • 
            8
        
    • 

        
  • 
            9
        
    • 

        
  • 
            10
        
    • 

        
  • 
            11
        
    • 

        
  • 
            12
        
    •

为了实现RCTBridgeModule协议，你的类需要包含RCT_EXPORT_MODULE()宏。这个宏也可以添加一个参数用来指定在Javascript中访问这个模块的名字。如果你不指定，默认就会使用这个Objective-C类的名字。

并且必须明确的声明要给Javascript导出的方法，否则React Native不会导出任何方法。OC中声明要给Javascript导出的方法，通过RCT_EXPORT_METHOD()宏来实现。 

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Alert,
  TouchableHighlight,
} from 'react-native';

import {
  NativeModules,
  NativeAppEventEmitter
} from 'react-native'; var CalendarManager = NativeModules.wjyTestManager; class ReactNativeProject extends Component { render() { return (
          <TouchableHighlight onPress={()=>CalendarManager.doSomething('sdfsdf','sdfsdfs')}>
          <Text style={styles.text}
      >点击 </Text>
          </TouchableHighlight>

        );
      }
} const styles = StyleSheet.create({
text: {
  flex: 1,
  marginTop: 55,
  fontWeight: 'bold' },
});

AppRegistry.registerComponent('ReactNativeProject', () => ReactNativeProject);
    
    

        
  • 
            1
        
    • 

        
  • 
            2
        
    • 

        
  • 
            3
        
    • 

        
  • 
            4
        
    • 

        
  • 
            5
        
    • 

        
  • 
            6
        
    • 

        
  • 
            7
        
    • 

        
  • 
            8
        
    • 

        
  • 
            9
        
    • 

        
  • 
            10
        
    • 

        
  • 
            11
        
    • 

        
  • 
            12
        
    • 

        
  • 
            13
        
    • 

        
  • 
            14
        
    • 

        
  • 
            15
        
    • 

        
  • 
            16
        
    • 

        
  • 
            17
        
    • 

        
  • 
            18
        
    • 

        
  • 
            19
        
    • 

        
  • 
            20
        
    • 

        
  • 
            21
        
    • 

        
  • 
            22
        
    • 

        
  • 
            23
        
    • 

        
  • 
            24
        
    • 

        
  • 
            25
        
    • 

        
  • 
            26
        
    • 

        
  • 
            27
        
    • 

        
  • 
            28
        
    • 

        
  • 
            29
        
    • 

        
  • 
            30
        
    • 

        
  • 
            31
        
    • 

        
  • 
            32
        
    • 

        
  • 
            33
        
    • 

        
  • 
            34
        
    • 

        
  • 
            35
        
    • 

        
  • 
            36
        
    • 

        
  • 
            37
        
    • 

        
  • 
            38
        
    •

要用到NativeModules则要引入相应的命名空间import { NativeModules } from ‘react-native’;然后再进行调用CalendarManager.doSomething(‘sdfsdf’,’sdfsdfs’)；桥接到Javascript的方法返回值类型必须是void。React Native的桥接操作是异步的，所以要返回结果给Javascript，你必须通过回调或者触发事件来进行。

传参并回调 

RCT_EXPORT_METHOD(testCallbackEvent:(NSDictionary *)dictionary callback:(RCTResponseSenderBlock)callback)
{ NSLog(@"当前名字为：%@",dictionary); NSArray *events=@[@"callback ", @"test ", @" array"];
  callback(@[[NSNull null],events]);
}
    
    

        
  • 
            1
        
    • 

        
  • 
            2
        
    • 

        
  • 
            3
        
    • 

        
  • 
            4
        
    • 

        
  • 
            5
        
    • 

        
  • 
            6
        
    •

说明：第一个参数代表从JavaScript传过来的数据,第二个参数是回调方法； 
JS层代码： 

import {
  NativeModules,
  NativeAppEventEmitter
} from 'react-native'; var CalendarManager = NativeModules.wjyTestManager; class ReactNativeProject extends Component { render() { return (
          <TouchableHighlight onPress={()=>{CalendarManager.testCallbackEvent(
             {'name':'good','description':'http://www.lcode.org'},
             (error,events)=>{ if(error){
                   console.error(error);
                 }else{
                   this.setState({events:events});
                 }
           })}}
         >
          <Text style={styles.text}
      >点击 </Text>
          </TouchableHighlight>

        );
      }
}
    
    

        
  • 
            1
        
    • 

        
  • 
            2
        
    • 

        
  • 
            3
        
    • 

        
  • 
            4
        
    • 

        
  • 
            5
        
    • 

        
  • 
            6
        
    • 

        
  • 
            7
        
    • 

        
  • 
            8
        
    • 

        
  • 
            9
        
    • 

        
  • 
            10
        
    • 

        
  • 
            11
        
    • 

        
  • 
            12
        
    • 

        
  • 
            13
        
    • 

        
  • 
            14
        
    • 

        
  • 
            15
        
    • 

        
  • 
            16
        
    • 

        
  • 
            17
        
    • 

        
  • 
            18
        
    • 

        
  • 
            19
        
    • 

        
  • 
            20
        
    • 

        
  • 
            21
        
    • 

        
  • 
            22
        
    • 

        
  • 
            23
        
    • 

        
  • 
            24
        
    • 

        
  • 
            25
        
    • 

        
  • 
            26
        
    • 

        
  • 
            27
        
    •

参数类型说明

RCT_EXPORT_METHOD 支持所有标准JSON类型，包括：

  • string (NSString)
  • number (NSInteger, float, double, CGFloat, NSNumber)
  • boolean (BOOL, NSNumber)
  • array (NSArray) 包含本列表中任意类型
  • object (NSDictionary) 包含string类型的键和本列表中任意类型的值
  • function (RCTResponseSenderBlock)

除此以外，任何RCTConvert类支持的的类型也都可以使用(参见RCTConvert了解更多信息)。RCTConvert还提供了一系列辅助函数，用来接收一个JSON值并转换到原生Objective-C类型或类。例如： 

#import "RCTConvert.h" #import "RCTBridge.h" #import "RCTEventDispatcher.h" //  对外提供调用方法,为了演示事件传入属性字段 RCT_EXPORT_METHOD(testDictionaryEvent:(NSString *)name details:(NSDictionary *) dictionary)
{ NSString *location = [RCTConvert NSString:dictionary[@"thing"]]; NSDate *time = [RCTConvert NSDate:dictionary[@"time"]]; NSString *description=[RCTConvert NSString:dictionary[@"description"]]; NSString *info = [NSString stringWithFormat:@"Test: %@\nFor: %@\nTestTime: %@\nDescription: %@",name,location,time,description]; NSLog(@"%@", info);
}
    
    

        
  • 
            1
        
    • 

        
  • 
            2
        
    • 

        
  • 
            3
        
    • 

        
  • 
            4
        
    • 

        
  • 
            5
        
    • 

        
  • 
            6
        
    • 

        
  • 
            7
        
    • 

        
  • 
            8
        
    • 

        
  • 
            9
        
    • 

        
  • 
            10
        
    • 

        
  • 
            11
        
    • 

        
  • 
            12
        
    • 

        
  • 
            13
        
    • 

        
  • 
            14
        
    •

iOS原生访问React Native

如果需要从iOS原生方法发送数据到JavaScript中，那么使用eventDispatcher。例如： 

#import "RCTBridge.h" #import "RCTEventDispatcher.h" @implementation CalendarManager @synthesize bridge = _bridge; //  进行设置发送事件通知给JavaScript端 - (void)calendarEventReminderReceived:(NSNotification *)notification
{ NSString *name = [notification userInfo][@"name"];
    [self.bridge.eventDispatcher sendAppEventWithName:@"EventReminder" body:@{@"name": name}];
} @end
    
    

        
  • 
            1
        
    • 

        
  • 
            2
        
    • 

        
  • 
            3
        
    • 

        
  • 
            4
        
    • 

        
  • 
            5
        
    • 

        
  • 
            6
        
    • 

        
  • 
            7
        
    • 

        
  • 
            8
        
    • 

        
  • 
            9
        
    • 

        
  • 
            10
        
    • 

        
  • 
            11
        
    • 

        
  • 
            12
        
    • 

        
  • 
            13
        
    • 

        
  • 
            14
        
    • 

        
  • 
            15
        
    • 

        
  • 
            16
        
    •

在JavaScript中可以这样订阅事件，通常需要在componentWillUnmount函数中取消事件的订阅。 

import { NativeAppEventEmitter } from 'react-native';

var subscription = NativeAppEventEmitter.addListener( 'EventReminder',
  (reminder) => console.log(reminder.name)
); ... // 千万不要忘记忘记取消订阅, 通常在componentWillUnmount函数中实现。
subscription.remove();
    
    

        
  • 
            1
        
    • 

        
  • 
            2
        
    • 

        
  • 
            3
        
    • 

        
  • 
            4
        
    • 

        
  • 
            5
        
    • 

        
  • 
            6
        
    • 

        
  • 
            7
        
    • 

        
  • 
            8
        
    • 

        
  • 
            9
        
    •

用NativeAppEventEmitter.addListener中注册一个通知，之后再OC中通过bridge.eventDispatcher sendAppEventWithName发送一个通知，这样就形成了调用关系。

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

评论(0) 浏览(4298)

ofo《我们看过的世界杯》H5

涛涛

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

项目背景：为了配合世界杯做的H5活动，主题是DIY你的世界杯时刻                                      

玩法：选择自己看世界杯的场景，可以在画面当中添加食物和自定义的小元素，另外根据场景的变换人物的腿也可以选择哦                                                 

项目周期大概半个月，和团队的小伙伴一起完成的，感谢@珊，@暖暖，@明明   

使用工具包括sketch、ps、手绘板                                                                    

 

ps：做H5真的是很累，工作量大，画的手疼，不过也积累了很多的经验，上线了好开心!

请登录并验证邮箱后查看原图请登录并验证邮箱后查看原图请登录并验证邮箱后查看原图请登录并验证邮箱后查看原图请登录并验证邮箱后查看原图请登录并验证邮箱后查看原图请登录并验证邮箱后查看原图请登录并验证邮箱后查看原图请登录并验证邮箱后查看原图

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



评论(0) 浏览(3114)

前端工程师必备实用网站

周周

素材类网站


千库网，一个免费下载图片素材的网站：http://588ku.com/ 
千库网.jpg.png


Unsplash是一个分享免费高质量照片的网站，照片分辨率都挺大，而且都是真实的摄影师作品，图片多是风景和静物：https://unsplash.com/ 

Unsplash.jpg.pngUnsplash2.jpg.png

插件类网站

jq22，分享jQuery插件和提供各种jQuery的详细使用方法,在线预览,jQuery插件下载及教程：http://www.jq22.com/

jq22.jpg.png


http://www.htmleaf.com/ 这个网站与上一个网站类似，也提供了大量的jQuery插件。

                htmleaf.jpg.png

layui，这是一个强大的模块化前端框架：http://www.layui.com/

             layui1.jpg.png

layui2.jpg.png

H-ui，端框架，一个轻量级前端框架，简单免费，兼容性好，服务中国网站：http://www.h-ui.net/index.shtml

H-ui.jpg.png 

字体类网站

有字库，一个免下载字体，直接在线引用字体的网站：http://www.youziku.com/onlinefont/index

有字库.jpg.png



PS字体库，包含了几乎所有类型的字体，下载好安装，PS中就可以使用了：http://www.psjia.com/pssc/fontxz/list_18_3.html


               PS字体库.png

图标类网站

iconfont，这是阿里巴巴旗下的图标库网站，直接搜索关键词就可以找到大批的图标。下载图标的时候我们还可以选择颜色、大小、格式，根据自己的需要下载就好了：http://www.iconfont.cn/plus

                   iconfont.jpg.png

easyicon，这也是一个非常有名的图标库，与上面那个不同的是，这里的图标不是单一颜色的，而是设计好的颜色。下载图标也很简单，直接点击对应图标上面的格式就可以下载：http://www.easyicon.net/iconsearch/ios/

                  easyicon.jpg.png

奥森图标（Font Awesome），提供丰富的矢量字体图标—通过CSS可以任意控制所有图标的大小 ，颜色，阴影：http://www.thinkcmf.com/font/search.html

                奥森图标.jpg.png

                 奥森图标1.jpg.png

配色类网站

http://colorhunt.co，这个网站给我们提供了很多的配色方案，我们直接使用就OK了。

使用方法也很简单，鼠标移动到对应的颜色上，我们就可以看到颜色的十六进制码，复制这个颜色到工具里就可以使用了。

                colorhunt.jpg.png

https://webgradients.com/， 180种渐变方案供你选择，还可以直接复制CSS样式应用到网页中。

              webgradients.jpg.png

adobe，这个是Adobe公司出的，他提供了多种配色方案。我们点击圆盘中间的点，就可以调整出我们想要的配色方案：https://color.adobe.com/zh/create/color-wheel

                Adobe.jpg.png

http://www.colorhunter.com/，这是一个提取现有图片配色方案的工具。我们上传一张图片，它就会帮我们把图片的配色提取出来供我们使用。

                colorhunt.jpg.png

bootcss，这个网站是为WEB设计，开发中经常用到的安全色。网站内列出了颜色的十六进制码和RGB码，复制粘贴就可以了：http://www.bootcss.com/p/websafecolors/

               bootcss..jpg.png

sioe，这是一个在线RGB和十六进制颜色码转换工具。在对应的位置填入十六进制代码，点击转换，我们就可以获取到RGB颜色的代码了：http://www.sioe.cn/yingyong/yanse-rgb-16/

              sioe.jpg.png




评论(0) 浏览(4986)

【只言片语系列1-4】-体验设计杂谈

鹤鹤

评论(0) 浏览(3540)

2018年UI设计趋势概览

博博

2018年UI设计趋势概览

嗨兔科技 2018-06-11 10:41:59

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


互联网产品的用户界面设计趋势是根据用户的不同需求而不断变化的。在仔细分析了过去几年用户界面设计的趋势和创新之后，我们可以发现其背后的一些规律，2018年UI界面设计的趋势如下。

2018年UI设计趋势概览

渐变色

在过去的几年里，越来越多的设计师在设计作品时采用了色彩渐变的方法，今年的流体渐变更是风靡全球。即使你只选择了一种颜色，也可以在色彩渐变和不同图片的帮助下，营造出出丰富的层次结构感，绘制出一幅令人赏心悦目的画面。因此，色彩渐变的流行之风不仅在席卷了2017年整年，还将会在2018年继续流行下去。

2018年UI设计趋势概览

icon由线转面、刻画细节

现在的ios12中，采用了面性图标，未选中和选中状态只有颜色上的区分，并且图标更加圆润。目前很多用户界面已经给页面底部标签栏的icon加上微动效底部标签栏icon不仅有微动效，十分有意思，符合当下95后00后的用户心态。同时细节的设计带给用户的感受也会上一个档次。

2018年UI设计趋势概览

透明度+重叠

字体、图形以及颜色的重叠，不仅可以使界面看上去更加醒目鲜明，还可以营造出一种空间感。 相同元素的重叠，再辅以阴影，也会使整个APP界面的设计产生更多的奇妙感，牢牢抓住用户眼球，给他们留下深刻印象。因此，用户体验设计中，不同元素的重叠将会成为2018年的趋势。

2018年UI设计趋势概览

卡片+投影相结合

ios12中采用了大圆角卡片设计，它不再像过去MD中的小圆角那样呆板，大圆角让设计更加轻快大气。相信大家已经看到了很多卡片都使用了投影这一手法，轻微的、似有似无的投影，不会被用户立即察觉，但是会给设计增加深度，形成层叠的关系，更加醒目，可以更好的抓住用户的注意力。

2018年UI设计趋势概览

插画风格

插画风格运用的越来越广泛，适用于app当中的启动页、缺省页、banner图、专题头图、弹窗插画、icon等等，UI界面有各式各样的插画风格——如手绘风格、简约风格、MBE风格、剪纸风格和孟菲斯风格等。这些插画风格的使用不仅使APP更加有趣和与众不同，同时也赋予了用户界面个性，这就在界面设计层出不穷的当下能够给用户留下更为深刻的印象。

2018年UI设计趋势概览

较强的颜色或字体大小对比

强烈的颜色或字体对比也可以帮助设计师设计出优秀的用户界面来吸引用户的注意。例如，添加不同样式、类型、大小的字体，也可以传递层次和空间的感觉。而不同类型和风格的配色也会形成鲜明的对比，使整个设计更加丰富多彩和引人注目。

2018年UI设计趋势概览

3D效果正流行

今年C4D大热，相信大家已经感受到了，今年双十一很多商家都使用了3D效果，有的还加上了动效，可以让你全方位、多角度、更加真实的观察商品。目前还不会C4D的设计师们，为了提升你的竞争力，有必要学起来了，毕竟技多不压身。

2018年UI设计趋势概览

交互动效

给APP的图标、字体、照片和按钮添加动画或交互总是对用户有着积极的影响，因为它能带用户更多愉快的体验。它的几点特性：快速且流畅、恰到好处的反馈、提升操作感受、提供良好的视觉效果。所以这一趋势在2018年还将继续流行下去。

2018年UI设计趋势概览

动态视频

一般小视频使用在启动页多用于第一次打开app的场景，对用户的代入感较强再如由动态图片转变成动态视频，图片中有少量的动态元素，仿佛赋予图片生命，比较唯美和贴近现实。手机banner设计上也会采用动态视频进行展现，方便360度的查看商品，刺激你剁手的欲望。

2018年UI设计趋势概览

VR/AR/VUI是未来的大趋势

众所周知，现在VR（虚拟现实）和AR（增强现实）VUI（语音交互设计）大火，它们的核心都是计算机视觉和听觉。VR目前在娱乐领域被使用，而AR将会真正影响我们的工作和生活，多用于多媒体、市场营销、教育等方面。VUI在医疗和户外活动方面会发挥出前所未有的用户超级体验。

2018年UI设计趋势概览

我们为创造者和变革者而生，我们帮助企业制定用户体验策略，为用户创造精彩的数字体验，并通过品牌设计与用户建立情感的连接，用设计驱动商业策略的成功。

2018年UI设计趋势概览


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




评论(0) 浏览(3119)

Win10最具雄心的UI实验，微软砍掉了

蓝蓝设计的小编

IT之家6月28日消息 今天微软推送了的Windows 10 RS5快速预览版17704系统，在该版本中，微软删除了Sets窗口管理功能，这是一种全新的任务型分组的Windows UI多窗口。被誉为Windows 95以来最大窗口UI变动。

评论(0) 浏览(3498)

设计师必须掌握的交互知识

鹤鹤


交互设计 Interaction Design 也被成为IXD。交互设计建立起了人与计算机便捷沟通的通道，它的目标是创造可用性和用户体验俱佳的产品。作为UI设计师，我们在工作之中经常会对接交互设计师和产品经理，他们具有丰富的交互知识和经验。那是不是我们作为UI设计师，就只需要专心做好视觉层面的工作而不需要了解交互设计了呢？当然不是，在视觉设计层面更多地考虑布局和交互原则才可以让我们的界面更友好，视觉设计师是交互设计中非常重要的角色。

 


评论(0) 浏览(3830)

分类

日历

链接

个人资料

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

存档