【手机DIY】辛昕9 耐着性子磨UI

辛昕

【手机DIY】辛昕9 耐着性子磨UI [复制链接]

 

那什么，还是先发个图吧，大半夜的不发图，不是好锤子。
写一大通最后告诉你我只是刚做完 绘图层（虽说 我现在主要就差个完整的绘图层，UI的其他部分，都有现成的可以照搬.......）
我怕你们会揍我。

所以，是的是的，先发图吧。

辛昕

       首先简单介绍一下我打算实现的这个基于 手机的UI大体风格。
       基本风格：上一代智能机的大图标 + 多级菜单（页面-条目 二级系统）       在风格上，我模仿的是 安卓/苹果，特别是 以前的 智能机（N记时代）。但是略有改进。



           比如现在你看到的这个图，是我在网上找的。它就是上一代智能机界面的代表。


           其实今天的安卓/苹果 界面，和当年N记时代的智能机一个德性，都是 一整页整整齐齐的图标。上一代智能机，从 单色屏 发展到后来的全彩屏，虽然因为颜色丰富，表达力更强，但实质上，一直都是这个德行。
           而我做的这款，因为用12864，唯一不同的是，它只有黑白色（或者理解为单色）。

     这里插一些话：字体改变UI观感——即使UI简单到只有简单色块（实质上，win8上也是类似的，我们可以看到一种 界面风格 的回归，虽然返璞归真，却非常具有表现力，特别是在显示界面尺寸相对较小的 终端上。）
     即使简陋如12864等黑白屏，其显示表达力仍然非常具有可挖掘之处。

          从我个人的观点来看，如果单从价格，以及使用体验来说，还有今天中低端单片机的资源的丰富程度，在小尺寸显示器件上，12864这类单色或者黑白屏，真的几乎可以让 小尺寸tft屏推向边缘了（类似arm为代表的32位机对51为代表的8位机 步步逼近）
       当然，我不想挑起争论和斗争——所以你们看，我还是在做 黑白屏。

       而就我不专业的美术欣赏眼光来看，即使是单色屏，其实它们的显示表达能力还是相当可观的的，只是我们甚少使用足够的手段去强化显示。
        比如，灰度设置；比如，字体选择。
        以字体为例：
        从一般的宋体，到换成微软雅黑——如果你和我一样，忌惮它收费，那我们可以考虑使用 文泉驿 这类开源美化字体）
        忘了哪一年开始，微软雅黑字体开始出现，我记得我当时非常喜欢这种字体，以至于后来重装系统不知为何弄没了这个字体后，我大费周章地去百度雅虎无数，下载无数，设置无数，终于还是把微软雅黑搞到电脑里可以用。
         因为这种字体真的比起以前（或者现在你在这个帖子里看到的尖锐的宋体一样），比起以前那些标准宋体，哪怕楷体，要漂亮非常非常多。因为那是符合现代审美的柔和圆角型的新字体。

        使用过ubuntu的人，也许会体会到在ubuntu下的统一字体也非常非常的漂亮，甚至超越了微软雅黑。
后来我知道了，这种字体是当今华人区域最开放最成功的 开源免费字体 文泉驿 的 微米黑（我还没有单独编译在自己的系统上安装使用，但我又这个打算，甚至把它用到我的单片机UI上。）
         下面是一个截图。


      这就是我的体验，即使是相同的一个界面，只因字体不一样，整个界面看起来可以变得非常漂亮，真正是，飞上枝头变凤凰。

       闲话少说，接着说我的这个 为手机DIY而做的 12864的UI界面。
       在 图标界面 这一块上，我基本采用了两代智能机都使用的 图标风格。但是，在如何切换、选择 不同图标的显示问题上，我采取了不一样的风格。

       这主要是，我这个12864非触屏，这种情况下，我们又没有鼠标（或者说没人会给手机或者平板装个鼠标这么操蛋），也就是说，必须有一种 显示方法，让我们显示出我们在不同图标间移动 和 选择 的 强化显示。

       所以我不仅选择了 加一个 黑色框框的方法，我还干脆改变了 图标一屏全部排列的方式，而只把相邻的几个图标（视显示屏尺寸大小所致），显示出来，然后还用箭头表达一种动态感。
      
       当然你也知道，手机DIY的活动已经过去很久了，而我之所以到现在还在搞，原因是多多的，别的主客观啥的就不说了反正我确实是很拖沓。
       但就实现方面而言，其困难和花时间的地方主要在 为12864和新的UI风格提供一套新的 绘图函数；

     （具体可以见 楼主贴 里的 图）——因为，我此前大多数时候是在tft彩屏上做，彩屏上是以点为单位，而在12864上（当然并非不可以，但就我判断，更多时候还是以页，字节为单位写8个点），这种情况不太一样。
       同时还有我对新UI界面显示风格的看法，使得我必须重新 写一套 基于12864的绘图函数API。所以，实际上，此刻我这部分的工作还处在 绘图层大致完成，需要进一步修整和改进的过程（当然，现在几乎完成了，可以开始移植界面本身了）

        然后，在其他部分，将和上一代智能机一模一样。电话本还是只是一条一条的文字
        “
         楠哥
         1xxxxxxxxx
         琳姐
         1xxxxxxxxx
         ......此处省略一百万人
         ”
         这是因为12864的 表达能力在这方面确实不如 动辄 320×240 这么密集像素的 TFT屏 细腻。
         与其勉强让12864去实现那样风格最后反而不伦不类，不如尊重12864单色屏本身的能力和潜力，寻找一种虽然简化，却也同样具有相当可观表现力的风格

         ——而你们已经看到了，我主要借鉴上一代智能机的风格。

辛昕

       然后我实在觉得还是去睡觉比较好～～～反正这事还有的拖沓。

      忘了说情况。
      为啥我这么个码农不懂艺术的人会在这里对UI如此折腾。

      这主要是在刚过去的2014年，我除了经常出出差，打打杂，我的大多数时间都是在维护一个现有项目的UI界面。因此，我对这方面积累了足够多的经验和想法。同时也拥有了实现一个 简单 却富有表现力，很适合 工业设备，手机等终端 的 HMI-UI的能力。

       所以我非常期待把这种经验和能力带到业余的工作里来——也许最后我在完成之后，还会把它直接全部开源发布。无所谓，反正因为工作的任务我是维护，我必须就着原来的设计（一个我到现在仍然坚持认为有相当多地方很操蛋的设计方案）去做去改，束缚了手脚。
       而这个业余的DIY，给了我一个足够自由的机会和平台去实现自己的想法。同时又可以自由的发布出来。（以apache或者mit license什么的，除了想收到你们在使用中的想改进意见以外，和你们讨论更好的实现方案以外，想让更多人试图去了解它，使用它以外。我别无所求。）

        这段时间，还是如同往常，各种各样的事情，所以每天能静静坐下来好好写程序的时间（还有更重要的是心情）实在不多。加上UI确实是一个相当复杂的东西，要考量的东西相当之多，所以即使只是我口中的 “相对简单的UI”。
却也可能花足够多的时间。

        虽然我之前因为急于了解了 手机DIY 这个让我倍感羞耻的 棘手事件。但显然，我对代码，封装，抽象 ，也许是我自己所谓的 封装，抽象的纠结啊，还有UI本身的复杂性（在公司被进度所催，我在完成一个 现在看来 抽象程度非常低，并且只针对我工作任务所需的一个在 小尺寸tft彩屏上 的 UI界面，就足足花了我一个半月。这里面大概是 30个工作日（相当于240个h），还不算我几个周末的加班。

        所以，估计是有的时间磨了。于是我也放宽心了。反正已经迟了这么久，不在乎再迟一阵子。只希望我能在这个DIY之后，呈现出一个让我自己足够满意的，简单的，通用的，UI库。

        关于我之前提到那个花了30个工作日完成的 UI。因为工作关系，我不太可能把它的图片发上来。但在这个过程里，我因为经常想看看市面上，别人做的作品还有现成的模块。
        我发现了一个 和我做出来效果，以及定位非常相似的 产品。

         为了避免广告嫌疑，我只发图片。


        大家可以很明显看到。这是一个很典型的和我一样，模仿手机界面的作品。


        事实上，这是一个基于 屏-控件，或者说 页面-条目（多级菜单术语）的 二级界面系统。和 电脑上，乃至ucgui等使用 窗口系统 的显示界面 风格是不一样的。


       而关于这个，虽然我现在还没有足够地了解，和使用体验ucgui实际组织界面时的感觉和用途。但我仍然感觉，在 手持终端 这类小尺寸 的设备上，，这种 二级界面系统 会更加有效。


       这是另一个话题。这里先不说，真的要睡觉了。

shower.xu

单色屏上ZLG gui+私人订制，应该会快速很多

ddllxxrr

楼主菜单上的图标怎么搞的？？？？？

辛昕

ddllxxrr 发表于 2015-1-18 09:50
楼主菜单上的图标怎么搞的？？？？？

什么怎么搞？就是画的呀。

辛昕

shower.xu 发表于 2015-1-18 09:35
单色屏上ZLG gui+私人订制，应该会快速很多

嗯，那个我之前简单看过一下。不过当时没太认真看，因为发现他只是绘图，没有设计 人机交互 需要的 事件消息处理机制。

不过现在看来，至少绘制界面是可以参考的。

额，确实发现这东西水太深，真搞，里面东西太多了，所以我也在想我的目标和定位.....

ljj3166

有意思，来点动态菜单显示吧

辛昕

ljj3166 发表于 2015-1-18 13:30
有意思，来点动态菜单显示吧

动态菜单是什么意思？

辛昕

在具体做（其实是移植）完整的 UI 之前，先上一下简单的界面流程
都是照片～～
1.主界面（选择短信）

2.短信箱

3.短信息（琳姐，不好意思，你中枪了）


4.主界面（打电话）

5.拨号

6.主界面（电话本）

7.电话本

chenzhufly

做的很不错哦！
点赞

辛昕

chenzhufly 发表于 2015-1-18 17:43
做的很不错哦！
点赞

就是丑了点，呵呵～～
码农的艺术鉴赏能力太低下了～～

zqjqq88

辛昕 发表于 2015-1-18 17:49
就是丑了点，呵呵～～
码农的艺术鉴赏能力太低下了～～找个妹纸搭配吧~

辛昕

zqjqq88 发表于 2015-1-19 09:42

这话我爱听！
去，给我找一个！要像玲珑这么漂亮的才行

16号哨兵

有意思，持续关注

ddllxxrr

楼主啊，我是说这个彩屏里的图标，你是怎么做出来地，用565格式么，长宽多少来这？？？？

辛昕

ddllxxrr 发表于 2015-1-20 09:12
楼主啊，我是说这个彩屏里的图标，你是怎么做出来地，用565格式么，长宽多少来这？？？？

这个屏其实不是我做的

但是我也会做

其实就是

各种矩形啥的组合

565？
是啊，必须的啊，tft彩屏不都是对像素点写565颜色值么

当然了也可以设定其他颜色值。
但我用的也是565

辛昕

ddllxxrr 发表于 2015-1-20 09:12
楼主啊，我是说这个彩屏里的图标，你是怎么做出来地，用565格式么，长宽多少来这？？？？

不，我仔细瞅了瞅
它这个，其实是 画图的。

不然自己弄没法弄到那效果

辛昕

接着往下做
首先考虑了一下 如果是针对 手机应用的简单界面。
考虑了一下，实际上，它们是可以被分类的。

最后我总结了一下，分了四大类
其中两类，之前发的贴里面已经有了

它们分别是
1.图标 ——前面的帖子里发了，就是 在 短信，电话本，拨号 三个中选择的那个；
2.列表 ——前面的帖子也有了，但是少了加一个箭头，以动态表示 对列表中的项目的聚焦/失焦 显示效果；
3.输入 ——这是新增的，它可以用于任何要求输入的场合，如编辑电话本，短信；甚至前面的拨号，也可以归入此类；取名 Edit,类似于 图形开发软件中的 Edit控件
4.提示框 —— 也是新增的，区别于输入Edit，它的特征是 只有选择，而没有输入。比如说我们经常有的操作是
输入完发短信要发送了，这时冒出一个窗口，问你
是否确定发送？
然后你可以选择 YES/NO。
下面是图：

1.图标前面有了，但为了连贯性，这里再发一次：


2.列表（带显示聚焦 的 箭头）


3.编辑Edit


4.提示框

辛昕

做这套界面的四个基本框架时，也发现了一些问题和一些想法：

1.设置具体的 位置，大小 等参数过于复杂；这个复杂的一个原因来自于我原来做的那套绘图函数太粗糙，参数太原始，数量比较多，所以设置比较复杂，复杂到连我自己事隔不过一周调用时居然都无法理解所有形参！
   关于这个问题，直接引出来两个问题：
   1.之所以如此复杂，是因为这套接口是非常原始，同时也非常通用的接口，因为它直接面向到像素点的设置。你可以精确设置，计算 它的 起始位置，x,y向的尺寸 等等.
   2.然而，到了用户层面，我们是否需要如此精确，原始的设置呢？
   假如我是使用者，我是不希望这样的，因为这样我要做的工作太多了！
   事实上，这也是我工作的任务里，因为时间紧急，暂时采用的方法，所以我可以直接看到它的效果和影响：
   
   当界面多起来的时候——特别是我做的东西是基于一套原有的HMI更改，我不得不接受它的原先设计思路，而且也因为它不同于手机等设备，不存在太多同类界面。（当然其实是可以的，下面会分析 这套以手机界面为例，如何可以推广到几乎所有终端设备）。
   所以，当时为了向前兼容，我是按照它的思路那样去做，每一个页面都要自行 编排控件位置，计算大小。

   这样下来，我光为了维护这套界面配置表就花了将近800行代码，同时，每一行都意味着三四个数据，密密麻麻，别说别人接手维护，就是我自己去修改也得好好看，想才能改。
   更重要的是我不知道你是否意识到，这意味着我光在这上面就可能花了一两K的RAM空间，可是，其实我所使用的界面，其实相对来说还是很简单的。我粗粗估计了一下，大概是十几二十页。

   而在设计这套手机界面时，我忽然意识到。
   其实，许多不同应用情况需要的页面是可以分类的。而且，为了进一步简化 对控件 的位置 大小 等参数的设置，我们可以使用 类似于 网页设计里的CSS表类进行。
   因为不管界面看起来多么炫酷漂亮，但对于一般工业设备，只要是基于 屏幕-控件 的界面，实质上都可以把整个屏幕分割成不同大小的表格，然后把所有控件往里面排布。

   这样，将使得设置大幅度简化，同时省了很多 RAM空间，同时即便在根据参数计算显示数据时也可以节省大量计算量。