DailyTick 开发实录 —— UI 设计
上次的文章中描述了 DailyTick 的设计理念。经过两周左右的设计和开发,现在 DailyTick 的主要 UI 已经完成了原型的设计和初步的实现。既然是原型,当然看起来就有点粗糙。
主 UI
主 UI 是使用一个 TabbedView
实现的。一个用来记录,一个用来统计。当然,最终的完成版应该至少有 3 个 Tab,因为还需要有一个“设置”的 Tab。现在因为我还没想到有什么需要设置的,暂时没有写。在“记录”这个 tab 里,有两个组件:一个 ListView
和一个 NControl
写成的圆形按钮。使用的时候,只需要点一下下面那个圆形按钮,就可以形成一条记录。当然,为了防止误点,我这里设置了一个限制,就是两次点击之间需要大于 1 分钟。这带来一个麻烦就是:你不能记录小于 1 分钟的事件。比如你想看看自己每天做时间记录的过程消耗了多长时间,这个暂时办不到。
上面这个列表,其实我还是有点担心的:如果这个软件可以被使用 10 年(应该不太可能,因为那个时候,应该会有比手机更好用的设备),按照我现在记录的情况来看,一天大概有 30 条左右的记录,一年是 365 * 30 = 10950 条,10 年就是 10 万条,如果每天记录得细点,可能就有几十万条,那会不会崩呢?虽然可以使用 Cell 的重用机制,不过也还是有点担心。当然,比起 ListView
的性能问题,我更担心的是内存够不够用。因为左边那个时间显示,并不是一个 Label。因为我的 UI 设计水平太差,所以我使用了 ListView
内置的 ImageCell
,左边那个是一个图片。这个图片是在内存里绘制出来,再使用 ImageSource.FromStream
载入的。所以不知道会不会消耗太多的内存。这里可能是一个可以优化的点。
对事件/活动的修改
在记录完一个活动/事件之后,需要记录做了什么事情,也就是一个事件/活动的主题,还需要给一个事件添加标签,以便之后做统计。本来我想的是,使用 ListView
的 Context Menu
来实现的,但这东西有个问题,就是和 TabbedView
的左右滑动有冲突,所以怎么也不能显示 Context Menu
。我只好放弃这个方案,使用了 DisplayActionSheet
。结果,在 Android 上,就成了这个样子。不是很美观。当然,做为原型,也就先这样好了。
虽然这里写了5个操作,但我现在只实现了 1.5 个。这个 1 就是:
好吧,我知道这个也有点丑(这也叫有点……)。功能很简单,就是一个文本的编辑,然后再更新回原来的列表里。另外的 0.5 个,是编辑 tag 的 page,这个只是完成了一个样子,但我感觉并不是很好用,可能在后面还会再改。
按照我现在的设想,DailyTick 不会有其它时间记录软件那种编辑一个事件的开始时间、结束时间的功能,我提供的是把一个时间段进行拆分,或者把两个时间段合并。这样保证了一天的时间线是完整的,不存在“无记录时间”这个东西。因为按照我对这个软件的设计哲学,人是无法控制时间的,不管你怎么使用自己的时间,时间本身都会不受控制的流走。所以,我们能做的,只是记录自己在某一段时间里做了什么。这里可能有一个问题,需要在未来解决一下,就是在什么地方体现我一天的日程安排,也就是 TODO 要记录在哪儿的问题。
这里,时间段拆分是有一个 UI 的,我写了一个草稿,但没有放上来。对于合并操作,可能只有确认的提示,不会有单独的 UI。
统计 UI
统计页里,只有一个 WebView
,当然是一个定制的 WebView
,因为我需要在 C# 和 JS 之间传数据。这个 HybridWebView
的基础实现已经实现出来了,不过要怎么传递数据,还没有想法。按照现在的初步设想,应该会使用 highchart.js 和 jQuery 来完成统计页的实现(并没有什么复杂交互,不想上 MVVM 的东西了)。主要就是报表和饼图了。虽然我觉得饼图其实意义有限,直接一个 table 可以搞定很多工作,但如果这个工具被扩散到非理科出身的人那里(只是幻想一下),那么统计图就变成必不可少的东西了。
当然,这一切都还只是原型,如果你有什么对 UI 或者 UE 上的看法,欢迎在下面留言,一起讨论。也欢迎 star & fork 我的项目:https://github.com/holmescn/DailyTick
DailyTick 开发实录 —— UI 设计的更多相关文章
- DailyTick 开发实录 —— 开始
2009 年我读了李笑来老师的<把时间当朋友>,知识了柳比歇夫的时间记录法.当时激动坏了,马上动手实践起来.一开始的时候,是用一个小本子,走到哪儿都带着.完成一件事,就记录一下花费的时间. ...
- MMORPG大型游戏设计与开发(UI SYSTEM SHOW)
接下来一段时间,这些文件可能不再更新,期间我会学习和掌握一些前端知识.虽然我非常欣赏剑侠网络版叁和九阴真经的画面,但是那是一个庞大的游戏引擎,一般人是无法窥伺的,除非你是天才而且要拥有机器毫无中断的毅 ...
- 【Android UI设计与开发】第05期:引导界面(五)实现应用程序只启动一次引导界面
[Android UI设计与开发]第05期:引导界面(五)实现应用程序只启动一次引导界面 jingqing 发表于 2013-7-11 14:42:02 浏览(229501) 这篇文章算是对整个引导界 ...
- 【转】【Android UI设计与开发】之详解ActionBar的使用,androidactionbar
原文网址:http://www.bkjia.com/Androidjc/895966.html [Android UI设计与开发]之详解ActionBar的使用,androidactionbar 详解 ...
- 【Android UI设计与开发】第02期:引导界面(二)使用ViewPager实现欢迎引导页面
本系列文章都会以一个程序的实例开发为主线来进行讲解,以求达到一个循序渐进的学习效果,这样更能加深大家对于程序为什么要这样写的用意,理论加上实际的应用才能达到事半功倍的效果,不是吗? 最下方有源码的下载 ...
- 【Android UI设计与开发】第01期:引导界面(一)ViewPager介绍和使用详解
做Android开发加起来差不多也有一年多的时间了,总是想写点自己在开发中的心得体会与大家一起交流分享.共同进步,刚开始写也不知该如何下手,仔细想了一下,既然是刚开始写,那就从一个软件给人最直观的感受 ...
- APP开发中,如何从UI设计上提升APP用户体验
设计中有很多细微的东西要注意,就如UI设计中,元素的统一性,图标风格.段落的排版等等,只有能注意这些细节,你的 APP UI 才算合格. 干货君总结了17个提升用户体验的 UI 设计小技巧,也是我们日 ...
- 开发辅助 | 前端开发工程师对 UI设计、交互设计的认知
1.UI 用户界面 UI:User Interfase 用户界面 UID:User Interfase Designer 用户界面设计师,多指移动 app 的界面设计: 2.一个合格的 UI 设计师, ...
- 移动开发-UI设计
UI:手机的用户界面 UI物理版:手机实际的屏幕像素 UI设计版:我们截屏的手机界面在ps中去量,发现的尺寸 UI放大版:手机的尺寸等比放大1.5倍得出的分辨率 响应式布局 原由:窗体缩小 ...
随机推荐
- git log 查看 当前分支的 提交历史
git log 查看 当前分支的 提交历史 在提交了若干更新之后,想回顾下提交历史,可以使用 git log 命令查看 默认不用任何参数的话,git log 会按提交时间列出所有的更新,最近的更新排 ...
- mariadb cache
Since MariaDB Galera cluster versions 5.5.40 and 10.0.14 you can use the query cache. Earlier versio ...
- PDF 补丁丁 0.5 正式版发布
经过了两年的测试,新版本的 PDF 补丁丁已经比较稳定了.在农历新年前发布这个 0.5 版,作为正式稳定版吧. 新的 PDF 补丁丁比旧的 0.3 版增加了许多功能: PDF 可视化编辑文档书签,可从 ...
- xCode中如何安装旧的模拟器
http://blog.csdn.net/cmengzhongren/article/details/50414493 这里给出如何把老版本的SDK加入到新的Xcode中的方法.其实很简单,就是将老版 ...
- 20、手把手教你Extjs5(二十)模块Grid的多列表方案
对于有很多字段的模块在一个grid中显示所有的字段,会显得很臃肿,对于不同的用户其侧重的字段类型也不尽相同,因此就有必要为Grid的列表设计多个方案.在这个自定义系统进行设计的时候,我已经将这部分内容 ...
- 利用智能手机(Android)追踪一块磁铁(转)
利用智能手机(Android)追踪一块磁铁(一) 利用智能手机(Android)追踪一块磁铁(二) 利用智能手机(Android)追踪一块磁铁(三)
- BZOJ 3101: N皇后
3101: N皇后 Time Limit: 10 Sec Memory Limit: 128 MBSec Special JudgeSubmit: 178 Solved: 94[Submit][ ...
- Json填充到Form中
很多框架都支持将json解释到grid的或者form中,个人手痒,自己写了一个.所用到的内容主要是javascript对json的遍历.如: for (var key in json) { alert ...
- Uber广州车主官网本周将暂关闭
Uber广州车主官网本周将暂关闭 http://news.southcn.com/g/2015-05/04/content_123509931.htm
- 2)Javascript设计模式:Singleton模式
Singleton模式 var User = (function() { var instance; function _User(){} _User.prototype.say = function ...