hi，這是系列文章：App之xxx的第3篇，前2篇我總結了
《App之“文字”的設計技巧》
《App之底部導航欄的設計》
我為什麼寫這個系列的文章。因為我正在做一款app，我在團隊中主抓產品設計、UX/UI設計、部分前端開發，少量運營。在工作之餘，我決定把所研究的內容寫成關於app之xxx的系列文章，文章選擇的題材會往“小而精”這個方向努力，範圍在我的工作內容中選取。
今天來總結下App的可點選元素的設計。
一、可點選元素包括哪些？
先看看常見的按鈕是這樣的：
這是具象的，模模擬實世界裡的按鈕來做的設計。
關於按鈕控制元件，在軟體工程裡，是這麼定義的：
按鈕控制元件，是一種基礎控制元件。按鈕控制元件根據其風格屬性可派生出：命令按鈕、核取方塊、單選按鈕、組框和自繪式按鈕。
目前，大部分移動app都屬於自繪式按鈕了，誰還用系統那自帶的控制元件？
所以，app裡，按鈕還可以是這樣的：
這個例子裡，文字都是可以點選的，沒有使用圖示，也沒有使用具象的按鈕形式。僅僅使用文字作為可點選元素存在，而不使用圖示作為可點選元素，這樣使得這款閱讀古詩詞的app別有一番風味，其產品的氣質體現得很到位。
其實，app的所有構成內容都可以是可點選元素。包括文字，圖片，圖示等等，點選後都可以有各種各樣的迴應。
點選的概念比按鈕更廣泛，文字、圖片、圖示、按鈕、輸入框等等，都是可點選的。
那麼，點選背後會出現什麼？這種迴應會造成使用者困惑嗎？這需要UI&UX設計時好好考慮，為了降低使用者的困惑，我們需要用可點選元素給使用者明確的提示。
我們再看個例子：
這裡下載具體寫清楚了是下載音樂，這樣就可以避免單獨使用下載圖示，而使用者不清楚下載的具體內容這種情況的出現了。
可點選元素所給到的迴應應該是語義準確，而且在點選前已有所提示。
目前，常見的可點選元素有4種型別：
- 純文字
- 圖片
- 卡片式
- 語義化的圖示
二、純文字跟圖片作為可點選元素，語義表達是最準確的。
如下圖，點選圖片直接是檢視圖片的詳情，邏輯明確。
三、卡片式，點選卡片任意位置開啟詳頁，可以使app邏輯簡單明瞭。
同時，卡片UI可以做得比較豐富，圖片、標題、簡介、按鈕等元素都盡情表達。如：
還有一類稍複雜點的卡片，卡片上欄跟下欄分別進入不同的詳頁，如：
四、圖示應儘量使用語義化高的，適當使用文字作為提示。
4.1語義化的圖示
圖示需要具有高度可識別性，具有高度識別性的圖示我稱為“語義化圖示”，因為看到這些圖示，已經不需要更多的文字來解釋它的具體含義了。
下面介紹幾種語義化很高的圖示，運用這些圖示可以減少文字的使用。
加號－－“新建、增加”的含義，比如
印象筆記的加號就是表示新建新筆記；
微信、QQ、支付寶的表示發起群聊、新增朋友、掃一掃、收付款；
知乎的加號，是發表新的問題；
百度雲的表示上傳照片、上傳視訊；
網易新聞的表示切換欄目、新增欄目；
大眾點評的是寫點評、新增商戶、掃一掃、付款碼；
愛奇藝，拍攝上傳、掃一掃。
花瓣的採集功能。
加號也可以跟各種語義化的圖示相組合，比如領英的新增聯絡人：
省略號－－“更多”的含義：
寶寶樹孕育圈子裡的省略號，表示“訊息、搜帖子”的功能項。
微信公眾號裡，用來表示“推薦給朋友、投訴、清空內容、不再關注”
還有，微信朋友圈文章，更多中收納的豐富功能選項：
抽屜符號——表示“類別、分類”
方向箭頭——表示“返回、前進、收納、展開”
4.2 文字輔助圖示表達更準確的含義
在圖示不能完全表達意思的時候，通常增加文字輔助表達。
4.3 關於圖示，給大家推薦幾個網站：
https://thenounproject.com/
http://www.easyicon.net/
http://www.iconfont.cn/
https://icomoon.io/app/#/select
可以用thenounproject檢視下錶達一個意思的圖示到底有幾種形式，我嘗試了下搜尋“分享”，得到下圖的結果，做設計的時候可以多參考下慣用的表達形式。
最後，總結下：
一、可點選元素包括這些：純文字、圖片、卡片式、語義化的圖示。
二、純文字跟圖片作為可點選元素，語義表達是最準確的。
三、卡片式，點選卡片任意位置開啟詳頁，可以使邏輯簡單明瞭。
四、圖示應儘量使用語義化高的，適當使用文字作為提示。