教程 > Mockplus经典版 > Web例子项目 > 社交类 - Facebook

社交类 - Facebook

随着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!

下一章节 旅游类 - Gogobot