【FreeUI v0.2】简单手机界面设计分析

辛昕

【FreeUI v0.2】简单手机界面设计分析 [复制链接]

 

        前面的FreeUI v0.1虽然说不上做的多好，而且 @armink @kdy 以及我的朋友 @鸟小菜 的试用都没有什么下文反馈。      因此，因为主要是想表达界面的设计部分，我也没有太过重视界面以外的其他业务逻辑部分。
但是总体来说，目前我还是把整体的界面流程跑通了。
       在这里，俺想对各位说，如果你们对俺的v0.1感兴趣（它适用于任何类似于12864这样的单色屏并且对界面不要求图像，比较简单的应用场合），我想对你们说的是，我非常期待你们把我的FreeUI使用在你们的项目里，个人或商业的。我将竭尽我所能去配合你们修改完善它，而我也想籍此完善我自己的FreeUI。所以如果你们觉得比较难理解我的界面配置或其他使用，请给我写邮件或者回帖，我可以提供免费的帮你们定制特定界面配置表，使其可以直接配合我的FreeUI库使用。

      这个时候我卡在是补充文档还是进一步做新的v0.2 demo的抉择上。
      后来在我多次试图先写文档失败后，我觉得，其实v0.1的demo过于简单，另外，如同@armink所说，作为一个开源UI方案，我最重要的目的之一就是 通用。而我目前仅在一个屏上，还看不到什么更多的需求，目前的程序显然也处在各种可能的结构大变动里。
      这两个原因导致我还不能从v0.1看到多少文档可以写的内容。于是我就决定首先着手做v0.2，再从其中吸取调整现有框架的灵感，这样文档也可以写得更加有实用价值。


      也不说什么工作忙了，再忙有些事也得做。现在不说废话，接着这个帖子的正题。


      首先说一下这次demo的硬件配置。
      我采取了网友的建议，使用用 stm32f429i disco这块板子。在此，特别鸣谢 @此间少年 的 慷慨赠送。
具体这个屏幕的像素尺寸啥的，我都没看，因为我见过demo，它的像素点我猜测至少在320×480或者更高，已经足够表现很多东西了。此外，也摒弃了机械键盘，而采用它自带的触摸键盘。


      所以这次，对我来说，新的东西比较多。
      ——硬件上的这些变化还是一回事，主要以下分析界面的实现，会有更多我以前从来没有做过的部分，所以这个demo，我不知道要做多久。


     ......行了行了，不罗嗦了有人会投诉的，啥发帖开始分析界面。

辛昕

       其实手机界面看起来复杂繁多，但细细归类一下，却是高度统一。
       如果不考虑安卓苹果WP这些现代智能机的各种各样的应用界面，只是打电话发短信的话（这个demo不做通话功能），界面就那么几种。

      电话簿、短信编辑页面、短信发送 界面，再加一个稍微有那么点智能机风格的“桌面”。

     

     1.桌面

     所谓桌面，就是手机上用来摆放应用图标的页面。现在的安卓一般都是 矩阵形式，每个图标都是一个小方快，然后做成4×4 3×3（上一代诺基亚智能机时代）之类的。

    但是，我记得我在mp3、mp4上，见到的桌面则是另一种类型，就是像下列这种，它就像一条可以拉动的导航条。

    当时mp3、mp4为什么会这样做，最大的原因是界面的尺寸有限，不像后来的mp5和智能手机动不动就来个3.5寸什么的，尽管后来这种矩阵式的桌面成了主流，但一向非主流的辛昕却表示其实很喜欢很怀念这种风格，所以我决定用这种风格......

    当然以下这张图中，用乱七八糟的 六角形七角星只是为了简化图片，请忽略它的存在.......在正式的效果里，他应该是 短信箱 电话簿 之类的

   2.短信编辑页

      其实你已经发现了，不管是神码时代的手机，其实他都大同小异，当然，触屏机比较叼，它还有个输入键盘——话说我该怎么办..........貌似坑越来越大了.......

       可见，在这个环境里第一次出现了一个新需求——标准的通用组件。它的特征是，不特别属于某个页面，而是，都能用。所以，我将决定把它变成一个新的控件——键盘（图中忘了画出来）

   3.电话簿

       这个相对简单，它其实就是一个 listbox——其实所谓listbox是qt winform这些常见图形编程环境/库 里的一个概念。

       这样做的一个好处是，这些不会被分成一个一个的条目。而是可以集中在一起，这样整个页面的控件可以更加集中起来管理，这个时候它非常像 面向对象里 的对象。

       当然，俺这里是纯c库，俺这里是单片鸡，俺不搞那么多复杂的，俺不懂对象，也不搞对象。

       只是，采用这种思路去分析问题。

4.短信发送状态页面

   这个就没什么好说了，就一破界面，然后显示些文字，然后有个按钮神码的......

chenzhufly

前来 顶顶顶~~~~~~~~~~~

574433742

围观，，，，顶顶顶。。。。
希望 xinxin 可以做的棒棒哒。。。

lcofjp

574433742 发表于 2016-2-25 23:59
围观，，，，顶顶顶。。。。
希望 xinxin 可以做的棒棒哒。。。

我以为你又消失了呢，以为你被送快递的带走了。

574433742

lcofjp 发表于 2016-2-25 22:04
我以为你又消失了呢，以为你被送快递的带走了。

没，，只是断了一个月网而已。。。

辛昕

谢谢各位亲..........
俺明天接着发，12点了睡觉...........

574433742

辛昕 发表于 2016-2-25 21:49
其实手机界面看起来复杂繁多，但细细归类一下，却是高度统一。
       如果不考虑安卓苹果WP这些现 ...

  
难道是直接做一个 上位机，可以 拖动空间直接生成代码  

加油。。

okhxyyo

很棒！！！

辛昕

574433742 发表于 2016-2-26 00:14
难道是直接做一个 上位机，可以 拖动空间直接生成代码  

加油。。

你想太多了，不过.....也不错这想法

辛昕

lcofjp 发表于 2016-2-26 00:04
我以为你又消失了呢，以为你被送快递的带走了。

他是新来的，你别这样，欺负人家

hotsauce1861

哪些可以下载源码？ 学习一下

ljj3166

nice
发布出来玩玩啊

点子引力

强势围观 大赞楼主

armink

辛版，一直有在关注 FreeUI ，但遇到一些问题就没有继续下去了。我最近再重新试试，正好有个改型的产品（也是12864单色屏）要准备开发了，弄好了等我的分享。

白丁

前来帮顶

michael_llh

哇，更新了，期待！！

辛昕

hotsauce1861 发表于 2016-2-26 11:04
哪些可以下载源码？ 学习一下

暂时还是只有v0.1版的代码
v0.2处在设计中

辛昕

armink 发表于 2016-2-26 16:25
辛版，一直有在关注 FreeUI ，但遇到一些问题就没有继续下去了。我最近再重新试试，正好有个改型的产品（也 ...

熬，俺的意思是，希望得到乃们的反馈.......
另外就是，如果有需要，俺可以提供界面定制～～

辛昕

armink 发表于 2016-2-26 16:25
辛版，一直有在关注 FreeUI ，但遇到一些问题就没有继续下去了。我最近再重新试试，正好有个改型的产品（也 ...

毕竟提供什么样的文档，以及该做什么调整，俺自己是没感觉的。
而且，很多东西只有实际开发中才会发现问题。

别的不说光文档怎么写我就很头疼。
特别是水平不同的开发者，我不知道该提供什么样的 started guide之类的。