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

人人都是产品经理 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的你还在烦恼怎么美化后台界面

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

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

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

1，layui/ layuiAdmin

layui（谐音：类UI) 是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用。其外在极简，却又不失饱满的内在，体积轻盈，组件丰盈，从核心代码到 API 的每一处细节都经过精心雕琢，非常适合界面的快速开发。layui 首个版本发布于2016年金秋，她区别于那些基于 MVVM 底层的 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整合应用

---

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浏览器、搜狗浏览器、百度浏览器等。

---

H+ 后台主题UI框架

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

提醒：是收费的

---

H-ui.admin

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

---

jQuery MiniUI_快速Web开发

jQuery MiniUI - 专业WebUI控件库。

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

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

缺点：收费的！

---

请输入描述

EasyUI

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

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

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

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

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

easyui很简单但功能强大的。

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

---

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 组件，可快速构建界面出色、体验优秀的跨屏页面，大幅提升开发效率。

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

---

---

LigerUI

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

---

win10-UI

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

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

---

国外还有很多 bootstrap 后台UI

Ace Admin，Metronic等等

---

今天小编就分享到这里

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

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

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

---

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

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

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

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

一、添加表头：

1. QStandardItemModel *model = new QStandardItemModel(); 
2. model->setColumnCount(2); 
3. model->setHeaderData(0,Qt::Horizontal,QString::fromLocal8Bit("卡号")); 
4. model->setHeaderData(1,Qt::Horizontal,QString::fromLocal8Bit("姓名"));

复制代码

二、设置表格属性：

1. ui->tableView->setModel(model); 
2. //表头信息显示居左 
3. ui->tableView->horizontalHeader()->setDefaultAlignment(Qt::AlignLeft); 
4. //设置列宽不可变 
5. ui->tableView->horizontalHeader()->setResizeMode(0,QHeaderView::Fixed); 
6. ui->tableView->horizontalHeader()->setResizeMode(1,QHeaderView::Fixed); 
7. ui->tableView->setColumnWidth(0,101); 
8. ui->tableView->setColumnWidth(1,102);

复制代码

注：在进行表格设置时必须是“ui->tableView->setModel(model);”在前，属性具体设置在后，

反之则设置不会生效。如上述代码所示。

三、添加行（添加三行一样的信息）：

1. for(int i = 0; i < 3; i++) 
2. { 
3.      model->setItem(i,0,new QStandardItem("2009441676")); 
4.         //设置字符颜色 
5.      model->item(i,0)->setForeground(QBrush(QColor(255, 0, 0))); 
6.         //设置字符位置 
7.      model->item(i,0)->setTextAlignment(Qt::AlignCenter); 
8.      model->setItem(i,1,new QStandardItem(QString::fromLocal8Bit("哈哈"))); 
9. }

复制代码

四、删除行：

1. //x是指定删除哪一行 
2. model->removeRow(x); 
3. //删除所有行 
4. model->removeRows(0,model->rowCount());

复制代码

再举一个例子：

在一个药品划价模块中有这样的操作流程：

检索处方项目成功后，把该项目显示到QTableView里，把需要编辑的数量字段提供给用户输入，用户输入确认后，该项目留在列表中，然后开始下一项目检索录入。

实现过程如下：

录入的项目保留在临时表tmp中，界面上的QTableView取名为tbList，与tbList关联的Model取名为tb1。检索成功后，把检索结果插入到临时表中，把需要编辑的字段提供给用户。

1. tb1=newQSqlTableModel(this,*dbR); //dbR是本应用中的数据源 
2. tb1->setTable("tmp"); //处方临时表

复制代码

程序中需要显示的时候，

1. tbList->setModel(NULL); //清除原先数据集 
2. tbList->setModel(tb1); //刷新显示

复制代码

程序中需要提供编辑输入的时候

1. QModelIndexmdidx=m_ui->tbList->model()->index(row,column); //获得需要编辑的单元格的位置 
2. m_ui->tbList->setFocus(); //把输入焦点交给tbList 
3. m_ui->tbList->setCurrentIndex(mdidx); //设定需要编辑的单元格 
4. m_ui->tbList->edit(mdidx); //开始编辑

复制代码

有一个问题需要注意。向QTableView中添加记录时，字段一定要完整，不能有空白字段，否则结果无法保存。切记。

如果需要对用户输入做限制，比如只能在指定的字段输入指定的数据类型，可以通过QItemDelegate来实现。

贴一段代码，说明QTableView基本用法

1. QStandardItemModel model; 
2. //设置大小 
3. model.setColumnCount(3); //列 
4. model.setRowCount(musicFound); //行 
5. //设置标题 
6. model.setHeaderData(0,Qt::Horizontal,"ID"); 
7. //添加数据 
8. for(int j=0;j<row;j++)
9. {
10.             //写id
11.             QStandardItem *itemID = new QStandardItem("hello");//QString::number(j)));
12.             model.setItem(j,0,itemID);
13. }
14. //选择这个model 
15. m_ui->tableView->setModel(&model); 
16. //隐藏左边那列 
17. m_ui->tableView->verticalHeader()->hide(); 
18. //列宽 
19. m_ui->tableView->setColumnWidth(0,30); 
20. //整行选择 
21. m_ui->tableView->setSelectionBehavior(QAbstractItemView::SelectRows);

QT的MVC（View/Delegate）模型十分强大，可以利用各种控件来对表格的输入进行限制，不过我以前一直没有过，这几天研究了一下，写个小例子，希望大家喜欢。
 
如果看不懂这个例子，请先看QT的自带例子：http://qt-project.org/doc/qt-4.8/itemviews-spinboxdelegate.html
 
思路：
 
1：为每一列定义委托：
A：第一列是编号列，使用只读委托，令该列的单元格是只读的
B：第三列是ID列，只能输入1－12个数字，利用QLineEdit委托和正则表达式对输入进行限制
C：第四年龄列，利用QSpinBox委托进行输入限制，只能输入1－100之间的数字
D：第五列是性别列，利用QComboBox委托对输入进行限制，该列的单元格只能输入Male或Female
E：第六列是头像列，在该列的单元格中央放置一张头像
2：定义代理类，把所有单元格中的字符居中显示。
3：利用QSS，将表格的背景色弄成黄蓝相间。
 
截图：
 

上代码：
 1.#include <QtGui>   
 2.  
 3.//编号列，只读委托   
 4.//这个方法我还真想不到，呵呵   
 5.class ReadOnlyDelegate : public QItemDelegate  
 6.{  
 7.    Q_OBJECT  
 8.public:  
 9.    ReadOnlyDelegate(QObject *parent = 0): QItemDelegate(parent) { }  
 10.    QWidget *createEditor(QWidget*parent, const QStyleOptionViewItem &option, 
 11.        const QModelIndex &index) const  
 12.    {  
 13.        return NULL;  
 14.    }  
 15.};  
 16.  
 17.//ID列，只能输入1－12个数字   
 18.//利用QLineEdit委托和正则表达式对输入进行限制   
 19.class UserIDDelegate : public QItemDelegate  
 20.{  
 21.    Q_OBJECT  
 22.public:  
 23.    UserIDDelegate(QObject *parent = 0): QItemDelegate(parent) { }  
 24.    QWidget *createEditor(QWidget *parent, const QStyleOptionViewItem &option, 
 25.        const QModelIndex &index) const  
 26.    {  
 27.        QLineEdit *editor = new QLineEdit(parent);  
 28.        QRegExp regExp("[0-9]{0,10}");  
 29.        editor->setValidator(new QRegExpValidator(regExp, parent));  
 30.        return editor;  
 31.    }  
 32.    void setEditorData(QWidget *editor, const QModelIndex &index) const  
 33.    {  
 34.        QString text = index.model()->data(index, Qt::EditRole).toString();  
 35.        QLineEdit *lineEdit = static_cast<QLineEdit*>(editor);  
 36.        lineEdit->setText(text);  
 37.    }  
 38.    void setModelData(QWidget *editor, QAbstractItemModel *model,  
 39.        const QModelIndex &index) const  
 40.    {  
 41.        QLineEdit *lineEdit = static_cast<QLineEdit*>(editor);  
 42.        QString text = lineEdit->text();  
 43.        model->setData(index, text, Qt::EditRole);  
 44.    }  
 45.    void updateEditorGeometry(QWidget *editor,  
 46.        const QStyleOptionViewItem &option, const QModelIndex &index) const  
 47.    {  
 48.        editor->setGeometry(option.rect);  
 49.    }  
 50.};  
 51.  
 52.//年龄列，利用QSpinBox委托进行输入限制，只能输入1－100之间的数字   
 53.class AgeDelegate : public QItemDelegate  
 54.{  
 55.    Q_OBJECT  
 56.public:  
 57.    AgeDelegate(QObject *parent = 0): QItemDelegate(parent) { }  
 58.    QWidget *createEditor(QWidget *parent, const QStyleOptionViewItem &option, 
 59.        const QModelIndex &index) const  
 60.    {  
 61.        QSpinBox *editor = new QSpinBox(parent);  
 62.        editor->setMinimum(1);  
 63.        editor->setMaximum(100);  
 64.        return editor;  
 65.    }  
 66.    void setEditorData(QWidget *editor, const QModelIndex &index) const  
 67.    {  
 68.        int value = index.model()->data(index, Qt::EditRole).toInt();  
 69.        QSpinBox *spinBox = static_cast<QSpinBox*>(editor);  
 70.        spinBox->setValue(value);  
 71.    }  
 72.    void setModelData(QWidget *editor, QAbstractItemModel *model,  
 73.        const QModelIndex &index) const  
 74.    {  
 75.        QSpinBox *spinBox = static_cast<QSpinBox*>(editor);  
 76.        spinBox->interpretText();  
 77.        int value = spinBox->value();  
 78.        model->setData(index, value, Qt::EditRole);  
 79.    }  
 80.    void updateEditorGeometry(QWidget *editor,  
 81.        const QStyleOptionViewItem &option, const QModelIndex &index) const  
 82.    {  
 83.        editor->setGeometry(option.rect);  
 84.    }  
 85.};  
 86.  
 87.//性别列，利用QComboBox委托对输入进行限制   
 88.//这一列的单元格只能输入Male或Female   
 89.class SexDelegate : public QItemDelegate  
 90.{  
 91.    Q_OBJECT  
 92.public:  
 93.    SexDelegate(QObject *parent = 0): QItemDelegate(parent) { }  
 94.    QWidget *createEditor(QWidget *parent, const QStyleOptionViewItem &option, 
 95.        const QModelIndex &index) const  
 96.    {  
 97.        QComboBox *editor = new QComboBox(parent);  
 98.        editor->addItem("Female");  
 99.        editor->addItem("Male");  
 100.        return editor;  
 101.    }  
 102.    void setEditorData(QWidget *editor, const QModelIndex &index) const  
 103.    {  
 104.        QString text = index.model()->data(index, Qt::EditRole).toString(); 
 105.        QComboBox *comboBox = static_cast<QComboBox*>(editor);  
 106.        int tindex = comboBox->findText(text);  
 107.        comboBox->setCurrentIndex(tindex);  
 108.    }  
 109.    void setModelData(QWidget *editor, QAbstractItemModel *model,  
 110.        const QModelIndex &index) const  
 111.    {  
 112.        QComboBox *comboBox = static_cast<QComboBox*>(editor);  
 113.        QString text = comboBox->currentText();  
 114.        model->setData(index, text, Qt::EditRole);  
 115.    }  
 116.    void updateEditorGeometry(QWidget *editor,  
 117.        const QStyleOptionViewItem &option, const QModelIndex &index) const 
 118.    {  
 119.        editor->setGeometry(option.rect);  
 120.    }  
 121.};  
 122.  
 123.//头像列，只是在单元格中央放一张小图而已   
 124.class IconDelegate : public QItemDelegate  
 125.{  
 126.    Q_OBJECT  
 127.public:  
 128.    IconDelegate(QObject *parent = 0): QItemDelegate(parent) { }  
 129.    void paint(QPainter *painter, const QStyleOptionViewItem &option,  
 130.        const QModelIndex & index ) const  
 131.    {  
 132.        //show.bmp是在工程目录中的一张图片（其实就是QQ的图标啦，呵呵）   
 133.        QPixmap pixmap = QPixmap("show.bmp").scaled(24, 24);  
 134.        qApp->style()->drawItemPixmap(painter, option.rect,  Qt::AlignCenter, QPixmap(pixmap)); 
 135.    }  
 136.};  
 137.  
 138.//代理类，把所有单元格中的字符居中显示   
 139.class VIPModel : public QStandardItemModel  
 140.{  
 141.    Q_OBJECT  
 142.public:  
 143.    VIPModel(QObject *parent=NULL) : QStandardItemModel(parent) { }  
 144.    VIPModel(int row, int column, QObject *parent=NULL)  
 145.        : QStandardItemModel(row, column, parent) { }  
 146.    QVariant data(const QModelIndex &index, int role = Qt::DisplayRole) const 
 147.    {  
 148.        if( Qt::TextAlignmentRole == role )  
 149.            return Qt::AlignCenter;   
 150.        return QStandardItemModel::data(index, role);  
 151.    }  
 152.  
 153.};  
 154.  
 155.#include "main.moc"   
 156.  
 157.int main(int argc, char *argv[])  
 158.{  
 159.    QApplication app(argc, argv);  
 160.  
 161.    VIPModel *model = new VIPModel(5, 5);  
 162.    QTableView *tableView = new QTableView;  
 163.  
 164.    //把表格的背景调成黄蓝相间   
 165.    //这种方法是在网上看到的，用起来还真方便啊   
 166.    tableView->setAlternatingRowColors(true);  
 167.    tableView->setStyleSheet("QTableView{background-color: rgb(250, 250, 115);" 
 168.        "alternate-background-color: rgb(141, 163, 215);}");  
 169.  
 170.    tableView->setWindowTitle("VIP List");  
 171.    tableView->resize(700, 400);  
 172.    tableView->setModel(model);  
 173.    QStringList headerList;  
 174.    headerList << "No." << "ID" << "Name" << "Age" << "Sex" << "Show";  
 175.    model->setHorizontalHeaderLabels(headerList);  
 176.    tableView->verticalHeader()->setVisible(false);  
 177.    tableView->horizontalHeader()->setStretchLastSection(true);  
 178.  
 179.    //为每一列加载委托   
 180.    ReadOnlyDelegate readOnlyDelegate;  
 181.    tableView->setItemDelegateForColumn(0, &readOnlyDelegate);  
 182.    UserIDDelegate userIDDelegate;  
 183.    tableView->setItemDelegateForColumn(1, &userIDDelegate);  
 184.    AgeDelegate spinBoxDelegate;  
 185.    tableView->setItemDelegateForColumn(3, &spinBoxDelegate);  
 186.    SexDelegate comboBoxDelegate;  
 187.    tableView->setItemDelegateForColumn(4, &comboBoxDelegate);  
 188.    IconDelegate iconDelegate;  
 189.    tableView->setItemDelegateForColumn(5, &iconDelegate);  
 190.  
 191.    for(int i=0; i<10; i++)  
 192.    {  
 193.        QModelIndex index = model->index(i, 0, QModelIndex());  
 194.        model->setData(index, i);  
 195.    }  
 196.  
 197.    tableView->show();  
 198.    return app.exec();  
 199.} 

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

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

《名侦探柯南》中总是提到福尔摩斯的一段话：「When you have eliminated the impossible, whatever remains, however improbable, must be the truth.（排除一切不可能的，剩下的即使再不可能，那也是真相。）」这句话用干扰效应来解释最好不过，本期我们来聊聊。

想看更多设计法则，这个专题里全都有：设计法则专题

一、干扰效应（Interference Effect ）定义

干扰效应：一种现象，同时思考两件或两件以上的事情时，思考的过程会变得比较慢，也不准确。

二、干扰效应产生理由

有两种或两种以上的知觉或认知过程发生冲突时，就会产生干扰效应。

人们的知觉和认知的不同与心智模型有关，这些模式会独立分析、处理收到的相关信息，处理后会传送到工作记忆区，并作出诠释。当输出资料一致，诠释过程会又快又好。当输出资料不一致，就会产生干扰，需要一些其他的处理，以便更好地解决。解决这些问题需要浪费很多时间，对性能也会产生不好的影响。

三、干扰效应案例

1. 斯特鲁普干扰

斯特鲁普干扰（Stroop Interference）：刺激物不相干的一面引发了思考过程，因而干扰了刺激物相关方面的思考。

图标协同文字可以准确的向用户传递所要表达的内容，二手在常用的 App 中截出了一些图标，却发现现在很多的图标在信息传达方面有所欠缺。

举四个例子：

下面这组图标，「地方菜系、美食、晚餐、大牌简餐」几个图标没有表达出所要传达的信息，还有几个图标要借助文字才能表达出其含义。即使图标设计的非常精美，但是图标功能却存在缺失，而且这几个图标不能刺激用户对信息的理解，反倒是让用户更加迷惑。设计师也注意到了这个情况，所以最近改版后，信息传达变的更加直接，减少了干扰。

接下来的这组图标也存在同样的问题，这组图标想借助图标上产品本身的含义来传达给用户要表达的信息，但是这需要用户对这些产品本身的定位非常明确，如果不明确的话只能干扰用户的行为，例如，用户需要知道「吕」是个韩国洗发水之后才能拐弯抹角的联想到「全球超市」，再例如：中间「轻奢」图标，用的是劳力士绿水鬼，一款70000+还要靠等才能买到的奢华手表，二手认为跟轻奢的定义有矛盾，除非这并不是劳力士。

米家这套图标二手认为可以准确传达所描述的信息，因为米家有种类繁多的 loT 产品，有时候一款产品更是分为不同的版本，如果用户只是根据名称选择的话不仅繁琐而且十分耗时，所以在选择产品时，米家把所有产品外形准确刻画成图标，用户可以先根据自己产品的外形大致选择型号，再根据文字提示准确的选择自己产品的版本。

△ 米家App图标

滴滴这套图标表达也很准确，不同的服务通过不同的图标可以准确传达。

△ 滴滴图标

2. 加纳干扰

加纳干扰（Garner Interference）：刺激物一个无关的变化，引发了思考过程，干扰到跟刺激物相关的思考过程。

举个例子：如下图，指出单独一排的形状，比指出两排其中一排的形状要简单。两排形状紧靠在一起，激发了想说出旁边形状的思考程序，造成干扰。

根据上面这个案例，二手联想到了「个人中心」页面，大部分「个人中心」页面都选择了竖排列表布局。列表布局就是以列表的形式展示具体内容，并且能够根据数据的长度自适应显示，Material Design 建议列表是「可快速扫描」，适合显示类似的重复的内容。列表布局也是最快速的 app 布局方式。这种排列在某方面上就是降低了干扰。相比于列表布局，宫格导航是将主要入口全部聚合在页面，让用户做出选择。这样的组织方式无法让用户在第一时间看到内容，选择压力较大，采用这种导航的应用已经越来越少，往往用在二级页作为内容列表的一种图形化形式呈现，或是作为一系列工具入口的聚合。

△ 列表布局和宫格导航

3. 前向干扰

前向干扰（Proactive Interference）：现存记忆干扰了学习。

举个例子：手淘的最近改版中，店铺首页顶部导航和底部自定义菜单结构化调整，但是有一个细节的变化让二手不断的犯错——返回按钮改成了关闭按钮，二手习惯点击左上角返回按钮来返回上一级菜单，改版后依旧习惯点击左上角，但是打开的是店铺印象，仅仅是图标左右位置简单的调换，已经让二手在使用的过程中挫败感强烈。这就是现在的使用记忆已经严重干扰了学习。所以产品在改版迭代的时候，尽量不要干扰用户已经熟悉的路径或是破坏用户使用习惯。

△ 手淘的店铺首页改版

4. 后向干扰

后向干扰（Retrosctive Interference）：学习干扰了现存记忆。

这个正好跟上面相反，二手不断培养现在的使用习惯，渐渐的就忘记了上一版的路径。

四、怎样预防干扰

要想预防干扰，就要避免输出思考过程中相互冲突的设计。知觉的干扰效应，通常是因为信息的传达过程中有歧义，或是因为把互相干扰的元素结合在一起。要把干扰效应降到，首先要求设计师用准确的设计语言传达信息，如果这样还是无法让用户很好的理解，其次可以考虑利用文字或者引导来告知用户。

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

一、 前言

import urllib.request,os,hashlib; h = 'eb2297e1a458f27d836c04bb0cbaf282' + 'd0e7a3098092775ccb37ca9d6b2e4b7d'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)

{ 
    "keys": ["ctrl+shift+o"], 
    "command": "htmlprettify" 
}

{
    "browser": "chrome64"
}

{
    "soda_classic_tabs": true,
    "theme": "Soda Light 3.sublime-theme",
}

{
    "soda_classic_tabs": true,
    "theme": "Soda Dark 3.sublime-theme",
}

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

为了帮助设计师提升基础审美。每周我们会挑选全球优秀拔尖的设计，帮你解读每个设计背后的思考！让基础审美养成设计好习惯的第一步。

------------------任何设计问题添加微信：uiskyss---------------------------

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

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

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

我有一个朋友，名字叫做 Jimmy，这的确是一个很普遍的名字。当我认识他的时候，他正供职于一家名为 Shmuckle 的公司，而他正是这家公司的设计师。和所有的设计师一样，他日思夜想梦寐以求的，是成为一名著名的设计师，而乔布斯的经历对他有着不可磨灭的影响。Jimmy 和很多设计师一样，着迷乔教主。好在 Jimmy 的崇拜并不是停留在嘴上，而是身体力行，力图在公司里面推行好的设计。在 Jimmy 的眼中，好的设计应该是直观的、创新且令人愉悦的。

当然，故事的发展如果总是一帆风顺就没有意思了。Jimmy 果然一如正常的剧情推进……他碰到障碍了。

这一次，Jimmy 正在执行一个重要的项目，这个项目的成败将会直接影响到他的职业生涯。这次的任务，他需要为他们公司的一款产品，重新设计整个控制面板。而就在这次的项目当中，Jimmy 发现他没有办法拿出一套足够优秀的解决方案。好在他还有 Plan B，那就是重新找灵感。Jimmy 开始重新播放他最喜欢的设计类的视频，阅读曾经给他启发的文章，收听其他同行所开设的播客，以期在其中找到感觉或者灵感。

可惜，灵感并没有如期而至。局面尴尬了。

就在此刻，援手到了。Sarah 是公司的资深设计师，正巧这个时候路过 Jimmy 的工位，看到了 Jimmy 纠结挣扎的样子。这是多么熟悉的场景啊，她早年入行的时候，同样经历过这样的状态，为求一好设计而痛苦不已。如今，她已经能够轻松驾驭不同的需求，足以应对复杂多变的设计项目。

「Hey Jimmy，老远就看到你正在揪头发，看样子正在构思新设计吧，瞧你这个状态，应该不太顺利吧？」

「诶，客户说让我给他们重新设计整个控制面板。他们觉得不够好使，希望新的控制面板能够更好展示信息，提升效率，最好再把几个比较明显的可访问性问题给解决一下。但是我怎么设计……都觉得不对。客户那边有不少人参与了测试，有人觉得挺棒的，有人又非常讨厌，还有一部分直接说还得接着改。现在，我觉得无能为力，不知道要怎么弄了。」Jimmy 保持着挠头的姿势，盯着屏幕说道。

「别纠结，」Sarah 微笑道：「如果一直盯着问题解决问题是常常会陷入这样的困境的，解决方案其实并不复杂，你需要从根子上来想办法。只要让整个设计方案贴合规则基础稳固了，问题就会迎刃而解了。其实，关键也就是几个基本的设计原则。」

「虽然这话经常听到，但是真的能行？」Jimmy 狐疑地盯着 Sarah，思忖两秒感觉到大姐头这是要传授秘籍，便摸过小本子，端正坐姿，准备做笔记：「那么，都有哪些原则呢？」

Sarah 拍了拍 Jimmy 的肩膀，端了杯咖啡，说道：「下楼散步吧，咱们边走边聊。」

「其实，在产品完成之后，是需要基于几个基本的原则来重新审视和调整设计的。」Sarah 喝了一口咖啡，慢慢地开始说。

保持清晰

Jimmy，如果脑子里面的思路没有梳理清晰，很难做出条理清晰的产品的。因此，在设计产品之前，先应当消除思维中的混乱，有几个事情，在设计的过程中要始终保持关注：

• 业务目标，客户的问题和需要的功能则会催生设计，而这几个因素之间是存在关系的。
• 永远不要为了好看而牺牲功能。
• 下一步要做的事情始终要是不言自明的。
• 对于最重要的内容，要借助负空间、色彩、字体、图形和其他的 UI 元素来进行突出展示的。
• 各种尺寸的文本都应该清晰可见。
• 图标应该而锐利。
• 除此之外，要让设计保持微妙而恰到好处。
• 通过设计，你的用户应该本能的知道他在哪里，以及该做什么。

产品的外观最终都是在清晰的设计（或者不够清晰的设计）之下的副产物。清晰的设计意图，最终会转化为清晰的产品设计。——Massimo Vignelli

「我记得 Massimo Vignelli 在他的《The Vignelli Canon》中写道，一个混乱而复杂的产品始终是源自于制造者本身的混乱，说明这个人本身内心深处心态复杂而想法混乱。」Sarah 说道。Jimmy 此刻若有所思。

可操作的界面

「接下来的这一点也同样很重要。我们设计的数字产品必须清晰，也要专注于当前的任务，一个交互性强、可操作性优秀的 APP 才是用户所需要的，而要做到这一点，屏幕上的内容应当始终是的，并且始终保持较高的相关性。与此同时，APP  也应当作为用户意图的延伸。如果用户打开了你的 APP，想要解决某个问题，执行某个任务，而你的 APP 做不到这一点，那么情况就很糟糕了。」Sarah 说道。

她停了几秒钟，梳理了一下思路，继续说道：「你看，我们所做的一切都是为了确保我们的方案，能够在正确的环境中，面对着对的用户，解决亟需解决的问题。当然，我们要经历很多次的迭代，才能靠近这一目标。」

主观的愿景

「许多设计师和开发者都在说，APP 应该灵活，应该满足所有客户的需求。好吧，Jimmy，这些说法都是胡说八道的。但是有一个说法很真实，也需要你时刻谨记：试图取悦每个人只会带来无尽的压力和痛苦，让你沮丧，失去资源。所以，不要害怕失去一部分用户，真正需要担心的是失去愿景和远见。」

「一个伟大的而足够优秀的数字产品，必须始终清楚它到底是服务于谁的。只有牢记真正的用户，明白他们的需求，才能开发出真正有效的解决方案。最好的数字产品当中，都是藏着愿景的。」Sarah 和 Jimmy 走到了大楼的窗户附近，看着外面来往的人流，Jimmy 忍不住问到：「那其他的用户呢？」Sarah 笑着回答：「当我们满足目前的目标之后，才能顾的上其他的人。我们的目标用户才是核心，其他的人不喜欢，和我们的愿景不匹配，也不用操心。市场上会有其他的应用或者服务能够满足他们，让他们高兴，而我们总是只能身处一个阵营，你不可能什么都拥有。」Sarah 笑着回答 Jimmy 的疑问。

当人们寻找软件和服务的时候，他们要的并不是功能，他们要的是解决问题的方法，一个和自己相匹配的愿景。——37Signals《Getting Real》

反馈系统

下一个原则，也是一个很重要的注意事项，那就是反馈。反馈能够帮用户确定操作是否执行了，明白结果是否发生，让用户明白当前的情况：

• 交互发生时，相应的交互元素应该被凸显出来
• 进度指示控件应该持续地显示当前状态
• 动画和声音的加入有助于用户理解交互的状态和结果

「我想你应该知道，即使技术如此的进步，人类本身的生物性决定了我们依然是依靠反馈来确知互动的结果和状态的。我们的身体（视觉或者触感）需要感受到反馈，再像大脑发出信号，而虚拟的界面背后到底在发生什么，需要全面的交互设计传递出来，只有这样用户才不会费劲巴拉地去思考之前的点击或者滑动交互是否操作成功了。反馈给用户的信息也应该是能够被轻松理解的，用户不应该在这个事情上再费劲去思考了。因此，你手边应该有关于心理学、行为学这类能够揭示人类思考的图书，因为它们能够帮你提升技能。」Sarah 喝了一口咖啡，润了润嗓子，带着 Jimmy 又溜达上楼，回到了办公室。

善用隐喻

「隐喻——我这里说的并不是文学中的隐喻，」Sarah 又提到了一个看似无用但是经常被说起的概念：「你看，UI界面中的设计元素和交互方式和我们的现实生活中的元素和交互方式是如此的相似，这就是借用隐喻将我们的熟悉的元素和交互都投射到虚拟的数字产品当中。这样一来，用户会更快地学会和理解。」

「正是因为隐喻的存在，现实的经验和虚拟的交互产生了关联，用户交互因此而更加自然地发生。视线随着被精心设计的布局而游移到重点上，用户会下意识地点击被高亮显示的、和现实按钮差不多的交互控件，他们还会下意识地在虚拟的屏幕上滑动，在界面之前自然游走。因此，你有必要了解你的核心用户每天都在使用哪些 APP，他们都是如何交互的。这有助于你吸收经验，消除不良的体验，创造舒适的交互，降低学习的压力，更好地转化。」Sarah 一边说着，一边下意识地模拟着交互并解释道。

内容的一致性

「接下来我们还是用案例来说明一下，会更容易理解。」说着 Sarah 坐到椅子上，并且打开电脑屏幕，说道：「比如我们要做一个日历，你认为它应该是网格，还是做成列表？」Jimmy 挠头想了一下，迟疑道：「恩……我们应该坚持使用网格的样式。它更加紧凑也更加有条理，我说的对吗？」

「其实这取决于用户的主要目标是什么。如果这个日历元素是出现在报告文档当中，应该是用网格的样式还是列表的样式呢？一样的，这要看情况。我们是否要在每个应用中都使用全局导航？同样是需要基于上下文情况来决定的。一致的设计不止是表面样式上的一致，还需要从需求、内容、用户使用场景和体验上来保持一致性。如果在特定的情况下，独特的设计能够带来更大的价值，那么这是有意义的，这种特殊情况下不同是有必要的。」Sarah 细心地为 Jimmy 解释道。

良好的设计，应该是特定语境经过评估后定制的副产物，而不是脱离使用场景而凭空创造出来的，否则，无论多么炫酷都是不合时宜的。——Massimo Vignelli

防御性设计

「最后要说的，是防御性设计。」Sarah 转身对着 Jimmy，然后说道最后一个规则。

「防御性设计？什么东西？」Jimmy 感觉今天学到了不少，最后这个原则也被他写到小本子上了。「这个啊，也就是大家常说的直觉性设计。」Sarah 微微一笑。

「我知道！乔布斯以前就经常说这个概念！」Jimmy 终于找到一个他足够熟悉的概念，兴奋不已。

「可是，你真的知道什么是直觉性的设计么？」Sarah 看着兴奋的 Jimmy 卖了个关子。

「预测用户行为？然后在用户要执行下一个操作之前帮他解决需求？」Jimmy 狐疑地问道。

「是也不是。它并不是让你去预测用户的行为，防御性设计是为了避免出错。无论你如何谨慎地去做设计，总会有错误发生，无论你做过多少调研，你计划有多么妥帖，你的产品总会需要一个备用方案来规避问题。」Sarah 说道：「防御性设计，是让你找到可能会出现的问题。」

相信我，你的产品如果给了用户负面的体验，他们绝对不会忘记。

「我还是没明白你的意思……」Jimmy 习惯性地挠头。Sarah 耐心地开始解释：「以开车为例来说明这个事儿吧。当你开车的时候，总会尽量避免道路上各种可能出现的危险情况，比如鲁莽驾驶的大货车，三心二意横穿马路的行人，懵懂无知在路边打闹的儿童，甚至野外窜上马路的野鹿，等等。同样的，作为设计师，我们需要预料到可能会出现的问题，以及始终保持专注来修复这些问题。这样我们就不会破坏整个用户体验。我们要有良好的防御性的设计意识，维持住体验，改善体验。」Sarah 说到这个地方的时候，Jimmy 感觉她身上散发着某种光芒。

然后 Sarah 起身，带着 Jimmy 回到他的工位。「怎么样，这些东西你都记下来了吗？」Sarah 打趣地歪着头看着低着头还在琢磨的 Jimmy，如同大男孩一样的 Jimmy 惊讶地抬头问道：「什么意思？这就是全部嘛？难道只有这些？」

Sarah 呼出一口气，微笑着对 Jimmy 说道：「好了好了，设计原则、规则、规范、技巧有太多，可是对于每个人，每个公司而言，都有属于自己的一套方法和策略。你可以尽兴地去探索，但是即使你不知道全部，也可以借助你所熟知的几个原则和策略，拿出足够优秀的设计。我把我最熟悉的、掌握地最娴熟、体会最深刻的几个原则分享给你，它们足以帮你开启一条走向好设计的道路，我觉得你要是真的体会到了，就已经能够拿出比别人更好的东西了。其他的设计原则，只要你有耐心和时间，还可以继续探索。该工作啦。」

尾声

就像 Sarah 说的，设计原则太多了，谁又规定死了具体有几条呢？每个人心中的哈姆雷特都不一样，每个人眼里的哈利波特又何尝是一样的呢？

最重要的问题在于，许多人知道原则，却并不会在设计项目当中运用它们。洞悉每个设计项目当中的重点，了解客户的需求，明白首要的设计目标，在产品和用户之间，找到平衡点，用心地思考，利用好设计原则这一利器。

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

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

慈心积善融学习，技术愿为有情学。善心速造多好事，前人栽树后乘凉。我今于此写经验，愿见文者得启发。

<?xml version="1.0" encoding="utf-8"?> <cultures> <taoists count="100" comment="good-t"> <book> <name>道德经</name> <author>老子</author> </book> <book> <name>文始真经</name> <author>关尹子</author> </book> </taoists> <buddhism count="321" comment="good-d"> <book> <name>金刚经</name> <author>释迦牟尼</author> </book> <book> <name>地藏菩萨本愿经</name> <author>地藏</author> </book> </buddhism> </cultures>
    


        

            1
        

        

            2
        

        

            3
        

        

            4
        

        

            5
        

        

            6
        

        

            7
        

        

            8
        

        

            9
        

        

            10
        

        

            11
        

        

            12
        

        

            13
        

        

            14
        

        

            15
        

        

            16
        

        

            17
        

        

            18
        

        

            19
        

        

            20
        

        

            21
        

        

            22
        

        

            23
        

    

<?xml version="1.0" encoding="utf-8"?> <cultures> <taoists count="100 comment="good-t" <book> <name>道德经</name> <author>老子</author> </book> <book> <na>文始真经</name> <author>关尹子</author> </book> </taoists> <buddhism count="321" comment="good-d"> <book> <name>金刚经</name> <author>释迦牟尼</author> </book> <book> <name>地藏菩萨本愿经</name> <author>地藏</author> </book> </buddhism> </cultures>
    


        

            1
        

        

            2
        

        

            3
        

        

            4
        

        

            5
        

        

            6
        

        

            7
        

        

            8
        

        

            9
        

        

            10
        

        

            11
        

        

            12
        

        

            13
        

        

            14
        

        

            15
        

        

            16
        

        

            17
        

        

            18
        

        

            19
        

        

            20
        

        

            21
        

        

            22
        

        

            23
        

    

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

一、项目背景

手机充值作为一个日活数千万的工具型产品，亲密充作为多号码充值的首要场景，对话费充值的生态与成长起到至关重要的作用。未来，在新用户增速放缓环境下，发挥亲密充功能沉淀的用户充值关系，将成为我们新的探索方向。

所以此次在父亲节进行发力，制作一款可以对手机充值亲密充有拉动作用的 H5 品宣。

相对于每年母亲节的声势浩大，但是一到父亲节世界就都安静了。这是机会也是挑战，机会在于因为父亲节平均声量较小，所以产出较容易被大家所看到，同时也面临着关注度不够的客观情况的挑战。

二、创意来源

这个用户的状态反映了许多人父亲节送礼物的常态，送来送去好像什么都不合适，最终还是充了一笔话费，这恰好也是此次话费充值父亲节品宣的落脚点。此次品宣的雏形就初现了，一个在老家缺少关心的空巢父亲与一个在外地工作费尽心思送礼物的儿子，他们之间发生的火花。

但若单单如此，则略显单调，如何增加趣味性与可玩性呢？

• 趣味性：配音的趣味性来源于剧本的趣味性与声音的趣味性，剧本的趣味性可以在剧本中增加各种各样的梗，声音的趣味性可以联想到各地的方言。那么选择哪些地区的方言显得尤为重要，为了覆盖更多的地区，我们选择了中国较有特色且差异较大的地区的方言，分别是江浙沪、两广、陕西、东北、中原、四川，这些地区的方言既有识别性，又有一定的喜剧效果。
• 可玩性：在采用选择题的互动方式，模拟儿子为父亲选择礼物，让用户深度参与其中。

确定了主题后开始具体着手项目具体制作，由于第一次制作剧情动画、配音与答题三者相结合的故事性交互 H5，下面会每一步说明，我们在这些地方都是怎么做的。

三、剧本编写

剧本是故事性交互 H5 的重中之重，也是其对用户是否吸引的关键因素，若缺乏吸引力用户则无法到达最后看到品牌曝光，一个剧本最基本的需要一个通顺且合理的剧情，更高的要求是要充分利用用户好奇心，获取用户注意力，完成品牌与功能的曝光。按照写文章的方法，一个饱满的剧本需要有三部分组成。

• 虎头：通过一个最常见也是最能引起共鸣的场景——也就是爸爸给儿子打电话，引出剧情；
• 猪肚：用搞笑与接地气的父子对话持续吸引用户，同时选择题带给用户参与感；
• 凤尾：通过剧情引导出，一个父亲的日常状态，对孩子的要求无非是想要日常的关心已足够，最后引出品宣 slogan 点题，同时曝光亲密充入口，引导绑定与充值。

四、剧本配音

具体的配音工作交给配音外包商就好，我们要做的就是对最后效果的把控。

• 配音剧本：需要提前写好剧本，方便演员配音，同时增加可控性，六种方言需要找相应的方言同学在普通话剧本的基础上一一编写成方言剧本；
• 音效剧本：BGM 风格、按键音、铃声音效等等，可以用表格列出交予外包商也方便后期核对；
• 挑选演员：有些年轻配音演员可以配出老年音色，但是整体语感不及年龄较大的配音演员来的自然和谐。

五、配音与动画相匹配

首先要了解匹配原理，为了节省开发时间与资源，六种方言动画全部采用同一种帧数与时间，所以需要匹配每一句的配音时长。

配音时长可以通过三种方法控制：

• 在剧本阶段，控制每句话的内容与字数保持大体一致。
• 在配音阶段，备注配音演员进行时长控制。
• 在后期阶段，通过后期软件的加减速对每句话时长进行匹配。

六、人物风格设定

确定好玩法流程后，进入视觉阶段，这次整体的设定是不同区域的爸爸形象，要表现出各区域的特色，结合好配音，才会达到比较理想的效果。

在人物的刻画上，视觉是有很多表现形式的，但会根据整体方案的气质去选择合适的视觉呈现。由于这次的方案会有人物配音，为了使整体效果更自然，更接近用户的想象，加上对产品用户群的定位，我们摒弃了低龄卡通的设计方向，在人物设计上选择了写实的设计风格，更符合用户心理对父亲这个严肃、严谨的心理印象。

结合对话的内容以及动画的表现形式，在细节刻画颜色搭配上增加复古的味道，使人物更活泼不呆板将字体图形化设计，结合中国元素，提炼各省市的简称加上有特点的人物设计，能更快速的帮用户选择以及增加亲切感，以下就是各区域的爸爸形象设计，有没有一款打动你呀。

七、主视觉风格设定

人物的设定出来后，主页面的视觉风格就比较好把控了，复古的老式画报风格，是一个很好的选择～既能突出人物形象，又能把内容很好的划分整合。

板式设定：

主页面整体视觉风格确立以及版式布局，画面主体还是以人物形象为主，配合动画让整个画面更有动感，强调打电话的动作，更贴近产品。

在动画的设计上，也是遇到了很多困难，因为6个区域人物分为独白、对话、听电话3个部分的动画，而为了防止图片过多文件过大每个动作都要控制在6/7帧的范围内，又要保证形态的自然有趣，又要能对上字幕配音。

这里的难度非常非常的大，需要每个步骤都配合的刚刚好，非常感谢开发哥哥耐心打磨，最后的呈现还是很满意的。

动画效果，页面过多就选一部分进行展示：

八、活动效果

最后整体数据效果还是比较理想，用户完成全部选项占比整体 UV 34.89%，说明 H5 内容对用户吸引度较高，能够用内容本身吸引用户到达广告落地页，完成运营目标。也带来较高的亲密充数据，相较平时有显著提升，给亲密充带来绑定与充值。

九、结语

第一次制作配音动画相关的运营 H5，制作初期既期待又紧张，中间也遇到了几次看似无法逾越的难题，最终呈现结果也还较为满意。

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