随着ins、Facebook等社交产品在各类人群中迅速普及，社交网站在人们的日常生活中占据的使用比重也越来越大。那么如何设计一款社交网站呢？今天我们一起来聊聊这个话题。

社交网站原型设计思路

社交网站的内容通常由用户主导，如果想要设计一个新的社交网站， 如何找到并吸引自己的用户群，是网站设计及建设初期最需要考虑的因素之一。

目前，Facebook等社交网站已经相当成熟，用户的操作习惯也已经养成，因此我们在进行网站原型设计时，可以参考这些已经成熟的社交网站，来降低用户的使用门槛。同时，我们需要考虑以下几点，来根据用户的喜好和需求完成网站的设计：

1.产品的核心功能是什么？

2.什么样的用户会使用你的产品？

3.竞品分析，竞争对手的用户满意度是怎样的？有没有值得改进的地方？如何做出区别？

4.产品的商业模式是怎样的？

确认好产品需求、形态以及商业模式后，我们就可以开始着手设计。在搭建产品原型时，我们需要围绕以下两点来进行：

• 如何围绕产品的核心功能点，做好用户体验？

• 在保证良好的用户体验的基础上，如何排版更加合理？

以下是小摹使用Mockplus经典版制作的一款社交网站原型，希望可以作为参考。

Mockplus经典版原型分享——社交网站

这套社交网站原型，在功能上参考了Facebook、人人网等SNS网站，主色调也仍采用了稳重可信的蓝色。该原型属于中高保真原型，包含登录注册、首页、个人主页三个部分，共计20个页面，比较完整地展示了SNS网站的一些典型功能。

首先我们一起来看看该原型的界面总览和交互效果演示。

在线预览地址：https://run.mockplus.cn/BVRZcRaBlFvZFvgo/index.html

接下来让我们一起来看看，在这款原型中，使用到了哪些原型设计技巧吧~

Mockplus经典版原型设计实用技巧

1.使用信息填充功能呈现网站真实效果

在社交网站中，图片信息占据了较大的版面比例。在设计网站原型时，如果使用单一的图片或不使用图片，原型很难呈现出理想的效果。使用Mockplus经典版的自动填充功能，可以一键填充图片及姓名等信息。

① 首先，我们需要使用图片或单行文字等组件，完成单条信息的设计；

② 选中刚刚设计好的组件，点击主工具栏上的“转为格子”图标，或右键选择“转为格子”，即可生成格子；

③ 拉动格子，格子的内容会自动生成，可拖动格子间的线条，来调整整体布局的大小和间距；

④ 点击左上角的“数据填充”功能，即可快速完成信息填充。

信息填充功能详细教程：https://help.mockplus.cn/p/136#6

2.设置占位提示引导用户

在登录注册等页面，我们常需要引导用户输入相关信息。但除了账号名、昵称等标签名称，表单填写格式往往无法再额外展示。如何引导用户正确填写相关信息呢？我们可以设置占位符内嵌重要信息，来引导用户进行相关操作。在Mockplus经典版中，输入框占位符设置十分简单，只需要在输入框组件的属性面板中，设置占位文本即可。呈现效果如下：

输入框组件详细教程：https://help.mockplus.cn/p/129#9

3.弹出面板与内容发布功能的结合

在首页，点击“分享新鲜事”版块，会弹出发布内容的弹窗。使用弹出面板组件，可以完成这一功能的设计。具体设置方式如下：

① 从交互组件栏中拖一个弹出面板组件到工作区，双击进入编辑页面；

② 在编辑页面设置好内容发布区的格式，双击空白区域退出编辑模式；

③ 设置好弹出面板触发方式，即可实现如下效果。

弹出面板组件详细教程：https://help.mockplus.cn/p/130#4

4.标签组的巧妙应用

标签组是Mockplus经典版自带交互效果的特色复合组件之一，可以通过在标签组组件的属性面板中，设置指示器、分隔线、选中状态等，快速完成导航栏的设计，也可以搭配列表等组件，呈现更加丰富的交互效果。

另外，搭配内容面板等组件，可以在保持整体布局不被改变的基础上，快速完成模块内容的切换。如下图中个人主页的设计：

此外，标签组搭配内容面板，还可以呈现更加丰富的交互效果。

5.使用内容面板搭建设置版块

在社交网站的设置版块，除了设置的内容不同，页面的整体框架无需改变。设计这样的页面，我们可以使用Mockplus经典版的内容面板组件来完成。

① 分别在新的页面中设计好姓名修改、联系方式修改、身份验证、密码修改四个模块页面；

② 在设置页面添加内容面板组件，使用内容面板上方的工具栏，将内容面板设置为四层；

③ 选中内容层，拖拽右边的连接点，将刚刚设计好的四个页面与四层内容面板进行连接，相关内容即可被加载到对应内容层；

④ 使用选项卡组件或上一点中提到的标签组组件，设置模块名称，分别与对应的内容层设置交互，即可实现内容切换的效果。

一起来看看最终实现的效果吧~

内容面板视频教程：https://help.mockplus.cn/p/170

在设计社交网站原型时，应充分考虑网站的用户特点和用户体验。在交互设计方面，需要做到功能全面，操作便捷；在页面布局方面，需要突出重点功能，保持简洁大方，同时需要做出差异化，满足个性化需求。

最后，小摹特意为大家准备了这款原型模板的源文件，方便进行细致的研究和学习。 以上就是小摹为大家分享的使用Mockplus经典版制作社交网站的技巧，Mockplus经典版是一款更快更简单的原型设计工具，欢迎下载使用。

点击这里，在线预览原型：https://run.mockplus.cn/ZTuUlJRL9dtFE3CJ/index.html

原型模板下载：社交网站模板.mp

图片集下载：社交网站图片集.zip

Enjoy it!

Powered by Froala Editor