首页

插画在UI设计中的运用

蓝蓝

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

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

评论(0) 浏览(2482)

网页的转发与重定向

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) 浏览(2159)

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

雪涛

交互设计是什么？
交互设计 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) 浏览(2121)

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) 浏览(2285)

想要用好留白？这篇文章帮你从头开始梳理

雪涛

留白对于设计的价值，已经得到相当广泛的认可了。留白的存在让其中的元素得到更好的凸显，有了留白才有强调，它们从来都是一体两面，焦不离孟。今天的文章，我们来聊一下留白的使用技巧和最佳实践。

设计中的留白

留白本身通常还被称为负空间，它们可以在网页布局中各个元素之间，还可以在特定 UI元素的内部。留白赋予了页面呼吸感，而它本身并不一定非得是白色的空白区域。留白界定了 UI元素本身的空间边界，而借助格式塔原理，它还可以创造视觉上的联系。

因此，留白是一种重要的、功能强大的设计元素，它对于创造积极的用户体验有着重大的影响。 交互设计基金会的 Mads Soegaard 是这么说的：“留白就像一块画布，它是将不同设计元素融合到一起的背景，又让这些元素通过对比衬托脱颖而出。”

在诸多的平面设计领域当中，负空间都发挥着无法替代的作用。无论是设计LOGO、平面插画还是字体的时候，留白的使用关系着整个设计的表现力。就像下面的博客插图，负空间的运用让整个画面显得更加生动。

无论是在网站设计还是 UI设计当中，设计师都需要借助留白来提升界面和导航的可用性。布局元素周围的留白或者负空间通常被称为宏空间，而它们之间的留白和内部的负空间，则被称为微空间。

理清概念

留白和负空间虽然是两个不同的说法，但是两者表述的是同一个东西。之所以有两个不同的说法，是因为两个名称是来源于不同的两个领域。

留白是来自排版印刷设计领域，因为页面的背景通常是白色的，而文本和图片周围的区域也多是白色的空白，因此有留白之说。而负空间这个说法是源自于摄影，吸引人注意的视觉主体被称为正空间，而相应的留白就成了负空间。

需要注意的是，留白并不一定非得是白色的，可以是其他的颜色，甚至是其他的图案。

留白为何如此重要

当你进入一个挤满各种物品和人的房间，到处都是东西和人，找到特定的东西肯定是一个非常艰难的事情。相应的，在干净的地面上，摆放的唯一的物品肯定是非常醒目的，你不需要花费任何力气就能注意到它。这也是留白发挥作用的原理所在。

虽然客户可能会要求设计师在页面上尽可能多地塞满各种元素和功能，这样可以节省空间。但是，实际上这是一个最常见的错误的做法：用户并不需要在网页上一次完成全部的工作。更重要的是，太多的元素会分散用户的注意力，用户会难以找到真正想要的信息。正如同 Aarron Walter 所说：“你想让用户注意到所有事情的时候，他们会感知不到任何东西的。”

对于设计而言，负空间的价值是非常高的，我们随便总结一下，都有很多：

  • 它让页面的可阅读性得到了提升；
  • 它增强了视觉层次；
  • 它使得元素和元素之间的关系更加清晰，更容易被感知，而不需要借助表格、框架这样的附加手段；
  • 它为页面增加了呼吸感，而不至于导致混乱；
  • 它让用户更容易将注意力集中到核心元素上，减少分心；
  • 它提升了页面的风格，让设计更加优雅。

看看这个城市指南的着陆页吧，负空间在背景中扮演了非常重要的角色，更重要的是，图片中的元素和前景的文本标题之间有所互动，这也同样是借助负空间的方式来呈现，呈现出一种和谐而有趣的设计效果。

影响留白的核心因素

合理的使用留白能够让界面的用户体验提升不少。

可读性和清晰度：如果和元素之间没有足够的留白，会变得难以阅读，用户需要花费额外的精力来进行分辨。不合理的留白设计会让用户感到紧张，想要让用户感到自然，需要让留白恰到好处，令布局显得足够自然。如同音乐中的韵律感一样，设计中的韵律感是通过留白的变化来呈现的。

品牌化：如果你熟悉LOGO的设计，你会发现设计师借助元素周围的留白来营造氛围提升感觉，留白的功能性在品牌设计上有着非常显著的体现。打破留白的设计规则，对于整体是有害的。

强化属性：留白的运用能够强化属性，比如新闻博客平台会更加密集地呈现信息，甚至会借助动态的数据呈现和较为致密的布局来营造一种资讯的密集感和平台的调性。

视觉层次：富有层次感的留白设计能够创造出视觉层次，并且让用户注意到特定的元素和信息。

留白对于视觉的影响主要体现在以下的几个方面：

  • 文案和内容
  • 图形元素
  • 导航
  • 视觉识别

接下来看看几个案例。这是 The Big Landscape 的首页，没有表单，没有视觉框架，仅仅借助留白来平衡所有的设计元素。设计师构建出了清晰的层次结构，并且允许用户一瞥即可看清所有的内容块，这样的设计看起来是清晰而有条不紊的，而且充满呼吸感。白色的背景和简约的布局让整个界面充满了实体杂志的质感， 而这也相对视觉化地告知用户这是一个在线的数字杂志。

另外一个是移动端的APP Upper。整个应用的留白都是使用黑色来进行填充的，在视觉上，黑色的留白和核心的视觉元素构成了鲜明的对比，从而起到了凸显的作用。整个设计留白充足，用户不会错过关键的部分，也不会分心，布局的组织性极强，可读性也都毫无问题。设计师确保了整体的优雅性，也让布局更加具有美学特征。

需要考虑的问题和隐患

1. 术语紊淆

和不熟悉设计术语的客户进行沟通的时候，应该尽量让他们明白负空间/留白的含义和功能。对于非设计从业者而言，很多时候确实不能很快接受「屏幕中需要留下更多的留白」这样的概念。对于黑色或者深色的背景，这类客户可能会有不好的联想，事实上并非如此。在进行足够深入的沟通之后，尽量将这些关键点灌输给客户，避免术语和概念上的误读。

2. 希望减少留白，增加页面和内容

其实这个是几乎所有的设计领域都会面临的问题。客户会希望室内设计师在一面墙摆满柜子而不是给两个剩余的地方留白，而建筑设计师也常常需要建筑周围有足够的留白，确保呼吸感，提供更好的服务。设计师需要和客户沟通，了解哪些部分更重要，哪些部分次重要，而哪些内容是可有可无的，分清层级，进行筛选。留白有助于营造更加协调的布局，让信息和功能的可用性更强。

3. 优先级不够高

如果深思熟虑的信息架构和界面并不匹配，留白并不是万能的解决方案。你需要在考虑界面设计之前，就确定用户获取信息的方式，然后再进行设计。在确定风格之前，先要梳理清楚用户流程，否则，再好的负空间设计也不足以发挥出它应有的功能。

评论(0) 浏览(2005)

UI设计改稿经验总结

博博


UI大课堂 2018-02-01 00:00:39

提到这个话题有两层不同的讨论方向，在工作中对公司项目进行设计改版和利用业余时间进行自由主题的改版练习。这次我们主要以后者为出发点进行讨论，其目的是为了给部分设计师在利用自己业余时间上面探索出一个新的方向。在工作项目中进行UI设计改版分为团队发起和自我发起，这个我们下一次一起来讨论。

UI设计师的自我提升来源于多方面的综合体现，工作项目中的实战经验、团队协作的互补学习、项目沉淀与反思、碎片化阅读的查漏补缺、业余时间的自我驱动、阅读带来的知识沉淀等等。如何充分利用自己的业余时间是被很多初入行业的设计师所忽略的，一晃三五年过去了，却发现自己找不到更多的作品用来丰富简历，很快便进入了瓶颈期。

面对未来的自己可能会出现这样的情况，我们一起提前探讨一下这个话题，以 UI设计改版为突破口展开我们的话题，希望带给即将入行和刚入行的设计伙伴儿一个新的方向。

目录

1、UI改版的目的，从不做无意义的事情；

2、制定时间规划，是为了治疗懒病；

3、如何挑选改版产品，再也不是选“美”了；

4、体验，这是你的第一次深度探寻；

5、功能梳理，理清流程好开工；

6、竞品分析，做好知己知彼；

7、素材采集，打开禁锢的思维；

8、体验，走了一圈才发现你可以更好；

9、交互设计，实现你心中的更好；

10、设计风格推导，符合产品的设计趋势运用；

11、界面设计，碎片化积累；

12、审核，寻找导师；

13、调整优化，不放过任何一个细节；

14、包装，整理设计思路；

15、分享，设计交流。

正文

1、UI改版的目的，从不做无意义的事情

工作中的项目参与对UI设计师的专业提升是非常重要的，由于很多公司都处于高速发展的阶段，项目的周期很紧张，都希望每个支援板块能够具备更高的效率，推进项目更快的完成迭代上线。在设计板块，很多成熟的平台也是愿意花费更高的福利待遇引进资深及以上级别的设计师支持项目的运转，那么设计师的进阶之路便是你在职场中稳中求进的关键。

在真实的场景中，有一部分设计师也存在着以下情况：

  • a. 项目参与度低，没有更多的机会发挥自己的专业；

  • b. 公司产品迭代缓慢或者视觉支持较小，空余时间较多；

  • c. 没有机会在项目中尝试一些新的设计语言；

  • d. 自学 UI 中，没有真实项目能够发挥；

  • e. 增强设计效率和产品设计思维等能力。

如果你拥有以上的情况之一，利用自己的业余时间进行 APP 设计改版将会给你带来更多的提升空间，不但可以通过练习增强自己的设计效率，也能体验更加丰富的产品设计。在改版中也能不断加强一些交互或者产品的思维，可以让你在以后的工作项目中不局限在视觉层面，具备更多的产品思考，做出更合理的设计。

UI设计改稿经验总结

2、制定时间规划，是为了治疗懒病

如果你想要改变现状，也拿出前所未有的热度值，那就趁热打铁吧，制定一份时间表是必须的，千万别忽略它的重要性，如果你不按照这个时间计划去推进，可能这个热度值将会被懒宝宝不断地熄灭^_^。

制定时间规划不仅可以合理的利用好自己的业余时间，也能更好的按照这个规划表去逐步的推进这次改版项目，把一个大的事项拆分为若干的小事项，每天推进一部分，一次改版设计很快就在不断的推进中被完成。

APP 改版时间规划表大家可根据自己的习惯设置，表格形式还是简单的文字记录都可以，进度把控需要结合自身情况而定，确保其有效性。

UI设计改稿经验总结

3、如何挑选改版产品，再也不是选“美”了

面对应用商城里面海量的 APP 产品，你是否有点不知所措，如果选择一个自己从来不玩的 APP，改版的时候对产品的服务模式、功能架构、交互逻辑等都是比较陌生的，需要一定的时间进行学习。如果选择一些大型的产品，由于其自身的设计团队就是非常的专业，你很难从中发现可以优化的点，即使勉强进行改版，也会发现自己设计得不如原版的好，进而打击自己的自信心。

通过上面的分析，我们在挑选改版产品的时候，需要结合自身的一些情况先做出一定的预判，然后再去挑选现阶段相对比较符合的产品进行改版练习。

a. 挑选自己接触过的直接产品或者间接产品；

b. 对 APP 里面所提供的产品或者服务比较认可或者没有一定的排斥感；

c. 挑选无论是视觉层面还是交互层面都有一定优化空间的产品，别轻易尝试精品；

d. 如果身边有朋友使用过的产品优先考虑，因为可以成为你调研数据的来源；

e. 选择阳光积极型的产品，不做传递负能量或者违反规定的产品；

f. 初次尝试 APP 改版设计，从轻量级的产品入手，可以控制练习时间和自己的驾驭度。

UI设计改稿经验总结

4、体验，这是你的第一次深度探寻

当你确定自己改版的 APP 对象以后，我们就开始做一次体验吧，这是你的第一次深度探寻。体验情况根据设计师对该产品的熟悉程度而定，你需要通过不断的进行操作把自己从小白用户升级到专家级用户。

这个过程需要你对产品有一个很深入的了解，不只是熟悉主流程操作逻辑，对一些偏冷门的功能操作也要非常的熟悉，如果是需要注册使用的产品，一定不要忽略注册会员以后的体验。最终达到的级别是你可以向身边任何一位朋友轻松的进行推荐和演说，能够通过你的讲解让他轻松地学会使用该产品。

UI设计改稿经验总结

5、功能梳理，理清流程好开工

当你对改版 APP 进行第一次深度体验之后，利用思维导图软件绘制出整个产品的功能结构图，思维导图软件种类很多，大家自行选择，我常用的是 MindNode。第一次进行功能梳理无需进行增删处理，真实还原产品现有功能即可，其目的是整理自家“仓库”，做到心中有数。

在进行功能梳理的时候，如果遇到操作复杂的功能需要备注信息，以便自己后期预览时能够快速理解其含义。如果是第一次做功能结构图越详细越好，这将有助于你充分理解每个功能传达的含义。

UI设计改稿经验总结

6、竞品分析，做好知己知彼

深度体验完改版 APP 之后，做了功能结构图，此时你对所需要改版的 APP 以及这个行业的产品都有一定的认知，此时你再去体验直接竞品和间接竞品必然是以一个专家级用户的水平去探寻。在体验过程中需要结合改版产品的功能进行对比，可能第一遍体验无法很好的进行对比，所以需要至少体验 3 次以上才能很好的得出对比的结论。

体验产品时需要注意的几个维度：

  • a. 不要急于进行总结，先进行至少 3 次以上体验；

  • b. 先看整体布局再分析局部细节；

  • c. 重点功能交互形式需要提取出来进行对比；

  • d. 主界面的各版块布局设计需要进行对比；

  • e. 配色分析，作为改版时的配色优化指导；

  • f. 图标和组件库的分析，找出细节的优化方向。

进行竞品体验时，尽可能多的找出差异化的设计形式，作为改版 APP 优化的指导方向。由于作为 UI 设计师进行 APP 改版练习更多是视觉优化为主，交互优化为辅，所以我们需要在相同模块上面找出更多不同的设计样式，作为视觉优化的方向。

如果你自身交互能力较好，也可以以交互优化为主，视觉优化为辅，这个可以结合自身情况选择。在进行竞品体验的时候也要根据优化目的的不同，着重的转移体验的重心。

UI设计改稿经验总结

7、素材采集，打开禁锢的思维

通过竞品体验你会总结出改版 APP 各个模块的差异化，相同的功能模块各自产品的交互形式、布局样式、视觉风格都存在各自的差异。此时，你对改版 APP 中的很多设计都一个初步的优化清单，你需要再深入一步，因为竞品的设计样式不一定就是值得借鉴的，我们需要寻找更多的灵感，打开自己禁锢的思维。

通过国内外的一些设计平台、素材网站等我们可以去采集更多的设计样式作为灵感借鉴，日常的一个采集收藏习惯也就变得尤为重要了，作为一个优秀的 UI 设计师，我们需要养成这样的习惯。个人平时经常访问的设计平台有站酷、UI中国、致设计、Dribbble、Behance等，采集收藏灵感会经常用Pinterest和花瓣，都是一些大家经常访问的平台，所以不是别人知道你所不知的优秀平台，而是你没有他的良好习惯。

UI设计改稿经验总结

8、体验，走了一圈才发现你可以更好

采集完一些灵感素材之后，我们又回到体验改版 APP 的起点，走了一圈之后你会发现改版 APP 中很多你可以入手优化的方向，比起第一次体验，你会更加有信心能够做出一个不一样的设计作品。再次进行产品体验的时候，你需要带着脑海中处理相同功能板块的不同设计表现形式进行思考，寻找出更好的设计表现形式来解决这个功能模块。

在构思优化样式的时候，可以绘制一些简单的草图，以防后期进行交互输出的时候遗漏灵感细节。在进行设计优化的时候先从灵感库中寻找较为符合的样式进行思维嵌套，然后再发散思维，融入自己原创性的思维，形成自己的原创思路。

UI设计改稿经验总结

9、交互设计，实现你心中的更好

通过前期的准备工作，我们即将进入重要的设计部分，大家不要忽略前期的准备阶段，只有思路成熟且清晰，后面的设计工作才能更加顺畅。

作为 UI 设计师最终输出的必然是高保真的视觉稿，那么交互原型设计是为了快速的把自己的思路展现出来，所以不局限于原型软件的绘制，哪怕是纸上的草图绘制也是可行的方案。最终的交互稿是给自己看的，所以能看懂就能达到最终的目的。

如果你考虑后期进行作品包装展示时，希望能展示出交互思维，那你花点时间适当的对低保真交互原型进行绘制也是不错的选择，也能锻炼自己原型制作软件的操作能力^_^。

UI设计改稿经验总结

10、设计风格推导，符合产品的设计趋势运用

在开始进入界面视觉设计时，我们需要对整体 APP 设计做风格推导，这将直接关系着最终界面呈现的效果。如果你是一位对行业趋势关注的设计师，各种设计趋势呈现在你脑海中，你需要进行筛选，结合改版产品的属性选择合适的设计语言去表达，切不可为了趋势而牺牲产品定位。

在进行风格确定的时候，颜色的选择也占据一定的因素，我们可以选择改版 APP 现有的主色进行优化，也可以进行推翻重选。如果是重新选择配色方案，我们可以通过情绪版的方式在身边朋友或者各种群里进行。也可以与竞品形成视觉差异化，选择一些形成对比的配色方案，方式很多，大家根据自己的条件和思路自行展开。

确定好配色方案之后，我们需要考虑设计的表现形式，无论是何种设计形式都需要符合产品的属性。比如大标题、大圆角卡片、大投影等设计表现形式会在视觉层面带来不错的效果，却需要考虑信息量的因素，如果本身改版 APP 就属于信息量很大的产品，在选择时就要综合考虑。根据 APP 的风格定位，比如文艺类、娱乐类、儿童类等，那么设计的风格也会对产品风格定位起到一定的影响。

UI设计改稿经验总结

11、界面设计，碎片化积累

当你打开设计软件进行界面设计的时候，剩下的就是“满血复活”的激情，为了能够充分利用好业余时间，我们需要把数十个界面分配到具体的日程中，的利用碎片化的时间进行积累。规定自己一天完成两个界面，就要严格执行，只有这样你才能具备超强的战斗力。

提到界面设计很多设计师会纠结在软件的选择上面，总会问老司机们你们用什么软件，其实软件的选择并不是问题，它只是一个工具，用的顺手即可，现在很多软件都能带来最终的目的。随着很多轻量级的软件不断丰富多样，软件的操作也更加简单便捷，只要你充分的利用互联网资源，软件的学习只是熟练度的问题，设计的思路与技巧才是需要更多的学习、研究和总结。

UI设计改稿经验总结

12、审核，寻找导师

历尽艰辛你收获了希望，一套 APP 改版设计作品初步完成，接下来你需要寻找到一位导师，俗话说当局者迷，你自己构思出来的东西需要得到验证，寻找一位资深的设计老司机给你指点作品，将会给你的成长带来很大的帮助。他们会站在更高的专业角度给你指出一些优化建议，也能使你的作品更加成熟。

导师在哪里？

  • a. 可以是身边的同事，别以为导师一定是大神，旁观者的意见都是具有一定的思考价值；

  • b. 通过一些设计交流群寻求意见，建群的意义其实就是交流设计（可是现在演变为畅谈人生了/(ㄒoㄒ)/~~）；

  • c. 通过设计平台寻找那些活跃的老司机，只要是真诚的设计交流，他们都会乐于分享；

  • d. 机缘巧合下加上的大神微信或者QQ，平时要注意不要群发小广告去骚扰他们，他们关键时候会乐于给你专业性的指点；

  • e. 相信你能找到更多的方法，寻求帮助。

UI设计改稿经验总结

13、调整优化，不放过任何一个细节

通过不同形式的意见反馈，我们即将面临一次调整优化，在众多的反馈意见中，我们也不能盲目的进行修改。我们要做有思考能力的设计师，去分析这些修改意见，遇到意见相左的修改建议要结合自己前期的调研进行把控，因为提意见的人不一定能像你一样熟悉产品，可能存在一定的主观性。

选择性的进行修改，也要保持自己的自信度，适度的自信可以增强你对作品的信任度，我们不能总是质疑自己的能力，只要保持不断努力学习的心态，有时候也要相信自己的专业能力，相信自己就能给作品带来自信度，你的需求方才能被你的专业意见所引导。

UI设计改稿经验总结

14、包装，整理设计思路

作品包装总是会被很多设计师所忽略，在进行作品展示的时候也比较随意，没有充分利用作品包装的优势传达出作品自身的价值。我们将作品展示出来进行交流时，需要通过适当的包装把作品更好的一面清晰的传递给读者。

在进行作品包装的时候，可以加入自己的设计思路辅助传达出作品背后的故事，让读者更容易走进你的作品。通过包装把原本单调的独立界面进行解剖，利用整体布局、局部提炼、细节展示、文案描述、思路整理等形式，让作品呈现效果更加丰富多样。

作品包装中一些简单的设计技巧：

  • a. 作品包装设计中的版面布局需要舍得，适当加大留白会给版面更强的呼吸感；

  • b. 局部提炼，对界面设计中的一些视觉表现力强的样式提取出来独立展示，丰富作品的细节展示；

  • c. 精心挑选样机，让作品展示效果更佳，有时候也可以自己绘制更加简练的样机模型；

  • d. 设计组建选择性展示，增删挑选的组建让布局更加整体，视觉效果更加协调，整体组合形成块面感；

  • e. 利用对比突出重点，不要使整体布局都处于平面化；

  • f. 装饰元素的运用，可以利用辅助图形、短线等进行设计装饰；

  • g. 加强头图设计的视觉表现，提高读者的注意力。

作品包装设计分为平台型作品包装和作品集包装，也是需要我们设计师加以重视的一个板块，以后我们单独进行这方面的研究分享。

UI设计改稿经验总结

15、分享，设计交流

此时，你已经完成了这次 APP 改版之旅，恭喜你击败了懒宝宝，相信下一次你会具备更强的自我驱动力。完成一次作品你可以选择封印在冰冷的硬盘，也可以选择分享给更多的设计朋友，大家互相学习和讨论，个人比较倾向于后者。

评论(0) 浏览(2581)

MIUI10上手体验：“苹果味”十足，操作更加顺滑

博博


天极网 2018-06-04 18:18:17

5月31日，小米在发布会上推出一代操作系统——MIUI10。近日，小编顺利通过了MIUI10的内测申请，于是将手里的小米5第一时间更新，一起来看看官方给新系统定义的几大更新亮点吧。

MIUI10上手体验：“苹果味”十足，操作更加顺滑

首先，在更新MIUI10内测版之后，老旗舰手机小米5焕然一新，变得流畅许多。此次新系统主要是针对全面屏做的设计，具体表现在状态栏和多任务的排版上，UI设计结合了Andrid P和iOS风格，整体比较清新。在点按之后，图标会变成蓝色，开关按钮采用了翻页的形式，而且可以容纳的数量也比以前多了。虽然在风格上进行了大量的修改与整合，不过最终还是没能逃脱“苹果味”。

MIUI10上手体验：“苹果味”十足，操作更加顺滑

小编觉得MIUI10最大的变化就是多任务面板，之前的MIUI9、MIUI8等版本均为横向布局，而此次MIUI10变为了纵向布局，交互方式上有些变化。官方宣称这是可以在一块屏幕上看到更多的多任务。其实就是迎合了全面屏的理念，而又不想太过抄袭苹果的多任务，最终就出现了这样的产物。说实话，小米5上的MIUI10多任务面板不是很好看，但是使用效果还不错，多任务左右滑动是关闭，长按就有分屏，锁定和设置三个按钮。

MIUI10上手体验：“苹果味”十足，操作更加顺滑

接下来是本次新增的驾车模式和小爱同学。之前MIUI9也有语音助手，不过稍显“智障”，并没有太多实用性。MIUI10上，小爱同学增加了训练计划，可也设定提问他要回答的答案，实用性大大增强。驾车模式应该是广大司机朋友最关注的功能，全新的驾车模式在小爱同学的帮助下，可以做到边开车边回复消息，同时还能保证开车的安全性，非常实用。

MIUI10上手体验：“苹果味”十足，操作更加顺滑

再来说说小编遇到的问题吧，因为是MIUI10内测第一批版本，BUG多也是可以理解的。刚小米5升级MIUI10后，虽然操作确实很顺滑，不过头疼的BUG使得系统整体性没那么强。有几个BUG甚至把传统的16:9手机当成18:9的手机来显示。需要提升的地方还有很多，比如消息通知会跑到下面来，就像有虚拟的刘海，还有充电的时候电量小圆圈也只能显示四分之一，还有改不了热点的名字和密码。

MIUI10上手体验：“苹果味”十足，操作更加顺滑

最后总结一下这几天的使用体验，MIUI10系统的外观设计与流畅性自然不必多说，提升蛮大的。最让小编印象深刻的还是杀后台情况，3G内存的小米5在MIUI9系统下杀后台现象非常严重。在MIUI10下，这种情况改善了许多，使用时没有以前那么“虚”，强烈推荐老旗舰手机升级。另外，小编发现“小爱同学”贯穿在了MIUI10中，许多地方都能见到AI智能的身影，相比MIUI9“聪明”了许多。总的来说，内测版MIUI10的升级非常到位，焕然一新的UI设计以及交互方式，提升颜值的同时也提高了档次。

评论(0) 浏览(2223)

UI按钮设计发展史

蓝蓝

当我们在网上购物，提交我们个人信息都需要用到按钮。网页UI设计的增长很快，风格似乎也是一个月一变。最近几年，我们经历过从文 本链接到拟物化设计再到扁平化瀑布流设计。导航是网页设计中最重要的元素，并且按钮是最重要的行为工具。

评论(0) 浏览(2513)

request中跟路径有关的api的分析

seo达人

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

           最近重在研究struts的源码，其中涉及到了request中的几个api，看了文档后还是觉得不清楚，所以在自己原来的工程中

测试了一下各个api的具体效果。在这里跟大家分享一下。

            这是我具体测试的代码：

           这是我servlet配置的路径：

            以下是访问这个ProductServlet后控制台打印的结果：

            从以上我们可以发现：

    1.getRealPath(....)，这个方法是返回给定资源的磁盘绝对路径，简单来说，就是以盘符开头的路径

    2.getRequestURI(....)与getRequestURL(....)这个两个方法，从名字上来说，一个是返回url（统一资源定位器）一个是返回

uri（统一资源标识符，用来唯一的标识一个资源），那么url跟uri有什么区别呢？比较结果后我们就知道，URL中包含URI，URL是

带协议，带端口号的。

    3.getContextPath(....)这个方法，其实就是用来返回工程名，或者说工程路径，看结果我们一目了然

    4.getServletPath(.....)这个方法，从结果中，我们可以分析得出，它其实就是在工程目录下，访问我们servlet的路径，或者说

servlet相对于我们工程的路径，在或者说，它就是我们在配置文件中配置的路径，但是不包括后面具体的请求资源名

    5.getPathInfo(.....)，这个方法其实就是返回我们具体请求资源的名称，或者说，相对于我们的servlet而言的请求路径

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

评论(0) 浏览(2113)

如何做好电商类App？来看这份对新版淘宝的设计思考！

雪涛


电商类 App 是日常使用频次非常高的应用，它们的每一次更新改版不仅是业务的拓展、用户需求的满足，同时也是消费趋势的引领与跟随。

近期淘宝 App 的许多页面都有了较大的改动，在分析淘宝改版的基础上，通过几个关键页面的分析对比淘宝、京东、苏宁易购三大综合类电商平台的产品设计，希望此篇文章能让大家对电商类 App 的产品设计有更深的认识。

一、淘宝改版

前阵子淘宝进行了改版，这次改版循序渐进，并做了较多的 A/B 测试。

1. 主要改版页面

上图是淘宝几个主要改版页面。从视觉上看，很明显的大圆角卡片、去线条，整体风格统一轻质化。大圆角卡片追随了 iOS11 的风格（App Store 中尤为突出），卡片使信息更加聚焦，模块感更强；圆角卡片本身也比原先的卡片式增加了更多细节；大圆角卡片亲和力高，更加活泼，也符合淘宝人群的定位。

上图为5个 tab 的页面，这次统一了头部的颜色，强调了品牌，统一性方面也得到了提升。

以下是从单个页面的角度进行改版分析。

2. 个人首页

△ 旧版图为除夕的截图，颜色方面先不讨论

新旧版本的对比，可以看出88会员、卡券包优先级提高，会员信息更加集中、突出。这也印证了这两年会员机制的火热，拉新成本和难度都越来越高的情况下，巩固老用户才能带来更多的价值。

新版的卡片式很突出，去掉了大部分的线条，转而用块面来代替线条表达层级关系。

「我的订单」部分 icon 样式发生了变化（7. 7. 2 版），从填充式转变为线条式，突出了 icon 右上角的数字，但这一点在测试版本中又改回来了（后面讨论）。

88会员和物流这两块内容滚动呈现，真正是动效解决问题，从时间轴来解决信息量大而空间局限的问题，同时动态效果增加了用户吸引度。

在测试版中，这个页面主要看到两个点的变化，一个是 icon 改为原来的填充式，一个是动效滚动的节奏。

icon 的问题个人猜想是因为体量与重要性、位置的问题，线条式的体量弱于填充式。在「我的淘宝」页面中，最重要的信息是「我的订单」，因此需要一定的突出。另外在测试版里，「我的订单」的上面固定的广告位放置了旅行青蛙的广告，此位置的突出性导致其弱化了底下的「我的订单」，占用了原先「我的订单」的 C 位，因此测试版考虑到更全的场景（有广告），从而将 icon 的样式换回了体量大的填充式。

动效滚动是上面说的88会员和物流，7. 7. 2版本里两个滚动是同时进行的，而7. 7. 8的测试版中两个滚动是错开的。上下同时滚动会让人有些混乱，会让人认为这两块的信息是相互关联的。

3. 店铺首页

这一块做的 A/B 测试。店铺页面的改动较大，导航做了较大调整。新版将常用操作和重要功能放到了底部固定；二级导航中的内容让商家自定义选择，从而满足不同店铺的需求；新版一级二级导航较旧版层级关系明确了许多。

再来说说这次的 A/B 测试，这次的测试时间比较长（从7. 7. 2到目前的7. 8. 2都在，目测到8. 0应该会给出一个结果）。店铺页在导航上的大改动，会在一定程度上对已经形成习惯的老用户造成冲击，对页面重新适应和学习，有点类似于前摄抑制（在认知心理学上指之前学习过的材料对保持和回忆以后学习的材料的干扰作用）。新版设计的目的一是方便用户初期快速学习，二是中后期快速使用。对于中后期的快速使用就需要一段时间的铺垫来获得数据。该次测试应该是区分各种不同的用户，简单来说测试新用户、老用户分别对于新旧版本的学习，以及他们对新版本熟悉之后的使用。

4. 物流详情

这一块可以说是样式上的大改。用可视化来表现包裹正处的位置以及即将进行的操作，增强用户感知（降低理解难度），进一步提升对商品信息的把控感。比原先仅仅是文字展示而言生动了许多，样式接近外卖等待中的订单页面。可视化固然可以展示更多的信息，但是在用户非训练的情况下信息传递的速度未必比文字要更快，不同的人对图形的理解也会有所偏差。不过介于外卖 App 的页面已经对很多用户进行了教育，相信这种理解上不会有太大难度。但是依然要在后续优化中逐渐突出信息的重点。

物流详情页除了样式的巨大变化，还有一个特点就是场景化细分，不同的场景做出了差异化。例如仅仅是物流详情页，根据不同的场景：发货未揽件 – 已揽件未配送 – 快递员配送中 – 到达菜鸟驿站/其他快递点 – 已签收等，页面突出的信息均有所区别。已揽件时突出快递信息，配送时突出配送员信息等。

从场景细分做差异化，让用户获取当前最需要的信息这件事的出发点无疑是很好的，但是从上图中，仅是快递信息这一类信息，就出现了三种样式（如上图），并且位置也不统一。如果用户是购买了几件不同店家的商品，这时快递员打电话来说我是XX快递的，快递给你放在了某某地方，这时我想知道这是啥商品的时候，于是我就打开了物流详情，来找快递信息，发现快递信息居然不在原来的地图底下了，找了好一会才发现放到了快递员下方。这个例子也就是说在非常见场景下获取某个信息时可能需要付出额外的学习成本。

不过在7. 7. 8的测试版本中，又将快递信息的样式减为两种，算是一种妥协。本人认为，场景细分出发点是好的，但在样式和位置两点中，最好至少有一点是固定不变的，这样才不会过多增加用户的学习成本，也能涵盖一些小概率场景。

5. 动效

这两张图都是店铺页面顶部的动效，当用户向下滑动页面时，顶部的信息会出现变化，也算是细分场景的一种，通过动效的方式完美过渡，过渡的流畅感会让用户对该平台增加些许好感。

我的淘宝这一页的动效解决问题在上面有说到，右边的有好货页面，当用户在滑动页面时，攻略推荐一栏的图片有依次展现的效果，吸引眼球，小有惊喜。

总结来看，淘宝改版的设计角度可以总结为：设计追随目标，品牌、会员突出，追随设计趋势，细分场景，可视化展现和流畅动效。另外淘宝对设计、测试的态度上来说，设计解决实际问题，设计需要验证，测试要严谨。

二、淘宝与其他竞品

这里只选了京东和苏宁易购两个与淘宝进行了几个关键页面比较，以下主要从视觉的角度谈一下有哪些问题，这里几乎不牵扯业务、页面跳转等问题。

1. 首页

淘宝：整体看起来没有什么硬伤，没有用卡片风格。

京东：这边也是继淘宝改版后不久改版上线。这边首屏的 icon 这一块的卡片式生硬，大有为了卡片而卡片既视感，京东秒杀这块的整齐度不高，也有些左重右轻。「每日逛」这种装饰性较强的风格也与整体卡片式简洁风格不符。「东家小院」楼层次级标题的颜色跳跃，大有喧宾夺主之感。

苏宁易购：目前还没有改版。掌上抢这楼层整齐度不高，和京东类似，同时缺少层次感，部分有渐变部分没有，非常不统一。「逛实惠」楼层视觉不平衡，而且信息层级很有问题。

2. 搜索结果页

风格：淘宝这页用了无框设计，省去了中间的分割线，商品图片尺寸较大；从左到右，图片尺寸越来越小，分割线从无到细到粗，整体效果上淘宝和京东效果比易购的好。

标签：在标签的处理上，易购的标签非常强，在页面上非常突出，喧宾夺主；京东的标签弱化，与淘宝类似，但完全不同类的标签样式相同（秒杀与自营），会让人觉得有些混乱。

图文编排：淘宝和京东都没有硬伤，比较和谐，但易购的图片和文字大小间距比例不和谐，图片与线框无论在视觉效果上还是像素上都没有对齐；易购底部没有适配 iPhone X。

3. 分类页

风格：淘宝用了明显的卡片，去线条；而京东也用了卡片，卡片感微弱，是为了统一性而做；易购仍然是线框区分，整体区分效果不佳。

品牌：淘宝和京东在文字的处理上没有用更多的色彩，而易购的色彩运用得非常多，削弱品牌感，且没有带来任何优势。

4. 商品详情页

此页面我仅从节奏感这一个角度来看，上图已经标出了每个页面的节奏感给我的感受。淘宝整体的节奏感比较好，轻重缓和；京东和易购在节奏感上做的都有些问题，重节奏之间无轻节奏的调和会缺乏呼吸感。

5. 购物车

风格效果：淘宝没有用卡片风格；京东用了卡片，导致大量留白，同时没有带来任何优势，苏宁易购整体稍显拥挤，没有亮点。

图文编排：淘宝整体非常和谐；京东图片均使用了白底，这点很好保持了统一性；京东使用了大量的设计细节，字号、粗细、字体、颜色等等非常丰富，但整体效果并没有很理想，稍显琐碎与凌乱；苏宁易购的文字大小与间距处理不和谐而带来拥挤感。

其他细节：京东标签不同于搜索结果页的弱化，而是非常强化，导致视觉焦点混乱，个别按钮非常小，操作不便；易购标签处理上比京东收敛；易购底部 tab 与其他部分没有区分，浮框像广告，效果不佳，数量修改框的描边太硬，比例不和谐。

6. 个人首页

整体风格：淘宝和京东都是明显的卡片式，苏宁易购是广义上的卡片式。

这里主要说一说易购的问题：首屏出现「我的专场」的大片不平衡色块非常不合适，部分 icon 效果不佳，另外有一些内容上的 bug。

7. 订单

淘宝和京东的订单页个人认为没有什么硬伤，淘宝有个适配的问题。苏宁易购的问题比较多，首先是顶部「常购清单」中没有商品的 bug，然后是图片与购物车等地方的风格不符，商品之间分割线有时有有时无，间距有问题等等。

三、总结

综合上面具体页面的分析可以看出淘宝在 UI 设计上的优势：追随设计趋势、统一性、排版和谐等。

关于统一性这一点，可能有人说京东做的更好，因为它几乎所有页面都用了卡片风，而淘宝没有。个人认为，设计风格是次于设计目标的，如果这种设计风格不能很好满足该页面的设计目标，建议还是以设计目标为重；如果仍然强制使用该风格的话，会得不偿失。淘宝的做法是把卡片这种风格归类为轻质化风格，除了卡片以外，还有去线条、色块等等设计语言，因此并非强调一定要使用卡片形式。

评论(0) 浏览(2302)

分类

日历

链接

blogger

蓝蓝 http://www.lanlanwork.com

存档