美文网首页产品
【模板】社交网站原型模板分享

【模板】社交网站原型模板分享

作者: 摹客 | 来源:发表于2020-05-25 18:16 被阅读0次

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

    相关文章

      网友评论

        本文标题:【模板】社交网站原型模板分享

        本文链接:https://www.haomeiwen.com/subject/ficuahtx.html