首页

新手科普!APP 的图文布局和按钮总结

雪涛


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

常见的APP 图文布局有哪些?不同按钮有哪些用法?今天这篇总结帮新手认识基础知识,赶紧来收!

一、图文布局

用户所关注的内容以及不同的业务诉求决定信息的优先级排布,所以没有通用的布局,只有适合的布局。

1. 上图下文

上图下文更强调了图片的重要性,以「见」这个属性为优先,上图下文需要注意的是图片高度过高会严重影响版面效率,而一个具有商业化目的的产品对首页的版面效率异常看中,同样对图片的质量要求也甚高。通常这样的 feed流布局更抓人眼球。

如果确实需要以大图+文的上下方式来布局,尽量找到版面的平衡点,考虑图片与文字之间想要给用户传达的关系和优先级图片的使用尽量使用黄金比例做展示,例如4:3,2:1,16:9等。

宫格排列式的上图下文能够极大的提升版面效率,一般更多用于电商平台,在首页将某个模块的优质商品进行透出,提高转化和流量。缺点是缺乏信息完整度,在布局时需要考虑更多因设备、极限值带来的不同状况的问题。

可以看出,严选将金额跟在标题后面,而非固定位置,这样做的好处是将标题和金额关联度更高,形成一致性,缺点是布局上显得层次不齐影响阅读效率。通常这样的排版会根据业务需要来选择展示一行或多行文字极限。但由于版面效率它不得不只给了两行的极限高度。

2. 左图右文

左图右文形式的排版应该也算是用的非常多了。其实大家会经常把它和左文右边图进行对比。但无论是左图还是右图,在这样的布局中我们首先就要做好图和文的占比。显示在外面的图片通常是选取了详情中的图片来进行展示,否则就浪费了比较多的人力资源去重新配图了得不偿失。同样和图片搭配的信息字段此时就显得极为重要。

菜鸟裹裹其实将标题的优先级又提升到了和图片一样的层次。图片本身给人的视觉冲击会更强所以即便图片放在标题下面,也不会弱。

方形缩略图是最常用的形式,不至于太窄也不至于太宽,对于右侧信息的布局也显得更游刃有余。横形的图片会让右侧的文字显示空间压缩的厉害,通常在视频缩略图会用到,但图片对整个页面的氛围感会更好。竖形的图片让右侧信息有更多的发挥空间,同时版面的留白也更大,但是如果右侧信息过少,则会让页面有些单调和不完整。

左文右图就不再赘述,现在大多数左文右图在咨询和旅游产品中使用的更多,因为用户在浏览这样的列表信息时图片无法在第一眼被识别出具体内容,而对于这样的产品来说无疑是低效的。当然很多时候没有那么多时间去验证如此设计对于用户来说是否真的能提高浏览效率,提升了多少满意度。我们可以简单的理解,如果说的是一件事,那么文字比图片更重要。如果说的是一样物品、人,那么左边放图更合适,体会一下。

3. 图文混排

为了使信息传达的更一致,通常如果没有大量的文字信息则我们会选择文字与图片混排的形式,为了适应多变的图片,我们会在文字底部加一层黑色半透明蒙层或者给文字加一些无伤大雅的阴影。前提是文字信息不会太多而干扰到图片内容的展示和传达。

二、按钮解析

其实严格意义上来说,能通过点击触发交互动作的控件我们都能将它定义为按钮,但是如果这样定义那就没的玩了,所以我们将移动端的按钮定义为具有引导性并且可点击的控件。

例如京东金融查看历史支取利率后的箭头,其实这才是这一行的引导按钮,但是为了更好的触发点击通常会将整一行都作为点击热区。

所以为了区分不同的按钮的用法,我这边将按钮进行了一个分类:主线场景、支线场景、异常场景。

主线场景下的按钮通常会使用的比较大,为了强化和引导核心的任务流程,所以该按钮应该是最醒目的。

样式通常会分为通栏和非通栏,而通栏则是从 MD 设计中衍生出来的一种形式。

1. 主线场景

要注意的是,通栏和非通栏按钮我们到底该如何选择,首先我们需要知道这样的按钮都是放在页面的底部固定显示,不会随着内容滚动,如果选择通栏按钮,则更适合可滚动的页面容器,也就是说一页中内容较多在一屏幕中无法显示全的页面,优点是按钮的优先级会很高,但是在 iphone X 这样的设备中,适配会纠结一些。

而如果选择不通栏的按钮,我们要考虑的是页面内容是否很长,如果很长需要在按钮底部加一层白色背景,尽量不要让内容穿过按钮,因为底部其实并不是内容最好的显示区域。同样非通栏的置底按钮相较于通栏按钮层级就显得没那么高。

所以我们会发现考拉和淘宝虽然有样式区别,但实际上都相当于在底部有一层内容遮盖的部分。

2. 支线场景

再来看支线场景的按钮,支线场景的按钮一般能够分为:图标、文字、图标+文字、框+图文字+图标这样几种类型。

图标就不用说了本身就具有可操作的属性,也有修饰的属性,关键看他的场景和布局位置。例如淘宝的 tab 标签上的定位图标,就是一种修饰型的图标,为了更好理解这里的定位是一种楼层定位,随着页面滑动到不同的业务模块而会跳动,这里并不是一个 tab 的功能,不能算是切换页面。

如果把定位按钮单独拿出来放在导航栏,或者页面右侧的空白处,我们就会觉得他是一个可点击并能够进行跳转的按钮。

包括「查看全部」这样的文字,即便不加箭头我们也会尝试去点击,高亮显示就更加明显,用户已经形成这样的意识,但是像上面的规格和参数如果不加箭头会让用户觉得这里并没有可操作的东西就不去点击了。所以我们总结一下就是支线按钮的使用场景较为复杂,需要通过参考上下文的情景来做不同样式的选择。

不过支线流程毕竟是支线流程,为了不打扰主线流程,尽量不要将支线流程的按钮做的过分明显。例如淘宝详情页中的进店逛逛,其实这个按钮用了实心的色块做了强引导,目的是为了提高客单价,同样只要是对最终目标有帮助,并不能算是跳失,说不定回来的时候买了更多更贵的东西。

3. 异常场景

异常场景下的按钮不需要做的过于醒目,一般会采用幽灵按钮或者和背景近似的颜色。该场景下按钮大多数情况是希望用户点击将页面恢复正常状态,并不是一种强烈的引导。

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

JavaScript判断变量是否为空对象 {} 的几种方法

seo达人

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

json对象转化为json字符串,再判断该字符串是否为"{}"

var obj = {}; var b = (JSON.stringify(obj) === "{}");
console.log(b); // true
    
  • 1
  • 2
  • 3

for in 循环判断

var obj = {}; var b = function() { for(var key in obj) { return false;
    } return true;
}
console.log(b()); // true
    
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

网上很多都是如上的说法,但是会存在一个问题,就是如果obj=null ,obj=undefinedobj=""obj=[]obj=0 以及obj为任意数字也返回true,所以有了下面这个for in 循环判断:

方案一:

var obj = {}; var b = function() { for(var key in obj) { return false;
    } if(obj === null || typeof obj !== "object" || Array.isArray(obj)){ return false;
    } return true;
}
console.log(b()); // true
    
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

方案二:

var obj = {}; var b = function() { for(var key in obj) { return false;
    } if(obj === null || typeof obj !== "object" || Object.prototype.toString.call(obj) === "[object Array]"){ return false;
    } return true;
}
console.log(b()); // true
    
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

上面两种方案的区别就是判断判断空数组的方式不同。

jQuery的jQuery.isEmptyObject(obj)方法

var obj = {}; var b = $.isEmptyObject(obj);
console.log(b); // true
    
  • 1
  • 2
  • 3

jQuery.isEmptyObject(obj) 方法依然存在obj=null ,obj=undefinedobj=""obj=[]obj=0 以及obj为任意数字返回true的问题,所以我们还应该再用typeof 或者 $.type() 判断一下:

var obj = {}; var b = $.isEmptyObject(obj) && $.type(obj) === "object";
console.log(b); // true
    
  • 1
  • 2
  • 3
var obj = {}; var b = $.isEmptyObject(obj) && typeof obj === "object" && obj !== null && !Array.isArray(obj);
console.log(b); // true
    
  • 1
  • 2
  • 3
var obj = {}; var b = $.isEmptyObject(obj) && typeof obj === "object" && obj !== null && Object.prototype.toString.call(obj) !== "[object Array]";
console.log(b); // true
    
  • 1
  • 2
  • 3

Object.getOwnPropertyNames()方法

Object.getOwnPropertyNames() 方法返回一个由指定对象的所有自身属性的属性名(包括不可枚举属性但不包括Symbol值作为名称的属性)组成的数组。

var obj = {}; var b = !Object.getOwnPropertyNames(obj).length;
console.log(b); // true
    
  • 1
  • 2
  • 3

Object.getOwnPropertyNames() 方法存在obj=0 以及obj为任意数字返回true的问题,所以我们还应该再用typeof 判断一下:

var obj = {}; var b = !Object.getOwnPropertyNames(obj).length && typeof obj === "object";
console.log(b); // true
    
  • 1
  • 2
  • 3

Object.keys()方法

Object.keys() 方法会返回一个由一个给定对象的自身可枚举属性组成的数组,数组中属性名的排列顺序和使用 for...in循环遍历该对象时返回的顺序一致 。

var obj = {}; var b = !Object.keys(obj).length;
console.log(b); // true
    
  • 1
  • 2
  • 3

Object.keys() 方法存在obj=""obj=[]obj=0 以及obj为任意数字返回true的问题,所以依旧需要加判断如下:

var obj = {}; var b = !Object.keys(obj).length && typeof obj === "object" && !Array.isArray(obj);
console.log(b); // true
    
  • 1
  • 2
  • 3
var obj = {}; var b = !Object.keys(obj).length && typeof obj === "object" && Object.prototype.toString.call(obj) !== "[object Array]";
console.log(b); // true
    
  • 1
  • 2
  • 3

在实际应用中,如果对象不为空,并且知道对象不为空时,某个属性一定存在,则直接判断这个对象的此属性是否存在。

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

VR 那么火,你知道它的设计流程是什么吗?

雪涛

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

对于许多设计师来说,虚拟现实(VR)是一个全新且陌生的领域。过去几年中,我们目睹了虚拟现实硬件和软件的爆炸式增长。从体验性上看,虚拟现实既有小而简单的也有专业复杂的,整体体验差异很大。

作为 UX 或 UI 设计师,初次接触 VR 可能会有所畏惧,但不要害怕,在本文中,我们将分享一个设计 VR 应用程序的完整过程,我们希望您可以通过这个案例来开始自己的 VR 设计之旅。你不需要成为 VR 的专家;你只需要将你之前的设计技能应用到一个新领域。最终,经过大家的共同努力,我们定可以加速 VR 的发展以发挥它的全部潜力。

一、VR应用程序里有什么?

一般来说,从设计者的角度来看,VR 应用程序由两种类型的组件组成:环境和交互元素。

环境:您可以将环境视为您戴上 VR 头盔时所进入的整个世界 , 比如你身处的虚拟星系或者驾驶过山车飞驰的乐园。

交互元素:界面上影响用户交互和操控体验的元素合集。

根据这两个组件的复杂性,所有 VR 应用程序都可以沿两个轴定位。

在左上象限中的 VR 应用有类似模拟器的东西,例如过山车的 VR 应用,这种应用具有完全成形的环境,但根本没有交互。你只是被锁在了车里。

在右下角的象限中,应用程序具有一个更好的界面,但比较少或没有3D环境。三星的 Gear VR 主屏就是一个很好的例子。

设计场所和景观等虚拟环境需要熟练使用3D建模工具,许多设计师平时无法接触到这些元素。但是,UX 和 UI 设计人员有很大的机会将他们已有的技能应用于设计虚拟现实的用户界面。

我们所做的第一个完整 VR 的 UI 设计是 The Economist 的应用程序,与 VR 制作工作室 Visualize 合作。我们做设计,Visualize 创建内容并开发应用程序。

我们在之后文章中将此应用作为一个工作示例,现在我们将介绍设计 VR 应用程序的方法,然后再介绍设计 VR 界面的细节。您可以从 Oculus 网站下载Gear VR 的 Economist 应用程序。

二、VR UI设计的第一步-回顾传统流程

尽管大多数设计师已经熟悉了设计移动应用程序的工作流程,但还不太清楚设计 VR 界面的流程。当面对第一个VR应用程序设计项目时,我们首先要做的是合乎逻辑。

传统工作流程到全新领域

当我们第一次使用三星的 Gear VR 时,我们注意到它与传统移动应用有很多相似之处。VR 应用程序与传统应用程序有着相同的工作流程:帮助用户与界面进行交互。

现在请记住。鉴于与传统应用的相似性,设计师花费数年时间改进的久经考验的移动应用工作流程不会浪费,这些流程仍然可用于制作 VR UI。这让你比你想象的更接近 VR!

在如何设计 VR 界面之前,让我们回过头来看看传统移动应用的设计过程。

1. 线框

首先,我们将进行快速迭代,定义交互和总体布局。

2. 视觉设计

在此阶段,功能和交互已经完成。我们把视觉规范与设计应用于线框图,并制作出漂亮的界面。

3. 设计文档

在这里,我们将屏幕组织成流程,绘制屏幕之间的链接并描述每个屏幕的交互。我们将此称为应用程序的设计文档,它将被用作开发人员的主要参考。

现在,我们如何将此工作流程应用于虚拟现实的设计当中呢?

三、开始VR UI设计

1. 画布的尺寸

最简单的问题可能也是最具挑战性的。面对360度的画布,人们可能很难知道从哪里开始。事实证明,UX 和 UI 设计者只需要关注整个空间的某个部分即可。

我们花了几周时间试图弄清楚什么样的画布尺寸适用于 VR 设计。当您使用移动应用程序时,画布大小取决于设备的大小:iPhone 6为1334×750像素,Android大约1280×720像素。

要将移动应用程序工作流应用于 VR UI,首先必须确定合适的画布大小。

以下是扁平化时360度环境的样子。这种视图叫做等角矩形投影。在3D虚拟环境中,这些投影围绕球体缠绕,以模仿现实世界。

整个投影的水平宽度是360度,垂直180度。我们可以用它来定义画布的像素大小:3600×1800。

使用这么大的尺寸可能是一个挑战。但因为我们主要对 VR 应用程序的界面设计感兴趣,所以我们可以专注于这个画布的一部分。

基于迈克·阿尔格(Mike Alger)对舒适观察区域的早期研究,我们可以找出一个合适的部分来展示界面。

感兴趣的区域占360度环境的九分之一。它位于图像的中心,大小为1200×600像素。

让我们总结一下:

「 360度视图 」:3600×1800像素

「 UI视图 」:1200×600像素

四、测试原型

「UI视图」画布有助于将我们的注意力集中在我们正在制作的界面上,并使设计流程变得更加容易。

同时也必须使用「360度视图」在 VR 环境中的预览界面。此外为了获得真实的比例感,使用 VR 头盔测试界面也是必要的。

△ 使用Avocode,您可以轻松直观地比较设计

五、设计工具

在开始之前,我们需要以下工具:

1. sketch

我们将使用 Sketch 来设计我们的界面和用户流程。如果您没有,可以下载试用版。Sketch 是我们首选的界面设计软件,但如果您使用 Photoshop 或其他任何软件更舒服,也没问题。

2. GoPro VR Player

GoPro VR Player 是一款360度内容查看器。它由 GoPro 提供,是免费的。我们将使用它来预览我们的设计。

3. Oculus Rift

Oculus Rift 连接到 GoPro VR 播放器,这将使我们能够测试我们的设计。

六、VR界面设计流程

在本节中,我们将介绍如何设计 VR 界面。我们将一起设计一个简单的界面,最多花费5分钟时间。

下载源文件:https://pan.baidu.com/s/1WUUwNLlTJkG82Hxdofaqzg  密码:09vt,其中包含预设的 UI 元素和背景图像。如果你想使用自己的设计文件,那也是可以的。

1. 设置「360度视图」

首先要做的事情,让我们创建360度视图的画布。在 Sketch 中打开一个新文档,并创建一个画板:3600×1800像素。

导入文件 background.jpg,并将其放在画布的中间。如果您使用自己的背景文件,请确保其比例为2:1,并将其大小调整为3600×1800像素。

2. 设置画板

如上所述,「UI view」是「360 view」的裁剪版本,我们仅关注 VR 界面。

我们创建一个新画板:1200×600像素。然后,复制画板到「360 view」中,并将其放在画板的中间。不要删除「360 view」画板,我们同时保留着两个画板,以后会用到它们。

3. 设计界面

我们将在「UI View」画布上设计我们的界面。我们会尽量简单一些,首先在视图上添加一些图块。您可以使用 tile.png 文件将其拖到 UI 视图的中间。

复制它,并创建一行三个图块。

使用 kickpush-logo.png 文件,并将其放在图块上方。

4. 合并画板

现在来看看有趣的东西。确保「UI view」画板位于左侧图层列表的「360view」画板上方。

将「UI view」画板拖动到「360 view」画板的中间。将「360 View」画板导出为 PNG;「UI view」将位于其上方。

5. 在VR中测试它

打开 GoPro VR Player,并将刚刚导出的「360 View」PNG 拖到窗口中。使用鼠标拖动图像以预览360度环境。

我们完成了!是不是很简单?

如果您的机器上安装了 Oculus Rift,则 GoPro VR 播放器应该可以检测到它并允许您使用 VR 设备预览图像。根据您的配置,您可能需要在 MacOS 中做一些显示设置。

七、VR设计中需要注意的因素

1. 低分辨率

VR 头盔的分辨率非常糟糕?这不完全正确,其实它相当于手机的分辨率。但是,考虑到设备距离您的眼睛5厘米,显示器看起来并不清晰。

为了获得清晰的 VR 体验,我们需要一个8K的显示屏,这是一个15,360×7680像素的显示屏。相信这种设备早晚会普及。

2. 文本可读性

由于显示器的分辨率较低,会导致所有精美的 UI 元素都会看起来像素化。这意味着,首先,文字难以阅读,其次,直线部分会出现锯齿。所以尽量避免使用大段文字和特别复杂的 UI 元素。

八、收尾工作

1. 设计文档

还记得我们的移动应用中的流程图吗?我们现在将这种做法也应用到 VR 界面。用我们已经做好的界面组织成一个易于理解的流程图,这非常有益于开发人员理解我们设计的应用程序的整体架构。

2. 动效设计

设计一个漂亮的 UI 是一回事,但让他动起来又是另外一回事了。我们决定以二维视角来处理它。

基于我们的 Sketch 文件,我们使用 Adobe After Effects 和 Principle 为界面设计动画。虽然输出的不是真实的3D体验,但它足以指导开发团队了,且能帮助我们的协作者在流程的早期阶段了解我们的愿景。

△ 你刚刚设计了第一个 VR UI。真棒!

我们知道你在想什么,「这很酷,但真实的 VR 应用程序会复杂的多。」是的,当然是。但重点在于我们可以在多大程度上将我们当前的 UX 和 UI 的经验应用于这种新媒介?

九、VR UI可以走多远?

1. 新的交互体验

一些 VR 体验非常依赖虚拟环境,然而传统界面的确已经不是用户控制应用程序的最佳方式了。在这种情况下,您可能希望用户直接与环境本身进行交互。

想象一下,你正在为一家豪华旅行社制作应用程序。您希望以最生动的方式将用户转移到潜在的度假目的地。因此,您邀请用户佩戴耳机并在时髦的切尔西办公室开始体验。

要从办公室转移至目的地,用户需要选择他们想去的地方。他们可以拿起一本旅行杂志,轻轻松松浏览它们,直到它们被某一页吸引。或者,桌面上可能会有一系列有趣的物品,根据用户选择的不同,将用户带到不同的位置。

这确实很酷,但也有一些缺点。为了达到完美的效果,你需要一个更先进的带手持控制器的 VR 头盔。不过,像这样的应用程序要比传统的应用程序花费更多的精力来开发。

2. 革命万岁

现实情况是,对于大多数公司而言,这些沉浸式的体验在商业上还不可行。除非您拥有几乎无限的资源,例如 Valve 和 Google,否则创建类似于上述体验的产品可能成本太高,风险太大且过于耗时。

这种体验非常出色,可以带你到媒体和技术的最前沿,但通过新媒体将产品推向市场并不太好。

通常,当一种新形式出现时,它会是一个小众产品。随着时间的推移,成本的下降,有足够的人去学习和市场的资本注入,它就会成为应用广泛的产品。

随着 VR 头盔变得越来越普及,将会有越来越多的公司将 VR 融入他们与用户的互动当中。

从我们的角度看,相比于手机、平板,VR 用户界面本质上是更直观的,并且更接近用户,随着科技和市场的发展,VR 将会带来更大的价值。

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

UI设计经验|4个UI设计界面规范的实战总结

博博

UI设计经验|4个UI设计界面规范的实战总结

UI设计导师芳姐 2018-07-18 19:32:40

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

UI设计经验|4个UI设计界面规范的实战总结

设计规范的共性

不同的规范虽然内容差别很大,但是对比一下它们的目录,却又很多相似之处,通常包含:布局、组件、配色、图标这四部分。

组件里的分类无非是导航、菜单、表单、列表、表格、按钮、弹出框诸如此类,我就不一一列出了。

设计规范有哪几类?

总体看来,我发现这三类设计规范出现概率很高:

1、给产品经理看的

IOS和早些年的Android(现在已经统一改用Material Design)设计规范就属于给产品经理看的,里面写的东西大多围绕如何选择大的方向、哪种处理方式更加合理展开的,界面细节却没有详细介绍。

这种规范适合用来做演讲,内容不多,都很有道理,参杂这很多创新的功能。

而拿着它做设计却很痛苦,因为它不告诉你如何才能达到理念中所勾勒的那个目标,图标、尺寸、陪色、字体……很多东西都不明确。

2、给设计师看的

这种规范通常的好处是内容很丰富、图例很多、建议比较详细,能够让设计师以此为基础发挥自己的创造力。

Material Design就属于这一类,而且里面很多1:1的范例可以直接拿来做参考这点非常感人。

但这种规范也有不足之处。一是它缺乏针对具体场景的规则,常常把所有可能用到的元素都拿出来一一细说,然而却不告诉你应该在什么场合使用什么。

二是容易理想化,因为做这种规范的人通常是纯粹的设计师,所以里面很多设计想法未必有足够的可实现性,或是一些创意未必经得过实践的考验。

Material Design里面很多看起来简单的设计其实是很难实现的,例如用分辨率敏感的dp取代像素单位其实大部分情况下很难实现。

UI设计经验|4个UI设计界面规范的实战总结

Material Design的文本框中,说明文字会变换位置和大小,排多了看起来会很乱。

3、给程序员看的

这类不太关心布局、交互、配色等细节,而是告诉读者他们能做出什么东西,怎么做出那些东西。

这类规范笔我原本预想的要多很多,其中令我印象最深刻的是Windows Phone的设计规范。

程序员的队友都称赞Windows的设计规范有多好多好,只有我觉得用起来无比痛苦。

现在想来,Windows Phone的设计规范虽然称之为设计规范,区别于Windows Phone的开发规范,但它完全是个教程序员如何实现各种界面的指南。

产品经理可能还可以用它来看看页面类型,对设计师来说却没有太大帮助。

这种规范对于不需要设计师的场景还是非常有帮助的,比较相比前两种,这种的可实现性非常高。

设计规范的选取

我认为上文提过的三种设计规范都很重要,且适用于不同的场合。

第一类给产品经理看的规范适合设计初期,确定理念、报告思路阶段。

第二类给设计师看的规范适合在设计定型阶段,这个时候界面具体长什么样已经确定了,但是未来的实施过程还会带来一些不确定因素。

第三类规范适用于开发阶段,根据界面来规范代码,能够大大提升前段的开发效率。

设计规范的常见遗漏

由于第一类规范的内容要求不多,所以这里的遗漏主要针对后面两类。

1、文本格式

设计师常过分专注于画图,而忘记了文字也应该有所规范。例如,日期可能的格式有很多。

例如“YYYY年MM月DD日”、“YYYY年M月D日”、“YYYY/MM/DD”等等。

再比如说单位,是用“大小:100M”、“大小:100兆”还是“大小(M):100”呢?

这些文本格式定义起来并不花时间,可是如果没有规范的话,可能同一个东西在每个页面的展示方式都不一样,对用户来说也挺烦的。

2、特殊状态

做设计和做规范的区别是,做设计时,只有在知道某个东西有某个状态时,才会去设计那个状态;

做规范时,通常要假定所有数据和操作都有状态,不同东西在不同地方的同类状态最好能够统一。

所有操作都可能失效,不管是按钮、链接、输入框、下拉菜单……什么情况在失效时显示失效状态,什么时候完全隐藏该操作,这些都是可以统一考虑设计的东西。

所有的操作都可能出错,尤其是输入框的出错率极高。如果出错了,如何告诉用户哪里错了?如何纠正?由此还可以联想到,如何在一开始就避免用户犯错?

所有摆放数据的地方都有可能没有内容,也许是列表为空,也许是字段为空。这种情况该如何明确又美观地告诉用户这里没有内容不是网络问题也不是系统问题?

UI设计经验|4个UI设计界面规范的实战总结

△ 页面没有内容的显示效果

所有内容都有可能出现异常,网络不稳定、格式不支持、系统出错等。这种状况如何明确又美观地告诉用户可能是哪里出现问题,如何补救?

成功也需要有成功的状态,有些时候页面不止一项任务,第一项成功了,第二项失败了,用户走到第三项时不一定还记得第一项是成功的还是失败的。

3、多级多选和过量

一个灵活的界面规范能够应对大部分的内容变化。例如导航和菜单的项目数量和级数通常是不确定的,下拉选框也不一定只能勾选一项内容。

更灵活的情况还有,一篇文章可能长达数十屏,这时该自动识别文章内的标题并生成目录,还是分页展示?

4、使用指南

使用指南是设计过程中通常被拖到最后才想起来的东西,在规范里也常被忽视。其中最重要的是用户首次使用时看到的操作指南。

这种操作指南可能不只在首页出现,并且未来可能随着设计的变更而变更,所以这种首次使用的操作指南是很有必要做成规范的。

UI设计经验|4个UI设计界面规范的实战总结

△ 首次使用的操作指南

此外,使用过程中,在关键时候出现的操作提示也可以有规范。例如用户进入一个新功能时,可能会出现该功能的介绍。

5、尺寸适配

响应式界面已经被说了这么多年了,而被明确放在规范里的,除了Material Design之外还真是很难找到了。

如果你想了解响应式界面,可以看我之前的文章《设计响应式界面该清楚哪些》。

响应式界面有很多分类和实现方式,不论是视觉、交互还是前段都有所涉及,每个页面和元素都可能根据实际情况需要特殊处理,这也是为什么响应式设计很难定制规范。

UI设计经验|4个UI设计界面规范的实战总结

△ 响应式界面:如果是页面是容器,内容就像水一样

除了整个页面的适配之外,小的组件也最好是可能变化尺寸的。例如同一张图表,可能被放在一个很空旷的页面,也有可能被放在一个很拥挤的页面。

需要调整尺寸时,哪些可以缩放哪些不能缩放,对其的中心是什么……这些如果能够明确,设计将会变得越来越像拼图。

除了整个页面的适配之外,小的组件也最好是可以自动调整尺寸。例如同一张图表可能被放在一个很空旷的页面,也有可能被放在一个很拥挤的页面。

组件需要调整尺寸时,哪些可以缩放哪些不能缩放,对其的中心是什么……这些如果能够明确,设计将会变得越来越像拼图。

6、动效

动效也火了很久了,但是似乎还是停留于表面,缺少一套可依赖的标准。动效师并不好当,既要有超高的编码能力,又要有敏感的美学神经。

也许就是因为这么困难,才导致大部分设计规范即便包含动效这一目录,里面填充的内容也非常模糊不清。

7、音效

大部分应用是没有音效的,因为音效很容易让人厌烦,而且节奏不好把控。但是对于音乐、视频等媒体应用,音效的发挥空间却很大,至今尚未开发。

撇开这些不谈,如果有音效,何时使用何种、多大音量、时长多少、震动模式(手机)时需不需要震动反馈,很多东西都可以考虑。

8、手势

和键盘的快捷键一样,偏爱触屏手势的也大有人在,而且手势也能让产品更加独特。如果允许使用手势,这部分也可以有所规范。

9、国际化

如果界面上的语言种类不止一种,那么如果文字转换后过长或过短怎么办?用户在看不懂当前语言的情况下如何切换语言?

不同的语言该选择什么字体才不至于太难看(例如中文的默认字体通常是宋体)?

10、小众人群

虽然我们最关心的还是主流用户,但是很多小众人群组合起来也是可以构成一定分量的。例如,触屏应用能不能给左手使用者舒适的体验?

桌面应用能不能够让没有鼠标或是没有键盘的人使用?色盲和色弱能区分界面上的色块?视力较差的人能不能放大字。

希望以上内容对你学习UI设计有帮助,觉得可以请转发支持一下,持续分享更多UI设计优秀文章。

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

国外极简商城APP UI界面设计欣赏,别告诉我你不会“抄”

博博

国外极简商城APP UI界面设计欣赏,别告诉我你不会“抄”

UI巴巴 2018-07-05 21:02:31

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

相对于其他类型的APP,商城APP设计难度比较高,因为电商APP业务比较复杂,既要展示完整的业务功能,又要保证用户体验,非常考验UI设计师的设计功力。所以小编精心挑选了几款比较优秀的电商APP界面设计作品,希望对设计师有借鉴意义,里面的一些精髓还是值得一“抄”。 

1、极简的设计,适用安卓平台,跟其它设计不一样的是筛选按钮放在底部。

国外极简商城APP UI界面设计欣赏,别告诉我你不会“抄”

2,商城的登录页和产品信息流页面。

国外极简商城APP UI界面设计欣赏,别告诉我你不会“抄”

3,安卓平台的商城app首页。

国外极简商城APP UI界面设计欣赏,别告诉我你不会“抄”

4,极简设计的商城app。

国外极简商城APP UI界面设计欣赏,别告诉我你不会“抄”

5,卡片式的产品翻页设计。

国外极简商城APP UI界面设计欣赏,别告诉我你不会“抄”

6,渐变色的运用,不对称的排版。

国外极简商城APP UI界面设计欣赏,别告诉我你不会“抄”

7,商城产品列表页设计。

国外极简商城APP UI界面设计欣赏,别告诉我你不会“抄”

8,服装类商城,筛选器的设计。

国外极简商城APP UI界面设计欣赏,别告诉我你不会“抄”

9,生鲜类商城app的设计。

国外极简商城APP UI界面设计欣赏,别告诉我你不会“抄”

以上商城app设计案例里有产品页界面设计,也有商城首页的ui设计。电商APP的设计不能只满足表面的视觉层面,还要关注业务的流程,这样设计出来的APP才能吸引更多用户访问和购买你的产品。

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


交互设计之设计心境:创造情绪板的7个动机

博博

交互设计之设计心境:创造情绪板的7个动机

人人都是产品经理 2018-08-19 14:05:13

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

本文将致力于称为情绪板的技术。让我们来看看情绪板是什么,以及他们在设计师的工作流程中是如何帮助的。enjoy~

交互设计之设计心境:创造情绪板的7个动机

想象一下你努力工作,花了很多时间来创建一个详细的原型,然后一个客户拒绝它甚至不接近他想要的。听起来很熟悉,不是吗?至少每一个设计师都经历过这样一个不愉快的局面。也许现在每个人都希望得到一些相关的建议,如何避免这种情况,但真正说没有一个完美的决定。

然而,有几种方法有助于降低客户拒绝的风险,并节省设计师的时间和勇气。今天的文章致力于称为情绪板的技术。让我们来看看情绪板是什么,以及他们在设计师的工作流程中是如何帮助的。

什么是情绪板?

情绪板技术不仅在设计领域流行,而且在许多创造性的专业人员中流行。情绪板是确实的板(数字或材料),从照片到各种肌理,人们填充不同种类的东西以至于能将想法和概念形象化。

与线框和原型不同,情绪板不显示未来项目的详细图片。它们意在传递正确的情绪,并带来产品期望的情感。

情绪板是一个有用的工具,帮助设计师有效地与客户和团队成员合作。纸板可以在一个紧凑的时间框架内轻松地被创建,并把抽象的想法变成现实。这样,设计师可以有效地与他人分享他们的想法,因为视觉材料总是比流畅的说法更好。

交互设计之设计心境:创造情绪板的7个动机

如何创建情绪板?

情绪板是一个很好的方法来实验调色板,字体和风格,以及规划一个项目的视觉层次。每个人都自己决定在情绪板中包含哪些组成部分。UI/UX设计师通常使用各种样本以至于可以来描述界面元素的特征。让我们来看看情绪板常见的几种类型。

自由拼贴

设计师经常收集免费高清的图片,方便他们在项目或其他地方使用这些素材。这些收集品可能有助于情绪板的创作。将美丽的照片组成的自由拼贴是传递设计理念的一种有效方式。此外,拼贴可以用插图,字体和颜色案例来构成。

创建这种类型的情绪板是最快的,也是最容易的。但是,如果客户比较关注细节,他们可能并不会对将来项目中的这些拼贴感兴趣。

交互设计之设计心境:创造情绪板的7个动机

参考收集

灵感来源和想法可视化的另一种方法是找高质量的参考。网上有很多资源,如Behance和Dribble,在那里设计师可以通过免费浏览的方式获取灵感和还有一些实际项目的示例。由一个相同风格或任何其他特性联合起来的设计作品可以很容易地说明一个新项目的想法。此外,这样的情绪板可以帮助客户有效地理解一个概念,因为他们可以看到类似的参考,并能够大致想象出他们的产品会是什么样子。

模版画板

这些情绪画板更像是原型和线框图。他们的目标是展示产品的结构和视觉层次。不同之处在于模版画板上的UI元素没有线框图中的原型或示意图那么详细。把随机的插图和照片来当做界面的构成元素,并以此来展示(数字)产品的布局。此外,可以用这种方式选择图像,从而更容易的确认合适的配色。这种方法比原型更快,因为它不需要细节。

交互设计之设计心境:创造情绪板的7个动机

为什么UI/ UX设计师应该创建情绪画板?

我们中的许多人可能注意到,在设计工作流程中,线框和圆形总是被描述为基本阶段,而很少人提到情绪画板。有些人认为他们是在浪费时间,或是认为这只是一种“娱乐”。经管如此,仍然有很多人把画板作为每个创意过程的一部分。但是他们为什么要选择这项技术呢?在这里,我们收集了设计师的原因清单。

1.节省时间和精力

情绪画板的第一个且很大的有点是它不需要花太多的时间就能完成。这意味着,在几小时或者更少时间内,设计师就可以创建一个视觉指南,为客户提出一个概念。情绪画板可以很容易地编辑,这样既省时又省力。

这样的视觉指南是一个很好的基础,可以快速的跳转到下一个阶段——原型阶段。此外,如果客户对结果不满意且想要一个新方案,设计师也不会变得神经质,因为他们不用花一整天的时间来创建一个详细的演示。

2. 获取灵感

当然,设计师不能总是依赖灵感,因为他们有工作要做,然而,如果创造者收到启发,事情就能更有效的进行。情绪画板是一个寻找创意和热情的好方法。美丽的照片和插图有助于找到正确的情绪和风格。此外,如果可能,你可以试着通过你周围的东西来创建一个情绪画板当做素材使用。据说手工对创造性思维有很大的影响。所以为何不试一试呢?

3. 找到一个对的颜色配色板

一个拼贴内可以包含照片、插画和颜色形成布置引人入胜的样品。在一个板上混合不同颜色的图片,即使UI元素还没有准备好,设计者也可以用调色板进行实验。

4. 加强与客户的沟通

当产品处于抽象概念阶段时,设计师和客户有时很难在讨论时相互理解。例如,双方可以以不同的方式看到某种风格,从而引起争论。这就是为什么使用一些视觉参考如情绪板总是一个好主意

5. 少说话,多展示

继续上面的观点,应该说任何长的报告都不能比视觉呈现更好地解释你的计划和想法。在客户的脑海中,文字无法成形,但视觉材料是一个可靠的指导,帮助客户深入深入细节并正确理解你的想法。

在早期阶段说明你的想法,这样客户可以看到你的计划以及他们的产品是如何成形的。

6. 为设计找到一种风格

如果一个创意团队没有收到客户关于设计风格的指示,任务就落在设计师的肩上。要了解一种或另一种样式如何工作,不必为它们中的每一种构建详细的原型。添加到情绪板不同的纹理,实验类型的插图,测试字体,并改变颜色。用情绪板来尝试选项比用一个接一个地改变原型更快、更方便。

7. 让客户参与流程

获得客户信任的方法之一是让他们觉得自己深入参与了一个项目。因此,在这个阶段,如果他们愿意,他们可以积极参与风格和样本的选择。在非设计师的情况下,做模型是一种很简单的技巧。

可以建议客户对照片和图片进行拼贴,如果不是新客户,也可以提供参考。通过这种方式,设计师可以轻松地了解客户的品味和偏好,并了解他们对项目的期望。

数字设计项目的情绪板的例子

为了更实际地介绍这个问题,我们想向您展示由Tubik设计师Dima Panchenko编写的用于用户界面设计项目的扩展情绪板集。他还做了一些常规笔记向客户展示了情绪板,这对沟通的过程和选择了项目的概念有积极的影响。

1. 用于设置客户对屏幕总体风格概念的偏好的情绪板

交互设计之设计心境:创造情绪板的7个动机

2. 情绪板呈现出项目需求所对应的风格上的眼光

交互设计之设计心境:创造情绪板的7个动机

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


几个案例解析:如何一步步做出合理的策划方案

博博

几个案例解析:如何一步步做出合理的策划方案

人人都是产品经理 2018-08-19 15:01:59

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

做产品方案的时候,我们经常会走进死胡同或者跑错路,最后不论是开发还是市场,对结果都不满意,产品自然就成了背锅侠!但是往往我们出方案的时候,多想一些问题,或许结果就不一样,跟新人交流的时候,发现一些能力需要可以单独训练,有意识的去理解一些东西,长期积累就会有自己的一套解决问题的思路。

几个案例解析:如何一步步做出合理的策划方案

1. 辨别真伪的能力

辨别真伪也就是老生常谈的真伪需求的能力,在产品经理的行业里,经常会进行需求的评审,需求的界定,看这个需求是否是真的有效

举个例子

行业:外卖行业

案例:打包费审核的功能

功能出发点:解决商家乱设打包费的需求

解读:如果从这个角度来讲,打包费审核完全没必要,原因有

  • 未必所有的商家都乱设打包费,只是个别现象
  • 及时设置了打包费审核,后台审核了,也没办法解决,除非后台做强制性的更改或下架商品的功能
  • 打包费是商家自主行为,如果商家恶意设置打包费,是给自己添堵
  • 如果真想解决此问题,在商家上传商品的时候设置打包费的选项,一个餐品打包费最多是多少
  • 或许极个别的商家的打包费真的会比较高,可以在商家管理后台做好打包费配置即可,从源头控制

很显然,要在后台做一个打包费审核的功能,还需要让人专门处理此业务,对系统来说,是降低效率又不见得有效果的,所以,界定为伪需求。那么既然存在这样的问题,可替代方案如下:

  1. 商家添加商品时打包费又两个选择【收打包费】【不收打包费】,打包费为行业标准,1元/份餐品;
  2. 对于大型的打包盒,比如说探鱼这些商家,打包费可以开放设置(大型连锁或者知名品牌可以认定为不需要通过打包盒来赚取利润)。

辨别真伪的能力不仅仅体现在能辨别出来,更多的是能够用更灵活的方式来解决来自运营、消费者产生的问题,且不增加过多的额外工作。

2. 找到合适定位的能力

合适定位的能力,这个说的有点虚,用通俗的话来讲,就是找个抄的对象。在国内想要做一个App有大量的抄袭模仿对象,各大知名厂商已经做了很多的研究,剩下的就是模仿和创新。能不能找到合适的模块去进行创新,这个就比较重要。

案例1:外卖行业,推荐商家

功能出发点:外卖行业的推荐商家,很多事按照细分的行业来做的,比如说美团跟饿了么的【必吃菜品】【品质联盟】这些,但是对消费者来说,这真的是我想要的选择么?

解读:从消费者的心理出发,我去找吃的,可能出于几点

  • 找新鲜:看看这附近有什么新鲜的店铺开业或者新的口味,外卖一个月都是那几家,早就腻了
  • 找实惠:外卖分量不够,10块钱管饱的那种最好
  • 速度快:能告诉我最快的是哪家么?

其次还有可能

  • 这两天身体不舒服,想吃点口味淡的
  • 我是湖南湖北人,我想吃点重口味的
  • ……

因此,从这类具有标示性的标签入手,会更有效果。此类功能类似于一点点的餐牌设计以及lofter的标签设计,将商家分配不同的标签跟消费者的消费场景对应上,交叉进行推荐,比如说一个商家有很多种口味,那对应的消费者人群也会多,消费者通过对应标签可以快速找到对应的商品,对消费者和商家都是互利的,我们经常会遇到一个外卖店铺有几十种餐品,找半天还是不知道吃啥。

几个案例解析:如何一步步做出合理的策划方案

(配个截图,此功能已实现,后续看数据情况,再做追踪)

顺便说一下,之前饿了么有个版本放大对餐品的显示,做餐品的推荐,后来又改回来,具体是什么因素,不确定,但那也是一种尝试。

案例2:荔枝FM飞机稿

出发点:那是很早以前的一个版本,因为不好用,所以就干脆做一个交互飞机稿,当时做的时候有以下几个因素:

  • 体验不好,最古老的版本体验非常不爽(详情可以戳这里:http://www.woshipm.com/ucd/209199.html)
  • 当时在做交互设计,就尝试用新的交互设计思路去设计

解读:

当时荔枝FM算是国内比较早做电台的,同期出了喜马拉雅听,刚开始也没有荔枝FM那样火,但从交互上,主要由两个点:

  1. 模拟电台操作:荔枝FM当时还是走拟物化设计(新进入互联网的可能觉得是历史),那从FM收音机的角度来说,都有一个旋钮,或者是老式的随身听,因此在主页的界面设计以及播放界面设计都有参考古老随身听的样式,既然复古,我们就彻底点
  2. 数据整理:在当时做荔枝FM的飞机稿时,主要做的是数据层的整理,把繁杂的内容数据变得有序可循,让用户和博客可以更快找到合适自己的内容

对于合适的定位可以理解为:每个事物或许有自己固有的长相,但或许我们找到合适的逻辑后,只要抓住根本,那最后怎么玩,还是大家说了算,打破陈规,才更好玩。为什么音乐软件就一定要有那么大的播放界面;为什么订餐软件就一定要宣传店铺,不能是商品?

3. 解决问题的能力

这个就老生常谈了,解决问题的能力体现在对系统的掌握程度和开发自由度两个层面,产品经理实质是提供解决方案的,任何需求到手后,我们需要分析如何快速解决该问题。

案例1:招聘面试流程

出发点:销售类岗位进行招聘时,都是一大批一大批的面试,一个人可能同时面试很多岗位,一个公司会面试很多个求职者,因此提率,对求职者和公司都是最大的需求

解决方案:排队叫号,跟银行排队一样,针对这个场景,我们梳理了核心的问题

  • 面试人员取号
  • 面试人员查看各岗位当前排队情况及投递请求
  • 企业招聘人员查看简历并选择是否面试,对面试的人进行初步评论
  • 叫号及数据导出

针对以上四个问题,设计出如下流程(省略取号的环节,主要核心的流程是企业的发送通知循环以及面试后的符合不符合操作循环)

几个案例解析:如何一步步做出合理的策划方案

从流程图可以发现,核心逻辑并不复杂,解决了通知求职者来面试的需求以及对求职者进行评价需求即可;除此之外还可以做一些其他的功能,如求职者可以看到当前排队情况,根据实际情况进行简历投递,避免出现大量等待情况,可预知自己还要多久可以面试,在这时间内是否可以投递其他公司,进行多项选择;对于企业解决各种纸质简历分辨不清,电子档简历,电子记录每一个求职者和操作,可以清楚知道今天面试记录,电子档案,更清楚,提高双方的效率。

4. 了解数据的能力

对于数据,很多人应该不会陌生,如何从杂乱的数据找到规律,怎么处理数据之间的关系?

  1. 一级页面到二级页面的流失率和转化率
  2. 每个页面转化功能的设计及数据统计
  3. 数据解读

最近在做小程序相关的项目,把腾讯的数据统计贴上来:

访问趋势类:

  • time 时间
  • session_cnt 打开次数
  • visit_pv 访问次数
  • visit_uv 访问人数
  • visit_uv_new 新用户数
  • stay_time_uv 人均停留时长 (浮点型,单位:秒)
  • stay_time_session 次均停留时长 (浮点型,单位:秒)
  • visit_depth 平均访问深度 (浮点型)

访问分布:

  • access_source_session_cnt 访问来源分布
  • access_staytime_info 访问时长分布
  • access_depth_info 访问深度的分布

访问留存

  • visit_uv_new 新增用户留存
  • visit_uv 活跃用户留存

访问页面:

  • page_path 页面路径
  • page_visit_pv 访问次数
  • page_visit_uv 访问人数
  • page_staytime_pv 次均停留时长
  • entrypage_pv 进入页次数
  • exitpage_pv 退出页次数
  • page_share_pv 转发次数
  • page_share_uv 转发人数

总结

产品经理从拿到需求开始就需要对需求进行分解,判断到底什么样的方案可以解决此问题,并结合当前系统的一些功能点,给出最佳的方案;在交互设计的时候是参考竞品还是微创新,就看实际业务需求;最后就是核心业务梳理,一个功能的核心业务是什么,还有哪些可以搭配让功能更完善的,考虑进去,做产品是一个分解、组合、删减、再组合的过程!


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



面向中小企业SaaS的权限管理系统

博博

面向中小企业SaaS的权限管理系统

人人都是产品经理 2018-08-19 15:02:17

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

本文基于面向某个垂直行业的SaaS系统的设计经验,抽象出一套适合中小企业的权限管理体系,目标是最大限度保留系统弹性的同时,把系统复杂度和开发成本尽可能降低。enjoy~

面向中小企业SaaS的权限管理系统

面向企业级的SaaS(软件及服务)系统,由于企业用户的规模和内部管理模式千差万别,设计一套具备足够弹性、符合绝大部分目标企业用户需求的权限管理系统,是一个很大的挑战。

我们可以看到,市面上面向多个行业的综合性SaaS系统,例如销售易、纷享销客等,由于它们的目标客户跨越了多个行业、多种规模,这些企业具备各种各样的内部管理风格和模式,在权限系统的管理上,往往做得非常复杂,不仅具备部门、角色、职位、数据等各个维度的权限管理,各个功能模块还有自己独立的权限管理,虽然具备最大的弹性,却给企业的系统管理带来较大的负担。

提炼的三个核心原则:

  • 企业-管理员-普通账号三级权限
  • 功能和数据权限分离
  • 部门和角色分离

围绕上述三个基本原则,我们力图在满足中小企业需求的前提下保持足够的弹性,并严格控制复杂度和开发成本。详细描述如下。

1. 权限从上到下分为三个层级:企业账号(老板账号)、管理员账号、普通账号

对于中小企业来说,公司的实际控制人,往往是公司的创始人或自然人大股东,因此企业账号的使用者以及对应绑定的手机号码,都是公司的实际控制人,他应该掌握最核心、权限最大的企业账号,所以也可以称为“老板账号”。

但是在实际场景中,公司的实际控制人并不会直接管理公司的业务支撑系统,因此,需要在系统首次部署时,创建好企业账号,并由企业账号授权给某一个或多个系统管理员,由系统管理员去完成日常的角色创建、员工导入等工作。系统管理员,对应的一般就是HR或行政部门的管理人员。当然,企业账号的权限高于管理员账号,如果是小微型企业,也可以由企业账号直接替代管理员账号的功能。

除了企业账号和管理员账号之外,其他各级员工所持有的账号,都属于普通账号。普通账号的部门、角色、数据等权限的设置,一律由系统管理员配置。

三个权限层级示意图如下:

面向中小企业SaaS的权限管理系统

在实际系统中的核心业务步骤如下:

(1)企业购买系统时,创建一个企业账号,这个企业账号绑定的手机号码为公司实际控制人的手机号码。该手机号码必要时可以解绑(例如公司实际控制人变更),由于该功能触发频率很低,因此不需要在前端功能中实现,只需要在购买协议中写明,“购买企业可以通过书面方式提出企业账号手机号码绑定变更需求”即可。

(2)在部署和培训阶段,可指导企业账号持有人创建一个或多个管理员账号,该账号一般授权给行政总监或人力资源总监,后续配置即由管理员账号进行。

(3)管理员账号持有人需要接受系统培训,掌握部门创建、角色创建、功能和数据权限分配等基本操作。管理员所有操作都必须记录在案,供企业账号持有人监督,且管理员操作触发异常行为规则(如大量分配高等级权限等)时,系统会通过短信方式通知到企业账号持有人,确保企业账号对管理员的全方位掌控。

(4)企业账号可随时将管理员账号禁用或设定为离职,但管理员账号不可对企业账号进行任何配置或操作。

(5)企业账号默认拥有所有权限。

2. 功能权限和数据权限分离

功能权限,定义为可见、可以操作的功能范围。例如某一部分菜单,或者某个页面里的各种操作。

数据权限,定义为若干个数据类型里的具体可见范围,例如“客户”就是一个数据类型,它的权限举例如“无权限”、“我的客户”、“我所在部门的客户”、“我所在部门及下级部门的客户”。

通过功能权限和数据权限的分离,我们可以做到以下场景:需要开拓和维护客户的角色集合,都可以拥有“客户”这个菜单的权限,但不同的角色进入“客户”菜单的列表时,看到的客户范围各不相同,极端情况是看不到任何客户。且不同角色在同一个客户页面上,能进行的操作也不同,例如有的角色可以新建客户,有的却不行,这就要由功能权限来控制。

可见,通过功能权限和数据权限的分离和配合,我们在具体的权限分配上有了非常大的弹性,且在技术层面的后台系统的设计上,也非常合理、清晰。

而在具体设计上,需要保证以下4点:

  1. 正确区分功能和数据,入口性和操作性的都应该归类为功能
  2. 正确对数据进行分类,避免存在分类后的某些数据存在交集
  3. 数据分类到多细的颗粒度,需要由行业特性决定
  4. 数据权限区分为查看、编辑和删除

示例图如下,由于涉及具体产品,对某些文字进行了打码:

面向中小企业SaaS的权限管理系统面向中小企业SaaS的权限管理系统

3、部门和角色分离

部门的定义,自然就是公司行政组织架构下的部门。

在本设计方案中,角色等同于职位,而在许多大型的SaaS系统中,为了更大的灵活性,往往会把角色和职位分开,但根据我们的判断,对于中小企业,设定角色一个就够了,职位当然还存在,但仅仅是一个不涉及权限管理的文本title了。

以一个销售公司来说,角色可以包括:“渠道专员”、“渠道总监”、“销售专员”、“销售经理”、“总经理”等等。

所谓的部门和角色分开,就是不同的部门可以有相同的角色,例如如果有渠道一部、渠道二部,则这两个渠道部的员工的角色都可以设定为“渠道专员”,这两个部门的管理者都可以设定为“渠道经理”。再配合功能和数据权限,则进一步配置“渠道专员”具有“渠道”菜单的功能权限,其能够查看的渠道数据权限范围则仅为“我的”,而“渠道经理”同样具有“渠道”菜单的功能权限,但其能够查看的渠道数据权限的范围则扩大为“部门”。

具体设计上:

  1. 最大部门即为公司
  2. 管理员账号和普通账号均可禁用或设置为离职
  3. 不同部门可以配置相同角色
  4. 相同角色的功能权限和数据权限是一样的
面向中小企业SaaS的权限管理系统

4. 权限系统和其他功能设计的关系

总结完权限系统三个核心的基本原则后,我们还需要指出一点:权限系统的设计方案,在整个系统中绝不是孤立的,它能否实现设计目标,并和整个系统完美配合,还需要做到以下几点:

首先,菜单和功能的设计,必须是最小颗粒度,否则就和数据权限产生冲突。例如:我们只需要一个“客户”菜单即可,不同角色在“客户”菜单里能干什么事情,由功能权限和数据权限配合进行控制,但切不可出现“我的客户”+“全部客户”两个菜单,这明显和数据权限有根本冲突,且也是一种不优美、不合理、扩展性差的设计。

其次,数据的分类,必须符合业务需求,且划分合理。有些数据都是公开的可以不归入数据权限进行管理,所有角色默认都有即可;有些数据需要进一步细分,例如同样以“客户”举例,在某些公司的业务规则中,就需要将客户的基本信息和联系信息分开控制,管理层可以看客户基本信息,但只有客户负责人才可以看联系信息,这种情况就需要将客户的数据权限分为“客户基本信息”和“客户联系信息”两个。

最后,权限变更的记录和所有账号的行为轨迹记录一样重要。权限系统本质是进行权力的限制,没有监管的权力必定是会失控的。在出现问题的时候,必须同时配合权限变更的记录、角色变更的记录和账号的行为轨迹记录进行追责和存证,确保维护企业的合法权益。

总结

在合理设计的前提下,权限系统也并非越复杂越好。只有符合目标客户需求并具备最大弹性的权限系统,才是最好的。

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


「网易蜗牛阅读」和「微信读书」的写书评功能分析

博博

「网易蜗牛阅读」和「微信读书」的写书评功能分析

人人都是产品经理 2018-08-19 16:05:00

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

「网易蜗牛阅读」和「微信读书」的写书评功能分析

一、目的

三、用户 – 场景 – 需求分析

「网易蜗牛阅读」和「微信读书」的写书评功能分析

小结(这个模块是做什么的?为什么?):

写书评方说:

  1. 领读人/书评家/作家提供了一个新的发布自身书评/作品的平台,且通过签约等合作形式为他们提高了收入,同时为他们开拓了新的增加粉丝,扩大影响力,强化IP的新方式;
  2. 作家/书本运营方/媒体机构提供了相对于其他电子书app来说更为专业的推广渠道;
  3. 阅读者(尤其是有写观后感习惯的)提供了更专业、完整、体系化的内容记录与发布方式,以及获取认同,寻求社交,与书友互动交流的新机会。

看书评方来说:

  • 阅读者可以在阅读前去通过书评快速全面了解一本书(零碎时间的泛读),为要不要深入精读提供参考;可以在阅读前通过观察别人对此书的解读,带着自己的问题与思考再去有目的性阅读;可以在阅读时,体系化的记录自己的想法;可以在阅读后寻找他人解读中的不同点或共同点,加深自身思考,以及完善自身的想法。
  • 找书者可以通过次主打的导读特色功能,通过专业人士分享的书单或由读过的人分享的想法,找到更值得信赖的内容向导。

运营方来说:

  1. 以书评特色作为产品特色推广,吸引有写观后感习惯的电子书阅读群体,为对写书评有爱好或者以写书评为业的群体提供新的平台,满足拉新需求。
  2. 通过书评领读,为用户挑选书籍提供大量专业参考满足留存需求。
  3. 以领读人带起书评风潮,以PGC促进UGC,以及通过普通用户对领读人的申请,满足激活需求。
  4. 在书评中插入书籍入口,方便用户阅读购买,满足转化需求。

四、业务流程、业务逻辑梳理

功能流程:

「网易蜗牛阅读」和「微信读书」的写书评功能分析
  1. 入口一:领读 -> 右上角写书评按钮 -> 写书评;
  2. 入口二:我的 -> 我的书评 -> 右上角写书评按钮 -> 写书评;
  3. 入口三:选择书籍 -> 阅读书籍 -> 右上角写书评按钮 -> 写书评;
  4. 入口四:选择书籍 -> 书评栏 -> “写书评,获时长奖励‘输入框 -> 写书评。

四个入口分别代表四种场景:

  • 入口一为领读人直接发表文章提供便利;
  • 入口二是方便内容发布者对于自己的书评进行编辑管理;
  • 入口三提供阅读中随时记录想法,书评素材的方式;
  • 入口四的奖励文案鼓励大家加入写书评,加入阅读,且为阅读者提供参考。

业务逻辑:

「网易蜗牛阅读」和「微信读书」的写书评功能分析

小结:

通过业务逻辑的分析可以看到,「网易蜗牛平台」,“书评功能”,书评发布方以及书评阅读方四方形成一个完整的循环,首先平台通过优秀领读人的引进,为阅读方提供内容,并与之互动;再通过激励引导,由PGC带动UGC,让阅读方成为发布方,让用户生产内容,并提供申请领读人的渠道;然后发布的内容再次与其他阅读方互动,形成一个完整的循环生态系统。

五、功能点对比

「网易蜗牛阅读」和「微信读书」的写书评功能分析

小结:

相同点:通过阅读中,书本详情页进入;输入文字,输入标题,添加笔记/标注,插入书籍;字体,副标题,符号,私密发布,分享功能。(基本功能)

不同点:

  • 「网易蜗牛读书」:标题的必要性、添加图片、多本书籍插入;多样化的字体排版选项、PC编辑、保存到草稿箱、奖励、撤销功能。(专业化需求较强)
  • 「微信读书」:添加表情;引用、星级评分。(较为注重简单,直接,有趣)

六.总结

抄不抄?

不抄,如果发现UGC内容越来越多,以及专业化需求提高,可以考虑借鉴「网易蜗牛读书」中写书评的多样化编辑功能去完善写想法功能。

原因:

(1)产品定位

主打特色可以看出产品定位,以及发展方向的不同。两者同时对于领读这一模块下了很大的功夫,但玩法不同,「网易蜗牛读书」通过专业领读人(内容分享 & 引流导购)发布的专业书评,去引导用户阅读,降低用户的防备心,所以写作门槛较高。

而「微信读书」则无此需求,以好友作为切入点,通过好友在看的书,进行熟人引读,把用户防备心降到,能让用户无成本接受,但同样容易导致内容参差不齐。

(2)社交属性

「网易蜗牛读书」以PGC为主,专业领读带动社群发展,看书评人与书法发布方本身可能是粉丝关系,也可能无任何关系。而「微信读书」以UGC位置,好友之间的想法碰撞占到大多数。

(3)用户驱动方式

「网易蜗牛读书」以其特色时长阅读,以及兴趣导向,领读人粉丝引进为主。而「微信读书」则有很大部分基于好友之间的竞争关系,通过虚荣心驱动。

所以对于「微信读书」来说,暂时不需要花较大成本引入专业的PGC内容,性价比不高,与产品定位契合度不高。

本文由 @大明 原创发布于人人都是产品经理。未经许可,禁止转载

题图来自Unsplash,基于CC0协议

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

适合做后台的UI汇总,懂程序不懂UI的你还在烦恼怎么美化后台界面

博博

适合做后台的UI汇总,懂程序不懂UI的你还在烦恼怎么美化后台界面

年轻时的码云 2018-06-15 18:39:08

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

算是比较全的合集,送给大家,资源获取在文末(有惊喜哦),这次福利很大,赶快关注哦(资源限时开放....)!

适合做后台的UI汇总,懂程序不懂UI的你还在烦恼怎么美化后台界面

1,layui/ layuiAdmin

layui(谐音:类UI) 是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式,门槛极低,拿来即用。其外在极简,却又不失饱满的内在,体积轻盈,组件丰盈,从核心代码到 API 的每一处细节都经过精心雕琢,非常适合界面的快速开发。layui 首个版本发布于2016年金秋,她区别于那些基于 MVVM 底层的 UI 框架,却并非逆道而行,而是信奉返璞归真之道。准确地说,她更多是为服务端程序员量身定做,你无需涉足各种前端工具的复杂配置,只需面对浏览器本身,让一切你所需要的元素与交互,从这里信手拈来。

大家有机会多支持闲心。。。。

不过后台UI是要授权的哦

适合做后台的UI汇总,懂程序不懂UI的你还在烦恼怎么美化后台界面

适合做后台的UI汇总,懂程序不懂UI的你还在烦恼怎么美化后台界面

2,dwz富客户端框架 - jUI

DWZ富客户端框架(jQuery RIA framework),是中国人自己开发的基于jQuery实现的Ajax RIA开源框架。 DWZ富客户端框架设计目标是简单实用、扩展方便、快速开发、RIA思路、轻量级。

比较成熟,应用比较广泛,官网有整合的应用可以借鉴

  • DWZ框架 + ThinkPHP 实现小组工作日志系统
  • dwz4j企业级Java Web快速开发框架(Hibernate+Spring+Struts2) + jUI整合应用
  • dwz4j企业级Java Web快速开发框架(Mybatis + SpringMVC) + jUI整合应用
  • ThinkPHP + jUI整合应用
  • Zend Framework + jUI整合应用
  • YII + jUI整合应用

适合做后台的UI汇总,懂程序不懂UI的你还在烦恼怎么美化后台界面

3,B-JUI 前端管理框架

B-JUI客户端框架(Best jQuery UI),是基于Bootstrap样式及jQuery库实现的Ajax RIA开源框架。

B-JUI客户端框架扩展方便、简单易用,很多情况下只要熟悉HTML语法,使用HTML属性就可以轻松用Ajax开发项目。对于javascript不太熟悉的程序员是非常方便的,他们只需要关注后端业务逻辑的实现就行了,前端页面上只需要简单的写点HTML代码。

本框架基于Bootstrap前端样式及jQuery库开发,提供丰富的各类组件及UI,封装有多种组件,及相关的Ajax请求调用,并且都以jQuery标准插件的方式组合在一起,所以非常方便进行二次开发或再扩展。

兼容性:

  • IE8.0+, Chrome[最佳], Firefox, Safari。(IE8 未详细测试,估计问题不大,但一些CSS3的效果就不要想了,如圆角、动画什么的)
  • 本框架不适用于需要兼容IE6、7的开发者或使用者。
  • PS. 未考虑兼容IE6和IE7,一是因为Bootstrap3.2不支持,二是因为目前主流系统已是WIN7(IE8+),三是带WebKit内核的浏览器大量出现,如360浏览器、搜狗浏览器、百度浏览器等。

适合做后台的UI汇总,懂程序不懂UI的你还在烦恼怎么美化后台界面

H+ 后台主题UI框架

H+是一个完全响应式,基于Bootstrap3.3.6版本开发的扁平化主题,她采用了主流的左右两栏式布局,使用了Html5+CSS3等现代技术,她提供了诸多的强大的可以重新组合的UI组件,并集成了的jQuery版本(v2.1.4),当然,也集成了很多功能强大,用途广泛的jQuery插件,她可以用于所有的Web应用程序,如网站管理后台网站会员中心CMSCRMOA等等,当然,您也可以对她进行深度定制,以做出更强系统。

提醒:是收费的


适合做后台的UI汇总,懂程序不懂UI的你还在烦恼怎么美化后台界面

H-ui.admin

H-ui.admin是用H-ui前端框架开发的轻量级网站后台模版 采用源生html语言,完全免费,简单灵活,兼容性好 让您快速搭建中小型网站后台,拿来即用。


适合做后台的UI汇总,懂程序不懂UI的你还在烦恼怎么美化后台界面

jQuery MiniUI_快速Web开发

jQuery MiniUI - 专业WebUI控件库。

它能缩短开发时间,减少代码量,使开发者更专注于业务和服务端,轻松实现界面开发,带来绝佳的用户体验。

jQuery MiniUI致力降低企业应用的开发成本,丰富的UI控件、高度的稳定性、强大的扩展能力和平滑的版本升级能力,可满足大部分业务场景需求。

缺点:收费的!


适合做后台的UI汇总,懂程序不懂UI的你还在烦恼怎么美化后台界面

请输入描述

EasyUI

easyui是一种基于jQuery的用户界面插件集合。

easyui为创建现代化,互动,JavaScript应用程序,提供必要的功能。

使用easyui你不需要写很多代码,你只需要通过编写一些简单HTML标记,就可以定义用户界面。

easyui是个完美支持HTML5网页的完整框架。

easyui节省您网页开发的时间和规模。

easyui很简单但功能强大的。

  • 大家百度去官网下载即可

适合做后台的UI汇总,懂程序不懂UI的你还在烦恼怎么美化后台界面

TOP-JUI 

b-jui的作者基于easyui开的的,比easy调用简单,很不错的UI,可惜收费,不过不算太贵

TopJUI基于版EasyUI构建,在使用TopJUI的过程中,除了可以使用TopJUI提供的组件功能外,你还可以根据实际情况调用EasyUI的原生组件功能,满足各种复杂的业务功能需求开发


Amaze UI 后台管理模板

Amaze UI 以移动优先(Mobile first)为理念,从小屏逐步扩展到大屏,最终实现所有屏幕适配,适应移动互联潮流。

组件丰富,模块化Amaze UI 含近 20 个 CSS 组件、20 余 JS 组件,更有多个包含不同主题的 Web 组件,可快速构建界面出色、体验优秀的跨屏页面,大幅提升开发效率。

不过这个模板现成的东西比较少,复杂功能还需要自己去完善


适合做后台的UI汇总,懂程序不懂UI的你还在烦恼怎么美化后台界面

LigerUI

  • 使用简单,轻量级
  • 控件实用性强,功能覆盖面大,可以解决大部分企业信息应用的设计场景
  • 快速开发,使用LigerUI可以比传统开发减少极大的代码量
  • 易扩展,包括默认参数、表单/表格编辑器、多语言支持等等
  • 支持Java、.NET、PHP等web服务端
  • 支持 IE6+、Chrome、FireFox等浏览器
  • 开源,源码框架层次简单易懂。

适合做后台的UI汇总,懂程序不懂UI的你还在烦恼怎么美化后台界面

win10-UI

Win10-UI是一款win10风格的后台UI框架。它使用了丰富的win10桌面元素,包括桌面图标、窗口化子页面管理、开始菜单、动态小磁贴等组件,兼容主流现代浏览器及移动端的屏幕尺寸,适合快速开发后台管理系统的前端界面。

风格不一样,还是挺不错的


国外还有很多 bootstrap 后台UI

Ace Admin,Metronic等等


今天小编就分享到这里

评论回复相关需求,小编会第一时间私信您

或者私信回复“后台UI”,自动获取资料,都是小编的血汗哦,本资源只开放一段时间,赶快获取哦(是私信不是评论哦,评论无法自动回复)

如果你是初级程序员可以研究别人的代码提高技术,如果你喜欢搞网盟或者外包,可以让你快速建站,还等什么赶快关注吧,我们会持续输出相关资源


资源来自互联网 仅供学习研究之用,不得用于商业,请在24小时内删除!

版权归原作者及其公司所有,如果你喜欢,请购买正版。

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

日历

链接

blogger

蓝蓝 http://www.lanlanwork.com

存档