• 相關文章
  • 文字效果
  • 調色教學
  • 合成教學
  • 去背教學
  • 照片後製
  • 電腦繪圖
  • 設計教學
  • 動畫教學
  • 簽名製作
  • 其他教學
  • Illustrator
  • CorelDraw教學
  • 攝影教學
  • 3DMAX教學
  • AUTOCAD教學
  • MAYA教學
  • FireWorks教學
  • flash教學
  • 繪畫教學
  • PS作品欣賞
  • 包裝設計範例
  • LOGO設計範例
  • 封面設計範例
  • 名片設計範例
  • CG繪圖設計
  • 海報設計
  • 網頁設計範例
  • PS筆刷下載
  • PS濾鏡下載
  • PS動作下載
  • PS背景下載
  • PS樣式下載




  • 【 設計理論】從空間角度談移動界面擴展




    從空間角度談移動界面擴展

    這一次的教學是屬於設計理論領域中的設計理論的相關教學。

    文章出處是來自未知的設計理論類文章,寫教學的作者是情非得已,感謝情非得已提供設計理論的實作教學。

    教學大綱:

    移動產品大家都不會陌生,幾乎是無所不能,可以隨時隨地滿足用戶的多種需求。那麼移動產品設計呢?有沒有遇到類似的情況,PM小A說:產品要增加功能, 在界面上加個入口,小意思嘛。小B說:內容太少了,咱們再擴展一下頁面,沒有難度嘛。小C說:能不能擠一擠多


    設計理論教學開始

    移動產品大家都不會陌生,幾乎是無所不能,可以隨時隨地滿足用戶的多種需求。那麼移動產品設計呢?有沒有遇到類似的情況,PM小A說:產品要增加功能, 在界面上加個入口,小意思嘛。小B說:內容太少了,咱們再擴展一下頁面,沒有難度嘛。小C說:能不能擠一擠多放個功能?用戶真的有需求…

    可界面的空間是有限的,內容需求卻是無限的, 從3.5寸到5.2寸到9.7寸的pad,不管多大尺寸的屏幕,都逃脫不了這樣的命運。就像房屋的空間和放在裡面的東西,永遠存在東西放不下的問題。既然是同類的問題,能不能從相同的角度出發來找到解決方案呢?

    從空間角度談移動界面擴展

    在建築學中,空間主要指視覺層面感受到的幾何學意義的三維物理空間,也就是空間中的人對環境的一種三維層面的感受。因此空間擴展就是從不同維度來尋求解決方法,包括收納、層級化分割和視覺感受擴張等。類比到移動產品的體驗上,最基礎的也是如何讓有限的屏幕承載更多的功能,讓用戶感受到空間的舒適。本文就藉助建築學的空間擴展概念,從信息收納、層級化信息、變臉和視錯覺四個維度來談談屏幕空間的擴展。

    從空間角度談移動界面擴展

    收納

    顧名思義,把不用的東西收起來,表面上乾乾淨淨,打開會找到想要的內容,這種方式特別適合零碎功能的整合。 一些事

    1.收納方式分類,主要有以下三種。

    a. 定義好收納規則和內容

    即規定整理好要呈現給用戶的功能,這一種的關鍵點就是抽屜的標籤,讓用戶在關着的情況下能究竟收在哪裡,入口在哪裡。

    從空間角度談移動界面擴展

    從空間角度談移動界面擴展

    那麼收納的形式呢? 從交互模型來看有很多種,最典型的像Path 的側邊欄式,上下摺疊式,沉入式,還有Android系統級操作的處理方法。目的都是在用戶不會用到的時候,把相關的信息藏起來,收起來,並且有個永遠存在的入口,當用戶需求就能快速拉開調起,非常方便。 互聯網的一些事

    從空間角度談移動界面擴展

    b. 定義好收納規則后,用戶隨意擴展內容。

    這種收納方式特別適用於記事類或者日程類的應用,因為相對來說,這類應用的主要信息源是用戶本身,且縱向無法預估和控制信息的量級。那麼這樣一種定義好收納規則,但內容無限的方式就特別適用了。下圖就是一種典型的記事本信息收納方式。

    從空間角度談移動界面擴展

    c. 用戶自定義規則和內容,隨時可以整理替換抽屜的內容。

    既然空間交給用戶,怎樣分割和收納都由用戶自定義,那麼這一種方式的關鍵就是“扔”和“裝”都要方便,可以簡單快速的將內容裝進抽屜。最直接的例子就是iphone的app界面,拖動疊加即可形成一個收納,拿出去也非常方便。

    從空間角度談移動界面擴展

    2.收納樣式,主要分為“有門抽屜”和“無門抽屜”兩種

    a.有門抽屜

    是指即使抽屜關閉,裡面的信息收納着,也需要固定存在的入口時刻提示用戶從哪裡開啟,像側邊欄,永遠有開啟按鈕的。

    b.無門抽屜 yixieshi

    是指開關抽屜門的都是通過高級手勢操作喚起的,連門都不需要,只需要用戶知道開啟方式,比如長按、滑動指定信息條等喚起。

    一般來講,高級操作對應的也是收納的較高級,不常用的信息,用戶知道開啟方式就可以,連抽屜門的空間都可以節省出來。

    層級化信息

    空間有限,那麼要想空間利用更有效,可以將空間分割,分模塊展現內容。不管是單純的list列表,瀑布流,還是其他什麼形式,總會從其他維度找到剩餘空間 。類比成道路交通,飛機、道路交通、地下軌道并行,便是充分利用了空間。移動界面中同級、下級的頁面跳轉,可以利用動效帶給用戶更接近真實的空間層級感。其中包括

    a.同級多tab架構

    從空間角度談移動界面擴展從空間角度談移動界面擴展

    b.下級篩選(包括下拉式和浮層式)

    從空間角度談移動界面擴展

    c.沉浸式下一級體驗

    即還原了相機近大遠小的原理,通過層級分割展現更多信息頁面,這種方式的好處是每個界面都可成倍擴展。

    從空間角度談移動界面擴展

    (以上只是各類別的列舉,相同屬性的內容都可進行擴展)

    變臉

    在Web 設計中不會在意細小的空間,狀態條就是狀態條,即使沒有狀態,空着也好,但移動空間實屬寶貴,那麼在不需要的時候顯示其他內容,也不失為一種解決方案。基於代碼實現的虛擬空間,都是可以有If-then條件的。

    舉例來說就是在XX情況下,按鈕狀態為A;在XXX情況下,此按鈕狀態為B。 或者同樣區域可以顯示不同內容,承載不同的操作。

    a.同區域顯示不同狀態

    即延續web的狀態條邏輯,將更多狀態顯示的集成發揮到極致,實時感知情境的變化,作為與用戶直接溝通的對話窗口,承載更多信息來達到節省空間的作用。

    從空間角度談移動界面擴展

    b.同區域顯示不同功能

    像輸入框的提示,情景化的按鍵等,會根據不同的框屬性,適配不同功能按鍵。如下圖所示比如聯繫人列表,在默認狀態顯示聯繫人列表名稱,當用戶需要搜索時,就會展開搜索框可進行輸入。同一個區域在不同狀態下,承擔著兩種不同的任務和內容,但這種方式的局限性是可擴展範圍較小。適合一些小功能的位置集成。下圖是某應用中的聯繫人列表,很直接的一個小點就是,將聯繫人列表顯示和搜索聯繫人操作集成到同一區域,用戶也容易接受。

    同樣同區域不同功能的變化在輸入法的按鍵上體現的更為明顯。

    從空間角度談移動界面擴展

    顯示聯繫人列表 互聯網的一些事

    從空間角度談移動界面擴展

    展開搜索框

    目前對於移動端的應用,更多是對這種“變臉”邏輯的研究和擴展,很多產品也推出了情境化感知的概念,即擴展移動設備可感知的情境,增加if條件,讓空間利用實現到極致。包括現在熱門的對Smart Bar的討論也是同樣的道理。

    因為移動設備有各種傳感器,能實時收集用戶信息,這些都是讓應用變得更加智能的前提。

    補充一點

    在室內設計中,由於鏡面具有反光和成像的功能,因此將其用於室內不僅能增加室內的亮度,而且能起到擴大空間感、豐富室內裝飾效果的作用。這種視錯覺的運用同樣可以應用到移動界面設計中, 通過輕量化視覺元素, 增加轉場動效等方式來使用戶操作過程中體驗更順暢,從感受上起到擴展空間的效果。當然這更抽象到一種情感設計的層面,具體的應用方法還值得大家一起探討。 一些事

    下圖同樣為主屏解鎖界面,一種是到點到點,另一種是點到邊,哪種看起來空間更開闊呢?明顯第二種會給人帶來一種可擴展的空間感,第一種就顯得完全平面化了很多,同樣是一個界面的信息,第二種就給人一種更廣闊空間的心理暗示,通過沉浸感的交互方式讓用戶感受到無限空間。

    從空間角度談移動界面擴展從空間角度談移動界面擴展

    總結

    好了,以上就是從建築學空間擴展的視角出發,從收納、層級化信息、變臉和視錯覺四個層面分別對應到移動應用中,希望可以為你在移動應用中擴展信息空間的設計帶來一點靈感,每個層面還可以擴展出更多的方式,我們一起在設計中不斷積累和總結吧,充分利用屏幕空間,讓有限的空間可以實現無限的延展。

    — —

    文章永久連結為: 從空間角度談移動界面擴展