Grid Diary是一款非常受文艺青年喜爱的记录应用,它设计简单,内容却非常丰富。它不再是单调的文字记录,界面的设计非常与众不同,由许多格子拼凑而成,每一个格子里面还带有一个问题,十分有趣。提到格子,不得不说Mockplus最近推出的全新表格组件,真正实现了所见即所得,它不再是文字输入+算法转化的方式,而是可以直接添加表格行列,在对应表格中双击即可实现文字输入。在设计这种带表格的界面时,简单且快速。由于制作这款原型时,表格组件还未推出,因此是用线条来拼凑的,稍显吃力。之后一起来试试这个全新的表格组件吧。

先简单看看动图:

点击这里,可以立即在线预览:https://run.mockplus.cn/O3k9F3hCLCIwZ6Ki/index.html

再送上UI Flow大图:

这个原型的主要页面有:欢迎页面、引导页面、主页、编辑页面、详情页面、分享页面等。

以上设计的所有页面可以在这里下载分享

所有页面的图片集(10张),在这里下载

Enjoy it!

【附源文件】日记类App原型制作分享-Grid Diary的更多相关文章

  1. 天气类App原型制作分享-ColorfulClouds

    ColorfulClouds是一款界面精美的天气预报App,它可以准确预报降雨量.污染程度等.这款App最美的是它的首页天气插画,扁平精美,同时配上了适当的动效,把普通的天气变得漂亮有趣,十分吸引眼球 ...

  2. 健康类App原型制作分享-Mindmate

    Mindmate是一款健康类App,主要是帮助人们快速入眠,放松情绪,它拥有小清新的界面,配图全是由插画组成,生动有趣.在这款原型中,为了保持App的原有特色,将插画通过图片组件导入进来:音乐播放界面 ...

  3. 生活类App原型制作分享-AnyList

    AnyList是一款可以帮你创建购物清单,并且帮助你整理食谱的生活工具App,前面引导页采用图片+文字的方式,介绍App的用法,登录注册采用选项卡切换的方式,减少了页面切换的繁琐操作,在Mockplu ...

  4. 体育类App原型制作分享-Onefootball

    Onefootball 是一款适合于足球迷的应用,提供全球 100 多项赛事的新闻.数据.比分和直播.原型中选择“喜欢的球队”这个界面中,用到了悬浮按钮,采用的是滚动区来放置需要滚动的球队列表,然后将 ...

  5. 效率类APP原型制作分享----Timeglass

    本原型由国产Mockplus(原型工具)和iDoc(智能标注,一键切图工具)提供. 主要页面:启动页面.主页.添加事件页面.设置页面等. mp文件下载:点击这里 在线预览:http://run.moc ...

  6. 【附源文件】软件工具类Web原型制作分享 - Sketch

    Sketch是一款轻量,易用的矢量设计工具.专门为UI设计师开发,让UI设计更简单.更高效. 本原型由国产原型工具-Mockplus制作完成. 非常适合工具类产品官网使用,本模板的交互有通过使用面板组 ...

  7. 电商类web原型制作分享——美丽说【附源文件】

    美丽说是国内白领女性时尚消费品牌,精选上千家优质卖家供应商,为用户提供女装.女鞋.女包.配饰.美妆等品类的优质时尚商品. 此原型模板所用到的组件有搜索框.下拉菜单.输入框.选项卡等.交互动作有切换选项 ...

  8. 最近在研究电台类app,分享2个源码大家一起讨论

    好像去年有一阵,电台类的app特别火爆,喜马拉雅和蜻蜓FM互相还撕逼.听老罗,听好好说话,都得在电台app里,所以我想研究研究这些app.我没那么多资源,只好从app的开发架构方面去研究. 我看api ...

  9. 美食类Web原型制作分享-Taste

    Taste是国外知名的美食类网站,为人们提供丰富的美食菜单,帮助人们更好的享受美食带来的快乐.网站采用图文结合的排版方式,有固定顶部导航栏的交互功能等. 本原型由国产原型工具Mockplus和团队协作 ...

随机推荐

  1. catpcha

    生成随机验证码: # -*- coding: utf-8 -*- # @Author: huangyong # @Date: 2016-10-29 22:18:38 # @Last Modified ...

  2. angular 参考文档

    https://www.w3schools.com/angular/ 参考二: https://www.angular.cn/guide/reactive-forms

  3. PHP 生成Word文档

    <?php class word { function start() { ob_start(); echo '<html xmlns:o="urn:schemas-micros ...

  4. CSS选择器学习小结

    关于CSS选择器的问题,在实际项目中,以及一般的前端面试中会经常遇到.下面对此做一小结,梳理和巩固相关方面知识.(如有不妥之处,还望大家及时批评指正,以免误导他人) 一.选择器种类 1.id选择器(# ...

  5. Python 字符串操作,截取,长度

    1.字符串操作: 字符串长度: s = "; slen = len(s); 字符串截取: print s[:-:-] #截取,逆序隔1个取一个字符 print s[:-:-] #截取,逆序隔 ...

  6. eclipse UTF-8

    1. 你本地开发环境IDE,默认配置也是gbk,改为utf82. 检查你tomcat等服务器中间件GBK改成UTF8eclipse工作空间的编码设置成UTF-8,具体操作是:windows---pre ...

  7. sql:查询课程号'0312091006'成绩排名第5到第10之间的学生学号

    select top 6 sno from (select top 10 sno,mark from student_Coursewhere ccno='0312091006' order by ma ...

  8. HSTS详解

    1. 缘起:启用HTTPS也不够安全 有不少网站只通过HTTPS对外提供服务,但用户在访问某个网站的时候,在浏览器里却往往直接输入网站域名(例如www.example.com),而不是输入完整的URL ...

  9. springboot分环境打包(maven动态选择环境)

    分环境打包核心点:spring.profiles.active pom.xml中添加: <profiles> <profile> <id>dev</id> ...

  10. hdoj3038(带权并查集)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=3038 题意:对于给定的a1..an,通过询问下标x..y,给出a[x]+...+a[y],但给出的值可 ...