首页

过瘾！这17个海报设计小技巧，果断收藏了！

博博

过瘾！这17个海报设计小技巧，果断收藏了！

图片来源：古田路９号、优秀网页设计、微博

最近设计界有两个段子火了

甲方爸爸说：

“用PS不专业要用photoshop”

▼

过瘾！这17个海报设计小技巧，果断收藏了！

另一个就是

女设计师和甲方爸爸网恋，被骗稿！！

▼

过瘾！这17个海报设计小技巧，果断收藏了！

讲真，大大君我看到这两个段子

默默心疼设计师几秒钟

如果以后还遇到这种奇葩

就把这篇文章砸他脸上

劳资设计一张海报这么难，你的脸够本吗？

过瘾！这17个海报设计小技巧，果断收藏了！

今天大大君我就教大家

１７种常见的海报设计技巧吧！

▼

文字分散法则

字体分散的海报设计技巧是我们经常见的一种设计手法，通过将字体拆分重组、改变字体大小、排版来起到吸引目光的效果。

例如下面这些

过瘾！这17个海报设计小技巧，果断收藏了！

过瘾！这17个海报设计小技巧，果断收藏了！

过瘾！这17个海报设计小技巧，果断收藏了！

故障效果的设计法则

故障效果的海报设计通常会用把设计的主视觉图形或文字，进行幻影、扭曲、重合叠加等形式去呈现，能迅速将人的眼球吸引过来。

过瘾！这17个海报设计小技巧，果断收藏了！

过瘾！这17个海报设计小技巧，果断收藏了！

过瘾！这17个海报设计小技巧，果断收藏了！

色彩叠加海报设计法则

色彩叠加法则其实是海报色彩设计技巧中的细分领域，其特色是利用两种或者两种以上的颜色进行画面的切割、重组、渐变、叠加等设计手法，去突出整体画面的主焦点，若色彩搭配好了，会起到非常震撼的视觉效果。

过瘾！这17个海报设计小技巧，果断收藏了！

过瘾！这17个海报设计小技巧，果断收藏了！

文字切片海报设计法则

文字切片其实也就是把文字按视觉呈现的需求，进行切割，其设计的优势在于字体呈现较为立体，画面的节奏感强。

过瘾！这17个海报设计小技巧，果断收藏了！

过瘾！这17个海报设计小技巧，果断收藏了！

图文叠加的海报设计法则

图文叠加的海报设计法则，多用于电影海报，将人物或者场景与文字叠加，营造一种重复错落的视觉感。

过瘾！这17个海报设计小技巧，果断收藏了！

过瘾！这17个海报设计小技巧，果断收藏了！

液态效果的海报设计法则

液态效果的海报设计通常会选择用较为丰富的颜色进行渐变，高斯模糊或者扭曲的形式去呈现，画面的视觉大多以抽象的概念去呈现。

过瘾！这17个海报设计小技巧，果断收藏了！

过瘾！这17个海报设计小技巧，果断收藏了！

双重曝光的海报设计法则

双重曝光的海报设计用人或者动物与第三方元素进行重合、它最大的特点是利用光与影的结合，打造出比较跨时空的错落感，这种设计手法多用于电影海报。

过瘾！这17个海报设计小技巧，果断收藏了！

过瘾！这17个海报设计小技巧，果断收藏了！

过瘾！这17个海报设计小技巧，果断收藏了！

单字母的海报设计法则

英文字母的玩法有很多种，叠加，变形、重组等，单个的英文字母同样也可以这样玩，打破画面的单一性，变得趣味性很强。

过瘾！这17个海报设计小技巧，果断收藏了！

过瘾！这17个海报设计小技巧，果断收藏了！

正负形海报设计法则

正负形的海报设计其亮点在于利用负空间形成巧妙构图。一张图中隐藏着另一个画面。

大多数的设计师会选用负空间的方式，将视觉中心聚焦在一个比较小的物体上，并在周围留出视觉呼吸空间。将文本置于负空间内，来吸引视线。

过瘾！这17个海报设计小技巧，果断收藏了！

过瘾！这17个海报设计小技巧，果断收藏了！

立体海报设计法则

３Ｄ视觉效果的海报设计一直都是设计师们比较热衷的表现手法，将字母或者图案加上阴影效果，让主视觉画面凸出来。或者融入几何的图形元素，将平面的主视觉变得立体化。

过瘾！这17个海报设计小技巧，果断收藏了！

过瘾！这17个海报设计小技巧，果断收藏了！

文字海报设计法则

文字海报设计包含很多种表现形式，利用满版、留白、Ｓ型等排版形式布局画面，让文字代替图形去表达主画面。这也是较为常见的海报设计形式。

过瘾！这17个海报设计小技巧，果断收藏了！

过瘾！这17个海报设计小技巧，果断收藏了！

过瘾！这17个海报设计小技巧，果断收藏了！

纸质效果的海报设计法则

纸质效果的海报设计其实也属于立体海报的一种，形象和感觉的组合，是纸质效果海报设计的关键。

过瘾！这17个海报设计小技巧，果断收藏了！

而纸张给人的感觉是质感和厚重这两种形式，所以画面的呈现因围绕这两种形式进行展开。

过瘾！这17个海报设计小技巧，果断收藏了！

照片切割法则

照片切割也就是和文字或图形进行重合、叠加、打散的表现手法来增加海报设计的层次感。

过瘾！这17个海报设计小技巧，果断收藏了！

过瘾！这17个海报设计小技巧，果断收藏了！

透明效果海报设计法则

海报设计中，如果画面的颜色太过单调，可以将部分块面用较为鲜艳的颜色进行突出，这种表现形式通常适用于海报中文字较多的处理方式。

过瘾！这17个海报设计小技巧，果断收藏了！

过瘾！这17个海报设计小技巧，果断收藏了！

复古风格的海报设计法则

复古风的海报设计通常会选用颜色饱和度较低的颜色，搭配毛笔字体或肌理的触感进行呈现，这种设计手法，大多会用于电影海报或者艺术展览之类的范围。

过瘾！这17个海报设计小技巧，果断收藏了！

过瘾！这17个海报设计小技巧，果断收藏了！

插画风格的海报设计法则

插画风格的海报设计具备很强的讲故事能力，无论是小清新的画风还是较为夸张的插画手法，都能将整个画面变得生动活泼了很多，这也是很多设计师最常用的海报设计的表现形式。

过瘾！这17个海报设计小技巧，果断收藏了！

过瘾！这17个海报设计小技巧，果断收藏了！

渐变的海报设计法则

渐变色系的海报设计，用很多种颜色进行巧妙融合，画面分为简洁和个性两种形式呈现，视觉冲击力很强。

过瘾！这17个海报设计小技巧，果断收藏了！

过瘾！这17个海报设计小技巧，果断收藏了！


评论(0) 浏览(3457)

程序猿之HTML

seo达人

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

一、WEB概述 (!!掌握web发展过程图、B/S和C/S架构的特点)
    B/S: Browser-Server 浏览器服务器模型 WEBQQ 网页游戏
        优点: 不需要下载客户端程序, 使用浏览器可以直接访问. 程序的升级操作是在服务器端进行的. 浏览器只需要刷新页面就可以看到升级后的效果
        缺点: 浏览器具有一定的局限性, 页面的展示能力仍然是很差. 所有的页面数据都需要从服务器实时的获取, 所以对网速的依赖很高
    C/S: Client-Server 客户端服务器模型 QQ LOL
        优点: 客户端可以任意的设计, 页面的展示能力就可以很强. 由于大量的资源都已经保存在了客户端, 和服务器交互的仅仅是一些变化的数据, 所以对网速的依赖很低
        缺点: 第一次使用时需要下载客户端程序, 一旦程序需要升级操作, 所有的客户端程序都需要升级. 在有些场景中是不能被接受的.
        
二、HTML 
    1.HTML是什么
        超文本标记语言 最基础的网页语言 W3C
        HTML不是一门编程语言 而是一门标记语言
        HTML是用标记(标签/元素)来描述网页内容的
        HTML是文档的一种
        
    2.html的结构 (掌握)
        <!DOCTYPE HTML>
        <HTML>
            <HEAD></HEAD>
            <BODY></BODY>
        </HTML>
        <!DOCTYPE HTML>用来指定当前页面所遵循的html的版本
        头部分用来存放html页面的基本属性信息 优先被加载
        体部分用来存放页面数据,是可见的页面内容
        
        <title></title>指定网页的标题
        <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />其中的charset的值用来指定浏览器用什么编码解析当前页面
        
    3.html语法 (掌握)
        html标签分为开始标签和结束标签,如果标签内没有修饰的内容, 开始标签和结束标签可以合并为一个自闭标签
        如:    <br/> <hr/>
        
        标签通常都可以具有属性 属性与属性值用"="连接,属性的值可以用双引号、单引号引起来或者不用引号 一般会用双引号引起来
                        
        <!-- html的注释 -->
        
        html中多个连续的空白字符(制表符,空格,换行)默认会合并为一个空格来显示
        如果非要输入空格,可以用转义字符来替代 &nbsp;
        如果非要输入换行,可以用 <br/> 来替代
        
    4.font标签 -- 用来指定文本的字体/大小/颜色 (了解)
        size:指定字体大小 范围是 1~7 默认值为3
        color:指定字体颜色 
            值可以指定为颜色名 如red 
            或 十六进制的颜色值 如#000000 
            或 rgb三原色值 如rgb(255,255,255)
        face:指定字体 中文默认是宋体
        
    5.标题标签 -- 指定特定样式字体的一组标签 (掌握)
        <h1>一级标签</h1>
        <h2>二级标签</h2>
        <h3>三级标签</h3>
        <h4>四级标签</h4>
        <h5>五级标签</h5>
        <h6>六级标签</h6>
        属性:
            align:指定文本的排列
                left 
                center 
                right 
                justify
                
    6.转义字符 (掌握)
        <    &lt;
        >    &gt;
        "    &quot;
        '    &apos;
        空格 &nbsp;
        
    7.列表标签
        (1)定义列表 (了解)
            <dl> 定义一个定义列表
            <dt> 定义定义列表中的标题
            <dd> 定义定义列表中的项
                
        (2)有序列表 (了解)
            <ol> 定义一个有序列表
            <li> 定义列表中的项
            属性:
                type:定义项目符号的类型
                    A a I i 1(默认)
                start:定义项目符号的起始值
                
        (3)无序列表 (掌握)
            <ul> 定义一个无序列表
            <li> 定义列表中的项
            属性:
                type:定义项目符号的类型
                    disc square circle
            
    8.img标签 -- 图像标签 (!!掌握)
        <img src="图片的路径" alt="图像的替代文本"/>
        必选属性:
            src:图片的路径
            alt:图像的替代文本
        可选属性:
            width:宽度 px %
            height:高度 px %
            border:边框的宽度 px
    9.map标签 (了解)
        为图像绑定可点击区域的图像映射
        <map name="" id="">
            <area shape="circle" coords="640,410,64" href="#" />
        </map>
        属性:
            shape: 指定区域的形状
            coords: 指定区域的坐标
            href: 点击区域后跳转资源的URL
            
    10.超链接 -- <a> 锚 (!!掌握)
        用于指向当前位置以外的资源
        (1) 用于创建指向另外一个文档的超链接
        (2) 用于在当前页面的不同位置之间进行跳转
        重要属性:
            href: 所指向资源的URL
            name: 指定锚的名字
            target: 指定浏览器打开目标URL的方式。
                _blank    在新窗口中打开目标url
                _self    在当前窗口中打开目标url

    11.表格标签 -- <table> (!!!掌握)
        <table> 定义一个HTML表格
        <tr>    定义表格中的行
        <td>    定义表格中的单元格
        <th>    定义表格中的表头
        table的重要属性:
            border 边框宽度
            cellspacing 单元格之间的空白
            cellpadding 边框与单元格内容之间的距离
            bgcolor 背景颜色
            bordercolor 边框颜色
            width 宽度
            align 对齐方式
        tr重要属性:
            align 对齐方式
            bgcolor 背景颜色
        th/td重要属性:
            align 对齐方式
            bgcolor 背景颜色
            width 宽度
            height 高度
            colspan 可横跨的列数
            rowspan 可竖跨的行数
        <caption> 定义表格的标题
        <thead>
        <tfoot>
        <tbody>(可以出现多次).
            
        三个标签要么都没有,要么就必须一起使用,并且出现的顺序必须是thead,tfoot,tbody 
        如果没有使用这三个标签, 那么<table>里面所有的内容都会隐含在一个隐藏的<tbody>标签内
        
    12.框架标签 (了解)
        <frameset>
        <frame>
        框架标签需要写在head和body的中间
        
        <frameset>属性:
            rows 定义框架集中行的数目和尺寸
            cols 定义框架集中列的数目和尺寸
        <frame>属性:
            src 定义目标文档的URL
            noresize 规定无法调整框架的大小
            frameborder 是否显示框架周围的边框
            name 框架的名字
            target 打开目标URL的方式
                _blank 在新窗口中打开目标url
                _self 在当前窗口打开目标URL
                _parent 在父窗口中打开目标URL
                _top 打开时忽略所有框架在当前页面打开url
                framename
        <iframe>
            创建包含另一个文档的行内框架
            <iframe>标签永远不要自闭!! 可以在标签内部存放提示文本 如果浏览器不支持iframe 该文本会显示
            属性:
                src
                width
                height
        
    13.表单 (!!!掌握)
        (1)浏览器向服务器发送数据的方式, 有两种
            a)利用超链接向服务器发送数据 -- 请求参数
                在超链接的后面拼接上要发送的请求参数, 链接和请求参数之间用?分割, 参数名和参数值用 = 连接, 多个参数之间用 & 分割, 可以存在多个同名的参数

            b)利用表单向服务器发送数据
                利用HTML中的<form>标签以及一些表单项标签, 用户可以输入数据, 通过提交表单发送数据给服务器

        (2)form
            必须存在的属性:
                action: 指定表单发送的目标URL地址

            可选的属性:
                method: 指定以何种方式发送表单

            http协议指定了7种提交方式, 其中5种不用, 只用GET提交和POST提交

            只有使用表单并且明确的指定提交方式为post时(也就是设置method="POST")才是POST提交，其他提交都是GET提交．

            GET提交和POST提交的区别：
                主要区别体现在数据传输方式的不相同
                a)GET提交: 请求参数会赋在地址栏后进行传输
                    这种方式发送的数据量有限, 最大不超过1kb(4kb)
                    数据显示在地址栏, 安全性差
                    
                b)POST提交: 请求参数在底层流中传输
                    这种方式发送的数据量无限制
                    地址栏上看不到数据, 比较安全
                        
    14.表单中的项 (!!!掌握)
        表单中可以有多个输入项，输入项必须有name属性才可以被提交，如果输入项没有name属性，则表单在提交时会忽略它
        (1)<input> 输入框
            重要属性:
                type属性
                    文本框 text 输入的文本信息直接显示在框中

                    密码框 password 输入的文本以圆点或者星号的形式显示

                    单选框 radio 进行单项的选择 如性别选择  多个radio的name属性相同会被当作一组来使用  必须用value为选项指定提交的值

                    复选框 checkbox 进行多项选择，爱好的选择。 多个checkbox具有相同的name属性时会被当作一组来使用 必须用value为选项指定提交的值

                    隐藏字段 hidden 如果有一些信息，不希望用户看见，又希望表单能够提交，就可以用隐藏字段隐含在表单中 

                    提交按钮 submit 实现表单提交操作的按钮 可以通过value属性指定按钮显示的文字 

                    重置按钮 reset 重置表单到初始状态 

                    按钮 button 普通按钮, 没有任何功能 需要配合JavaScript为按钮指定具体的行为。可以用value属性指定按钮显示的文字。

                    文件上传项 file 提供选择文件进行上传的功能。

                    图像 image 利用一张图片替代提交按钮的功能, 不常用 
                    
                name属性
                    表单中可以有多个输入项，输入项必须有name属性才可以被提交，如果输入项没有name属性，则表单在提交时会忽略它. 另外name属性的值是可以重复的
                    
                value属性 可以给input输入框设置一个初始值

                readonly属性
                    使当前输入项变为只读,不能修改,但是提交时仍会被提交
                    
                disabled
                    使当前输入项不可用,不能修改值,也不会被提交 

                size属性
                    指定当前输入框的宽度

                checked属性
                    指定单选框/复选框被选中

        (2)<textarea> 文本域
            属性:
                rows 指定文本域的行数(高度)
                cols 指定文本域的列数(宽度)
                readonly 只读
                disabled 禁用
    
        (3)<select> <option>
            select 提供下拉选择功能
            option 下拉选框中的选项 可以用value属性指定提交的值,如果不指定,将会提交标签内的文本
            重要属性:
                name: 下拉列表的名称
                size: 设置下拉选项中可见选项的个数
                disabled 禁用下拉选框
                multiple 是否支持多选
        
        (4)<fieldset><legend> (了解 可以不练习)
            <fieldset> 对表单中的表单项进行分组
            <legend> 为分组设置标题
    
    15.其他标签 (了解 可以不练习)
        <marquee> 
            属性:
                scrollAmount 设置文字滚动速度 默认值是6
                direction 滚动方向 left right down up
                behavior 滚动行为 scroll alternate slide

        <pre>
            可以将文本内容按照代码区的样子显示在页面上

        <b> 加粗
        <i> 斜体
        <u> 下划线 
        <s> 删除线 

        <em> 强调
        <strong> 更加强烈的强调
        <sub> 下标
        <sup> 上标
        
    16.注册表单练习 (!!!掌握 自己能够独立的做出来)
        略

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

评论(0) 浏览(3201)

图标设计五维自检法

涛涛

图标是界面设计中最重要的元素之一，也是我们 UI设计师必备的技能，日常工作中我们经常会接到含有图标设计、优化的需求。但到底什么样的图标才算是优秀的？也许很多设计师并没有太完整的评判体系，只是凭感觉，这样就会造成输出效果不稳定、耗时太长等不良的后果。

所以借着这次机会我梳理了一套图标设计自检的评判体系，一共五个维度，大纲如下：

  • 识别
  • 性格
  • 品牌
  • 饱满
  • 细节

一、识别

评判事物的价值在于它的用途是什么。

图标的用途是帮助用户理解信息，所以「识别性」就是图标最重要、最底层的价值，如果你设计一个图标，用户看不懂，即使视觉再美观，也是无根之木，没有任何价值可言。

识别性可以分为两个方面，一是含义识别，二是视觉识别。

先说含义识别，简单来说就是你的图标能不能被理解，当然并不是设计师自己能理解就可以了，而是需要用户来决定。这里和大家分享一个我判断图标是否易识别的方法——内部用户调研法，说白了就是随机问一些团队内部人员，最好多问几种岗位，这样得来的结果更加可靠，案例如下。

我在改版「话题」这个图标的时候，想到了微博的「#」，于是把「#」和气泡框结合到了一起，如下图：

这时我找来10个内部人员进行测试，只有3个能看懂图标的意思（这3个人都是平时经常玩微博的），在这样的数据之下，不用犹豫，这个方案一定是不可取的。

在进行调研时，最少要保证80%的人能看懂，才证明你的方案是可行的。

再来说视觉识别，顾名思义这一点已经与图标含义无关，而是视觉层面的问题，例如大小、底色等等阻碍用户识别的因素。

这里引入一个国外的测试结果，是我在一位前辈的文章中看到的，测验包括一组四种样式的图标：白底黑色实心图标，白底黑色空心图标，黑底白色实心图标，黑底白色空心图标，经过10天的时间，1260名参与者总共完成了超过25000次图标的认知测试。将得出的数据分成四组进行双向方差分析，在相同的统计条件下，选择黑底白色空心图标要比其他三种组合的时间慢0.17秒，也就是说这种图标的信息表达能力会少弱，如下图：

所以在这样的理论与数据的支撑下，我对部分图标进行了如下改版：

有底色的图标全部从线性改成面性，如改不成面性（例如时钟）需要适当加粗描边，目的就是提高视觉识别性。

切记，识别性是图标最重要的价值，尤其是在没有文字说明的情况下，一定不要让用户产生困惑，不然你就是在消耗用户体验，而不是给用户体验赋能！

二、性格

试想如果一个人没有性格，那这个人就是没有灵魂的，图标也一样，没有性格即没有灵魂。

那如何打造属于自己的性格呢，我们需要从用户和品牌出发，例如腾讯动漫的用户都是动漫、cosplay爱好者，给人一种又萌又可爱的感觉，所以我们需要让图标尽量圆润一些：

像上图2号图标一样，增大圆角，使图标看起来更加圆润可爱。

基于这样的用户人群，我们还将原有一些单色图标，改成下面这样的彩色图标：

目的就是让图标可爱活泼的性格更加明显。

三、品牌

品牌性是我们经常提到的纬度，常用的提取品牌的基因也有很多，颜色、图形、吉祥物等等，这里举两个例子，一个是具象的品牌基因——吉祥物：

我们有自己的品牌吉祥物——黑子，所以在图标设计时可以将其运用起来，如下图就是结合黑子形象设计出来的「逗币」图标：

再举个比较抽象的例子，从 logo 当中提取品牌基因。

由于 logo 的字体笔画比较粗，整体给人一种厚重饱满的感觉：

因此我们可以在品牌logo 中提取「粗胖饱满」的品牌基因，在这样的背景下就不用再纠结图标使用2px描边还是3px的描边了：

我们可以很确定的使用3px描边，因为它既符合品牌基因又符合用户性格（肥胖圆润显得可爱）。

四、饱满

很多时候我们做出来的图标不够精致，其中一个很大的原因就是不够饱满。

如何判断图标是否饱满呢？我常用的衡量方法就是在图标上面加一个矩形，看图标的正形的面积是否还可以增加。

例如下图，蓝色是正形，红色是负形：

很明显蓝色的正形面积是可以增加的，例如：

这就是在增加图标的饱满度，我也是按照这个思路来改版图标饱满度的。

举个真实的例子，我们原版的续看图标是上下结构，而上面部分的图形太窄，导致左上角、右上角的空白太多（也就是绿色部分太多），没有撑满矩形，如下图：

于是我对图标的结构进行了调整，尽可能的减少绿色部分，最后达到了下图这样的效果：

最后提醒大家，对于图标的饱满度，还需要结合整套图标的视觉效果来进行调试，虽然上面这个方法可以解决大部分图标的饱满问题，但还是要具体场景具体分析，切记，我们的目标是让整套图标看起来和谐、统一、精致！

五、细节

细节也包含很多方面，例如：

1. 角度是否一致或者遵循某种规律

我们定制的角度规范是30度的倍数，这样可以很大程度的提高图标统一性。

2. 描边末端的细节处理

下图就是一个错误的例子，一个描边末端是直角，一个又是圆角：

我们在处理这样的细节时，一定要保证统一性。

3. 像素对齐问题

大家会觉得只要把一个尺寸的图标做好像素对齐，导出其他倍数的图标就是ok的，其实这样的想法是不对的，因为在导出0.5或1.5倍数关系的时候，像素很容易再次产生不对齐的情况。

举个例子，我们做图标是以2倍图为基础，然后统一导出3倍图，那这时候3倍图就是2倍图的1.5倍，导出的时候就发生了下面这样的情况：

虽然2倍图是像素对齐的，但3倍图却没有对齐，如果设计师没有仔细检查切图，就会发生线上图标发虚的情况，所以我们在输出切图时，一定要仔细核查，发现错误及时调整，免得造成不良影响。

除了以上这些，还有视觉大小、圆角、描边粗细是否统一的细节，当然，这些都比较容易理解，就不一一举例说明了，大家在做图标设计的时候一定要多多注意。

总结

本次梳理的五纬自检法可以用在图标设计的自我检查、改版优化等多个方面，或许它并不全面，但一定具有参考价值，希望能给大家带来启发和灵感，我们也会更加努力，争取做出更好的作品和教程与在设计道路上的你们分享交流。

评论(0) 浏览(3805)

微信赞赏浅析

博博


人人都是产品经理 2018-06-06 18:13:32

今天上午，微信对于赞赏功能进行了升级和宣传，他的赞赏对象由公众号变为了作者。由于大量公众号的用户活跃度长时间处于衰退期，此次“赞赏”功能升级最终目的无非是想敲醒沉睡内容生产者。本文主要从它赞赏功能的升级来谈谈微信公众号。

从“赞赏”功能升级浅析：微信公众号如何挽留内容生产者？

6月6日上午微信对“赞赏”功能升级进行宣传，其最大的变化是从赞赏对象由公众号变更为作者，今后免费转载也有可能获得赞赏收益。同时支持恢复iOS端打赏，其打赏金额直接到赞赏者微信账户期间不收手续费。仿佛在呐喊“创作者们快回来吧”

根据企鹅智库《2017自媒体趋势报告》中数据显示显示：自媒体每日新增信息越来越多，加上用户碎片化信息消费方式，使阅读具有较大的随机性而缺乏粘性，不仅很多已关注的公众号信息不一定会打开阅读，打开阅读的概率以及完整读完一篇文章概率都依次递减…..

现在来看看目前的整个微信公众号主线流程：

一、核心业务

从“赞赏”功能升级浅析：微信公众号如何挽留内容生产者？

蓝色部分是整个微信公众平台核心的发动机，由内容生产者输出内容通过微信公众号作为媒介传递给用户，用户反过来以留言点赞打赏来反馈给作者，促进整个微信公众号体系正常运转。

从本次赞赏升级上看，无非是给闭环的最后一到流程增加多了一环“打赏”，这是对原创作者最大的鼓励，值得一提的是今后免费转载也有可能获得赞赏收益，支持和激励原创作者。

下面看看公众号另外2个核心业务。

二、运营加速器 1 号

从“赞赏”功能升级浅析：微信公众号如何挽留内容生产者？

内容生产者的优质内容由公众号信息流进行分发，可从而获得了打赏收入，且符合一定的资格可开通流量主获得额外的广告收入，一定程度上也了激发和鼓励作者提供持续优质内容输出。

同时微信公众号提供原创保护机制及转载和白名单操作，订阅号app的上线也为作者提供更便捷的操作及互动，促进整个内容生态高速运转。

三、运营加速器 2 号

从“赞赏”功能升级浅析：微信公众号如何挽留内容生产者？

根据用户使用场景，不断优化给用户更良好的体验去浏览查看，增加用户黏性和激发活跃度，期间不断收集意见反馈，促进整个内容生态高速运转。

四、猜测后续变化及趋势

  1. 继续丰富订阅号app功能，本次赞赏账户的各种操作，应该很快会在订阅号app里发布上线，此外编辑和发布可以使用视频目前订阅号app也不支持，想必在短视频上继续发力，该功能少不了。
  2. 丰富内容生态，在原有的“公众号消息列表”、“看一看”、“搜一搜”、“群聊及朋友圈”后继续扩大公众号文章出口。
  3. 从争夺用户数量到争夺用户时间，作者的收入不仅仅只有打赏和广告点击，可能后续纳入付费阅读，最大化协助内容创作者持续生产高质内容。
  4. 仅仅按公众号首字母排序远远不够，优化公众号列表分组管理，至于由用户手动分类还是由微信公众号进行分类在此不展开陈述。
  5. 公众号和小程序持续发酵流量互补。
评论(0) 浏览(3198)

我与UI那些事

用心设计

UI设计是什么，UserInterface,即用户界面。比如我们经常用到的手机，他的界面就是用户界面。而设计手机界面视觉的设计师称之为GUI（移动端ui）设计师，与之对应的有WUI（web端ui）设计师。两种设计师都是对产品的视觉负责。

评论(0) 浏览(3373)

2018年下半年的网页设计趋势

博博


人人都是产品经理 2018-06-06 16:08:27

逐渐热起来的6月，这3种设计趋势将会流行起来……

这个6月，将流行的3种设计趋势

设计趋势最有意思的地方在于，它总会有一些微妙的变化，而每一种趋势的沉寂和回归，总会伴随着不同的转变，甚至会创造出一些全新的设计模式。温度回升进入夏季，这个六月的网页设计趋势都不是全新的东西，都是熟脸，但是仔细看看，会发现在细节上又略有不同。

接下来，我们看看6月流行的这3种设计趋势：

1. 全屏大图

超大的全屏图片在网页设计中已经不算太新鲜的东西了。不过，如果你仔细查看近期的这些使用高清全屏大图的网页设计，会发现设计师们开始越来越多地将其他的元素从整个首屏设计中剥离，让位于背景的图片展示性更强，将屏幕填充得更加彻底。

全屏大图以外，不再有独立的导航区域或者其他的元素，所有的前景元素都位于图片的笼罩之下，网站的一体性更加明显。由于前景元素的缺乏，整个背景图片承担了更多的视觉展示的作用，只有最好、最引人瞩目和有趣的图片才更加契合这样的设计。

下面的三个网站设计案例均是如此，导航等功能都隐藏在大图背景当中，通过汉堡图标和其他的方式来引导用户点击或者吸引用户。所以，图片的素质必须非常的过硬才行。

这个6月，将流行的3种设计趋势这个6月，将流行的3种设计趋势这个6月，将流行的3种设计趋势

而这种设计手法所面对的问题也很具体，比如说大图背景所带来的对比度和识别度上的可用性问题，前景元素和背景图片之间在视觉上的冲突等等。

其他的设计元素，比如线条和「查看更多」和箭头等元素，能够在视觉的引导上起到一定的作用，类似这样的设计细节能够很好的缓解一些上述的问题，不过需要设计师仔细斟酌。

2. 全新分屏设计

我们曾经在设计趋势相关的文章中多次提到分屏设计，而分屏式设计也多次作为月度设计趋势出现在同系列的文章当中。

分屏设计的好处在于它本身可以很好地呈现两方面的信息，并且能够针对不同尺寸的屏幕进行响应。无论是在桌面端屏幕上还是在移动端界面上，都能一次获取两种不同的信息。用户不会错过重要的信息。

不过在的网页设计作品当中，分屏设计本身在功能和形式上并没有太大的变化，不过在处理方式和细节上和以往不尽相同。

首先，这些设计保留了分屏设计的基本思路和精神，也就是将屏幕分为两个部分来呈现信息，但是在划分区域的时候，设计师换了新的思路。Reach Digital 分屏采用的是对角线方向的不对称分屏，黄白双色对比强烈，而同样采用对角线分屏的 Cap GunCup Creative 则使用了更为简约的黑白配色风格，Weima 这个网站则采用了传统的左右分屏，但是分割的比例是按照3:1来划分的，这种分割方式更加有趣。

这个6月，将流行的3种设计趋势这个6月，将流行的3种设计趋势这个6月，将流行的3种设计趋势

分屏设计的好处在于它可以应对多种多样的设计。无论是小型网站，还是大量的内容，分屏的设计都可以让用户参与进来。分屏式设计为用户提供了两种不同的选择，不难理解，功能也很直观。

3. 低透明度色彩叠加

在图片和视频上叠加色彩也不是什么新鲜的玩法，它是非常受欢迎的设计手法和趋势。这种设计技法让设计师可以更轻松地创建层次分明的效果，可以通过色彩叠加来创建更为统一的视觉效果，控制对比度，营造氛围和情绪。

这种设计当中，透明度的控制是极为关键的一个步骤。通常，设计师不会让色彩叠加层透明度太低，这样用户就可以一目了然地看到背景的图片信息。不过，在今天的这几个案例当中，用户需要仔细分辨才能看清背景中被盖住的内容，因为色彩叠加层的透明度不高，对背景图片的遮盖力很强。对于这种设计趋势，我们可以简单分析一下：

  • 这种设计看起来是很酷的，低透明度让背景以纹理的形式呈现，更加富有深度，创造出吸引人的视觉效果。
  • 这种设计趋势不适合传递背景信息，因为低透明度确实很难让背景的细节清晰地传达出来。

那么，这种设计趋势是否值得追随呢？这个就要具体问题具体看待了。

不要使用这种趋势来呈现关键性的图片信息，如果你仅仅只是要借助图片搭配色彩叠加来强化层次感、增加信息量，那么另当别论。

在下面的每个案例当中，前景的元素都足以传递出清晰的内容和信息，彩色叠加层后的图片内容更多是装饰性的。图片虽然都提供了一些附加的信息，但是这些信息都不是关键，它们更多的是强化视觉。

这个6月，将流行的3种设计趋势这个6月，将流行的3种设计趋势这个6月，将流行的3种设计趋势

这是一个适用范围相对较窄的趋势，如果你想使用的话，同样需要控制好透明度。

结语

跟随设计趋势是一个非常有趣的事情，它可以让你的设计保持新鲜，让你的设计在激烈的竞争中脱颖而出，它同时可能还存在一些风险，需要你在使用的时候仔细衡量。


评论(0) 浏览(3023)

插画在UI设计中的运用

蓝蓝设计的小编

插画在UI设计中的运用到处可见，比如：App引导页、Banner广告、H5宣传页、App启动页、loading页、404页、支付状态页、各大电商平台的双十一、双十二节日广告等等。UI插画在设计中增加情感，使表达更加清晰、贴切、符合场景，让设计更具说服力。

本文用三步教你打造扁平插画，除了非常实用的教程，文中谈到的一些思考更是能给大家带来许多帮助。

评论(0) 浏览(3451)

网页的转发与重定向

seo达人

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

在web开发中，转发与重定向有很大的区别。

直观看来，转发不会发生URL址的变换，而重定向则会发生URL的改变。

这仅仅只是一种表象。HttpServlet中的request对象和response对象是在用户请求网页时由服务器根据浏览器传过来的参数封装生成的。一旦从浏览器请求过来，服务器响应回去那么request和response的也就到了生命的终点了。

当使用转发的时候，浏览器仅仅请求一次但是服务器端可能经历了多次的跳转。服务器端执行时发生了转发那么服务器就停止正在执行的任务，去指定转发给定地址的任务。

而使用重定向的话，浏览器则会项服务器发生多次请求。在服务器端执行代码的时候，发现发生了重定向，那么它就会通知浏览器，去访问另一个URL。浏览器就会向被发送的URL请求资源。

看一段代码： 

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>login</title> </head> <body> <form action="myServlet" method="post"> name :<input type="text" name="username"/><br/> <input type="submit" value="submit"/> </form> </body> </html>
    
    

        
  • 
            1
        
    • 

        
  • 
            2
        
    • 

        
  • 
            3
        
    • 

        
  • 
            4
        
    • 

        
  • 
            5
        
    • 

        
  • 
            6
        
    • 

        
  • 
            7
        
    • 

        
  • 
            8
        
    • 

        
  • 
            9
        
    • 

        
  • 
            10
        
    • 

        
  • 
            11
        
    • 

        
  • 
            12
        
    •

这是一段jsp代码，当点击提交的时候，会把表单提交给myServlet。

界面长这样： 
这里写图片描述 

public class MyServlet extends HttpServlet { protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String username = (String)request.getParameter("username");
        request.setAttribute("welcome", "welcome!!!");
        RequestDispatcher rd = request.getRequestDispatcher("welcome.jsp");
        rd.forward(request,response);
    }
}
    
    

        
  • 
            1
        
    • 

        
  • 
            2
        
    • 

        
  • 
            3
        
    • 

        
  • 
            4
        
    • 

        
  • 
            5
        
    • 

        
  • 
            6
        
    • 

        
  • 
            7
        
    • 

        
  • 
            8
        
    •

这是MySerlet，当用户点击提交表单，服务器就会调用MyServlet的doPost方法，在这个方法里面进行的是页面转发。 

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>welcome</title> </head> <body> <%=request.getParameter("username")%> <br/> <%=request.getAttribute("welcome") %> </body> </html>
    
    

        
  • 
            1
        
    • 

        
  • 
            2
        
    • 

        
  • 
            3
        
    • 

        
  • 
            4
        
    • 

        
  • 
            5
        
    • 

        
  • 
            6
        
    • 

        
  • 
            7
        
    • 

        
  • 
            8
        
    • 

        
  • 
            9
        
    • 

        
  • 
            10
        
    • 

        
  • 
            11
        
    •

这是welcome.jsp的代码。

提交结果为： 
这里写图片描述 
当点击提交按钮后后我们可以看一下网络的请求过程。 
这里写图片描述

可以发现浏览器只向服务器发送了一个请求。

接下来看一下重定向。

如果把MyServlet的代码改一下。 

public class MyServlet extends HttpServlet { protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String username = (String)request.getParameter("username");
        request.setAttribute("welcome", "welcome!!!"); //      RequestDispatcher rd = request.getRequestDispatcher("welcome.jsp"); //      rd.forward(request,response); response.sendRedirect("welcome.jsp");
    }
}
    
    

        
  • 
            1
        
    • 

        
  • 
            2
        
    • 

        
  • 
            3
        
    • 

        
  • 
            4
        
    • 

        
  • 
            5
        
    • 

        
  • 
            6
        
    • 

        
  • 
            7
        
    • 

        
  • 
            8
        
    • 

        
  • 
            9
        
    •

可以看到结果为： 
这里写图片描述

而且浏览器项服务器发送了两次请求： 
这里写图片描述

从上面的结果可以看出重定向后，因为是发起的另一个请求因此welcom页面中的内容都是null。而转发则由于是同一个request对象和response对象因此既能获得浏览器请求的参数，还能拿到request总放入的属性值。

其实从代码也可以看出来，sendRedirect()方法是HttpServletResponse对象的响应方法，既然调用了响应对象的方法，那么就表明整个请求结束了，服务器端项客户端返回执行结果。而getRequestDispatcher方法是request对象的方法，表明依旧在请求因此不会立即向浏览器返回结果，而是继续执行其转发的任务。

有一点需要说明的时，不论forward方法还是sendRedirect方法中传的URL需要注意，如果以“\”开头那么，就表示这个URL是现对于servlet容器根的请求，即localhost:8080,如果没有以“\”开头，那么表明这个请求地址是相对于当前的请求URL来寻址的。 

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>login</title> </head> <body> <!--这里改成了绝对地址  --> <form action="/myServlet" method="post"> name :<input type="text" name="username"/><br/> <input type="submit" value="submit"/> </form> </body> </html>
    
    

        
  • 
            1
        
    • 

        
  • 
            2
        
    • 

        
  • 
            3
        
    • 

        
  • 
            4
        
    • 

        
  • 
            5
        
    • 

        
  • 
            6
        
    • 

        
  • 
            7
        
    • 

        
  • 
            8
        
    • 

        
  • 
            9
        
    • 

        
  • 
            10
        
    • 

        
  • 
            11
        
    • 

        
  • 
            12
        
    • 

        
  • 
            13
        
    •

当我再次点击提交的时候： 
这里写图片描述

不以”\”开头的请求地址为： 
这里写图片描述

转发模型为： 
这里写图片描述

重定向模型为：

这里写图片描述

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

评论(0) 浏览(3046)

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

涛涛

交互设计是什么？
交互设计 Interaction Design 也被成为IXD。交互设计建立起了人与计算机便捷沟通的通道，它的目标是创造可用性和用户体验俱佳的产品。作为UI设计师，我们在工作之中经常会对接交互设计师和产品经理，他们具有丰富的交互知识和经验。那是不是我们作为UI设计师，就只需要专心做好视觉层面的工作而不需要了解交互设计了呢？当然不是，在视觉设计层面更多地考虑布局和交互原则才可以让我们的界面更友好，视觉设计师是交互设计中非常重要的角色。
用户体验
在工作中经常听到UED（用户体验设计）和UCD（以用户为中心的设计），可见互联网行业非常重视用户体验，而用户体验绝不仅仅是要样子好看。有些设计师只关注视觉层面，认为产品战略等用户体验维度和自己的设计无关，那么就会和产品经理等角色处于不同的世界了。“他们为什么要我这么改？”、“为什么这里文字要浅一点？”有时不理解对方的思考角度就会造成争执。用户体验（User Experience）是用户使用产品的心理和感受，用户体验体现了产品设计以人为本的设计精神。其实早在互联网出现之前就有“顾客先点鸡就先有鸡”、“顾客就是上帝”这种说法，并且西方很多大公司如施乐、联合利华等大公司早在互联网行业出现之前就已经开始进行研究用户体验了，可见用户体验对所有产品是多么的重要。但是让人摸不着头脑的是，用户体验有时非常地主观：因为用户体验背后影响用户的因素有人的喜好、情感、印象、心理反应等，有些人明明有摩拜却要走很远找OFO，也有人只吃肯德基而不吃麦当劳。这些选择并不是优胜劣汰，而是有背后的原因的。要想让我们的产品被人喜欢，我们需要研究用户。
Image title
用户研究七种方法
但用户可能是几百万人呢！我们面对这样抽象的群体然后告诉自己要以他们为中心设计这多么抽象啊。这么多用户甚至有时用户自己的声音也是矛盾的。我们到底怎么样了解用户的心声呢？
用户画像
根据产品的调性和用户群体，用户研究团队可以设计出一个用户的模型，这种研究的方式被称为用户画像。用户画像是由带有特征的标签组成的，通过这个标签我们可以更好地理解谁在使用我们的产品。用户画像建立后，每个功能可以完成自己的用户故事：用户在什么场景下需要这个功能。这样，我们所设计的功能就会更接近用户实际的需要。比如我们现在要设计一个女装购物应用，那么我们可以做这个用户画像：小美，在北京国贸CBD上班，21岁，收入8000，喜欢淘宝购物和电视购物。使用我们产品的目的是为了寻找正品时尚大牌服装进行网购。小美因为刚毕业所以一方面喜欢大牌一方面又资金短缺（启发：我们的产品是不是要解决这两个痛点？）小美是时尚OL，审美很高，不喜欢俗气的设计。（启发：界面设计是否考虑不要使用粉粉嫩嫩的颜色而使用大牌的黑白色？）。看，即使小美并不真实存在，但是她指引了我们的产品设计。接下来，我们还可以给小美增加一个头像，在做设计时我们想象这个人就是真实存在的用户，她会对我们的设计有什么看法。当我们完成用户画像之后，还可以接着设计用户故事：小美经常需要在工作场合穿符合工作气质的衣服，也需要在约会时有晚礼服之类的服装，可是小美的收入有限，她眼光较高但是对价格过高的服装无法承担，她使用我们的APP就是为了寻找正品且价格适中的服装。那么，小美在哪里用我们的APP呢？这就要为小美继续设计一个用户使用场景了：小美在开会时可能会打开看看、在地铁里也会浏览、在清晨打开衣柜时也会浏览。基本来说是碎片时间，而且是有着装需求时。（启发：我们是不是需要把字号调大以适应地铁里颠簸的阅读环境？我们是不是需要设计省流量模式免得刚刚毕业的小美花一笔巨大的流量资费？）
Image title
用户画像
用户访谈
邀约用户来回答产品的相关问题，并记录作出后续分析。用户访谈有三种形式：结构式访谈（根据之前写好的问题结构）、半结构式访谈（一半根据问题一半讨论）、开放式访谈（较为深入地和用户交流，双方都有主动权来探讨）。用户访谈设置时要注意：用户不可以是互联网从业的专业人员、不可以提出诱导性问题、不要使用专业术语。用户访谈适合产品开发的全部过程。
问卷调查
可分为纸质调查问卷、网络问卷调查。依据产品列出需要了解的问题，制成文档让用户回答。问卷调查是一种成本比较低的用户调查方法。问卷调查适合产品策划初期对目标人群的投放，另外注意一个问题最好收集10个问卷，也就是如果你有10个问题那么至少要收集100个问卷才是有效的。要知道不是所有人都愿意耐心地填写问卷，很可能敷衍了事的回答会扰乱我们的判断。
焦点小组
焦点小组一般有6-12人组成，由一名专业人士主持，依照访谈提纲引导小组成员各抒己见，并记录分析。并且在焦点小组的房间里会有一扇单向玻璃窗，用户是看不到里面有谁的。而在里面坐着的通常是开发团队，他们可以清晰地看到用户是如何吐槽他们的产品的，但是他们没有权利直接和用户进行解释。焦点小组需要特殊的房间和设备，主持人也需要训练有素，焦点小组特别能够分析出用户在没有我们说明的情况下如何使用我们的产品和对产品的不满。
可用性测试
通过筛选让不同用户群来对产品进行操作，同时观察人员在旁边观察并记录，可用性测试的要求是用户不可以是互联网从业者而应该是真实产品的用户群体。但是可用性测试一般要有一个可用的软件版本或者原型供人测试才可以，在软件开发的前期不适合用这个方法。
眼动测试
使用特殊的设备眼动仪来追踪用户使用产品时眼睛聚焦在哪里，盲区是哪里。比如一个网站通过眼动测试可以知道用户的视觉会自动屏蔽网站的常见广告位置，这时如果希望提高广告的点击，就需要把广告位放置于用户聚焦时间较长的位置。眼动测试的设备比较专业，通常在小公司较难开展。
用户反馈和大数据分析
根据市场提供的反馈和数据得出客观的判断和合理的推测。用户反馈也是用户研究的一个重点，用户反馈主要是用户通过产品的反馈入口主动向开发者提出的意见。
有了这些方法，我们就能更好地了解用户和接近用户了。但是要注意，用户研究也是有陷阱的。比如：填写问卷和参与调研的用户可能并不是核心用户；提交用户反馈的用户之外可能有更多沉默的用户等。总之用户研究是一个必要的手段，但是仍然需要产品团队来对产品的方向做出决断。
用户如何使用产品
使用场景
刚才我们介绍了用户使用的场景是根据产品的功能和平台决定的。电脑的使用场景是正襟危坐，手持鼠标。而移动端则是随时随地使用，我们的用户可能在地铁里、在厕所里、在吃饭时、在上课中怕老师看到把手机藏在桌洞里、在工作中领导巡视后偷偷瞄、在辗转反侧睡不着的时候没有开灯地浏览等。这时我们要为用户考虑，如果他们在使用我们产品的各种场景中有什么需要，是不是需要省流量、是不是需要调整字号、是不是需要过滤蓝光、是不是需要护眼模式、是不是不方便看视频、是不是需要缓存视频、是不是界面目前单手不太友好、是不是扫二维码时需要个手电功能、是不是需要语音提醒、是不是需要清除访问记录。一个不考虑用户使用场景的产品一定是会遭到吐槽的。很久之前我听同事在吃饭时抱怨过“大爷的，也不搞个提示，早晨在地铁里用4G看流量以为是在家用WIFI，结果看了一集《甄嬛传》花了80块钱”、“哎？你是不是早晨开会时玩游戏了？你的比分都给我们推送了哈哈哈”。
Image title
我的产品中的用户使用场景表格
操作手势
网页设计所处的电脑端目前主要还是依靠鼠标点击来操作。鼠标点击的最小单位甚至可以是一像素。而移动端不太一样，移动端设备中我们使用手指来操作界面。一般来说，手指点触区域最小尺寸为7×7 mm，拇指最小尺寸为9×9 mm。也就是在我们@2x设计中为88px（或44pt）。这个神奇地88PX在移动端应用很广泛：很多表单单项的高度是88ox、导航栏高度也是88px等等。那您可能会说，也不对吧，有些界面上的图标看上去没有88px啊。是的，但是那只是视觉，我们可以通过增加图标点击区域的方式（比如给60像素大小的图标左右增加22像素的透明区域）来让图标更好点击。千万在设计时不要把操作区域放得特别近，可以把所有点击区域用88px标记看是否有重叠的情况，避免点击一个图标时误点另一个图标。除了点击区域，移动端还可以利用各种手势来进行各种操作的设计。主要的手势有：
Image title
单点触碰（Tap）：点击用来选择一个元素，类似鼠标的左键，是最常用的手势。
拖曳（Drag）：点击某个元素然后拖拽进行移动，类似现实生活中移动物体的感觉。
快速拖曳（Flick）速度很快的拖曳操作。
滑动（Swipe）：水平或垂直方向的滑动，比如翻阅相册和电子书翻阅的手势。
双击（Double-Click）：快速点击一个物体，通常会在放大、缩小操作中使用。
捏（Pinch）：两根手指头向内捏，捏的动作会使物体变得更小，通常在缩小操作中使用。网易新闻客户端中正文页面即可通过捏的动作来缩小字号。
伸展（Stretch）：两根手指向外推，现实中这种操作会使物体向外拉伸，元素可能会变得更大，通常会在放大操作中使用。网易新闻客户端中正文页面可以通过伸展放大字号。
长按（Touch and hold）：手指点击并按住会激发另一个操作。比如朋友圈的相机图标长按可只发文字。但是注意，长按不是一个常态操作，所以一般不太建议用户进行该操作。但长按操作又是有需要的，所以会把删除、只发文字状态等操作隐藏其中。
除了用户使用场景、点击区域、手势，那么还有一个影响我们设计的使用情况，就是用户怎么拿手机很重要。用户可以：单手拿手机、双手拿手机、直向拿手机、横向拿手机。我们需要考虑这些可能发生的特征进行手势互动的规划与设计。比如OFO为了让单手（说不定是左手还是右手）操作方便，主要按钮在下方并且做的很大，左右手都可以轻松点击。而微信的很多按钮也都是大长条，方便左右手的触发。横屏使用场景一般是游戏、视频等，所以一般的APP并不支持横屏操作（微信、支付宝、微博均不支持横屏操作），
Image title
格式塔：我们如何认知？
我们发现有些用户在使用设计好的界面时找不到一些重要的功能按钮。“奇怪，分享功能不就在更多按钮里面吗？”、“用户怎么连这个也找不到啊”你也许会说。我们要来了解一下用户是如何认知我们设计好的界面的。在初高中考试的时候您一定见过完形填空这种格式吧，“格式塔”源自德语“Gestalt”，意即“整体”、“完形”的意思。格式塔心理学认为，我们在观察的时候会自动脑补出一些逻辑和含义来，会让观察对象变成一个完整的、整体的、常见的形状。
＂研表究明，汉字的序顺并不定一能影阅响读，比如当你完看这句话后之，才发这现里的字全是都乱的。＂研究格式塔心理学对我们做互联网产品和设计有什么用呢？掌握格式塔的理论我们就可以让用户按照我们安排的“剧本”来交互和操作界面了。我们可以让用户比较容易地根据固定位置找到提交按钮、我们也可以让用户不经过太多思考在杀毒软件中点击杀毒按钮等。格式塔心理学对于我们做好表现层是非常有利的。格式塔原理主要有格式塔五大律和格式塔三大记忆律两个知识点。
接近律 law of proximity
格式塔心理学认为，人们认知事物的时候，会依靠它们的距离来判断它们之间的关系。两个元素越近就说明它们之间关系更强。但是接近也是有对比的，在复杂的设计中，我们要一边考虑它们之间内部的逻辑关系一边来排版。
Image title
A组和B组因为接近律而产生不同地阅读顺序
Image title
距离更近的信息暗示了他们有内在的逻辑关系
相似律law of similarity
认知事物时，刺激要素（比如大小、色彩、形状等要素）相似的元素我们倾向于把它们联合在一起或者认为它们是一个种类。比如，我们能轻易的分辨出拨号页面中拨号键和按键群的区别。
Image title
相似的元素暗示了他们属于一个种类
Image title
类似外形的单元会被我们人脑默认为同一属类
闭合律law of closure
就算没有外形的约束，我们也会自动把图形脑补完全。比如半个形状或者有缺口的形状我们不会认为是一条线，而是一个完整的形状。闭合是指一种完形的认知规律。
Image title
左边的图中我们会认为是圆形有缺口而不是一条曲线
右边的图形中我们会认为是圆形被三条线截断了而不是四个图形
Image title
界面设计中露出一半内容，闭合律让我们感知右边还隐藏着更多内容
连续律law of continuity
在知觉过程中人们往往倾向于使知觉对象的直线继续成为直线，使曲线继续成为曲线，也就是视觉的惯性。利用连续律我们可以让用户操作界面时不经过思考就点击一个固定的位置。
Image title
深谙连续律的流氓软件
成员特性律law of membership character
如果我们有很多同样的按钮，如何让某个更重要的按钮突出但是仍然让用户感知还是按钮呢？那就要用到成员特性律了。成员特性律赋予了集体中某一个元素特殊的一些刺激元素从而突出它。
Image title
独特的外形暗示了它与别的元素有不同的功能
Image title
拨号页面中拨号键与微博发布微博图标都与其他按钮不同
记忆律：我们如何记忆？
接着格式塔五大律还有专门研究用户记忆的格式塔记忆律。格式塔心理学家沃尔夫对遗忘问题所作的经典性研究得出了格式塔的三大记忆律。沃尔夫实验时要求实验体观看样本图形并记住它们，然后在不同的时间里根据记忆把它们画出来。结果发现实验体在不同的间隔时间画出来的图像都有不同。有时再现的图画比原来的图画更简单更有规则，有时原来图画中显著的细节在再现时被更加突出了。还有的比原来的图像更像某些别的我们都很熟悉的图案了。沃尔夫把这三种记忆规律称之为格式塔三大记忆律：“水平化”、“尖锐化”、“常态化”。
Image title哪个图形才是正确的？（图片来源：网络）
水平化leveling
水平化是指在记忆中我们趋向于减少知觉图形小的不规则部分使其对称；或趋向于减少知觉图形中的具体细节。
尖锐化sharpening
尖锐化是在记忆中与水平化过程伴随而行的。尖锐化是指在记忆中，人们往往强调知觉图形的某些特征而忽视其它具体细节的过程。在有些心理学家看来，人类记忆的特征之一，就是客体中最明显的特征在再现过程中往往被夸大了。
常态化normalizing
常态化是指人们在记忆中，往往根据自己已有的记忆痕迹对知觉图形加以修改，即一般会趋向于按照自己认为它似乎应该是什么样子来加以修改的。
Image title
情感化设计是什么？
了解格式塔会让我们把界面做得符合用户的心理预期，让用户能够明显地找到他应该找到的操作。可是用户好像还是不开心，因为用户觉得界面不好看。您是不是也会陷入这样的矛盾：可用性重要还是美感更重要？怎么样能够让我们设计的界面又好用还漂亮呢？情感化设计由唐纳德·A·诺曼博士提出，指的是设计中情感在所处于的重要地位以及如何让用户把情感投射在产品上来解决可用性与美感的矛盾。情感化设计是在抓住用户注意、诱发情绪反应以提高执行行为的可能性的设计。比如红色且巨大的购买按钮能够无意识地抓住用户的注意、可爱萌萌的卡通可以缓解用户网络不好时的焦虑等等。情感化设计有三个水平，它们是递进关系，分别是：本能水平（重视设计外形）、行为水平设计（重视使用的乐趣和效率）、反思水平设计（重视自我形象、个人满意、记忆）。
Image title
本能水平
我们都是视觉动物，对外形的观察和理解是出于我们本能的。本能水平的设计就是刺激用户的感官体验，让别人注意到我们的设计。这个阶段的设计会更加关注外形的视觉效果。比如各大电商网站的专题页面设计，更加注重抓眼球和外观的刺激。
行为水平
行为水平是功能性产品需要注重的。一个产品是否达到了行为水平，要看它是否能有效地完成任务，是否是一种有乐趣的操作体验。优秀行为水平设计的四个方面：功能，易懂性，可用性和物理感觉。比如好用的记事本APP等。
反思水平
反思水平的设计与用户长期感受有关，这种水平的设计建立了品牌感和用户的情感投射。反思水平设计是产品和用户之间情感的纽带，通过互动给用户自我形象、满意度、记忆等体验，让用户形成对品牌的认知，培养对品牌的忠诚度。马洛斯理论把人的需求分成生理需求、安全需求、社交需求、尊重需求和自我实现需求五个层次。我认为反思水平的设计就是提供给用户归属感、尊重、自我实现。比如Google每逢节日就会有一些符合节日化的设计、网易严选的空状态也会有品牌感的体现等。
Image title
淘宝空状态中的情感化设计
情感化设计的表达
Image title
画面 画面是情感化设计的重点，让错误页面或者空状态都成为一幅可爱的插画。
应景 让用户在我们的产品中体验到一些和真实世界一样的氛围变化。
游戏感 没有人喜欢做任务。试着让用户完成的任务变成游戏吧。比如每次登陆加金币，有足够的金币就可以获得什么称号。
冲突 冲突非常能够勾起人的情绪，营造一个竞争或者对抗的氛围，让用户感觉自己置身在一个比赛或者格斗中一样。
讲故事 给产品和无聊的图像一些故事内容，毕竟没有人讨厌讲故事。
隐喻 用一些大家理解，随处可见的事物表达一些无趣、生涩的概念。
互动 给用户和其他用户多制造互动机会，比如排行榜、推荐等，不要让用户感觉孤独。
交互八原则
当我们了解了产品五要素（产品设计的维度问题）、格式塔心理学（用户如何认知的问题）、情感化设计（如何让用户满意的问题）后，我还要给您介绍一大堆地交互原则。这些交互原则会帮助我们设计出更好用的界面，当然也可以帮助我们讲出这样设计的原因。不拿出一些理论怎么能够让别人信服你的设计，对不对？
费茨定律（Fitts’Law）
费茨定律指的是：光标到达一个目标的时间，与当前光标所在的位置和目标位置的距离（D）和目标大小（S）有关。它的数学公式是：时间 T = a + b log2(D/S+1)。这个定律是由保罗.菲茨博士（Paul M. Fitts）提出的所以得名。菲茨定律在很多领域都得到了应用，特别是在互联网设计中尤为深远。我们利用费茨定律估算用户移动光标到链接或者按钮所需的时间，时间越短越。比如有一个按钮在左下角，我们的操作可以细分为两个阶段：第一个阶段大范围移动到左下方向，然后再做微调到达这个按钮之上。所以这个时间受按钮和链接所在位置与按钮和链接大小影响，也就是说我们在做设计时要考虑光标默认会放在哪里、我们的链接按钮是不是太小了。
Image title
费茨定律说明距离越短、目标大小越大，那么光标到达目标越快
Image title
费茨定律在网页设计中的使用
Image title
OFO和苹果音乐APP都将按钮放置手指最容易点击的区域并且按钮足够大
希克定律（Hick’s Law）
希克定律是指一个人面临的选择（n）越多，所需要作出决定的时间（T）就越长。它的数学公式是：反应时间 T=a+b log2（n）。在我们的设计中如果给用户的选择更多，那么用户所需要做出决定的时间就越长。比如我们给出用户菜单-子菜单-选项，那么用户可能会很纠结；如果我们简化成菜单-选项，就会减少用户做选择的时间。
Image title
用户反应时间和选择数量的关系
Image title
我们应该减少用户的选择
7±2法则
让我们先玩个游戏，请记忆下面的文字，一分钟后移开视线：
挣 多 久 可 猫 风 师 袅 崩 六 酒 望
现在闭上眼睛想一下刚才的文字您能回忆几个？大概是五个到九个之间。1956年美国科学家米勒对人类短时记忆能力进行了研究，他注意到年轻人的记忆广度大约为5到9个单位之间，就是7±2法则。这个法则对我们做界面设计的启迪就是如果希望用户记住导航区域的内容或者一个路径的顺序，那么数量应该控制在七个左右，比如苹果和站酷网站的导航个数。另外，移动端底部Tab区域最多也是五个，而页面中的八大金刚图标也是八个。
Image title
苹果、站酷、Dribbble等网站导航数量全部是7±2
泰思勒定律（Tesler’s Law）
这个定律是说产品固有的复杂性存在一个临界点，超过了这个点过程就不能再简化了。我们只能将这种复杂性转移。比如我们如果发现页面的功能是必须的，但当前的页面信息过载，那么就需要将次要的功能收起或者转移。
Image title
Dribbble网站导航将更多功能收起在一个表示更多的图标内
防错原则
一个表单是需要填写完毕后方可提交的。但是用户有时会漏填或者忘记填写，这是用户点击提交会怎么样？很可能有些选项会被清空（比如密码选项基于安全考虑会清空cookies）那么用户还得重新填写。这时解决办法是在用户没填写完之前把按钮设置一个看起来不能点击的样式，用户想提交时弹窗：您还有内容没有填写完哦，然后把用户定位在没填写完的项目，让那个表单高亮。（是不是真的做到以用户为中心啦？）再比如推特只允许用户填写140个字，但用户一写爽了往往会超出140个字那怎么办？解决办法是给他在旁边倒数还能写几个字。看，这些都是我们为了防止用户操作出现错误所做的努力，防错设计就是要减少错误操作所带来的灾难。错误的提示当然需要设计师的设计了。可是也许您不知道有些错误提示含糊，用户并不知道到底错的是哪里，下一步该怎么办。比如仅仅登录功能就可能会有用户名错误、密码错误、网络超时、连续三次输入密码错误、用户名为空等不同的错误，而有些产品仅仅给出“出错了”，那么用户当然会不知所措了。正向的例子比如一次我在登录Google Mail时输错了密码，它提示“密码输入错误，提示：您在1个月前改过密码”。
Image title
BOO！APP输入密码时卡通会蒙住眼睛，输错时也会有提示
奥卡姆的剃刀法则（Occam’s Razor）
奥卡姆的剃须刀法则主要就是说我们做产品时功能上不可以太繁琐，应该保证简洁和工具化。比如产品中为用户提供了收藏功能是否就不需要喜欢了？提供了喜欢是否不需要点赞了？一定保证功能上的克制。
Image title
QQ将更多功能收起到了头像和加号图标中
防呆原则
有一个著名的交互书籍叫作《Dont make me think》，翻译过来就是不要让我思考。这句话一直在我做设计时响起：不要认为用户是专家！不要认为用户是专家！有时我们会觉得，点击汉堡包图标当然就是菜单啊！这个按钮长按不就会调出XX功能了嘛。但是我们忘记了普通用户可能并不理解什么是汉堡包图标、什么是抽屉式导航、什么是长按、双指滑动。更何况普通用户并不会研究我们的APP，在他们眼中我们的产品只是众多工具中的一个，我们何德何能认为自己的产品是值得用户花时间学习的？一定要把交互和设计做得简单，并且让用户在别的地方“学习”过。每个页面强调一个重要的功能而不要让用户做选择题。这些都是有效防呆的好方法。防呆和不要让我思考都讲的是我们的设计要自然而然。
Image title
运动APP KEEP 的页面中总有一个按钮是突出的
防止不耐烦原则
用户是很容易不耐烦的，你还记得你多少次看着视频加载条骂人吗？如果我们需要用户等待载入信息，一定要给一个有情感化的设计提示，避免用户产生焦虑。 比如很多游戏（比如决战平安京、王者荣耀等）加载时都会出现主角跑步的小动画，美团等APP下拉刷新时也会有几帧的动画来安慰用户。动画要好于苹果默认提供给开发的“转菊花”，因为卡通形象更有亲和力。但是好像还不够，用户需要掌控感，“哎？它一直加载，是不是死机了？”为了防止用户没有掌控感，我们可以为用户设计加载条或者加载提示。加载状态条很遗憾很多都是假的甚至是重复的，原因是其实要判断加载了多少M的素材的代码更占资源！我们本来想安慰用户等待加载的时间竟然会变得更长，那当然不行啦。于是很多时候我们会做一个假的加载状态条来安抚用户，我想您一定看过反复加载的加载条吧！加载条下的文案其实也是可以变得非常有情感化设计感受的，比如通常是：加载场景资源、加载素材这样的文案，但是有些APP需要很长加载时间时会给出这样的文案：导演正在准备、女主角准备化妆了、摄像师打开了灯光。是不是更加好玩啦？
Image title
美团和网易严选的加载动画
总结
交互知识其实关键还要在应用和分析。一方面，我们可以在工作中积累经验，不断地思考如何和同事配合一起研究提高产品在使用时的体验；另一方面，我们也要经常积累一些产品使用时发现的交互。建议大家平时可以收集你觉得不错的情感化设计或者微交互，比如发现饿了么在下雨天送货时会有电闪雷鸣和雨滴的设计；OFO和滴滴打车在不同节日也会把地图找车里的图标换成节日相关的图标；BOO！APP在输入密码时小怪兽会捂住眼睛；WPS在晚上写作时（没错就是现在）会提示你开启过滤蓝光的护眼模式等等。一个好的设计师一定是懂得交互的设计师，也应该是非常细心的设计师，也应该是懂得为用户着想的设计师。

评论(0) 浏览(2905)

JavaScript自己整理的基础-01

seo达人

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

1.JavaScript 简介：

JavaScript是互联网上最流行的脚本语言，所有现代的HTML都使用JavaScript。既然是脚本语言，那么它的特点就有一下三种：

    （1）弱类型；

    （2）解释型语言（不需要编译）；

    （3）逐行执行，一行代码错误，其后的代码块都不会继续执行；

    （4）<script>标签可直接嵌入到HTML文件中，位置是任意的，通常放在被修饰内容下面或者head标签中，但写成单独的js文件有利于结构和行为的分离

2.JavaScript 内容（附图）：

    

       其中ECMAScript是JavaScript的核心；

       DOM是文档对象模型（使用js操作网页）；

       BOM是浏览器对象模型（使用js操作浏览器）

3.JavaScript 信息的输出：

    （1）alert( )方法：以提示框的形式在页面输出 ，例;

[javascript] view plain copy
  1. <script>  
  2.     alert("hello,javascript")  
  3. </script>  

    （2）console.log( )方法：在控制台输出信息，例：

[javascript] view plain copy
  1. console.log("hello,javascript")  

    （3）document.write( )：将内容直接写在HTML页面中，例：

[javascript] view plain copy
  1. document.write("hello,javascript")  

4.JavaScript 变量：

    与 Java不同，ECMAScript 中的变量无特定的类型，定义变量时只用 var 运算符，可以将它初始化为任意值，变量的初始化格式：var 变量名 = 变量值；例：

[javascript] view plain copy
  1. var a = "hello";  
  2. var b = 123;  

    如果要定义多个变量，那么可以用将多个变量写在一行，用逗号进行分隔；例：

[javascript] view plain copy
  1. var a = "你好",  
  2.     b = 123,  
  3.     c = "hello";  

    变量名字的变量规则：    

    （1）由字母、数字、下划线、$符号构成

    （2）不可以以数字开头，不建议以下划线开头；

    （3） 严格区分大小写；

    （4）不可以是关键字和保留字

5.JavaScript 数据类型：

    JavaScript可以分为原始数据类型，引用数据类型两种：

    （1）原始数据类型：Number，String，Boolean，undefined，null

    Number：数值型，就是数字，包含正数、负数、整数、小数、0、NaN、Infinity（正无穷）、-Infinity（负无穷）；

    注意：NaN：not  a  number的缩写，表示该值不是一个数值（也属于Number）

    String：字符串：用双引号""或单引号''包起来的0个或多个字符，如果引号中什么也没有，那么这个字符串被称为空字符串

    Boolean：布尔型：包含true：表示真（成立）和false：表示假（不成立）两个值

    undefined：表示变量未定义，或变量被定义出来，但是没有被赋值

    null：表示一个变量没有指向任何一片存储空间，即变量存在，但是里面是空的，类似于Undefined

    （小提示：在Chrome浏览器控制台输出时，会发现Number类型为深蓝色，String为黑色，Boolean为浅蓝色，undefined和null都为浅灰色）

    （2）引用数据类型：

    Object（对象），Array（数组），Date（日期），RegExp（正则）。。等等

    （3）如何查看一个变量的数据类型（typeof 运算符）：        

             数值型数据：返回值为number   

[javascript] view plain copy
  1. console.log(typeof 123)   //输出number  

             字符串型数据：返回值为string

[javascript] view plain copy
  1. console.log(typeof "你好")  //输出string  

             布尔型数据：返回值为boolean

[javascript] view plain copy
  1. console.log(typeof true/false)    //输出boolean  

             Undefined：返回值为undefined

[javascript] view plain copy
  1. console.log(typeof undefined)   //输出undefined  

             Null：返回值为Object（历史遗留问题，说明null也是一个对象）

[javascript] view plain copy
  1. console.log(typeof null)     //输出object  

             NaN：返回值为number

[javascript] view plain copy
  1. console.log(typeof NaN)    //输出number  

6.JavaScript 数据类型的转换：

    （1）在使用加法（+）运算符时，任何数据与字符串类型数据相加都为字符串类型数据；

[javascript] view plain copy
  1. console.log("你好" + 123)    //输出"你好123"  

        注（简单理解）： 在JavaScript 中空字符串""转换为false，非空字符串转换为true（除“0”，“1”外）；

                false转换为 0 或“0”，true转换为 1 或“1”；

                做逻辑判断的时候，null，undefined，""(空字符串)，0，NaN都默认为false；

                ==在比较的时候可以转换数据类型，===是严格比较，只要类型不匹配就返回false；

                    其实 == 的比较确实是转换成字符串来比较但，但是在布尔型转换为字符串之前，要先转换成 Number

[javascript] view plain copy
  1. console.log("123" == true)    //输出false  
  2. console.log("1" == true)     //输出true  
  3. console.log("" == true)     //输出false  
  4. console.log(1 == true)     //输出true  
  5.   
  6. console.log("" == false)    //输出true  
  7. console.log('123' == false)   //输出fasle  
  8. console.log('0' == false)    //输出true  
  9. console.log(0 == false)    //输出true  
  10.   
  11. console.log('1' == 1)     //输出true  
  12. console.log('0' == 0)     //输出true  
  13. console.log(-true)     //输出-1  

（2）parseInt：将字符串转换成整数（只识别字符串中的数值）：

        注：会忽略字符串中的前后空格（当数值后的空格后面还有数值时，将不会再识别）；

               能够正确识别正负号，即保留正负号；

               在转换时，遇到非数值型的字符就会停止转换；

               如果字符串的第一个字符是非数值型的，那么转换的结果为NaN；

[javascript] view plain copy
  1. console.log(parseInt("123"))    //输出123  
  2. console.log(parseInt(" 1 2"))    //只会输出1  
  3. console.log(parseInt(-123))     //输出-123  
  4. console.log(parseInt("hello"))    //输出NaN  
  5. console.log(parseInt(true))       //输出NaN  
  6. console.log(parseInt("123hello"))    //输出123，后面非数值型不会识别  
  7. console.log(parseInt(" 1 "))     //输出1，忽略空格  

（3）parseFloat：将字符串转换成小数（识别小数点，注意事项同上）

[javascript] view plain copy
  1. console.log(parseFloat("123.55"))    //输出123.55  
  2. console.log(parseFloat(".1hello"))    //输出0.1  

（4）Number：将其它类型的数据转换成数值型，注意被转换的数据必须是纯数值构成，否则无法转换，其它注意事项同上

[javascript] view plain copy
  1. console.log(Number(true))   //1  
  2. console.log(Number(false))    //0  
  3. console.log(Number(null))    //0  
  4. console.log(Number("123hello"))    //NaN  
  5. console.log(Number("12.22"))    //12.22  
  6. console.log(Number(undefined))    //NaN  

（5）页面中的信息框：

        alert（），弹出个提示框，只有确定；

[javascript] view plain copy
  1. window.alert("今天天气很好")  

        confirm（），弹出个确认框，有确定和取消；

[javascript] view plain copy
  1. window.confirm("今天心情也很好")  

        prompt（），弹出个输入框，可以输入内容；

[javascript] view plain copy
  1. window.prompt("password","请输入密码")  

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

评论(0) 浏览(3541)

分类

日历

链接

个人资料

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

存档