iOS交互設計基礎之內(nèi)容視圖(三)

1、活動

每個活動表示一個系統(tǒng)提供的或自定義的服務——通過訪問活動視圖來作用于某些特定的內(nèi)容

(1)活動是一種可定制對象,代表著某個可以讓用戶在APP中執(zhí)行操作的服務

(2)用戶通過點擊活動視圖中的某樣圖標來啟動某項活動

注:騰訊新聞

2、活動視圖控制器

活動視圖控制器是一個臨時視圖,當中羅列了一系列可以針對頁面特定內(nèi)容的系統(tǒng)服務和定制服務

(1)顯示了讓用戶可以針對當前內(nèi)容執(zhí)行操作的一系列的可配置服務

注:堆糖中針對文章內(nèi)容的活動視圖

(2)根據(jù)所處的場景不同,可能出現(xiàn)在操作列表浮出層

注:MONO文章分享,活動視圖出現(xiàn)在浮出層中

(3)使用活動視圖控制器來為用戶提供一些列針對當前內(nèi)容的服務。這些服務可以系統(tǒng)自帶的,例如:復制、轉(zhuǎn)發(fā)到郵件等,也可以是自定義的

注:小紅書

(4)確保活動視圖控制器中的操作是針對當前內(nèi)容的

注:趕集網(wǎng)app

3、集合視圖

集合視圖用戶管理一些列有序的項,并以一種自定義的視圖來呈現(xiàn)它們

注:京東-商品展示


(1)由于集合視圖的布局不是一個嚴格的線性布局,因此適合用來展示一些尺寸不一致的項

注:秒嗨

(2)表格視圖更適合的時候,不要使用集合視圖

4、圖片視圖

圖片視圖用來展示一張單獨的圖片或者一系列動態(tài)圖片

注:朋友圈查看照片

(1)確保圖片視圖中的每一張圖片相同的尺寸或比例。如果你的圖片尺寸不一致,圖片視圖會逐一對它們進行調(diào)整

(2)可以檢測圖片本身及父視圖的屬性,并決定這個圖片是否應該被拉伸、縮放、調(diào)整到適合屏幕的大小

5、頁面視圖

頁面視圖控制器通過滾動或翻頁兩種方式來處理長度超過一頁的內(nèi)容


(1)帶滾動條的頁面視圖沒有默認的外觀

(2)可以根據(jù)指定的轉(zhuǎn)場來模擬出頁面轉(zhuǎn)換時的動畫(例如在線書籍閱讀類產(chǎn)品中左右或者上下翻頁瀏覽信息的效果)

(3)一般使用頁面視圖展示線性的內(nèi)容(故事的文本或文章的內(nèi)容等),或者是可以被自然分成塊的內(nèi)容(比如日歷)

注:簡書文章閱讀頁面 & 騰訊新聞資訊詳情頁面

(4)可以設計一種自定義的方式可以讓用戶以非線性的方式來獲取內(nèi)容(比如說書籍的目、字典等)

注:微信讀書_書籍目錄,點擊目錄可以直接到達目的頁面

6、浮出層

浮出層是當用戶輕點某個控件或頁面中的某一區(qū)域時浮出的,半透明的臨時視圖

注:新浪微博

(1)浮出層是一個包自含的模態(tài)視圖

注:支付寶

(2)可以包含多種對象和視圖,比如:表格、圖片、文本、導航欄、工具欄,可以操作當前APP視圖中對象各種控件或?qū)ο?/p>

注:脈脈-發(fā)布動態(tài)

(3)讓浮出層中的箭頭盡可能指向期出處

注:微信

注意:

(1)不要在浮出層上面再展示一個模態(tài)視圖

(2)確保同一時間內(nèi)同一屏幕上只有一個浮出層

注:收趣云書簽

7、滾動視圖

使用滾動視圖允許用戶在固定的空間內(nèi)瀏覽大尺寸或大量的視圖(例:尺寸超越滾動視圖邊界的圖片)

(1)適當?shù)刂С挚s放操作,如果放大和縮小對于當前內(nèi)容是有用的話,可以支持用戶通過捏合或者雙擊來對當前視圖進行縮放

(2)頁模式滾動視圖中,可以考慮使用頁面控件

(3)一般來說一次只展示一個滾動視圖

8、表格視圖

表格視圖以一個可滾動的單列多行的形式來展示數(shù)據(jù)

(1)用戶可以通過點擊來選中某行,或通過控件來添加、移除、多選、查看詳情或展開另一個表格視圖

注:京東商城

(2)表格視圖的類型:

平鋪型(表格右側(cè)可以出現(xiàn)垂直的表格索引)

注:微信通訊錄

分組型

(3)表格視圖的擴展功能

(4)表格視圖布局樣式

注:default樣式
注:subtitled樣式
注:value1樣式
注:value2樣式

(5)用戶選擇列表項時,始終給與反饋,當用戶點擊可選的列表時,被點擊的列表項都會短暫的高亮一下。

9、文本視圖

文本視圖可以接受和展示多行文本

注:氫氣球_寫游記

(1)文本視圖是一個可定義為任何高度的矩形

注:貓眼電影_寫影評

(2)當內(nèi)容太多,超出視圖的邊框時,文本視圖支持滾動

注:Instagram編輯照片說明

(3)支持用戶編輯,當用戶輕擊文本視圖內(nèi)部時,可以喚起軟鍵盤(可根據(jù)文本類型的差別喚起不同的軟鍵盤)

注:新浪微博

注:本篇是“iOS交互設計基礎系列”最后一篇,關于“欄&臨時視圖&控件”相關內(nèi)容可翻看前兩篇

IOS交互設計基礎之欄&臨時視圖(一) - 簡書

iOS交互設計基礎之控件(二) - 簡書

最后編輯于
?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 229,517評論 6 539
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 99,087評論 3 423
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 177,521評論 0 382
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經(jīng)常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,493評論 1 316
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 72,207評論 6 410
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 55,603評論 1 325
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,624評論 3 444
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 42,813評論 0 289
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 49,364評論 1 335
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 41,110評論 3 356
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,305評論 1 371
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,874評論 5 362
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 44,532評論 3 348
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,953評論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,209評論 1 291
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 52,033評論 3 396
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 48,268評論 2 375

推薦閱讀更多精彩內(nèi)容