移動端內容編輯器(鍵盤)的設計參考

大家無論是發微博,微信,知乎,等等,都會使用到鍵盤(內容編輯器),今天就跟大家一起思考和探索,鍵盤設計有哪些比較好的設計體驗。

首先,我們先看最基礎iOS原生控制項的鍵盤。

在最基礎的社交中,原生鍵盤已經足夠我們使用,但是在內容原創類的產品中,這些是完全滿足不了鍵盤俠的操作的,功能性的擴展是必然,下圖的基本功能擴展內容,都是我們在編輯文章時最基礎的排版工具。

以上的功能,如何將其嵌入到鍵盤的設計中呢?

鍵盤設計參考

產品名稱: iOS 備忘錄

參考內容:文本樣式

iPhone備忘錄的原生編輯器是非常值得參考的,它對於擴展功能的交互設計做的極好。

在文本樣式中,它將所有功能都排列的很清晰,體驗也非常好。

如果你覺得這種編輯器很麻煩,它在文本處做了一個快捷編輯,手指長按選擇,就可以簡單的編輯樣式。

備忘錄編輯器的交互和排版樣式可以應用在很多產品中,如果你覺得不太好,那可以對比看一下微博頭條文章的文本編輯器,俗話說,沒有對比就沒有傷害。

產品名稱:騰訊QQ

參考內容:圖片選擇

一般我們在聊天過程中,如果需要發送照片時,需要點開相冊的按鈕,然後進入二級頁面相冊中來選擇。

QQ在發送圖片的交互中,做了一個選擇框,可以快速的選擇,不用在進入二級頁面選擇相片了,非常方便快捷,不過這個設計只能選擇最近的照片,如果想發送以前的照片,點擊左下方的相冊就可以了。

產品名稱:印象筆記

參考內容:文本樣式

印象筆記的文本樣式設計和備忘錄有些相似,可以說是基於備忘錄的文本編輯器升級優化的,這裡不考慮視覺,只看其功能和交互。

印象筆記在鍵盤上方的空白處做了標籤選項,用戶可以方便的切換鍵盤和編輯器,而且,它在底部設計了文本色彩選擇。

在排版編輯中,增加了段落編輯,選擇列表等,對功能的分類非常清晰。

總結

在設計文本編輯器時,可以參考以上設計方法,把自己當作一個用戶來設計,雖然每個產品對於編輯器的功能都有一定的限制,不過,好用的編輯器依然會受到用戶的青睞。

如果你想成為一個鍵盤俠,先把自己的鍵盤來好好設計一下吧。

文章來自於微信訂閱號:rulvbb(如履薄冰)


推薦閱讀:

TAG:移動端UI設計 | 文本編輯器 | 設計 |