全栈工程师成长记

编程重新定义人生

大师印记 第十四周周记

周一、写 admin 页面

总结:在 google 上寻求帮助可能会遇到的坑就是,匆匆看过一眼答案就去尝试解决,发现没有起作用就又跳到下一个答案,如果这样往复耗费太多时间,极有可能进入了一个走马观花的死循环,看起来像是一种“有勇无谋”的感觉。应该停下来,不要盯着“解决问题”这个事件本身,仔细看一下 google 出来的答案里有关解题思路和过程,从中拆解可用的东西。总而言之:好的解决问题的思路很重要。

周二、写 admin 页面

总结:有一个解决问题的方法是问别人——但不是从对方那里获得答案,当你试图向对方清晰描述问题的时候,你需要理清自己的思路、告诉对方自己做过哪些尝试,大多时候你就会“恍然大悟”自己尝试的方法中可能存在一些改进的地方,如此,答案已经不言自明。

技巧:web console 的非常规用法
故意弄坏页面 —— 比如随便弄错一个 ruby 语法,然后在报错页面就能看到 web console 了……
当然,常规的用法是给 controller action 加 console 或者给 view 加 <% console %>,详见 web-console 的 github

周三、写 user 页面

总结:对于写一套 layout 而言,先把基本布局定义好,接着把相关页面快速套用起来,之后再去优化 layout 的具体样式。在配色方面,可以先在各个区块用灰度填充,如果过早使用具体的颜色,可能会在配色上纠结太久。

网站:
设计作品集
https://dribbble.com/
https://www.behance.net/

色彩搭配
https://material.google.com/style/color.html
http://paletton.com/

周四、写 user 页面

总结:推进、推进、推进。当你有大量的页面样式需要调整的时候,不要卡在某个页面的某个小细节,继续给其它页面套用 layout ,让所有的页面都不那么像“裸奔”的状态,之后才能在此基础上有个全局观并以此进行细节调整。

技巧:css表格奇偶行使用不同的背景色

css部分

.table-striped tbody tr:nth-child(odd) td,
.table-striped tbody tr:nth-child(odd) th {
  background-color: #157d82;
}
.table-striped tbody tr:nth-child(even) td,
.table-striped tbody tr:nth-child(even) th {
  background-color: #acb4be;
}

html部分

<table class="table-striped">
  <tr>
    <td>行1列1</td>
    <td>行1列2</td>
  </tr>
  <tr>
    <td>行2列1</td>
    <td>行2列2</td>
  </tr>
  <tr>
    <td>行3列1</td>
    <td>行3列2</td>
  </tr>
   <tr>
    <td>行4列1</td>
    <td>行4列2</td>
  </tr>
</table>

周五、写 user/admin 页面

总结:“好看”的页面固然重要,与此同时降低用户认知成本的交互设计也很重要,换一个说法就是:onborading 是视觉与交互的相辅相成。

技巧:页面输出文字的两种场景

截断文字长度
使用 truncate,例如:
<%= link_to truncate(post.title, length: 20), post_path(post) %>

输出富文本格式
使用 sanitize,例如:
<%= sanitize(@group.description) %>


大师印记

眨眼又是一周,连续写 5 天页面的感觉就是从渐入佳境到根本停不下来,到了周末的闲暇时光,暂时换一种心境总结过往,忽然发现有一件事让我感到不可思议——自己竟已不知不觉的习惯了新入手的罗技 MX Master 鼠标

画面回到上周周末,我在京东入手了一个罗技 MX Master 鼠标,不知道是不是因为连续用了几个月 Force Touch 的缘故,第一时间拿起 Master 的感受是“这么重(官方数据 145g,而普通的无线鼠标则是 90g 上下)的鼠标,用起来手腕不得累死啊”,然后就想要不直接申请退货好了,不过又接着转念一想既然本来买它就是希望能用上一个厉害的鼠标,不妨先用它个两三天,看一看这个“大师”到底有何厉害之处,如果实在接受不了,再退货也无妨。

不曾想过,在这一周的使用过程里,我却不再感到这个 Master 鼠标的“重”,反而是很自然的使用它做为一个鼠标应有的基本功能,以及它额外增加的前进后退、鼠标手势、拇指滚轮等各种扩展按键和手势带来的便利性。

OSX 里的 Finder、系统偏好设置等界面不支持 Force Touch 手势进行前进后退,每次要用鼠标去点击界面左上角的前进后退按钮其实很影响效率、也不符合交互一致的直觉感受,而 Master 的前进后退功能键不仅适用于浏览器,也适用于 Finder、系统偏好设置,这在很大程度上解决了我的困扰。Master 的各个按键还可以通过 Logitech Option 软件进行高度定制(没错, Logitech Option 也有 OSX 版本),比如单击拇指承托按钮实现“查找”功能——相当于 Force Touch 的三指轻点,按住拇指承托按钮加并左右拖动鼠标实现桌面切换。更进一步的,可以根据个人的使用场景,为不同软件定义不同的按键功能,比如同样是拇指滚轮,可以定义为在浏览器里切换标签页,在 Atom 里水平滚动。

抛开功能不谈,如果使用不适合手型的鼠标,会有一种手被“架空”感觉——这种很生硬的感觉像是在时刻提醒着“你正在使用一个体验很不友好的鼠标”。 Master 最大的特点在于尺寸、线条、倾斜度等方面的设计所带来的握持感是恰到好处的,手掌和每一个手指都有合适的承托,即便长时间握持也不会觉得不适——就像连续几个小时坐 Aeron 座椅也不会觉得腰酸背痛一样。

从某种层面上来讲,好的工具用起来就应该是自然而然的,我们使用工具的目的是让工具为我们所用——提升效率、创造价值,有时候,感受不到它们的存在,也许就是它们最好的存在。罗技 MX Master 凭借高度扩展的便利性和优秀的人体工程学设计,以润物细无声的方式融入我每天的生活,此等功夫,实为大师。