标签归档:设计

产品设计与软件服务杂记

最近闲赋在家,在清明小长假开车长途跋涉3000多公里办完了家里的一件事情,这本身是一种锻炼,同时也让自己放松了一下。闲赋期间也与众多朋友进行沟通交流,同时也收到了一些电子产品的礼物,就对这些谈谈自己的看法。

沟通交流多涉及传统行业或正常业务想利用软件来拓展自己业务,跟随现在的热潮,这些沟通交流也多集中在电商方面,我对于电商是不懂的,没有这方面的从业经验。在沟通交流的过程中多数扮演倾听者的角色,倾听现有的业务如何开展电子商务的美好前景,如何大展宏图,趁着这波电商及移动电商热潮让公司的量级在提升一个台阶。另一种沟通交流涉及的是现有的业务希望能够使用一定的软件来辅助业务本身,期望用软件来提升服务质量,形成自己的独有竞争力。

沟通交流的后半阶段总会涉及到多少人多长时间能够完成这些想法,然后就有外包给团队完成这些的打算,给我的最直观的能够形容的就是这些想做的事情是一锤子的买卖,这也是我近两年碰到比较多的传统行业经营者比较普遍的想法。我对于此的一般建议是让其慎重考虑,主要集中在几点:

(1)这些预计投入建设的都是其核心业务,不在于做出来,而在于做出来后通过不断的运维,经历由营销指导系统建设到系统驱动营销;
(2)核心要做的事情和要形成独有竞争力的事情不宜外包,否则在很大程度上会陷于外包这个泥潭而很不好脱身;
(3)从长期来讲做这类的事情需要有自己的团队,而不是一锤子买卖,我要做这些,你做了这些就行了,这样做多半会夹生,最后不了了之,浪费资源不说,同时也不会有好的结果;
(4)应该有足够的耐心,当真的确定开始之后,这玩意在很长一段时间就是无底洞,看不到底,没有足够的耐心会让团队很茫然,在过程中就会分崩离析。

这些是跟我老本行相关的我的一些看法,我不懂电商,就是从系统建设方面的一些建议,更多的是给他们泼冷水,不是简单的找台服务器、架设电子商城系统或开发一个简单的软件从辅助业务开始形成独有竞争力,其实有时候看上去简单却不简单。

下面再说说朋友给的电子产品「收音机」,这东西是我有段时间问朋友索求的,最近一下子拿到了好几台,主要给母亲使用,这玩意在我的记忆中从来都没有非常火热过,从使用人群出发,记忆中最早家中会有大块头的收音机,仅仅留存在记忆中的这段时间会有「小喇叭什么什么的」,再往后就是在老人跟学生这个群体中使用,现在人们生活变好了,私家车多起来后,在开车中常会听听车载收音机,目前应该在老人跟司机群体中使用较多,至于年轻人可能就通过手机偶尔来听一听了。刨除车载收音机使用人群以外,可能老年人是一直在使用的一个群体而且是目前使用居多的人群。

最近拿到的几台收音机越发的精致跟小巧了,从使用者的特点来看,精致跟小巧是必要的,但是小巧的基础上应注使用人群的特点,比如现在的小按键、数字屏上小字体、小图标对于老年人来讲操作起来就有些不便了。功能操作的数字化这方面也需要一段时间来学习,当然这点我认为是值得的,都要与时俱进嘛,母亲最钟爱的还是「德生」老式收音机,是需要花一段时间来熟悉数字化带来的好处。

不管硬件产品的设计还是软件产品的设计,其受众特点都是需要在设计中考虑的重点之一,只有充分考虑了这些,最终的接口才会有良好的人际体验,就收音机这个电子产品,可能在不久的将来就会彻底消失,但电台会以另外一种方式传播。

「收音机的使用人群是不是我写的这样,下一回跟从事广播的朋友有待沟通确认!」

新版产品网站基本完工

借这次的App的推出,终于下决心改版网站,于是乎在刚刚在各个市场上提交App后,马上就开始动工。其实早就该改版了,一直以来看着就挺闹心的,页面的布局使用Table,那是一个Table嵌Table啊,宽度也不太适应最近几年屏幕分辨率的发展了,在现在的分辨率下看着这屏幕中间的一个细条,就是基于这两点吧,也早该改版了。

基于上面说的,这次改版的目标:

1、基于CSS的布局,全面抛弃Table;

2、看起来大气一些,像那么回事;

3、 分辨率为近几年比较常用的960px宽;

4、功能上的需求来源于老版本,并增加新元素:方案跟服务,产品的分类在以前基础上增加掌上App;

有了目标,也就定下了方向,接下来就是着手设计制作,并最终实现,设计制作没什么可说的,就是用Photoshop按照自己想改版设计原型图,各个功能模块及效果一个一个的做。最终实现上可选择的就比较多了:
1、可以选择开源的CMS来实现;
2、可以自己从头写(PHP+MySQL ),模板采用Smraty或者也自己写;
3、纯静态页面;

最终选择了第三种,用手工打造纯静态页面,一页一页实现,选择这个的原因其一是这个网站主要以展示自己的软件项目为主,本身平常的动态数据及更新量很小,需要交互的地方也很少,其重点在于软件产品的后续更新升级;其二是这样实现的时间成本最低;其三是这样实现对于存在的需要交互的地方以后可使用Ajax+Js+PHP+MySQL来嵌入到现有的静态页面,也满足后续的交互需求;

基于这三点,这次的网站改版使用Vim + Photoshop 这两样工具,历经几天,于今天基本上完工,除了有些链接地址未指向(相关文档软件需要重新整理更新一下)。

由这里进入访问

总结

1、明确需求及目标

这个是基础,只有这些明确了,才能产生设计、才能选用合适的方法[架构]、才能完成实现。需求及目标应建立在总体之上,除非这个需求及目标本身就是独立的,依托核心要做的或为核心服务而产出的需求及目标要统筹考虑。

2、设计

设计主要是确定结构并建立结构,对需求的分类与整理,是当前设计人员对于需求的理解,并以视觉的展现及交互的描述,这是个复杂活,需要经验、多行业的知识、时间的沉淀,而且每个设计人员的设计都不一样。

2、选择适合方法

合适的方法是要看到侧重点,对于这个网站来说是对产品的辅助,不是重点,节约时间成本是比较重要的。合适的方法能满足后续的扩展,该扩展是建立在对需求的理解与明确基础之上的,而且要可实现。

4、改进的地方

在完工以后会产生各种改进的想法,这次完工后马上产生需要改进的想法主要体现在导航上面,应该能更加明晰的在每一页告诉访问者当前在哪里;第二个产生要改进的是分散的图片合成一张图片,减少图片加载次数;

 

— 结束—

数据库建模

应用于零售小店的管理系统

随着计算机技术的发展,现在PC电脑已经越来越普及了,很多小的零售店也开始逐步使用pc电脑来进行日常销售的管理,辅助于商品上的条码加上扫描枪能够很好的针对小的零售店销售开展工作,这样相比纸张记录来说来的方便很多,而且整体成本也比较低,于是最近开始针对这个应用进行设计与考虑,开始想的很简单,因为应用本身就很简单,但是随着设计的开展,增加了很多的辅助元素,才发现简单性是很难控制的,要想适用范围广就要舍去某些简单性,想象中一个很简单的应用到头来发现却不如想象中的简单。
整体功能预想:
1、能够完成数据字典的管理;
2、简单的权限管理;
3、能够进行简单的会员管理及会员卡管理(非必要);
4、能够完成商品入库库存盘点的管理;
5、能够完成日常的营业的管理;
6、能够进行统计查询;
根据上面的预想,初步的数据建模图如下所示,仅仅是初始建模,尚需根据调研加深对其业务的理解后的需求进行完善。

数据库建模

数据库建模

左侧Tab切换页面实现

最近在玩着做一个小站,目前的状态正处于设计阶段(再小的东西都需要设计一下的),在Photoshop中做好图转化成页面,页面中有个部分需要实现左侧Tab页面切换的效果,做了下代码实验,最终实现,分享出来供需要的人取用。

设计的最终效果图如下所示:

左侧可以切换的页面

左侧可以切换的页面

之所以选择使用Tab页面切换来显示页面中的内容是因为要显示的内容属于同一类型,内容能在该类型中很清晰的分组,这样有利于用户在浏览的时候有更好的比较跟选择,能在同一块显示区域显示更多的内容,有较好的体验,这仅仅是自己的想法,不一定正确。(btw:在网上称为滑动门在目前的网站中比较常见,这让我想起前不久还在职的时候经历的一个项目,决策者放佛迷恋这种效果,于是说能用滑动门都用滑动门,于是乎…)。

1、设计到页面的转换

首先PS中设计出上图,然后开始切图,主要切出左侧Tab页面即可,因为右边内容区域可设置容器的border来达到最终效果,切出52×32的图,有两个,切好后如下所示。

然后就开始形成最终要用的页面,  主要想法是左侧Tab条跟右侧内容区域,两个float:left;跟整个的con大小匹配,然后用js完成在左侧tab按钮条选择切换的时候应用不同的样式即可,考虑到IE跟Firefox的像素差距注意使用!important,在选择到Tab页的时候,让tab的图像向右偏移一个像素(px),使用对象不可层叠(position取值为relative)将内容区域的边线遮住,然后加上调试,形成最终代码如下。

2、测试页面代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
  <HEAD>
    <TITLE>tab test</TITLE>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <META NAME="Generator" CONTENT="EditPlus">
    <META NAME="Author" CONTENT="">
    <META NAME="Keywords" CONTENT="">
    <META NAME="Description" CONTENT="">
    <link rel="stylesheet" type="text/css" href="style.css" />
  </HEAD>
<BODY>
  <div id="con">
    <ul id="tabs">
      <li style="margin-top:25px;" class="selectTab">
        <a href="javascript:void(0)" onclick="selectTab('tabContent0',this)">tab1</a>
      </li>   
      <li><a href="javascript:void(0)" onclick="selectTab('tabContent1',this)">tab2</a></li>
    </ul>
    <div id="tabContent">
      <div id="tabContent0" class="tabContent selectTab">
        <p>tab1 contents</p>
      </div>
      <div id="tabContent1" class="tabContent"><p>tab2 contents</p></div>
    </div>
 </div>
</BODY> 
<script type="text/javascript">
  function selectTab(thisContent,thisObj) {
    thisObj.blur();
    var tab = document.getElementById("tabs").getElementsByTagName("li");
    var tablength = tab.length;
    for(i=0; i<tablength; i++) {
      tab[i].className = "";
    }
    thisObj.parentNode.className = "selectTab";
    for(i=0; j=document.getElementById("tabContent"+i); i++) {
      j.style.display = "none";
    }
    document.getElementById(thisContent).style.display = "block";
  } 
</script>
</HTML>

3、相关的样式文件

#con{width:439px !important;width:440px;height:402px;float:left;}
#con #tabs{height:400px;width:52px;margin:0;padding:0;float:left;}
#con #tabs li {float:left;background:url(tabnormal.png) no-repeat; height:32px; list-style-type:none;width:52px;margin-top:8px;text-indent:12px;font-size:14px;}
#con #tabs li a { text-decoration:none; float:left; background:url(tabnormal.png) no-repeat;height:32px;line-height:32px;color:#000;}
#con #tabs li.selectTab {background:url(tabselect.png) no-repeat;position:relative;height:32px;width:52px;right:-1px;}
#con #tabs li.selectTab a {background:url(tabselect.png) no-repeat;color:#7979b3; height:32px; line-height:32px;}
#tabContent {background-color:#fff; border:1px solid #0087ae;float:left;width:384px !important;width:382px;height:400px;} 
.tabContent {margin:10px 0 0 10px;color:#474747; width:360px; display:none}
#tabContent div.selectTab{display:block}