UI设计受到的视觉技巧

by admin on 2018年9月25日

事先多亚维码扫描都是基于zxing做的,但是zxing用起来着实特别烦,又直白未创新。随着iOS6退历史舞台,终于得以应用iOS7自此,用系统的AVFoundation做的老二维码扫描器了。

前言:

先啰嗦几句,视觉上之对齐与平衡一直从未找到比较专业之方式,完全无感觉,前几乎龙在Medium上译看文章,刚好看到同一篇系统的教视觉技巧的章,所以决定尝试着翻译一下,这篇稿子针对性UI设计师规范化icon很有赞助,希望大家看后能控制其中的技能。

依附Medium上的初稿链接:

https://medium.muz.li/optical-effects-9fca82b4cd9a,

原文作者吧Slava
Shestopalov,再次谢谢。(本文包含约50摆设图纸,建议走端的同桌等wifi环境下看。)

看这首文章之前,我先提出三独问题:

  1. 什么样做出视觉平衡的icon?

  2. 怎么被不同之形态视觉对合?

  3. 怎才终于“完美”的圆角?

及时首文章以对当下三个问题做出解答。

我们的眼睛是平等种植出乎意料之物,经常对咱们说谎。但是,如果您打探了人类视觉感知的特殊性,就足以做出进一步适合用户体验的筹划。运用视觉及的艺不仅可以协助字体设计师来创造可读和年均的书,而且于UI设计师规范化icon也是有助的。

初始化相机,扫描器

- (void)setupCamera
{
    dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0), ^{
    // 耗时的操作
        // Device
        _device = [AVCaptureDevice defaultDeviceWithMediaType:AVMediaTypeVideo];

        // Input
        _input = [AVCaptureDeviceInput deviceInputWithDevice:self.device error:nil];

        // Output
        _output = [[AVCaptureMetadataOutput alloc]init];
        //    [_output setMetadataObjectsDelegate:self queue:dispatch_get_main_queue()];
        [_output setMetadataObjectsDelegate:self queue:dispatch_get_main_queue()];

        // Session
        _session = [[AVCaptureSession alloc]init];
        [_session setSessionPreset:AVCaptureSessionPresetHigh];
        if ([_session canAddInput:self.input])
        {
            [_session addInput:self.input];
        }

        if ([_session canAddOutput:self.output])
        {
            [_session addOutput:self.output];
        }

        // 条码类型 AVMetadataObjectTypeQRCode
        _output.metadataObjectTypes =@[AVMetadataObjectTypeQRCode];
        dispatch_async(dispatch_get_main_queue(), ^{
            // 更新界面
            // Preview
            _preview =[AVCaptureVideoPreviewLayer layerWithSession:self.session];
            _preview.videoGravity = AVLayerVideoGravityResizeAspectFill;
            //    _preview.frame =CGRectMake(20,110,280,280);
            _preview.frame = self.view.bounds;
            [self.view.layer insertSublayer:self.preview atIndex:0];
            // Start
            [_session startRunning];
        });
    });
}

一.同样的尺寸,为什么视觉感知上大小不一样?

长宽为400px的正方形与直径400px的无微不至,哪一个再次老?毋庸置疑,在物理尺寸上,它们的小幅和高度都是相当的,但是要看下的图片,我们的眼睛会理所当然觉得正方形要比较圆大一点。

使您莫相信这些形象是如出一辙尺寸的,这是富含参考线和尺寸的版。

给我们来拘禁下图备受的个别独形象。在视觉重量方面,你看他们是不是等?

对自我吧,是相等的。至少杀不便及时分辨出啦一个视觉上再也还一些。这不意外,因为自己用通盘之直径增加了50px。

为印证有这种情形的由,我们拿率先个例证中(长宽为400px的正方形和直径400px的无微不至)与第二独例证中(长宽为400px的正方形和直径450px的全面)的造型分别重叠。如下图,这时,你便会见小心到,在“a”区域中,正方形的轻重超过了周,而环在“b”区域受到超越了刚刚方形。左图中,正方形完全覆盖了周,就比如从四面包围在同一。而于右边图备受,圆和正方形视觉感知上抵消,没有有一个毕覆盖任何一个的情景,
它们每个造型都出四个空。

一如既往,我们啊足以为此口形和三角形来说明。为了当视觉上以及正方形保持平衡,它们该再要命片段。(啧啧啧,最后一个三角有点过了,嘚瑟)

那么怎样当界面中采用是技术也?例如,当您创造同组图标时,最要之是,使她视觉平衡,因此图标不得以极其死,当然为不可以尽小。(嗯?你规定就不是废话?)如果我们直接以图标约束在刚方形区域里,则重复如刚刚方形的图标会扣押起再特别。

自身道好允许视觉及于小的图标超出矩形区域,并于视觉上较重之图标与图标之间留有空中来填充不同造型图标的视觉重量。

今天来拘禁有些Material design中视觉平衡的图标。

喻了吧,为什么一个图标的展示范围连续要压倒图标本身,这是为能为非正方形的图标在一个安全区域外微调,达到与正方形图标视觉平衡的意义。

这就是说哪验证视觉是否平衡?最简单易行的计就是是混淆目标。如果您的图标变成了一个个一般的斑点,它们有着同等的视觉重量,那就算证实是视觉平衡的。

有时我们吧可以动用现有的图样,例如当分享到第三方app的按钮。Facebook和Instagram的图标是圆角矩形的,而Twitter的图标是一个鸟的掠影,Pinterest则一直用首字母“P”设计icon。因此Twitter和Pinterest的图标要统筹之死去活来一部分,这样他们不怕会跟Facebook和Instagram的图标保持平衡。

视觉平衡问题之别一个事例是暨按钮一起放置的输入框。如果按钮直径等于输入框的可观,那么按钮对于我们的眼眸来说,就见面显示略微部分;但是倘若您拿按钮放大一点,整个结构将会见换得越来越平衡。

如单变动按钮的体,则未待加大。在产图中,按钮和文本框的万丈都也80px,但由按钮填写充了黑色,视觉上再次重一些,所以右侧的按钮与附近的输入框能更好地平衡。

**划重点:**

  1. 视觉重量是人口眼察觉物体大小的意思,并不一定等于其大体尺寸。

2.
圆形,菱形,三角形和其余非正方形的模样要规划之重复怪有,以便同正方形的状视觉平衡。

3.
图标区域应也视觉平衡保留一定的空中,对于同样组图标来说,这一点重点。

在viewWillAppear和viewWillDisappear里对session做优化。

-(void)viewWillAppear:(BOOL)animated
{
    [super viewWillAppear:animated];
    if (_session && ![_session isRunning]) {
        [_session startRunning];
    }
    timer = [NSTimer scheduledTimerWithTimeInterval:.02 target:self selector:@selector(animation1) userInfo:nil repeats:YES];
}

- (void)viewWillDisappear:(BOOL)animated
{
    [super viewWillDisappear:animated];
    [timer invalidate];
}

如上timer是单扫描动画的计时器,可以稍过不扣。

二.不同形状的对齐

视觉对联合是视觉平衡的延展逻辑。大家看无异扣押下图的星星点点单标签,他们扣押起一样长为?

于切像素方面,答案是毫无疑问的。然而,当您再看一样糟糕的时候,你见面发觉下面的价签看起要较地方的少。

当即是另外的均等摆设图。观察一下,有没产生什么变化?

自身对下面的竹签进行了视觉填充,超过上面签长度的20px凡用来填充尖峰之间的空隙,这样即使得以要个别只样子保持视觉平衡。

再有一部分重复扑朔迷离的不同形态标签的例证。

当您下次统筹一个折叠条纹和文字的海报时,请记住视觉平衡的法子,尖锐边缘之象应该比另外的样子越突出某些。

连片下去说话同样张嘴,纯文本以及富有背景的段落中的对齐。其实这取决背景的视觉密度,如果她可怜易,可以拿突出展示的段子与另的文件对共同。

一般情况下,背景非常浅时,它并无见面阻塞用户正常阅读之文本流。

再有一个道好以为凝聚的背景。在图及,黑色背景及其余的公文对一头,而其中的白色文本则因缩进形式放置。

同浅色背景不同之是,黑色具有很要命的视觉重量,如果您想用此办法插入一段文字,最好是依照下图所出示之法去对同。

一致的法则为适用于按钮和输入字段。

左边输入字段的浅色背景超出了输入信息和输入的用户称,“发送”
按钮的右侧边缘与输入背景的右边缘没有完全对一起,因为按钮颜色比较充分,从视觉角度来拘禁,更重一些。

若是右手的输入框来黑色描边,我们以它和标题对共同,用户称当输入框内缩进。“发送”
按钮因为来三角形边缘,所以将按钮向右侧走一点,以便同输入框保持平衡。

俺们更为询问视觉对共同之计——文本及按钮的对齐。如图,下面两只按钮虽然造型不一样,但文本看起是位于中的。

关键在于,右边的按钮将内的文件为右侧走了有些,因为右边是三角形的。除此之外,箭头状按钮的小幅增了40px,这样看起与矩形按钮的视觉重量等。

文件按钮不仅出档次对齐方式,而且还有单词和背景的垂直对齐方式。这里出口的的首先种植方式适用于各种操作系统、网页和应用程序的界面。它是依据大写字母
( 即Cap-height ) 高度的针对性齐方式,等于H或者I的高度。

相似的话,大写字母的升部和降部与按钮边缘的相距是相等的。这不是未曾基于的,因为命令执行通常是用标题字写的,英文中起再次多的升部字母,(l,t,d,b,k,h),而未是降部字母(y,j,g,
p)。

其余一样种植艺术是行使一个小写字母 ( 即x-height )
的惊人来针对齐文本以及背景,在管衬线字体中,它与字母“x”的万丈相等。

这种方式其实为实施得搭,因为文件的视觉重量主要集中在小写字母的区域中。

虽然这些办法各有不同,但实际利用中连没有多深之差距。

这么的例证还有好多。左侧的“Cancel”和“OK”(频繁使用到之按钮)显然还称用Cap-height方法,因为
“Cancel” 没有降部,“OK” 都是殊写字母。而右边被不过发生 “Sync”
按钮适合用x-height方法,因为它们来内外突出的一些;“Cancel” 和 “OK”
用此措施的言语虽放会显得太强了。

图标按钮的动静略有不同。我们当一个圆形按钮上停放一个 “发送”
图标。哪一个按钮看起越平衡?

君大概就注意到,左边的按钮出了问题,这是因不同之针对齐方式。左边的图标被,如果您用她以矩形的法对同,那一定对,因为当您望程序员提供SVG或PNG文件时,它是一个含有矩形背景的图标;但实际上呢,正确的做法应该像右边按钮一样,让图标为周的点子对旅背景。

设计师也程序员提供切图时,需要留部分区域,以便他们好于背景上因为视觉对伙同之计拿图标居中。

本条方式一致适用于 “播放”
按钮。如果您一直对齐圆角矩形和三角形,它们就见面看起非常奇怪。(这个事例你可错过看看手机app中的播放icon,大部分都不曾严格的视觉对同步。)

思念只要重好地摆好三角形的岗位,正确的做法是,先给其对同到一个圈区域,然后再次同按钮背景对同步。

**划重点:**

  1. 具备锋利边缘之状应该设计之再充分片段,以便同相邻之矩形对象平衡。

2.
Cap-hight(大写字母高度)对同步是当按钮背景及对齐文本的实用还普遍运用的方式。

3.
将三角形图标是放置在按钮上之中办法之一是拿图标对旅到环底部,并以全面与背景对一起。

拍卖扫描的结果

- (void)captureOutput:(AVCaptureOutput *)captureOutput didOutputMetadataObjects:(NSArray *)metadataObjects fromConnection:(AVCaptureConnection *)connection
{

    NSString *stringValue;

    if ([metadataObjects count] >0)
    {
        AVMetadataMachineReadableCodeObject * metadataObject = [metadataObjects objectAtIndex:0];
        stringValue = metadataObject.stringValue;
    }

    [_session stopRunning];
    [timer invalidate];
    NSLog(@"%@",stringValue);

}

三.视觉中之圆角

哪的周好比几哪里法着之圆更圆?我先没有感念了此问题,但恰恰而本人在当时篇稿子的启幕所说的均等,我们人类的眼很奇怪,有时候不会见像预想的那样感觉到距离。大家观察一下,下图备受的哇一个圆看起来再次宏观?

自家思念大部分人会见选取3跟4。1暨2尽瘦,5而最为丰富了。如果我们用3和4重合,一个几乎哪法的两全和一个微调过的完善,我们会发觉第二独圆比第一独圆视觉重量重还,因此我们的眼眸会看再次全面。

以求证自身的观点,我于三种著名的无论是衬线字体(Futura,Circe和Geometria)抽出“o”字母。鉴于高质量的字是因人的视觉感知,并下复杂的光学结构体系建立的,它们的旋看起比较几哪圆形更周到。这些假名难道不使人清爽吗?(我非任,反正就是看在舒心)

自我试着用这些假名和几何中之旋重合。即便是无与伦比接近圆的Futura字体中之
“o”,也起四独超的片,而Circe和Geometria的书体显得较到又宏大一点。尽管其的冲天与幅度相等,我们啊可以看看就四只“肚子”,就仿佛她吃撑了同一。

综上所述,从视觉角度来说,修改后的统筹兼顾(右侧)可能看起较正规的旋(左侧)更周到。

那么我们欠如何用这种办法呢?当然是为做出更为舒畅的圆角,如果你在风行的绘图软件——Photoshop、Illustrator或sketch使用内置的圆角工具,就会意识圆角过渡的并从未那圆滑。

故圆角工具做出的圆角,人眼睛就会发现直线突然变弯曲的转折点,所以看起很不自然。

考虑一下,如何用视觉感知的主意来化解这问题。

本地方 “o”
字母的微调措施,这种视觉圆角在几乎哪里圆之外应该生出一个分外的区域,才能够使直线与曲线连接的地方不那么生硬。

仔细观察及时片个圆角之间的分别。

俺们好用这种艺术运用叫圆角矩形的按钮。

自家怀疑你曾注意到了右的按钮有重复平整的圆角,对您的肉眼来说更舒服。(升级iOS11之同室可以洞察一下计算器中数字“0”
按钮的拍卖,很好之征了此事例)

iOS图标为是这般。如果因此简单的圆角工具是举行不生这种圆角的。在我们深切座谈这话题之前,我们事先来探视两只不同之圆角矩形。

首先单凡是于sketch中创造的圆角矩形。第二独形象是超椭圆形,也称为Lamé曲线。它是由法国数学家GabrielLamé发现的,根据不同的公式,可以做出看起如圆角矩形的相。

Marc Edwards提出了Lamé曲线的公式,形成了边缘光滑和视觉及圆满的样子。iOS
7之后的图标都是根据其计划的。

后来,这种形态通过抬高黄金比例以及网格来规范化,用于指导绘制图标的设计师。

动超椭圆形状的重要优点是她更圆润的外观,但是呢发毛病,就是这些不标准的形制难以直接采用及实在的界面被。

程序员可以构成多只SVG,在代码中补充加特别之公式要脚本,或者使用iOS为那应用程序图标使用PNG蒙版。

对设计师而言,有一个粗略的调整圆角的艺术。只待将圆角矩形转换为轮廓,进入形状编辑模式,并手动将曲线手柄彼此拉近。(拉近多少?慢慢调嘛,建议以标尺)

跟一般的圆角矩形相比,这种超椭圆形更为活跃,这对于绘制视觉准确之图标来说挺关键。

划重点:

1.
使圆角工具绘制的圆角看起像是人工的,你可好轻之相直线突然成为曲线之接触。

  1. 视觉过渡自然的圆角需要特殊算法或手动调整形状。

故此二维码扫描器扫自己的亚维码

NSString *url = [NSURL URLWithString:@"html/judgement.html" relativeToURL:[ZXApiClient sharedClient].baseURL].absoluteString;

    if ([stringValue hasPrefix:url]) {
        //如果扫出来的url是自己的域名开头的,那么做如下的处理。
    } 

有点知识点

偶尔,一个加上宽不对等的正方形看起更为尊重。你或会见怀念,这XX在引我吧?不信教你看,下图被的正方形,哪个看起更端正?

设您拣了左侧的状,那得是中了视觉感知的熏陶。(也许是上帝之带)

当我们了解及眼睛对体的冲天比该涨幅更灵活时,会感觉很神奇,它说了为何以无衬线字体中,字母“o”总是比正规的统筹兼顾又宏观之现象。

谢大家忙于抽出时间读书这首译文,原文作者也Slava
Shestopalov,第三差感谢他的授权。满满都是干货啊!还免碰单赞!(昨天自家见到优设网也翻了初稿,翻译的不行过硬!哥们儿得加油了)

此致

敬礼

据此二维码扫描器扫别人的老二维码

[[UIApplication sharedApplication] openURL:[NSURL URLWithString:stringValue]];

直接动用openUrl系统自带的浏览器打开url就实行,或者自己写个放的浏览器打开。

故此他人的围观器扫自己的老二维码

先是以协调的第二维码定义成http://www.xxx.com/xxxxx如此这般的协调域名的url。
那么第三着的第二维码扫出来后,会超越向此网址。

附带在服务器上配备之页面,加入如下的代码

<script language="javascript">
  if (navigator.userAgent.match(/(iPhone|iPod|iPad);?/i)) {
    var loadDateTime = new Date();
    window.setTimeout(function() {
      var timeOutDateTime = new Date();
      if (timeOutDateTime - loadDateTime < 5000) {
        window.location = "要跳转的页面URL";
      } else {
        window.close();
      }
    },
    25);
    window.location = " test:// ";
  } else if (navigator.userAgent.match(/android/i)) {
    var state = null;
    try {
      state = window.open("apps custom url schemes ", '_blank');
    } catch(e) {}
    if (state) {
      window.close();
    } else {
      window.location = "要跳转的页面URL";
    }
  }
</script>

当下段代码是因url schemes的原理,如果你的app里怀于这url
schemes(例子里是test://),那么会这打开这个url,如果未设有,就会越25毫秒,那么就是对准任何一个页面,一般是生载页。

接着,在app的url schemes里设置,比如test

Paste_Image.png

本条时段,浏览器发出test://的乞求的时,就会及时打开这app了。

终极,如果非饱吃扫描二维码只能打开app,想对二维码里的内容做有操作的话,可以:

  • 拿二维码的情定义成http://www.xxx.com/xxxxx?uid=xxx然,当然后面的参数需要加密。
  • 以js代码里拿走之参数,并原封不动的叠加在url
    schemes后面,如test://uid=xxx
  • 于appDelegate里增长如下代码。

 - (BOOL)application:(UIApplication *)application handleOpenURL:(NSURL *)url
{
    if ([url.absoluteString hasPrefix:@"test://uid="]) {
        NSString *uid = [url.absoluteString substringFromIndex:11];
        NSLog(@"uid=%@",uid);
        //对uid进行操作
    } else {
        //其他的地方抛过来的url,比如微信
        return [WXApi handleOpenURL:url delegate:self];
    }
    return YES;
}

之所以他人的扫描器扫别人的次维码

34ebbc5ccf91e9deffe7f8d1fead2675.png

终极来张效果图

2015-04-08 09_52_30.gif

应众多同室要求,上单demo

demo

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图