UI設計裡的一些專用術語

2020-12-15 蝸牛學院

相信不少的小夥伴都聽說過「信息流」、「Feed流」、「瀑布流」等專業術語,經常聽多了,自然而然的也多少能悟出點門道,但總免不了有時候一臉蒙蔽的情況。

特別是一些對UI感興趣的小夥伴來說,許多規範尺寸和專業術語,都還是不清楚。

例如:iPhone6的規範大小:

界面尺寸大小是:750x1334px

狀態欄(status bar):就是電量條,其高度為:40px;

導航欄(navigation):就是頂部條,其高度為:88px;

主菜單欄(submenu,tab)就是標籤欄,底部條,其高度為:98px;

內容區域(content):就是屏幕中間的區域,其高度為:1334px-40px-88px-98px=1108px

所以我們今天就來給大家科普一下「信息流」、「Feed流」、「瀑布流」這UI界面設計三大流。

什麼是信息流?

在我看來,信息流大概分為兩種,一種是廣義的,另一種是狹義的。

按照,標準的是說法就是:

廣義:指在空間和時間上向同一方向運動過程中的一組信息,它們有共同的信息源和信息的接收者,即由一個信息源向另一個單位傳遞的全部信息的集合。

狹義:指信息的傳遞運動,這種傳遞運動是在現代信息技術研究、發展、應用的條件中,信息按照一定要求通過一定渠道進行的。

換成人話來說就是,手機APP主動的給你推送的信息(類似於彈出信息),我們是被動接受的一方,常見信息流一般會以純文字、圖文、圖片、視頻、連結、語音、廣告的方式推送。

信息流的幾種類型:

現在的信息流一共包括二種交互,(為了避免廣告嫌疑,我們用國外的兩款APP來舉例吧)

第一種 以Facebook為代表的信息流,我們把它稱作為卡片式交互信息流。

第二種 以Twitter為代表的信息流,我們把它稱作為時間軸的交互信息流。

一般情況來說,卡片式信息流運用的較為廣泛,可承載的信息內容和方式也多,包括圖片和文字都能展示,即使在沒有點擊放大的情況下,圖片內容還是能夠看的清楚,這樣做的好處就在於,用戶的觀看習慣,以觀看圖為主,文字為輔的閱讀模式,是非適用於社交類型的APP。

最為典型的App有Facebook、Instagram,以及國內的「某博」。

另一種時間軸信息流,則是以記錄的方式為主,當作主要的閱讀內容,突出用戶的頭像,而整個圖片區域相比之下會小很多,使得閱讀起來更加緊湊,閱讀重點也從圖片轉移到了文字。

典型的APP就是 Twitter和國內的「某圈」

什麼是Feed流?

首先從字面意思理解,Feed ,翻譯過來是餵養的意思,而Feed流,可以理解成一種呈現方式,那就是餵養式的,當然這也算是一種被動式的接受,就有點類似於,鳥媽媽餵養小鳥一樣,Feed流無需用戶搜索和思考,只要持續下滑,產品會根據數據算法為不同用戶推薦關於其相關的興趣愛好,吸引用戶持續下拉。

這就是你為什麼刷「某音」的時候,能刷一天都停不下的原因,這看似是被裡面精彩的內容迷住了,但其實是被feed流給控制了!

同樣Feed也分為 圖片類、文字類、視頻類,這裡為了節約時間我就不展開講了。

什麼是瀑布流?

這種布局方式確實比較新鮮,我們按照老規矩,遇事不決,先百度:

按照百度百科的說法:瀑布流,又稱瀑布流式布局。是比較流行的一種網站頁面布局,視覺表現為參差不齊的多欄布局,隨著頁面滾動條向下滾動,這種布局還會不斷加載數據塊並附加至當前尾部。最早採用此布局的網站是Pinterest,逐漸在國內流行開來。國內大多數清新站基本為這類風格。

他們大概,長這個樣子:

瀑布流特點:

用戶在滑動的時候會不停的出現新的東西,不斷地加載新的暗示信息,通過給出不完整的視覺圖片去吸引你的好奇心向下探索,有種向下滑動一時爽,一直滑動一直爽的感覺。

這種沉浸式的閱讀體驗,完美的切合了當今碎片化的信息傳播方式,讓大家在快速閱讀的同時,還能有探索的感覺,並且在這個過程中,不易被外界打斷。

可以讓用戶,儘可能多的閱讀app想要推送的內容,且不至於造成視覺疲勞。

但如果用戶在使用期間,受網絡環境影響,很可能出現頁面加載不穩定的情況或卡頓等情況,這樣會大大降低用戶體驗。

總結一下,任何形式的推流設計,都有自己相對合適的場景,而設計風格和用戶的閱讀習慣也是成螺旋式上升的,相信在未來還會有更多的設計方式的誕生,我們作為從業者也應該與時俱進,學習新的理念和技術。

以上就是本期的全部內容,各位看官如果有好的想法或建議,也歡迎大家通過留言的方式告訴我們,讓我們下期再會。

相關焦點

  • 一些常見又很少有確切解釋的專用術語
    喜歡風水、八字的人,總難免會在網上找一些資料,這些資料大體上感覺看得懂,可是落實到某個具體的詞或字上就拿不準具體是什麼意思了,將八字中一些專用術語弄清楚,這些問就迎刃而解了。
  • 平面設計和UI設計從事行業的區別
    平面設計和UI設計從事行業的區別。隨著現階段就業競爭壓力越來越大,人們都想通過學習設計技能,提升個人的核心競爭力。但是很多小夥伴並不知道自己是要從事平面設計行業還是ui設計行業,這兩個行業對從業者有什麼樣的要求。那麼接下來小編就跟大家簡單分析一些平面設計和ui設計有哪些區別。
  • 8種版式設計,讓你的UI作品更上一層樓!
    4、小元素運用這種小字體通常用在負空間裡,可以與背景顏色或圖片建立聯繫,或者通過動畫讓它更加凸顯。5、動態排版動態效果在今年的版面設計中無處不在,只要效果流暢,在今年絕不會出錯。看完這些版式設計的方法,相信大家對以後的設計都有了更多的想法了吧。希望大家在設計的道路上掌握更多的技法,形成自己的設計風格,做自己喜歡的設計。ui設計越來越火,網上很多朋友在問ui設計要學什麼?怎麼學?關於ui設計的學習,常常會聽到這麼一些忠告「多看 多想 多做」,但作為新人更想知道咋看、咋想、咋做。
  • 留白是ui設計的點睛之筆
    同樣是作圖,為什麼UI設計相對於其他的設計方向來說就這麼突出,同樣的UI設計師培訓課程也是比其他的設計類課程要更加複雜和提升的,很大的一部分原因,就是UI設計,不僅是要會作圖,更是要懂交互,這才是UI設計的核心所在啊。
  • 0 基礎學習UI設計必看的知識體系!
    一、首先要分清幾個術語 UI (User Interface):用戶界面 IxD(Interaction Design):互動設計或互動設計 UE或UX (User Experience):用戶體驗
  • 《公主連結》遊戲專用術語是什麼 遊戲專用術語介紹
    導 讀 《公主連結》中玩家在日常交流中常會將部分遊戲中的操作進行簡略表述,對於這些術語不熟悉的小夥伴很容易因為不能有效溝通而需要額外花費時間進行交流
  • 現在學UI設計的是不是都是傻子
    首先我們從標題可以推斷出:一、提問者應該是UI設計設計小白,甚至是IT小白,但是對設計這個行業感興趣或者有學習UI設計入行的想法,這樣提問可能只是為了博眼球,想吸引大家回答從而得出一些關於UI設計行業有關的「爆料」,從而確定現在學UI設計是不是明智之舉。
  • 南京ui設計中的構成是什麼?
    南京ui設計中的構成是什麼?構成是一種造型概念,它的含義是將不同形態的幾個以上的單位元素組成一個新的形態,構成能夠掌握均衡、比例、節奏、統一等形式,美能夠讓用戶感受色彩明暗、對比以及冷暖的變化。今天我們來說說,構成都有哪些內容?
  • 股市的一些專用術語講解 股市常見專用詞彙講解
    在進行股票投資的時候,經常會用到一些專業的術語。如果你不懂得話,就會錯失掉一些投資的良機。股民常用的股票專業詞彙有哪些?  以上就是關於股票常用的專業詞彙的介紹了,股票術語有很多,除了上述的一些術語之外還有其他的相對冷門的專業詞彙。因此,需要投資者對股票進行不斷的學習以及積累經驗,這樣在股市中才能做到進退有餘。
  • UI設計怎麼做,才能拿到更高薪?
    然而,要想成為一名優秀的ui設計師你不僅需要熟練使用各種軟體,還要會設計頁面,還要懂客戶、懂溝通、懂數據、懂動效… 1 工具 工具是每位設計師必須了解熟悉的,它們就是你生存的武器,時下常用的軟體我們都應該掌握
  • UI設計構圖五大法則經驗分享
    我們都知道學習UI設計,一套專業的視頻教程是必不可少的,他可以是我們的指路明燈,也可以是我們的前進的有力工具。今天千鋒小編給大家帶來千鋒講師的經驗分享。  針對UI設計的構圖的一些經驗分享如下:  1、什麼是構圖?  構圖就是有限的畫面中,將各種元素進行合理地布局和安排,使圖形和文字在畫面中達到極佳位置,產生很好的視覺效果。
  • ui設計可提取哪些品牌視覺元素
    ui設計可提取哪些品牌視覺元素?每個品牌具備相應的視覺表現元素,這些元素的不同組合能夠創造出不同的視覺效果,於是很多企業會選擇在ui設計中融入品牌元素,提升品牌知名度。那麼接下來小編就給大家簡單講一下進行ui設計能夠提取哪些品牌視覺元素?
  • 王者榮耀術語大全 常用專用術語全部解說
    在王者榮耀中有很多專業術語,這些術語都是簡潔明了的詞彙,如果你看不懂那可就太Out了,下面就讓大家深入地了解這些專用詞彙。
  • 學UI設計需要會手繪嗎
    經常有很多人在問:學ui設計需要手繪嗎?一直以來都有人問類似的問題。那麼到底ui設計需要手繪能力嗎?手繪不好是不是不能做UI?不是科班出身,沒有手繪基礎怎麼學UI?今天我就針對UI設計要不要手繪能力做一些回答。
  • 如何利用品牌元素進行ui設計
    如何利用品牌元素進行ui設計?在企業發展的過程中往往需要進行一定的品牌建設和推廣,優秀的品牌形象設計能夠加深消費者對於品牌的特有印象,進而促使企業更好地發展。那麼設計師應該如何根據品牌元素進行品牌形象的設計呢?接下來小編就跟大家簡單分析一下。
  • 設計師們做UI設計和互動設計、界面設計等一般會去什麼網站呢?
    http://www.zcool.com.cn/2,優閣網(UIGREAT)優秀UI設計網http://www.uigreat.com/3,ZEALER科技生活方式第一站http://www.zealer.com/4,互動中國廣告設計及H5http://www.damndigital.com
  • 人教部編版一年級語文《ɑi ei ui》教學設計
    《ɑieiui》教學設計一、教學目標知識與能力:1.會讀複韻母ai、ei、ui及其四聲,讀準音、認清形,正確書寫。2.學會聲母與ai、ei、ui組成的音節,能正確拼讀。4.ui也是個愛美的小姑娘,她也戴了四頂帽子。(點擊ui的四聲)誰會讀?(五)學習ai、ei、ui標調的方法1.出示ai、ei、ui的四聲。看一看,它們的帽子都戴在誰的頭上。
  • 21個免費的UI界面設計工具、資源及網站
    來自51CTO的文章,本文將介紹一些UI界面與設計使用的元素、軟體和網站。
  • UI設計新人如何兼職接單
    本文由:「學設計上兔課網」原創,圖片素材來自網絡,僅供學習分享UI設計新人如何兼職接單?其實這個問題也是很多新人的痛點啊,新人前期剛入行除了工資就沒有其他收入,卻又不得不面對各種各樣的房租水電煤,交通,或者說還有女朋友等開銷... ...
  • 學ui設計好還是平面設計好?
    平面設計和UI設計它們有一個共同點就是它們用的軟體大部分是一樣的如Photoshop,CorelDRAW ,AI等軟體,那麼到底是學平面設計好還是UI設計好呢? 我們先來了解一下平面設計和UI設計的區別吧!