上次的文章中描述了 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 载入的。所以不知道会不会消耗太多的内存。这里可能是一个可以优化的点。

对事件/活动的修改

在记录完一个活动/事件之后,需要记录做了什么事情,也就是一个事件/活动的主题,还需要给一个事件添加标签,以便之后做统计。本来我想的是,使用 ListViewContext 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 设计的更多相关文章

  1. DailyTick 开发实录 —— 开始

    2009 年我读了李笑来老师的<把时间当朋友>,知识了柳比歇夫的时间记录法.当时激动坏了,马上动手实践起来.一开始的时候,是用一个小本子,走到哪儿都带着.完成一件事,就记录一下花费的时间. ...

  2. MMORPG大型游戏设计与开发(UI SYSTEM SHOW)

    接下来一段时间,这些文件可能不再更新,期间我会学习和掌握一些前端知识.虽然我非常欣赏剑侠网络版叁和九阴真经的画面,但是那是一个庞大的游戏引擎,一般人是无法窥伺的,除非你是天才而且要拥有机器毫无中断的毅 ...

  3. 【Android UI设计与开发】第05期:引导界面(五)实现应用程序只启动一次引导界面

    [Android UI设计与开发]第05期:引导界面(五)实现应用程序只启动一次引导界面 jingqing 发表于 2013-7-11 14:42:02 浏览(229501) 这篇文章算是对整个引导界 ...

  4. 【转】【Android UI设计与开发】之详解ActionBar的使用,androidactionbar

    原文网址:http://www.bkjia.com/Androidjc/895966.html [Android UI设计与开发]之详解ActionBar的使用,androidactionbar 详解 ...

  5. 【Android UI设计与开发】第02期:引导界面(二)使用ViewPager实现欢迎引导页面

    本系列文章都会以一个程序的实例开发为主线来进行讲解,以求达到一个循序渐进的学习效果,这样更能加深大家对于程序为什么要这样写的用意,理论加上实际的应用才能达到事半功倍的效果,不是吗? 最下方有源码的下载 ...

  6. 【Android UI设计与开发】第01期:引导界面(一)ViewPager介绍和使用详解

    做Android开发加起来差不多也有一年多的时间了,总是想写点自己在开发中的心得体会与大家一起交流分享.共同进步,刚开始写也不知该如何下手,仔细想了一下,既然是刚开始写,那就从一个软件给人最直观的感受 ...

  7. APP开发中,如何从UI设计上提升APP用户体验

    设计中有很多细微的东西要注意,就如UI设计中,元素的统一性,图标风格.段落的排版等等,只有能注意这些细节,你的 APP UI 才算合格. 干货君总结了17个提升用户体验的 UI 设计小技巧,也是我们日 ...

  8. 开发辅助 | 前端开发工程师对 UI设计、交互设计的认知

    1.UI 用户界面 UI:User Interfase 用户界面 UID:User Interfase Designer 用户界面设计师,多指移动 app 的界面设计: 2.一个合格的 UI 设计师, ...

  9. 移动开发-UI设计

        UI:手机的用户界面 UI物理版:手机实际的屏幕像素 UI设计版:我们截屏的手机界面在ps中去量,发现的尺寸 UI放大版:手机的尺寸等比放大1.5倍得出的分辨率   响应式布局 原由:窗体缩小 ...

随机推荐

  1. download plugin update site for offline installation

    Reference Eclipse Launcher Running update manager from command line   好多次为window下的eclipse不能拿到linux下直 ...

  2. egret dragonbones部件替换产生位移的解决方案

    原理:使用Armature.getSlot("urpart").display.texture去替换骨骼纹理即可需要:1 骨骼动画导出的时候不要裁剪部件的透明区域,在导出设置里面设 ...

  3. 改变nova-compute默认位置的方法

    # cat /etc/nova/nova.conf |grep -n state_path|grep -v '#'314:state_path=/var/lib/nova

  4. PAT (Advanced Level) 1079. Total Sales of Supply Chain (25)

    树的遍历. #include<cstdio> #include<cstring> #include<cmath> #include<vector> #i ...

  5. 丢手帕问题as3版

    N个孩子围成一圈报数,报到M的退出,剩下的再从1继续报数,报到M的再退出,一直持续到只剩一个人,问剩下的是哪个? package { import flash.display.Sprite; publ ...

  6. Nutz 第一个Demo

    Nut 是什么 我这就不多解释 知道是个javaweb框架 如想仔细了解请移步管网 http://nutzam.com/ 一.项目结构(直接看图 ) 需要注意的是 src和conf 都为源码包 con ...

  7. Vue.js实例

    构造器 每个 Vue.js 应用都是通过构造函数 Vue 创建一个 Vue 的根实例 启动的: var vm = new Vue({ // 选项 })

  8. LPC2478中断控制器以及串口详解

    LPC2478的中断系统 LPC2478使用的是ARM PrimeCell向量中断控制器,一共支持32个中断向量,处于AHB空间便于系统快速访问,在中断向量的硬件优先级上还有一层可以用户自己设计的软件 ...

  9. 菊花加载第三方--MBprogressHUD

    上次说到了网络请求AFN,那么我们在网络请求的时候,等待期间,为了让用户不认为是卡死或程序出错,一般都会放一个菊花加载,系统有一个菊花加载类叫UIProgressHUD.但是我今天要说的是一个替代它的 ...

  10. iOS开发之圆角指定 分类: ios技术 2015-05-25 16:26 191人阅读 评论(0) 收藏

    如果需要将UIView的4个角全部都为圆角,做法相当简单,只需设置其Layer的cornerRadius属性即可(项目需要使用QuartzCore框架).而若要指定某几个角(小于4)为圆角而别的不变时 ...