「美」中不足的便簽工具 —— 錘子便簽2.5

最近老羅推出了堅(jiān)果手機(jī),同時(shí)推出了錘子便簽 2.5, 于是我被刷屏了,朋友圈里很多由錘子便簽生成的圖片。乍看之下,頗為美觀,然而錘子便簽,并非完美之作。

精致之顏

老羅對(duì)擬物設(shè)計(jì)情有獨(dú)鐘,在 iOS 7 開始扁平化走紅的這個(gè)時(shí)代,不管是在 Android 上,還是在 iOS 上,錘子便簽的擬物風(fēng)格跟系統(tǒng)整體的扁平風(fēng)格放在一起,顯得格格不入。但是精心打磨的錘子便簽,對(duì)擬物設(shè)計(jì)的把握和雕琢,卻讓這款 App 在不經(jīng)意間給人帶來一些感動(dòng)——對(duì)設(shè)計(jì)如此用心的感動(dòng)。

精致的回形針

打開 App 首先是【便簽瀏覽頁面】,錘子科技把便簽設(shè)計(jì)成小卡片(或者說小便簽)的形狀,左邊用回形針夾著,背景圖是木紋,給人感覺就像是桌子上的實(shí)物便簽一樣。長按便簽可以上下移動(dòng)順序,并且左邊所有的回形針都會(huì)彈起,因?yàn)槔^續(xù)夾著便簽的話,便簽怎么能移動(dòng)呢?向右滑動(dòng)可以刪除便簽,這時(shí)候回形針同樣會(huì)彈起,出現(xiàn)一個(gè)刪除按鈕。

回形針彈起后,下面還有陰影。

【外觀】移動(dòng)便簽.png

【外觀】便簽瀏覽頁面.png

精致的筆記本

新建一條便簽,可以看到【便簽編輯頁面】有淺灰色的分行線,看起來有種紙質(zhì)筆記本的感覺,仿佛是在紙上寫字。左邊有一條縱向的顏色處理,看起來就像是紙質(zhì)筆記本打開后的樣子。

【外觀】便簽編輯頁面.png

Moleskine 筆記本內(nèi)頁.jpg

簡單的 Markdown, 繁瑣的預(yù)覽

Markdown 如今備受推崇,它可以讓人簡化排版工作,專注于寫作。但是對(duì)于沒代碼基礎(chǔ)的初學(xué)者來說,Markdown 畢竟是一種標(biāo)記語言,即使它足夠簡單,前期還是需要付出一定的學(xué)習(xí)成本,尤其在不支持實(shí)時(shí)預(yù)覽的環(huán)境下。

關(guān)于 Markdown, 初學(xué)者可以參考:
認(rèn)識(shí)與入門 Markdown
獻(xiàn)給寫作者的 Markdown 新手指南
Markdown 語法說明 (簡體中文版)

簡單的 Markdown

在手機(jī)上碼字,輸入 # > * [ ] 之類的標(biāo)記符號(hào)并不方便,倒不如做一個(gè)輕量級(jí)的排版操作工具條,通過工具條上的按鈕來實(shí)現(xiàn)排版,對(duì)用戶來說,更加簡單易學(xué),也更加便于操作。畢竟 Markdown 只是一個(gè)實(shí)現(xiàn)排版的輕量級(jí)標(biāo)記語言,對(duì)于錘子便簽來說,不應(yīng)該讓用戶花很多時(shí)間去學(xué)習(xí)。因此,錘子便簽挑出最常用的幾個(gè)標(biāo)記符號(hào)做成了工具條。


【Markdown】工具條示例 - 編輯頁面.jpg

需要注意的是,默認(rèn)情況下并不會(huì)打開 Markdown 開關(guān),需要手動(dòng)開啟:

設(shè)置 - 啟用 Markdown 模式 - 打開開關(guān)。
在【便簽編輯頁面】又上方,點(diǎn)亮【M↓】圖標(biāo)。

另外,值得一提的是,雖然錘子便簽支持 Markdown, 但只是部分支持,比如不支持:

斜體

  1. 有序列表1
  2. 有序列表2

但是錘子便簽加入了非常實(shí)用的【居中】,然而這并不是 Markdown 原配的功能:

  • ?標(biāo)題?,只支持三級(jí)。
    # 一級(jí)標(biāo)題
    ## 二級(jí)標(biāo)題
    ### 三級(jí)標(biāo)題
  • ?居中?,
    [居中,非常實(shí)用。]
  • ?列表?,
    - 無序列表1
    - 無序列表2
  • ?粗體?,**需要前后都加上標(biāo)記**
  • ?引用?。
    > 這是引用
【Markdown】語法示例 - 編輯頁面.jpg

繁瑣的預(yù)覽

看到上圖這樣的字符,很多初學(xué)者可能完全摸不著頭腦,這都啥跟啥?不用怕,錘子便簽可以讓你看到下面這種熟悉的排版:

【Markdown】markdown示例 - 預(yù)覽頁面.jpg
三個(gè)步驟讓你看到預(yù)覽效果:
  1. 點(diǎn)擊右上角的??,
  2. 然后點(diǎn)擊【小飛機(jī)】
  3. 然后點(diǎn)擊【以圖片形式分享】,或者【以網(wǎng)頁形式分享】(預(yù)覽效果是一樣的)

這樣就可以看到這條便簽的預(yù)覽了,如果對(duì)排版不滿意,那么就回到編輯頁面,再進(jìn)行調(diào)整。
這時(shí)候你可能跟我想的一樣:如果可以實(shí)時(shí)預(yù)覽,那該多好啊~
查看預(yù)覽效果需要3個(gè)步驟的操作,我覺得非常繁瑣,如果要返回修改再看預(yù)覽,那么就是6個(gè)步驟。但目前,也只能這樣。努力學(xué)習(xí) Markdown 語法吧,做到只看代碼就能在大腦里面實(shí)時(shí)預(yù)覽,才是王道。

【markdown】預(yù)覽操作1.jpg

【Markdown】預(yù)覽操作23.png

總的來說,錘子便簽加入了 Markdown 支持,可以實(shí)現(xiàn)輕量級(jí)的排版,是一個(gè)進(jìn)步。而對(duì)于 Markdown 語法的精簡,以及【居中】的加入,是值得稱贊的地方。目前的預(yù)覽操作非常繁瑣,如果可以進(jìn)行實(shí)時(shí)預(yù)覽,進(jìn)一步降低初學(xué)者的學(xué)習(xí)成本,提高排版時(shí)容錯(cuò)率,那就更好了。

圖文排版神器

錘子便簽提供了一套非常方便的圖片排版工具,點(diǎn)擊便簽中的一張圖片,圖片會(huì)打上一層模糊的濾鏡,左上角出現(xiàn)三個(gè)按鈕,分別為:刪除圖片、更改圖片描述、裁剪圖片;


【圖片】編輯圖片.png

圖片描述

可以對(duì)圖片進(jìn)行簡單的描述,并且自動(dòng)生產(chǎn)讓人滿意的排版效果。


【圖片】圖片描述,在這里我可以對(duì)這張圖片進(jìn)行描述.png

裁剪圖片

是的,也就是說,圖片不需要提前使用各種工具進(jìn)行裁剪,而是在碼字過程中,可以隨時(shí)根據(jù)需要裁剪圖片的大小,并且不會(huì)對(duì)原圖做任何更改,只是裁剪便簽內(nèi)的圖片副本。

注意:如果裁剪的圖片過大,那么還可以繼續(xù)往小裁剪。如果裁剪的圖片過小,因?yàn)殄N子便簽沒有撤銷功能,那么只能重新插入原圖,再裁剪一次。

【圖片】裁剪大小,調(diào)用系統(tǒng)圖片處理工具.png

移動(dòng)圖片

眼尖的同學(xué)一定會(huì)發(fā)現(xiàn)圖片的右上角懸浮著一個(gè)白色的圓形按鈕,這是移動(dòng)圖片按鈕,錘子便簽中的一大神器。長按后圖片會(huì)折疊成一行的高度,可以上下拖動(dòng)自由放置圖片。雖然只能按行移動(dòng),但是這個(gè)操作異常的便利、直觀(與 Markdown 剪切代碼、移動(dòng)光標(biāo)、粘貼代碼相比)。


【圖片】移動(dòng)圖片至任意一行.png

不提供撤銷功能,沒有后悔藥

前文提到圖片裁剪的操作不能撤銷,如果裁剪的圖片尺寸過小,那么只能重新插入原圖,再裁剪一次。
其實(shí),在整個(gè)錘子便簽中都沒有提供【撤銷按鈕】,這意味著,不僅僅是圖片的操作不可逆,文字操作也是不可逆的。對(duì)于經(jīng)常碼字的同學(xué),應(yīng)該都明白撤銷至于編輯的重要性。很可惜,錘子便簽并沒有提供撤銷功能。只能希望下個(gè)版本加入吧。

云同步便簽

手機(jī)碼字對(duì)我而言,只是應(yīng)急之需。長文編輯,還是需要在電腦面前,才能更加效率。錘子便簽這次更新帶來了云同步,用戶可以在 Web 端和 App 端自由切換,這極大地提高了錘子便簽的實(shí)用性。

因?yàn)樗鼘?shí)現(xiàn)了以下這種極度方便的操作:

桌面編輯 -> 手機(jī)查看預(yù)覽。

以網(wǎng)頁形式分享

長微博有一個(gè)缺點(diǎn),那就是文字在圖片里面,無法被檢索( OCR 的成本高),當(dāng)然有時(shí)候這也是優(yōu)點(diǎn)。因此錘子便簽新增加了以網(wǎng)頁形式分享這一黑科技,讓朋友圈人人都可以發(fā)文章,過一把運(yùn)營公眾號(hào)的癮。文字不再是以圖片的形式分享,而是生成一個(gè) HTML 文本頁面,可以復(fù)制里面的文本,可以調(diào)整字體的大小等等??傊?,文字不再變成圖片,文字就是文字,就是我們都非常熟悉的文字。

【網(wǎng)頁形式】顯示效果,可以進(jìn)行文字操作.png

需要注意,網(wǎng)頁形式發(fā)送出去之后,并不能再修改這條便簽,不滿意的話只能刪除。

又一次,錘子不提供后悔藥。

但是我想要修改,怎么辦?不要怕,可以重新打開這條便簽,修改到滿意為止,然后再次發(fā)送出去。

【網(wǎng)頁形式】登錄后可以刪除,但不能修改.png
【網(wǎng)頁形式】微信中調(diào)整字體大小后,慘不忍睹.png

難以讓人滿意的閱讀體驗(yàn)

錘子便簽,在產(chǎn)品設(shè)計(jì)之初,就是為長微博而生。突破140字限制,自動(dòng)生成長微博,能夠保證排版不錯(cuò)亂,生成的圖片精美。其實(shí)這一切都是為了提供更高的閱讀體驗(yàn)。但是錘子便簽卻在閱讀體驗(yàn)這里,犯下了致命的錯(cuò)誤——字體太小。話不多說,先看圖:

** 編輯頁面的字體大小 **

【字體太小】編輯頁面的字體大小.png

預(yù)覽頁面的字體大小
【字體太小】圖片形式發(fā)布預(yù)覽.png

【字體大小】網(wǎng)頁形式發(fā)布預(yù)覽.png

作為一款主打長微博的便簽工具(現(xiàn)在包括朋友圈),「寫」是體驗(yàn)的一方面,「看」是體驗(yàn)的另一方面。二者共同構(gòu)建了一款便簽工具的核心用戶體驗(yàn)。

我很納悶,為什么在錘子便簽生成的效果,默認(rèn)字體比居然比編輯頁面的還小。在手機(jī)上查看錘子便簽時(shí),不縮放圖片的情況下,字體大小與微信朋友圈的文字差不多。

但是,朋友圈是為了在屏幕范圍內(nèi)顯示更多內(nèi)容,才把字體設(shè)置的那么小。對(duì)于錘子便簽來說,并沒有類似的顧慮。

相對(duì)應(yīng)可以作為參考的產(chǎn)品,我認(rèn)為是電子書閱讀 App, 核心體驗(yàn)同樣是讓用戶更舒服的閱讀,比如微信閱讀。(正好剛裝了微信閱讀, 字體大小還沒設(shè)置,而多看已經(jīng)被我調(diào)整過多次,不知道哪個(gè)字號(hào)才是默認(rèn)的,因此選擇微信閱讀來比較。)

以圖片保存的便簽字體大小

【字體太小】以圖片保存的便簽字體大小.png

【字體大小】微信朋友圈默認(rèn)字體大小,非常小,但朋友圈是為了顯示更多內(nèi)容,而舍棄閱讀體驗(yàn).png

【字體大小】微信閱讀的默認(rèn)字體大小,可以很舒服的閱讀.png

【字體大小】錘子便簽以圖片保存后,寬度像素為990.png

如果放大圖片,那么無法在豎屏狀態(tài)下完整顯示一行,因?yàn)閳D片的寬度是 990 px, 豎屏狀態(tài)下閱讀就需要不停的左右移動(dòng),體驗(yàn)簡直是虐待。
橫屏下雙擊圖片自適應(yīng)寬度,這時(shí)候圖片放大后,字體大小可以達(dá)到讓人滿意的效果。但是,為什么要用戶橫屏呢?

Material Design 的規(guī)范文檔明確指出,CJK 字體的 Body 字號(hào)應(yīng)為 14 sp.

style_typography_style1 - Google Material Design.png

總結(jié)

錘子便簽是功能齊全而且好用的長微博編輯工具,然而生成的長微博默認(rèn)字體太小,閱讀起來簡直是殘害眼睛。
錘子便簽解決了「寫」的問題,卻對(duì)于「看」的問題沒有足夠的重視。
畢竟分享出去的長微博也好,朋友圈也好,都是為了展示內(nèi)容,而舒適的排版和字號(hào),就是文字閱讀體驗(yàn)的核心。

缺點(diǎn):

  • 缺少撤銷操作,沒有后悔藥。
  • 默認(rèn)正文字體太小,手機(jī)上閱讀很累。
  • Markdown 不支持實(shí)時(shí)預(yù)覽

優(yōu)點(diǎn):

  • 精致的擬物設(shè)計(jì)。
  • 圖片操作方便。
  • Markdown 可以滿足輕量級(jí)排版的需求。
  • 尊重用戶。全世界國家地區(qū)選擇,歡喜云服務(wù)隱私協(xié)議提醒,錘子便簽尾巴開關(guān),Markdown 開關(guān)。
  • 云同步。登錄歡喜云服務(wù),便簽可以在網(wǎng)頁端打開后繼續(xù)編輯、修改。
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 聲明:我是魅族用戶。 下面我們使用其最新支持的markdown功能來胡亂寫一些的文字。 既然是測試就要有對(duì)比,那么...
    饒曉文閱讀 8,251評(píng)論 0 4
  • 發(fā)現(xiàn) 關(guān)注 消息 iOS 第三方庫、插件、知名博客總結(jié) 作者大灰狼的小綿羊哥哥關(guān)注 2017.06.26 09:4...
    肇東周閱讀 15,319評(píng)論 4 61
  • 在現(xiàn)在各種APP泛濫,功能內(nèi)容,還有設(shè)計(jì)風(fēng)格,漸漸同質(zhì)化的今天,很難找到一款讓人眼前一亮的APP(本人手機(jī)系統(tǒng)是安...
    hanzhen閱讀 3,657評(píng)論 0 3
  • 1.如何用w3c標(biāo)準(zhǔn)寫html代碼 doctype聲明。 2.css3如何設(shè)置盒子模型為ie盒子模型 box-si...
    向布谷鳥說早安閱讀 2,146評(píng)論 1 2
  • 灰色的天空,迷霧,以及未至的雪 深冬的風(fēng)里絮語很多 都是我熱愛的 時(shí)光有序, 一面用來生活, 另一面,是要愛的, ...
    所思閱讀 535評(píng)論 0 0

友情鏈接更多精彩內(nèi)容