B端浪潮下设计师的「尴尬」

供应链资源整合是企业发展态势。企业对内部多岗位协作、企业与企业间的协作效率有更多诉求。

企业级服务系统的智能在线处理、数据准确、信息安全等特征，成为企业实际作业的得力助手。（以下简称B端）

系统提供商也便对业务型产品、设计、开发、运营等人才有更多需求。

在C端浪潮中，设计师通过创造用户流畅和惊喜的体验，发挥了显而易见的价值。

然后B端系统的业务复杂特性，普遍认知产品经理、开发会体现更大的价值。

设计师作为中间角色，难免「尴尬」，甚至沦为产品经理原型的高保真绘制人员，缺少发言权，或初次接触对海量信息无从下手。究本质原因：

未直接接触业务方和用户，无法对需求场景有深入的了解，缺少系统性设计分析、设计判断能力

我在几年的实战中，运用辛老师 「交互设计五要素」 基础原理，融合于B端业务体系，形成一套自己的思维图谱。（以下简称五要素）

从「五要素」出发，会更快速地get到关键设计点，抱着开放的态度与产品讨论方案，总会愉快地达成一致，顺利对接开发。

B端「五要素」详解

就像我们写小说「讲故事」一样：时间地点人物、有什么目标、使用什么工具，完成什么事情，故事才完整。基于B端实际业务场景的五要素，阿飞解说如下：

1. 用户-角色、权限

角色：

老板、运营、销售、物流、采购、库管、财务等（不同岗位日常事项不同）

权限：

主子账号（涉及到模块间的操作权限、数据权限）

2. 目的

用户目标：

B端一般是具有明确的作业目标，更地完成工作。老板一般希望节约人力成本，且可即时响应客户需求

商业目标：

为客户赋能、提升下单率、支付率、新业务渗透力、裂变等

业务目标：

产品会不断的迭代，了解当下需求中的业务目标

设计目标：

基于以上目标，设计需符合用户思维习惯，提高处理效率，同时避免误操作等

任何场景下，人的行为都是有「目标动机」

当以「目标」为出发点，可以增强设计判断力，输出有效方案。另外真正有价值的商业目标一般都是和用户终极目标所吻合。

3. 场景

时间、地点是场景的必要组成

When：

随时随地在线或工作日期间，如：售后客服需要随时在线；财务人员一般工作日处理任务

Where：

办公室、仓库、户外等。需考虑线上线下结合，系统是为用户的线下作业场景服务

4. 工具或媒介

台式电脑、笔记本电脑、手机、平板、扫码枪、PDA、打印机、肢体、智能运输车等

互联网媒介又包含web网页端，web客户端，小程序，H5，App等

系统功能承载在媒介中，媒介承载在实际作业下使用的工具，存在多终端配合使用。比如仓库移动作业时，会使用到平板进行盘查核对等。

5. 行为

需要完成什么事？通过典型的任务流分析是否可达到目标

△ 仓库移动作业场景

「五要素」带来的机遇和价值

B端复杂业务下，设计师主动了解用户实际的场景后，五要素作为必需思考元素，经过实战验证，带给设计师的机遇价值至少有2方面：

1. 对设计师自身：

有利于设计分析、判断思维体系的完善，考虑更全面；所输出的方案符合用户思维和习惯，更容易得到各方的认可

2. 对于业务价值

可作为考量产品方案可行性的判断准则
另外，产品原型一般基于「功能」本身，而设计师从用户实际场景规划用户的任务流，可以优化产品逻辑，补全缺失场景，也会给予创造性解决方案

举个实战栗子

比如「开发票」功能 ：

• A购买B的服务后，系统会统计时间段内订单金额；
• A可向B申请开发票，B接收到申请工单
• B线下开票后，上传发票凭证，单据变成已完成状态（系统不对接发票打印接口）

在需求评审中，针对于「A向B申请开票，A撤销申请不需要B操作同意」这点，我提出建议：「需要B线上同意」

首先确实是要避免无谓的用户线上流程操作，但针对这点，我分析如下：

• 用户是财务人员，「开发票」是其重要严谨的工作事项之一
• 线上线下场景结合。B看到A的申请单据，极有可能B线下已开发票还未录入系统。
• 此时申请取消开票，若不需要B同意/拒绝，会造成纠纷，平台需要负责。

所以「A撤销申请B需要线上操作同意或拒绝」

△ 打印发票

以「五要素」的分析思维的表述，最终与产品、技术达成一致。

在设计中，考虑到「A申请撤销」的单据，对于双方都是需要优先确认和处理的。所以除有即时消息通知外，列表中我做了2点设计：

• 会把这批单据使用浅红色底，起到提示作用
• 优先放在分页列表最前面

（若不这样，在分页列表中特殊单据很有可能从第二页后才出现，用户都发现不了）

△ 状态操作参考框架示例-原创

总结

回顾下B端交互设计五要素

• 用户：角色、权限
• 目标动机：商业、业务、用户、设计，
• 场景：什么时候？在哪里？
• 工具或媒介：作业场景中使用各种工具
• 行为：基于用户任务流的行为设计

设计师的分析、判断能力是非常重要，五要素则作为系统性的思维支撑。

B端浪潮中，设计师仍有很大的机遇和价值。基于五要素分析，会对业务有所优化和补充，或提出创造性的解决方案。

设计不仅是一种技能，而是对事物本质的感知和洞察能力

交互设计五要素不仅对设计师有帮助，同时对产品、运营等人员同样具有价值。

文章来源：站酷    作者：Aber UX设计

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

以上都是近年来的几本阅读笔记和心得总结，一直在慢慢整理中。特意分享给各位作为参考交流，本文还有诸多不足，望各位批评指证。




此篇为构图与形状的第二节，开始深入原理的探讨，第三节是关于构图与形状与人类知觉关联的深层内容。




理论不同于软件和技法，短时间的学习就能看到进步，不能现学现卖。它是一种所谓的“种树”过程，靠的是日积月累，是一种学习、消化、迭代的过程，一种由量变到质变的过程。需要坚持不懈、持之以恒。




仅作免费交流与启发，请勿商用! 谢谢！







参考书籍：

《绘图构图学》常锐伦

《图像语言的私密》Molly.Bang

《摄影构图学》本.克莱门茨，大卫.罗森菲尔德

《图解艺术》郭书宣

《迷情黑白》Marcos Mateu-Mestre

《设计元素.造型与空间》丹尼斯.M.普哈拉

《艺术与视知觉》鲁道夫.阿恩海姆

   




文章来源：站酷网







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

头脑风暴是一种常用的设计方法，能够帮助设计师开阔思维，快速获取大量灵感与方案，当然，这是在理想的情况下。实际上，很多头脑风暴是漫无目的，效率低下，毫无收获的。而头脑风暴需要很多人参与，如果浪费了大家的时间而一无所获，那发起者简直尴尬到能抠出两室一厅。

那么，设计师如何才能地组织一场头脑风暴呢？下面我将按“开始前”，“进行中”，“结束后”的顺序，介绍整个头脑风暴流程中提率的一些心得体会。

开始前

明确想要解决的问题

我们一定是为了解决某个问题，而不是为了闲聊组织头脑风暴的。所以我们要先明确问题是什么，才能引导大家帮助我们。

我们可以试着用一句话去概述它，注意必须要具体，不能太含糊。“如何设计一张海报”就是一个很糟糕的描述。试着把目标用户、业务目标、场景加进这句话，比如“如何设计一张能够吸引应届毕业生加入XX设计中心的朋友圈海报”。

拆解问题

明确具体问题后，我们还需要将它进行拆解成一个个关键问题，这样才能有序展开讨论，而不是漫无目标地侃大山。比如刚刚提到的那个问题，就可以拆成“应届生的关键词是什么”、“应届生找工作时最关心什么”、“XX设计中心的关键词是什么”、“什么样的元素能够代表设计师”、“什么样的朋友圈海报形式比较吸引人”等等。

制定流程

有了明确的问题和关键问题后，我们要做的就是将它们在头脑风暴按步骤上提出来，让大家跟着我们的节奏去展开脑洞，这也就是头脑风暴的流程。一场头脑风暴往往包含背景介绍、多轮脑暴、阐述想法、投票等环节，作为组织者需要详细规划每个环节的顺序、时间，特别是需要控制总时长（尽量别超过一个半小时），预留中场休息的时间，毕竟大家很难长时间集中注意力。

确定分工

一般来说头脑风暴里有三种角色，主持人、记录员和参与者。参与者的职责不用介绍了。主持人的职责是带着大家按节奏讨论，记录员的职责是记录大家的想法和拍照，缺一不可。

确定参与人员

参与人员的数量一般在5-10之间，人数太少收集不到足够的想法，人数太多讨论效率低，耗时长。参与人员的身份需要根据你想解决的问题确定，如果是比较大型的项目，参与的人员需要多元化，把产品经理、程序员都拉进来，方便获得不同视角的观点，也能够提高合作方的参与感。在我们上面举的海报例子中，如果能拉应届设计师加入脑暴，将非常有帮助。

准备工具

除了笔、便利贴、A4纸，我们还需要准备一份写了每个步骤需要完成任务的PPT，帮大家明确任务。

提前通知

大家的工作都比较忙碌，所以请至少提前一天邀请大家参与头脑风暴，并且简单交代背景，提供一些资料，方便大家提前消化。

进行中

介绍背景

首先要简单跟大家介绍一下背景信息，以及接下来的大概流程，活跃一下气氛，带大家进入状态，讲段子也算是新世纪设计师的必备技能了。

重量不重质

头脑风暴的目的并不是要获得考虑得非常周全、详细，能够直接落地的方案，而是大量的想法和灵感。所以我们需要鼓励大家在短时间（5-10分钟）内输出尽可能多的想法（四五十个不算多），不要太纠结可行性、成本等细枝末节的问题。

延迟评论

作为主持人，切记不要当场对参与者的想法做出负面评论，或者谈论执行细节的事情，以免打击参与者的积极性。如果有领导参与，要注意避免领导的威压影响其他参与者打开脑洞。

控制节奏与讨论主题

互联网从业者大多是思维活跃的可爱人儿，开一个头他们就能唠上一天，所以主持人一定要留意时间，按照既定计划，当大家偏题时引导大家回归到对主题的讨论上。

中场休息

如果整场头脑风暴的时间超过半个小时，就需要给大家安排中场休息的时间，可以提前准备一些零食和饮料，帮助大家放松，以便接下来能够集中注意力接着讨论。

记录与拍照

记录员应该将大家的想法和每轮讨论、投票的结果记录下来，方便后面回溯和汲取灵感。拍照也是很重要的工作，这将为最后的设计提案提供宝贵的图片资料，让整个设计流程展现在决策方面前，提高说服力。

结束后

总结成果

主持人应该将简单总结一下大家讨论、投票的结果，表达对大家百忙之中参与头脑风暴的感谢，为下次拉人做情感铺垫（开玩笑）。

整理材料，同步结论

会后需要及时对头脑风暴的结果进行整理和分析，并将结论以邮件的形式同步给参与者（表达对参与者的尊重）和领导（同步工作结果）。整理时可以按可行性和效果两个维度划分idea，找出比较平衡的方向。

写在最后

头脑风暴是很有效但也很容易浪费时间的一种设计方法，开始前详细规划，进行中稳稳把控，结束后及时总结与同步，能够帮助我们提率。

另外，头脑风暴只是为我们提供了灵感和方向，并不一定要选择获得票数最多的方案执行，还是需要根据实际做判断，不要过于机械。

文章来源：站酷    作者：失灵 

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

盒子模型

看透网页布局的本质

首先利用CSS设置好盒子的大小，然后摆放盒子的位置。最后把网页元素比如文字图片等等，放入盒子里面。

概念

盒子模型由元素的内容边框border内边距padding和外边距margin组成
盒子里面的文字和图片等元素是内容区域，盒子的厚度我们称为盒子的边框
盒子内容与边框的距离是内边距，盒子与盒子之间的距离是外边距

盒子边框

语法

border:border-width粗细|border-style样式|border-color颜色 

边框综合设置
border: 1px solid red; 没有顺序

表格的细线边框
cellspacing=“0” ,将单元格与单元格之间的距离设置为0
border-collapse:collapse; 表示相邻边框合并在一起

内边距

padding属性用于设置内边距，是指边框与内容之间的距离

属性
padding-left左内边距padding-right右内边距padding-top上内边距padding-bottom下内边距

简写
2个值 padding: 上下内边距 左右内边距 ；
4个值 padding: 上内边距 右内边距 下内边距 左内边距 ；

内盒尺寸计算（元素实际大小）
盒子的实际的大小 = 内容的宽度和高度 + 内边距 + 边框

外边距

margin属性用于设置外边距。margin控制盒子和盒子之间的距离，属性和简写与padding相同

块级盒子水平居中

盒子必须指定宽度（width）然后就给左右的外边距都设置为auto

文字居中和盒子居中区别

盒子内的文字水平居中是text-align:center, 而且还可以让行内元素和行内块居中对齐
块级盒子水平居中 左右margin 改为 auto

清除元素的默认内外边距

代码

* {
padding:0;     /* 清除内边距 */
margin:0;      /* 清除外边距 */
} 

注意
行内元素为了兼容性， 尽量只设置左右内外边距， 不设置上下内外边距

外边距合并

相邻块元素垂直外边距的合并

当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom，下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和，取两个值中的较大者这种现象被称为相邻块元素垂直外边距的合并

解决方案
尽量给只给一个盒子添加margin值

嵌套块元素垂直外边距的合并

对于两个嵌套关系的块元素，如果父元素没有上内边距及边框，父元素的上外边距会与子元素的上外边距发生合并，合并后的外边距为两者中的较大者

解决方案
可以为父元素定义上边框
可以为父元素定义上内边距
可以为父元素添加overflow:hidden

盒子模型布局稳定性

按照优先使用宽度（width）内边距（padding）外边距（margin）

原因
margin有外边距合并还有ie6下面margin加倍的bug所以最后使用
padding会影响盒子大小，需要进行加减计算，其次使用
width没有问题，经常使用宽度剩余法高度剩余法来做

浮动

CSS 布局的三种机制

普通流（标准流）

块级元素会独占一行，从上向下顺序排列
行内元素会按照从左到右顺序排列，碰到父元素边缘则自动换行

浮动

让盒子从普通流中浮起来,主要作用让多个块级盒子一行显示

定位

将盒子定在浏览器的某一个位置

为什么需要浮动

因为行内块元素可以实现多个元素一行显示但中间会有空白缝隙
因为行内块元素不能实现盒子左右对齐

什么是浮动

概念

元素的浮动是指设置了浮动属性的元素
会脱离标准普通流的控制并可以移动到指定位置

作用

让多个盒子(div)水平排列成一行，使得浮动成为布局的重要手段
浮动最早是用来控制图片，实现文字环绕图片的效果
可以实现盒子的左右对齐等等

语法

选择器 { float: 属性值; } 


    

        1
    

属性值
none（元素不浮动（默认））left（元素左浮动）right（右浮动）

特点

浮
加了浮动的盒子是浮起来的，漂浮在其他标准流盒子的上面
漏
加了浮动的盒子不占位置，它原来的位置漏给了标准流的盒子
特
浮动元素改变display属性， 类似转换成行内块元素，但是元素之间没有空白缝隙

浮动的应用

浮动和标准流的父盒子搭配

实际的导航栏中不直接用链接a而是用li包含链接(li+a)
li+a语义更清晰
直接用a搜索引擎容易辨别为有堆砌关键字嫌疑而影响网站排名

浮动的扩展

浮动元素与父盒子的关系
子盒子的浮动参照父盒子对齐
不会与父盒子的边框重叠，也不会超过父盒子的内边距

浮动元素与兄弟盒子的关系
在一个同一个父级盒子中，如果前一个兄弟盒子是浮动的，那么当前盒子会与前一个盒子的顶部对齐
在一个同一个父级盒子中，如果前一个兄弟盒子是普通流的，那么当前盒子会显示在前一个兄弟盒子的下方

清除浮动

为什么要清除浮动

浮动元素不占用原文档流的位置，会对后面的元素排版产生影响

清除浮动本质

父级元素因为子级浮动导致内部高度为0，清除浮动后，父级会根据浮动的子盒子检测高度，父级有高度就不会影响下面的标准流

清除浮动的方法

语法

选择器{clear:属性值;}  clear 清除 


    

        1
    

属性值
left清除左浮动right清除右浮动both同时清除左右浮动

额外标签法

是W3C推荐的做法是通过在浮动元素末尾添加一个空的标签例如<div style=”clear:both”></div>，或则其他标签br等亦可 


    

        1
    

优缺点
通俗易懂，书写方便，但是添加许多无意义的标签，结构化较差

父级添加overflow属性方法

可以给父级添加：overflow为hidden|auto|scroll都可以实现

优缺点
代码简洁，但是内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素

使用after伪元素清除浮动

:after 方式为空元素额外标签法的升级版，.clearfix:after {  content: ""; display: block; height: 0; clear: both;visibility: hidden; } 
.clearfix {*zoom: 1;}  /* IE6、7 专有 */ 


    

        1
    

    

        2
    

优缺点
符合闭合浮动思想结构语义化正确，但是由于IE6-7不支持:after，使用zoom:1触发hasLayout

使用双伪元素清除浮动

方法

.clearfix:before,.clearfix:after {
content:"";
display:table;
}
.clearfix:after {
clear:both;
}
.clearfix {
*zoom:1;
} 

优缺点
代码更简洁，但由于IE6-7不支持:after使用zoom:1触发hasLayout

手机UI中的交互是保持产品鲜活生命力的源动力。好的交互可以帮助用户快速地获得反馈，认知布局，增强体验感和沉浸感。

手机UI中的交互是保持产品鲜活生命力的源动力。好的交互可以帮助用户快速地获得反馈，认知布局，增强体验感和沉浸感。这里为大家整理了一些优秀并富有创意的交互作品，为你的产品设计注入灵感。

--精美时尚的天气☁️手机app--

--精美时尚的天气☁️手机app--

--精美时尚的天气☁️手机app--

--手机appUI设计--

 （以上图片均来源于网络）

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

  更多精彩文章：

       手机appUI界面设计赏析（一）

       手机appUI界面设计赏析（二）

       手机appUI界面设计赏析（三）

       手机appUI界面设计赏析（四）

       手机appUI界面设计赏析（五）

       手机appUI界面设计赏析（六）

       手机appUI界面设计赏析（七）

       手机appUI界面设计赏析（八）

      手机appUI界面设计赏析（九）

       手机appUI界面设计赏析（十）

     手机appUI界面设计赏析（十一）

网页中超过95%以上的信息都是通过文字的形式呈现。 然而，页面文字并非毫无章法的随意呈现。事实上，更具可读性、视觉效果以及独特排版和布局的网页文本设计，更能吸引用户，提升用户愉悦度。这也是为什么越来越多的设计师日益重视网页排版设计的重要原因。

BS界面是基于浏览器的界面，随着人们对于用户体验要求的不断提高，BS界面的设计要求也越来越高，

接下来为大家分享一下我收集到的案例：

（以上图片均来源于网络）

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

  更多精彩文章：

       ui界面设计之网站设计案例欣赏(一)

       超赞的创意页面排版设计，打造“视”不可挡的网页设计

文章来源：站酷

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

“个人主页”是一个听起来很熟悉，但又跟“个人中心”傻傻分不清楚的一个模块，一般情况下处于APP底Tab的最右边，通常喊它为“我的”。

这个界面看似没什么挑战可言，给设计师一种“不就是排排版的事儿嘛”的膨胀误解，认为完全在自己射程范围内，整个人都有点飘。

但最近发现，它并不像表面所呈现出的那么简单，其实里面有很多小揪揪需要深挖和思考，所以千万不能小瞧它。

好，废话不多说，上才艺。

 个人主页和个人中心的区别是？ 

讲“个人主页”前，先跟大家捋一下它俩的区别，避免混淆。首先，并没有官方定义它们的名字，只是喊的人多了也就成了它们的名字了。

所以“个人主页”也好、“个人中心”也罢，只是大家习惯性称呼，为了合作过程中大家在同一个话语体系，提效而已。

要说它们俩的区别，其实还是有的。

 什么是个人中心？

个人中心，承载着自己账号信息、设置管理、福利信息等功能的聚合地，主要用于个人信息的管理。

它常见于“工具类”产品中，如下：

对于“个人中心”，设计师要考虑的最核心是：如何解决“效率”问题。因此信息布局合理，视觉尽可能减少干扰，变得格外重要。

什么是个人主页？

个人主页，一般承载着用户个人信息、个人影响力、生产的内容等等，以此突显自己魅力或定位。

常出现在内容、社交、社区类产品中，比如以下产品：

当然，还有一些产品，它既包含“个人中心”，也包含“个人主页”，如下：

整体来看，“个人中心”偏向于个人信息的管理，更关注于“效率”；而“个人主页”偏向于展示自我，关注点更“多元”，会复杂一些，下面会细讲。搞明白了它们的区别之后，大家会发现“个人中心”相对更简单一些。

所以，这次我们先聚焦聊聊“个人主页”。

 设计“个人主页”前思考什么？

在工作中，做任何需求都应该有其目的或目标，不然所有的忙碌都容易沦为资源的浪费。“个人主页”也应有其价值和使命。

像上一趴所说，“个人主页”是为了让用户突显或塑造自己的魅力，很像是一个人的“个人名片”。那么，用户塑造个人魅力对产品有什么价值和收益呢？目标是什么呢？

拿短视频产品举例：如果用户能够在“个人主页”充分展现自己的才华和魅力，从而带来了更多浏览者的“关注”，那他们就更有动力分享或生产优质内容，进而使产品内容更加丰富；从而吸引更多新用户的浏览、留存。

更多新用户的加入、浏览、留存，让内容生产者有更多的涨粉空间，粉丝规模做起来之后再进行商业化。

这样对消费型用户、内容生产者、平台方都有利，进而处于良性循环。

这就是“个人主页”背后的大概逻辑和目的。

 如何进行“个人主页”的设计？

了解完“个人主页”存在的价值和目标之后，那么，作为产品或设计师们需要帮助用户解决几个问题：1.树立人设；2.辅助吸粉; 3.助力变现。

 1.树立人设 

人为什么需要树立人设？

树立人设，本质上是两种目的：获得认可（提升关注/约X），获得收入（提升变现能力）。

如何帮助用户快速建立人设？

个人主页里有几个区域，影响着用户建立人设：a.头图区；b.个人信息区；c.作品区；

a.头图区

头图，指的是“个人主页”顶部的图片区域。

为了让浏览者进入“个人主页”快速了解作者，头图这种处理手法，是很多社交/社区/内容类产品，“树立人设”的标配。

比如：社交类产品的头图，用户要么放自己照片，要么放风景；

大V、商家等角色的用户，会把头图打造成自己品牌的招牌，辅助浏览者快速了解自己定位。

不过，头图尺寸占比要把控好。

尺寸大小会影响界面的“屏效比”和用户“上传门槛儿”，对产品核心数据也有着千丝万缕的关系。

b.个人信息区

个人信息区，也是作者的基础资料。

一般包含着：用户的昵称、账号、简介、标签、粉丝关注量、关系链等信息。这个区域设计时需要重点考虑“信息亲密度”和“信息优先级”。

信息亲密度：指的是如何将更亲近的信息，以信息组的形式传递，减少用户认知成本。

比如下图，常见的社区或内容类产品针对“个人信息区”的处理方式（同一颜色的色块代表亲密度更强的信息。）

同时，“信息组”与“信息组”之间也需要处理好亲密度，比如“小红书”和“instagram”的“好友关系链”与“关注按钮”是放一起的，方便用户快速作出“关注”决策。

c.作品区

作品区的重要性不用多说了，它是作者“树立人设”的重要组成部分，也直接影响着浏览者是否愿意关注的关键因素。

“作品区”设计时，有2个重要因素需要考虑：“作品尺寸占比”、“作品信息外显”。

1）作品尺寸占比:

比如下图，同样是短视频产品，Before作品区一排仅1个作品，剪映2个作品，而抖音3个作品。

单从排版美丑来评价是不负责的，那么如何决策哪种处理手法“对”的呢？

这需要通过自己产品定位分析，以及通过不同布局方式进行上线测试，重点观测核心数据（用户消费时长/作品消费个数/关注率等）的影响情况来决策。

2）作品信息外显:

除了作品本身，它的“辅助信息”也是帮助用户做决策的重要因素。

比如：“Before”除了对作品热度信息（浏览量、评论量等）外显以外，更强调和引导用户进行互动，如：收藏、分享、评论、充电；“剪映”根据产品属性，更强调“使用数”和“作品的描述文案”；“抖音”作品仅外显“点赞数‘，同时通过“置顶”和“刚刚看过”提升用户决策效率。

以上可以看出，头图区、个人信息区、作品区，是让浏览者快速且准确的了解或关注内容创作者重要组成部分，也是内容创作者“树立人设”的主要手段。

 2.辅助吸粉 

辅助吸粉，换句话说也是辅助用户提升“关注率”。

不可否认，清晰的编辑个人信息，产出优质的内容，是用户吸粉的根本，我们能做的只是“助攻”。

所以，在做此类“个人主页”时，我们需要通过设计手段做个靠谱“奶妈”，有几个维度可以尝试：a.强化关注；b.沉淀粉丝。

a.强化关注

衡量粉丝多少，是通过用户是否点击“关注”了内容创作者。

因此身为产品工作人员，在个人主页设计时，除了其它信息呈现以外，在不影响页面信息合理性的情况下，尽可能强化“关注”按钮，引导用户操作。

b.沉淀粉丝

有了粉丝之后，提升粉丝忠诚度和粘性，是每一个内容生产者面临的问题，也是工作人员们需要帮内容创作者解决的。

左边是“快手”，在个人主页内有粉丝群入口；右边是“火山”，打造自己的“圈子”，粉丝们可以在里面发自己的动态，或进行互动。

这么做是为了提升内容创作者的粉丝粘性，给他们更大的空间去运营粉丝，培养感情，打造更忠诚的私域流量。

 3.助力变现 

除了树立人设、辅助吸粉以外，助力他们变现，才能使他们长期扎根于此（留在自己平台）。不然大V们会带着自己圈到的粉丝，去别的地儿赚钱，给你的产品带绿帽子。

拿知乎举例，内容创作者可以在个人主页挂自己的商品橱窗，给符合自己人设的商品带货。

也可以开通付费咨询模块，通过帮助用户解答问题实现变现。

除此之外，还可以做付费Live课程。

再来看下像哔哩哔哩、抖音、火山、QQ音乐等平台，在个人主页都有辅助用户变现的入口。

下面是“声撩”，利用用户声音的优势去变现，比如：陪打游戏（软妹子声音让王者峡谷的汉子们兴奋）、睡前陪聊、睡前连麦等等。

如果你真的很富有，且不想让妹子陪聊陪打游戏，就是单纯的想砸礼物引起注意，右图可以看出，有个入口是直接“送礼”。

这么做满足土豪诉求（博取主播注意），满足主播诉求（变现），满足平台诉求（抽成），何乐而不为。

同时，也越来越多了产品不仅解决C端用户的变现诉求，同时解决B端用户变现诉求。比如，抖音赋能商家，商家号的“个人主页”可以自定义tab，默认展示“商品”tab。

用户不仅能在这里消费作品，还能通过作品建立的信任促进购买行为。

再比如，instagram也提供B端用户开店铺功能。

以上，是关于“个人主页”如何助力用户变现的案例，其实玩法还有很多，这里仅提供一些思路，大家平常玩APP时可以多关注下。

   总结   

总的来说，“个人中心”与“个人主页”最大的区别在于：“个人中心”主要是“给自己看的”，更注重使用效率。

“个人主页”主要是“给他人看的”，更注重突显自己魅力。在满足使用效率的基础上，需要通过产品设计手段帮助用户“树立人设”、“辅助吸粉”、“助力变现”，从而使用户和平台实现双赢，打造一个更完善的生态。

以上，是“个人主页”设计相关思考，希望对你们有所帮助。

文章来源：UI中国    作者：大牙

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

网页中超过95%以上的信息都是通过文字的形式呈现。 然而，页面文字并非毫无章法的随意呈现。事实上，更具可读性、视觉效果以及独特排版和布局的网页文本设计，更能吸引用户，提升用户愉悦度。这也是为什么越来越多的设计师日益重视网页排版设计的重要原因。

BS界面是基于浏览器的界面，随着人们对于用户体验要求的不断提高，BS界面的设计要求也越来越高，

接下来为大家分享一下我收集到的案例：

（以上图片均来源于网络）

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

  更多精彩文章：

       ui界面设计之网站设计案例欣赏(一)

本文将研究 ES6 的 for ... of 循环。

旧方法

在过去，有两种方法可以遍历 javascript。

首先是经典的 for i 循环，它使你可以遍历数组或可索引的且有 length 属性的任何对象。

for(i=0;i<things.length;i++) { var thing = things[i] /* ... */ }

其次是 for ... in 循环，用于循环一个对象的键/值对。

for(key in things) { if(!thing.hasOwnProperty(key)) { continue; } var thing = things[key] /* ... */ }

for ... in 循环通常被视作旁白，因为它循环了对象的每一个可枚举属性。这包括原型链中父对象的属性，以及被分配为方法的所以属性。换句话说，它遍历了一些人们可能想不到的东西。使用 for ... in 通常意味着循环块中有很多保护子句，以避免出现不需要的属性。

早期的 javascript 通过库解决了这个问题。许多 JavaScript库（例如：Prototype.js，jQuery，lodash 等）都有类似 each 或 foreach 这样的工具方法或函数，可让你无需 for i 或 for ... in 循环去遍历对象和数组。

for ... of 循环是 ES6 试图不用第三方库去解决其中一些问题的方式。

for … of

for ... of 循环

for(const thing of things) { /* ... */ }

它将遍历一个可迭代（iterable）对象。

可迭代对象是定义了 @@ iterator 方法的对象，而且 @@iterator 方法返回一个实现了迭代器协议的对象，或者该方法是生成器函数。

在这句话中你需要理解很多东西：

• 可迭代的对象
• @@iterator方法（ @@是什么意思？）
• 迭代器协议（这里的协议是什么意思？）
• 等等，迭代（iterable）和迭代器（iterator）不是一回事？
• 另外，生成器函数又是什么鬼？

下面逐个解决这些疑问。

内置 Iterable

首先，javascript 对象中的一些内置对象天然的可以迭代，比如最容易想到的就是数组对象。可以像下面的代码中一样在 for ... of 循环中使用数组：

const foo = [ 'apples','oranges','pears' ] for(const thing of foo) { console.log(thing)
}

输出结果是数组中的所有元素。

apples oranges
pears

还有数组的 entries 方法，它返回一个可迭代对象。这个可迭代对象在每次循环中返回键和值。例如下面的代码：

const foo = [ 'apples','oranges','pears' ] for(const thing of foo.entries()) { console.log(thing)
}

将输出以下内容

[ 0, 'apples' ]
[ 1, 'oranges' ]
[ 2, 'pears' ]

当用下面的语法时，entries 方法会更有用

const foo = [ 'apples','oranges','pears' ] for(const [key, value] of foo.entries()) { console.log(key,':',value)
}

在 for 循环中声明了两个变量：一个用于返回数组的第一项（值的键或索引），另一个用于第二项（该索引实际对应的值）。

一个普通的 javascript 对象是不可迭代的。如果你执行下面这段代码：

    // 无法正常执行 const foo = { 'apples':'oranges', 'pears':'prunes' } for(const [key, value] of foo)  



    { console.log(key,':',value) 

}

会得到一个错误

$ node test.js
/path/to/test.js:6 for(const [key, value] of foo) {
TypeError: foo is not iterable

然而全局 Object 对象的静态 entries 方法接受一个普通对象作为参数，并返回一个可迭代对象。就像这样的程序：

    const foo = { 'apples':'oranges', 'pears':'prunes' } for(const [key, value] of Object.entries(foo))  



    { console.log(key,':',value) 

}

能够得到你期望的输出：

$ node test.js
apples : oranges
pears : prunes

创建自己的 Iterable

如果你想创建自己的可迭代对象，则需要花费更多的时间。你会记得前面说过：

可迭代对象是定义了 @@ iterator 方法的对象，而且 @@iterator 方法返回一个实现了迭代器协议的对象，或者该方法是生成器函数。

搞懂这些内容的最简单方法就是一步一步的去创建可迭代对象。首先，我们需要一个实现 @@iterator 方法的对象。 @@ 表示法有点误导性，我们真正要做的是用预定义的 Symbol.iterator 符号定义方法。

如果用迭代器方法定义对象并尝试遍历：

const foo = {
  [Symbol.iterator]: function() {
  }
} for(const [key, value] of foo) { console.log(key, value)
}

得到一个新错误：

for(const [key, value] of foo) {
                          ^
TypeError: Result of the Symbol.iterator method is not an object

这是 javascript 告诉我们它在试图调用 Symbol.iterator 方法，但是调用的结果不是对象。

为了消除这个错误，需要用迭代器方法来返回实现了迭代器协议的对象。这意味着迭代器方法需要返回一个有 next 键的对象，而 next 键是一个函数。

const foo = {
  [Symbol.iterator]: function() { return { next: function() {
      }
    }
  }
} for(const [key, value] of foo) { console.log(key, value)
}

如果运行上面的代码，则会出现新错误。

for(const [key, value] of foo) {
                     ^
TypeError: Iterator result undefined is not an object

这次 javascript 告诉我们它试图调用 Symbol.iterator 方法，而该对象的确是一个对象，并且实现了 next 方法，但是 next 的返回值不是 javascript 预期的对象。

next 函数需要返回有特定格式的对象——有 value 和 done 这两个键。

next: function() { //... return { done: false, value: 'next value' }
}

done 键是可选的。如果值为 true（表示迭代器已完成迭代），则说明迭代已结束。

如果 done 为 false 或不存在，则需要 value 键。 value 键是通过循环此应该返回的值。

所以在代码中放入另一个程序，它带有一个简单的迭代器，该迭代器返回前十个偶数。

class First20Evens { constructor() { this.currentValue = 0 }

  [Symbol.iterator]() { return { next: (function() { this.currentValue+=2 if(this.currentValue > 20) { return {done:true}
        } return { value:this.currentValue
        }
      }).bind(this)
    }
  }
} const foo = new First20Evens; for(const value of foo) { console.log(value)
}

生成器

手动去构建实现迭代器协议的对象不是唯一的选择。生成器对象（由生成器函数返回）也实现了迭代器协议。上面的例子用生成器构建的话看起来像这样：

class First20Evens { constructor() { this.currentValue = 0 }

  [Symbol.iterator]() { return function*() { for(let i=1;i<=10;i++) { if(i % 2 === 0) { yield i
        }
      }
    }()
  }
} const foo = new First20Evens; for(const item of foo) { console.log(item)
}

本文不会过多地介绍生成器，如果你需要入门的话可以看这篇文章。今天的重要收获是，我们可以使自己的 Symbol.iterator 方法返回一个生成器对象，并且该生成器对象能够在 for ... of 循环中“正常工作”。 “正常工作”是指循环能够持续的在生成器上调用 next，直到生成器停止 yield 值为止。

$ node sample-program.js
2
4
6
8 

    10



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