富比士提出5大UI/UX設計趨勢,快速掌握電商成功訣竅!(下)

富比士提出5大UI/UX設計趨勢,快速掌握電商成功訣竅!(下)
富比士提出5大UI/UX設計趨勢,快速掌握電商成功訣竅!(下)

掌握這5大UI/UX設計趨勢,想要在電商打出一片天絕非難事!(下)

 

本文為下篇,上篇請看此連結

四、跳脫平面單一感的 3D 圖像(3D Imagery)

3D 圖形也是2021年ui/ux設計趨勢之一

 

3D 圖形仍是潮流不減,尤其是當 UI/UX 設計師創建更容易和快速。Oganes 說道在今年最喜歡的 3D 趨勢之一,是將現實生活中的人類描繪成藝術卡通人物。它創造一種美學上令人愉悅的設計,與我們每天在屏幕上看到的逼真圖像不同。我們公司UI/UX設計師經常會將 3D 元素添加到 2D 照片中,藉以創建出比平面照片更多細節的深度。

 

五、語音介面設計(Voice User Interfaces, VUI)

科技蓬勃發展的正在改變世界,使用者與電腦的對話,不再只是仰賴滑鼠鍵盤的輸入,舉例來說:Apple的Siri,通過語音與系統進行互動的方式。探討以下目前語音介面設計趨勢迅速發展的要點:

 

說話是自然的,打字則是屬於多條件的輸入。

 

傳播技術勢不可擋。例如:無論您是想打開車庫門、進行預約、訂購外賣甚至啟動汽車,一切都可以透過聲音來實現。

 

對於殘障人士來說更實用。有視覺障礙的人可藉由語音,使用他們的設備和應用程式,不必擔心使用介面或是視覺上的不便利。

 

 

 

 

 

推薦文章:
UI/UX 按鈕設計基本7個原則,優化電商轉換率


介面、體驗大不同!UI設計/UX設計工作內容完整剖析


使用 A/B 測試來改善網站 UI 設計的 30 個例子


落實「數位優先」的 UI 設計,Audi、福斯把 Logo 壓扁了?


軟404影響SEO?!免驚!谷歌正在修復錯誤!


人工智慧SAY NO不稀奇?!它還會跟你談判跟辯論!


今年程式語言排行知多少?聽說Python奪冠有望了?!

富比士提出5大UI/UX設計趨勢,快速掌握電商成功訣竅!(上)

富比士提出5大UI/UX設計趨勢,快速掌握電商成功訣竅!(上)
富比士提出5大UI/UX設計趨勢,快速掌握電商成功訣竅!(上)

掌握這5大UI/UX設計趨勢,想要在電商打出一片天絕非難事!(上)

 

目錄

電商取代實體商店成主流 UI設計重要性堪比店面裝潢

一、玻璃擬態(Glassmorphism)的 UI 設計

二、耳目一新的大膽字體(Big Loud Typography)

三、有別於傳統的抽象幾何(Abstract-geometric)

四、跳脫平面單一感的 3D 圖像(3D Imagery)

五、語音介面設計(Voice User Interfaces, VUI)

 

美國堪稱最具指標性的財經商業雜誌「《富比士》(Forbes)」,近期竟跨領域地提出 2021 年UI/UX 設計的5大趨勢!

 

《富比士》所屬之「富比士機構委員會(Forbes Agency Council)」的其中一個成員、也是「數位比佛利行銷策略公司(Digital Beverly Marketing Solutions)」的CEO Oganes Vagramovich Barsegyan就提出了5個今年掀起熱潮的 UI/UX 設計趨勢。

 

電商取代實體商店成主流 UI設計重要性堪比店面裝潢

全球發生在線上的交易活動早在激增中,加上新冠(COVID-19)疫情讓民眾在家中使用手機、iPad、電腦等進入電商消費的模式,已取代以往的實體門市。消費者們已融入數位服務的生活,習慣、行為已有大大的改變。

 

如今網站上的UI(使用者介面)設計,就相當於實體店面的裝潢,且比以往更加重視美感。UI介面設計的變化以下五個 UI/UX 設計趨勢觀點:

 

一、玻璃擬態(Glassmorphism)的 UI 設計

UI/UX 普遍正朝著極簡主義美學,玻璃擬態長期保持領先的流行趨勢,從配圖到整個操作流程的介面、按鈕使用同一種色系,以不同層次結構和深度的呈現,顯得不會單調枯燥。網站避免繁雜的資訊或低解析度照片,保持觀看者能清楚閱讀,增加停留在網站上的時間。

 

如同以下影片所示,玻璃擬態主要基於背景模糊與磨砂的效果,營造出漂浮在空間中的穿透、朦朧感。譬如說:蘋果與高盛銀行共同發行信用卡「Apple Card」 科技、時尚的設計,出於玻璃擬態的概念,視覺宛如漂浮在半空中的透明卡片,隨著消費類別改變不同柔和的顏色。

 

 

二、耳目一新的大膽字體(Big Loud Typography)

大字體是 2021年 的五大 UI/UX 設計趨勢之一

 

重複無奇的排版文字會產生視覺疲乏,需要產生亮點為觀看者帶來視覺刺激。敢於大膽破格的用字,凸顯出設計師是否有獨特的思維,更容易受到關注。不同的字體造型,產生不同的情緒與印象,即使是誇張或用於開箱文的標題,搭配合適的UI/UX設計,令人感到新穎卻又不失傳統的美感。

大膽字體能吸引網站訪客,但也可以不譁眾取寵的方式呈現。

 

大膽的字體風格是吸引網站訪客的必要條件,視覺上不是要呈現對人大吼大叫般的緊張感,比較像是微妙的語氣說道「看這裡」。此外,可以嘗試在同標題中組合不同的字體,同時兼具可讀性與可視性的特點。

 

大膽字體能吸引網站訪客,但也可以不譁眾取寵的方式呈現。

 

三、有別於傳統的抽象幾何(Abstract-geometric)

抽象幾何圖案是 2021年 ui/ux 設計趨勢之一

 

具有線條、形狀和角度的抽象藝術歷久不衰,現今煥然一新仍是受到關注,歸功於形狀和顏色兩者結合在一起表達想法,並且以自由流動、非線性的方式表達創作。

 

許多企業喜歡抽象和幾何藝術,因為能夠化繁為簡,具有簡練、醒目、形式感強的UI/UX視覺特點。增加鮮明高對比的顏色,創建富有表現力的外觀,而不會分散用戶的注意力。獨特創新的融合於畫面並不拘一格,體現出商業中的樂趣。

 

譬如說:試著使用抽象幾何地圖的設計,取代網站上的傳統地圖,觀看者肯定會記住您的位置。

 

下篇請看此連結

 

 

 

 

推薦文章:
隱私是基本人權!蘋果新功能「App 追蹤透明度」


Google 加強隱私,讓你快速刪除15 分鐘內搜尋紀錄


Google 為保護隱私,棄Cookie 卻改用人工智慧?


Facebook 開源Python 語言的安全與隱私工具Pysa


擔心線上開會太邋遢?AI神救援讓你形象超完美(上)


憂鬱症掰掰,人工智慧快速判別及早治療!


軟404讓你SEO成效不彰?放心,谷歌正著手處理中!

 

7個UI/UX基本設計掌握好,電商轉換率優化沒煩惱!(下)

7個UI/UX基本設計掌握好,電商轉換率優化沒煩惱!(下)
7個UI/UX基本設計掌握好,電商轉換率優化沒煩惱!(下)

掌握這7個UI/UX的設計原則,優化電商轉換率並非難事!(下)

 

本文為下篇,上篇請看此連結

 

5. 按鈕在版面上的順序位置

循序漸進的按鈕順序就像是使用者和系統之間的對話,在 UI /UX設計的過程中,不斷反問自己或換位思考,使用者點選按鈕的步驟,會希望達成什麼目的,並進行相對應的設計。譬如說:上一頁/下一頁的按鈕,左右方向的箭頭按鈕是常見呈現方式。

 

 

6. 避免過多的按鈕分散注意力

為了能夠增進 UX 使用者體驗,會在同個頁面上增加各式各樣的按鈕,一不小心數量會比預期來得多,便會產生分流降低點擊率。譬如說:如果主要目的是想讓使用者點選頁面下載按鈕,使用者可能會因為點選其他連結而離開頁面。盡量將用於引導的選單與分類選項的按鈕樣式區隔開,以確保使用者點選到目標按鈕。

 

 

7. 加入音效或動畫產生互動

藉由人的五官體驗,在按鈕的設計上傳達聲音與動態效果就能更加深使用者的體驗,試著營造出如同按鈕圖示呈現的舒適情境,當使用者點選時,產生音頻或視頻響應式的回饋。如果使用者未接收到任何回饋時,通常會認為系統沒有接收到指令,而不斷的重複點選,便會導致多次不必要的操作。

 

方便點選的按鈕還有許多值得探討的 UI 設計技巧,以上所述的7個基本要點常用也可以說是最容易忽略的一部分。優化按鈕設計的各種細節,探索各個細節對目標的點選,更能夠達成自己所理想的轉換成效哦。

 

 

 

 

 

 

 

推薦文章:
隱私是基本人權!蘋果新功能「App 追蹤透明度」


Google 加強隱私,讓你快速刪除15 分鐘內搜尋紀錄


Google 為保護隱私,棄Cookie 卻改用人工智慧?


Facebook 開源Python 語言的安全與隱私工具Pysa


線上會議不卡卡,人工智慧讓你給你超優質體驗!(上)


影片也要SEO?!15種方法讓你在GOOGLE前幾名!(上)


經典遊戲大升級!AI打造出史上最難玩俄羅斯方塊!

 

7個UI/UX基本設計掌握好,電商轉換率優化沒煩惱!(上)

7個UI/UX基本設計掌握好,電商轉換率優化沒煩惱!(上)
7個UI/UX基本設計掌握好,電商轉換率優化沒煩惱!(上)

掌握這7個UI/UX的設計原則,優化電商轉換率並非難事!(上)

 

目錄

1. 互動式的按鈕設計

2. 方便搜尋版面上的按鈕位置

3. 指令清楚的按鈕標示與說明

4. 符合使用者習慣的尺寸大小

5. 按鈕在版面上的順序位置

6. 避免過多的按鈕分散注意力

7. 加入音效或動畫產生互動

 

按鈕在網站上出現的頻率是相當高的,如同實體店面的動線,協助顧客快速找到目標。隨著線上的商業發展蓬勃,網站設計上開始重視使用者觀看版面的體驗(UX),如何藉由按鈕的佈局轉換為交易,並進一步提升營收將是本次的主題。

 

雖然現今的網站美輪美奐,還是會存在配色違和、無法找到搜尋功能或資訊不知所云的情況。隨著響應式網頁設計(Responsive Web Design,簡稱 RWD)的普遍,改善同時在手機、iPad與電腦不同裝置顯示問題,在版面中搭建使用者與系統之間的互動操作流程,仍不能缺少按鈕作為基礎視覺元素。

 

按鈕的設計不只是簡單的一個圖示,任何讓我們感到舒適方便的操作,都是有規律可循的。UI/UX 設計過程嘗試揣摩使用者心理,加入外觀美學、色彩學等知識創建而成,分成以下7個基本要點說明:

 

1. 互動式的按鈕設計

建立按鈕需要使用正確的樣式,依照按鈕產生的狀態設計不同外觀,包含:大小、形狀、顏色、陰影等因素組成,再搭配上合適的字體與間距,藉由簡單的觸控、按下去即可達到目的,讓人享受到即時的強烈滿足感。

 

線上虛擬按鈕的視覺性,來自接觸實體按鈕的體驗和認知根深蒂固,UX 使用者體驗塑造出的習慣行為和文化影響著設計的直觀性和易用性。

 

以下是大多數用戶熟悉的幾個按鈕示例:

1. 帶有方形邊框的按鈕

2. 帶圓角的按鈕

3. 帶陰影的按鈕

4. 幽靈按鈕

 

 

除了容易點選的按鈕樣式,保持與周遭文字適當的留白避免視覺干擾。

 

 

 

2. 方便搜尋版面上的按鈕位置

使用者閱讀內容的同時,會搜尋版面可點選的功能按鈕,比如:下一頁、產品介紹等,如果使用者在視覺上尋找的時間愈久,若找不到按鈕,便不會知道它的的存在,愈容易感到網站不好使用。

 

為了和使用者不要玩追逐按鈕的遊戲,因此使用一致性的排版設計,便會提高使用者的發現的效率與準確度。普遍於環環相扣的傳統標準佈局,足夠的留白與簡潔使版面不會太擁擠,即使不是強烈鮮明的按鈕,依然隨著閱讀動線吸引使用者輕鬆的點選。

 

3. 指令清楚的按鈕標示與說明

帶有誤導性資訊的按鈕標示,容易讓使用者感到迷惑。設計標示按鈕文字時,為了傳達出每個按鈕的作用,便需要簡短、有邏輯且適當的文字,讓使用者清楚了解點選按鈕後的結果,盡快獲得自己想要的內容,太拐彎抹角的說明只會讓使用者跟內容之間的距離變得更遠。

 

比如下列案例

 

 

不明白此對話框中的“確定”和“取消”代表什麼。大多數使用者只會疑惑“當我點選‘取消’會發生什麼事?”

 

 

與其按鈕標示“OK”,不如使用“Remove”,清楚的表達按下去後會發生的事情。如果“刪除”是一個潛在的危險操作,可以使用強烈的顏色來提醒。

 

4. 符合使用者習慣的尺寸大小

按鈕圖示讓 UI 觸控尺寸大於可視尺寸,確保互動可靠性,按下按鈕應該是一個簡單的任務,如果使用者無法成功地輕點按鈕,或在操作過程中感到無所適從,這會帶來負面的體驗,並且浪費時間。

 

按鈕的大小反應著在屏幕上優先順序,愈是優先的重點便會是愈大的按鈕表示,或是使用更鮮明的對比色來凸顯,藉此增加使用者的注意力。而在操作 UI 使用者介面過程中,按鈕需考慮對使用者觸控的友好度,按鈕太小,往往導致會有輸入錯誤的情況發生。

 

 

 

 

 

麻省理工學院觸控實驗室的研究發現,指尖的平均值在 10-14 mm之間,指尖為 8-10 mm。這使得 10mm x 10mm 成為合適的最小觸控尺寸。

 

 

 

下篇請看此連結
 

 

推薦文章:
隱私是基本人權!蘋果新功能「App 追蹤透明度」


Google 加強隱私,讓你快速刪除15 分鐘內搜尋紀錄


Google 為保護隱私,棄Cookie 卻改用人工智慧?


Facebook 開源Python 語言的安全與隱私工具Pysa


會say no的人工智慧?!美打造辯論談判高手AI!


憂鬱症掰掰,人工智慧快速判別及早治療!


經典遊戲大升級!AI打造出史上最難玩俄羅斯方塊!

下定決心就可以做到!測試員也能輕鬆轉戰前端工程師!

下定決心就可以做到!測試員也能輕鬆轉戰前端工程師!
下定決心就可以做到!測試員也能輕鬆轉戰前端工程師!

想要轉戰前端工程師不是夢!測試員也能微痛轉戰成功!

測試工程師察覺現況,決定學習網頁前端

 

 

林先生大學時就讀電子工程學系,現在是一名網頁前端工程師,在公司負責網頁前端的切版及開發。

在轉職之前,林先生的工作是科技業的測試工程師,但當時公司所有的產線、設備基本上都在大陸,且公司也在管控出差的人員。林先生察覺到這樣下去,根本學不到實際的東西,因此埋下了轉職的念頭。

在當時因緣際會下接觸到達內教育的「前端工程師」課程,聽完說明後理解到:這是一份包含了從入門到進階應用、從前端到後端的一條龍式課程,非常的全面,於是就決定報名了。

非本科系的微痛學習歷程

畢竟不是本科系,從未接觸過網頁開發的林先生在學習過程中,感到壓力非常大。從最基礎的網頁切版到學習 Javascript 框架,並獨自一人整合網頁前後端,完成專案。雖然過程中壓力非常大,而且遇到非常多不會的問題,但是當把獨立完成的網頁呈現出來時,成就感可不是言語能夠表達的。

前端工程師經驗滿一年

林先生轉職至今,已經累積了超過一年的前端工程師經歷。他說:每天都會有新的技術需要學習、新的問題需要解決。「如何調整心態,並不斷精進能力,是目前最需要解決的課題。但是有著在達內這段學習的歷練,相信我一定很快就能克服。」

 

 

 

推薦文章:
用說的就能寫程式!人工智慧替手傷工程師開發語音程式工具


Google 12 月更新演算法!SEO今年排名最大洗牌


Google 在 Search Console 中啟用新的檢索統計報告


Python與R語言之戰鹿死誰手?盤點5個即將消失的程式語言!


人工智慧操刀寫文章?記者工作恐不保?!(上)


人工智慧藥櫃,為你我用藥安全把關!(上)


淺談愛沙尼亞如何讓人工智慧賦予法律決策權!(上)

學會這些技能讓前端工程師更加分-MySQL基礎教學

學會這些技能讓前端工程師更加分-MySQL基礎教學
學會這些技能讓前端工程師更加分-MySQL基礎教學

前端工程師如果可以學會這些MySQL技巧可以更加分!

對於前端工程師來說,MySQL 可以說是屬於後端工程師的技能。但是如果前端工程師也略懂 MySQL 的話,不管是求職上會有莫大幫助。

因為在人力銀行網站搜尋前端工程師的職缺,會發現有些公司會把 MySQL 列為前端工程師的必備技能。通常 (非全部) 擁有 MySQL 技能的前端工程師獲得高薪的機會較大。多一項能力,調薪的籌碼就越大。

推薦閱讀:前端工程師的學習路線圖整理

我們就直接切入基礎的 MySQL 教學!本篇最主要先介紹一下資料庫 4 大基要語句,他們分別是定義資料庫的 DDL (Data Definition Language)、操作資料庫的 DML (Data Manipulation Language)、控制資料庫的 DQL (Data Control Language) 與查詢資料用的 DCL (Data Query Language)。簡介如下:

資料庫定義語言 – DDL (Data Definition Language)

定義資料庫的結構,常見語句有 CREATE、DROP、ALTER。

DROP

丟棄或刪除資料庫。寫法如下:

刪除一個「已經確定存在」的資料庫:

DROP DATABASE 資料庫名稱;

範例:

DROP DATABASE xz;

刪除一個「不確定是否存在」的資料庫:

DROP DATABASE 資料庫名稱; 

範例一. 在不確定名為「xz」的資料庫是否存在的狀況下,刪除 xz 資料庫:

DROP DATABASE IF EXISTS xz;

在cmd操作MySQL刪除資料庫

▲ 在命令提示字元使用 MySQL 的 DROP DATABASE 語法

CREATE

創建資料庫或表格。寫法為:

CREATE DATABASE 資料庫/表格名稱;

範例一、創建名為 "xz" 的資料庫:

CREATE DATABASE xz;

範例二、創建名為「FrontEndElements (網頁元素)」的表格,表格有兩個欄目,分別為「element(元素)」、「usage(用途)」;又令「element」的內容限制為 10 個字元、「usage(用途)」則為 32 字元,代碼如下所示:

CREATE TABLE FrontEndElements(`element` VARCHAR(10),`usage` VARCHAR(32));

註:MySQL 本身內建一些具有特定功能的保留字,這些保留字中包含「usage」,與我們欲建的欄目名稱同名,會令 MySQL 混淆導致無法建表 (如下圖)。

在cmd操作MySQL創建的欄目名稱與保留字重複而無法建表

▲ 在命令提示字元使用 MySQL 創建的欄目名稱「usage」與保留字重複,而導致無法建表。

為了區分,因此加了反引號,為「`usage`」。

其實 MySQL 教學中的保留字很多,前端工程師不可能每個都記熟。所以寧可在每次創建表格時,都在欄目名稱的左右側加上反引號。如下圖所示:

在cmd操作MySQL創建名為「FrontEndElements」的表格

▲ 在命令提示字元使用 MySQL 創建名為「FrontEndElements (網頁元素)」的表格,表格有兩個欄目,分別為「element(元素)」、「usage(用途)」;又令「element」的內容限制為 10 個字元、「usage(用途)」則為 32 字元

資料庫操作語言 – DML (Data Manipulation Language)

INSERT

新增資料到資料表中。寫法如下:

INSERT INTO 資料表名稱 VALUE('值一','值二');

範例、今天要新增 4 個內容到上述的 "FrontEndElements" 表中,對應的欄目分別為'element'、'usage':

INSERT INTO FrontEndElements VALUE('HTML','管理網頁的架構');
INSERT INTO FrontEndElements VALUE('CSS','管理網頁的外貌');
INSERT INTO FrontEndElements VALUE('JavaScript','管理網頁的內容以及使用者的操作行為、互動');
INSERT INTO FrontEndElements VALUE('MySQL'

在cmd操作MySQL創建4個內容

▲ 在命令提示字元使用 MySQL 創建 4 個內容,內容的值對應到兩個表格欄目「element(元素)」、「usage(用途)」。

下圖為從 MySQL教學 叫出表格「FrontEndElements」的所有內容。指令稍後在本文 DQL 段落會講解。

在cmd操作MySQL觀看表中內容

▲ 在命令提示字元使用 MySQL 觀看 FrontEndElements 表中所有內容

UPDATE

更改資料到資料表中。寫法如下:

UPDATE 資料表名稱 SET 欄位名稱='更新後的內容' WHERE 條件敘述;

範例、今天將上述的表格中,'JavaScript' 的 'usage' 修改為 '管理網頁的互動與動態內容'。如下所示:

UPDATE FrontEndElements SET `usage`='管理網頁的互動與動態內容' WHERE element='JavaScript';

在cmd修改MySQL其中一個內容

▲ 在命令提示字元使用 MySQL 將「JavaScript」的 `usage`欄目中,內容改為 '管理網頁的互動與動態內容'。

DELETE

刪除資料表中的資料。寫法如下:

DELETE FROM 資料表名稱 WHERE 條件敘述;

範例、今天將上述的表格的 'SQL' 刪掉,寫法如下所示:

DELETE FROM FrontEndElements WHERE element='SQL';

在cmd刪除MySQL其中一個內容

▲ 在命令提示字元使用 MySQL 將名稱為「MySQL」的 整欄刪除。

資料庫查詢語言 – DQL (Data Query Language)

查詢資料使用,不會對資料產生任何更動的語句。指令只有一種:

SELECT

撈出表中的資料,例如我們要撈出上述表格的所有內容,寫法如下:

SELECT * FROM  FrontEndElements;

在cmd操作MySQL觀看表中內容

▲ 在命令提示字元使用 MySQL 觀看 FrontEndElements 表中所有內容

資料庫控制語言 – DCL (Data Control Language)

控制用戶權限,例如把某個電商網站的管理權、上架權等不同層級的權限,分派給不同的員工。

GRANT

授予權限

REVOKE

收回權限

上述提到的 MySQL 語句種類,前端工程師只須看得懂 DDL、DML 與 DQL 就好。下一篇文章會講述 MySQL 中文亂碼的解決方式。請想提升技能的前端工程師記得多多關注我們的知識庫哦,一定對你們有所幫助!


 

 

 

 

推薦文章:
人工智慧又寫歌了!這次是跟重金屬天團 Metallica 致敬

暴躁老人唱情歌、憂鬱阿嬤笑了!4個翻轉家庭的人工智慧 讓家更溫暖

Facebook 開源 Python 語言的安全與隱私工具 Pysa

人工智慧貓砂盆 – 因愛貓腎病過世 工程師研發預防性貓用醫療品

人類釀酒竟被人工智慧超越?!還有什麼是人工智慧不會的?(上)

機器學習該找誰?Python還是R語言?(上)

新聞編輯換”人工智慧”做!上線不久卻出包?!(上)

科技始於人性,HTML5讓電子書翻頁更有溫度!

科技始於人性,HTML5讓電子書翻頁更有溫度!
科技始於人性,HTML5讓電子書翻頁更有溫度!

電子書結合HTML5,讓愛讀電子書的你感受到翻頁的溫度!

1. HTML5 書本翻頁動畫特效

 

這是手動翻書頁面特效的基本款。這款 HTML5 翻頁動畫可以用鼠標拖動頁面來模擬手動翻頁的效果,同時也可以點擊書頁的邊框來快速翻頁。

▶網頁上展示

▶原始碼下載

2. HTML5 3D書本翻頁特效

 

利用 HTML5 和 CSS3 不僅可以實現翻頁動畫,還可以 3D 的立體形式實現。下面這款書本翻頁特效,使用鼠標拖拽書本頁面即可翻動頁面,在翻頁的過程中,書本還可以呈現出3D立體的效果 – 包括書本中的圖片也是有同樣的效果。

▶網頁上展示

▶原始碼下載

3. HTML5/CSS3書本翻頁3D動畫

 

另一種簡潔版書本3D動畫特效,當我們將鼠標滑過書本時,書本就會自動一頁頁翻過去,書本的3D效果非常鮮明、極簡舒服。

▶網頁上展示

▶原始碼下載

 

4.超逼真書本翻頁動畫(CSS3版)

 

這款 CSS3 動畫效果是模擬書本翻頁的動畫特效。當鼠標滑過書本右上角時,書本即可向前翻一頁,而且翻頁動畫非常逼真。由於 CSS3 的運用,我們並不需要使用複雜的圖片來製造逼真的書本效果,書本翻頁可以很簡單地完成。

▶網頁上展示

▶原始碼下載

5.超逼真書本翻頁動畫(jQuery版)

 

這款 jQuery 書本翻頁 3D 動畫,功能更加強大,支援頁數不限,並且也有非常逼真美觀的視覺效果。書本的內容支持所有的 HTML 元素,彈性高、強大好用。

▶網頁上展示

▶原始碼下載

6.jQuery/CSS3書本翻頁動畫特效

 

這是一款基於 jQuery 和 CSS3 的書本翻頁動畫特效,外觀清新、還有指示便於操作。除了典籍滑鼠來翻頁之外,我們還可以直接點擊左右按鈕進行翻頁。

▶網頁上展示

▶原始碼下載

 

 

 

 

 

 

推薦文章:
人工智慧釀酒超越人類 全球首支AI威士忌勇奪金牌


捷克新創Resistant.AI 開發2產品 揪出欺騙人工智慧的詭計


AI 人工智慧、ML 機器學習、深度學習、Python 是什麼?


Python vs R語言:哪個比較適合人工智慧/機器學習?


入門網頁前端好輕鬆,小技巧報你災!!


全端.後端.前端工程師大不同?!到底差在哪?


前端工程師偷吃步小技巧-CSS的定位元素

 

前端工程師偷吃步小技巧-CSS的浮動屬性

前端工程師偷吃步小技巧-CSS的浮動屬性
前端工程師偷吃步小技巧-CSS的浮動屬性

怎樣才能在前端工程師表現更得心應手?首先你應該要先認識CSS的浮動屬性!

CSS 的 float (浮動) 屬性

CSS 的 float (浮動) 屬性是前端工程師在做網頁排版時,絕對會用到的基本語法之一。使用 CSS float 浮動屬性,可以將一個元素往左移或是往右移,並同時允許其他元素圍繞它(例如文繞圖、圖繞文等)。

float 浮動屬性的使用時機

使用 <div> 等區塊元素排版時,預設的排列方式都是由左至右、由上至下。但如果想要讓多個區塊並排、或是二欄、三欄等多欄網頁前端排版時,就需要使用 float 屬性。

如下方例子,若我們使用一般的 div 區塊元素時,則所有的區塊就整齊的由左上出來,一個 <div> 區塊就佔用了一行。(溫馨提示:可以點擊下例視窗左上方的「HTML」與「CSS」按鈕來查看語法)

See the Pen Float-example-1 by Tedutw (@Tedutw) on CodePen.

承上例,如果在 CSS 中加一個「float: left;」,則結果如下(溫馨提示:可以點擊下例視窗左上方的「HTML 」與「CSS」按鈕來查看語法):

See the Pen Float-example-2 by Tedutw (@Tedutw) on CodePen.

這是因為「float」屬性使 div 區塊元素「漂浮」起來,不再形成 div 區塊占滿整行的情況

承上例,假設把由左側開始「漂浮」的「float: left;」改成由右側開始「漂浮」的「float: right;」,則所有的區塊就會由右側開始「飄」出來,結果如下(溫馨提示:可以點擊下例視窗左上方的「HTML」與「CSS」按鈕來查看語法):

See the Pen Float-example-3 by Tedutw (@Tedutw) on CodePen.

CSS 浮動屬性有三個參數:left、right 與 none。left 與 right 顧名思義,就是控制區塊由左側還是右側浮出用的,如上方兩個例子所示。而 none 就是不使用浮動參數的意思。

下方是另一個文繞圖排版的例子,就是文字的部分「不」設定 float 屬性,但是在 logo 圖片的部分使用浮動屬性「float:right;」,文字的部分則不使用浮動屬性。(溫馨提示:可以點擊下例視窗左上方的「HTML」與「CSS」按鈕來查看語法)

See the Pen Float-example-4 by Tedutw (@Tedutw) on CodePen.

前端工程師想要做出兩欄或多欄的網頁,則可以善用 float 屬性搭配寬度需要進行初步的排版。

以下範例為兩欄的排版示例。兩個欄位視為兩個區塊, float 屬性都設定為「left」,左欄寬度為 20%;右欄為 80%:

See the Pen Float-example-5 by Tedutw (@Tedutw) on CodePen.

網路上常常有人說:前端工程師的網頁 layout 基石除了本章介紹的浮動(float) 屬性之外,還有下一張會介紹的清除浮動(clear)。想當前端工程師的各位同學們請先把本章再複習一次,並親自使用 codepen 自己練習一次程式,才能達到最佳的學習效果哦!

 

 

 

 

 

 

 

 

推薦文章:
AI人工智慧救地球!Google:AI 保護環境還比人類快 3000 倍


用Python寫出唐鳳「番茄鐘工作法」程式,讓AI幫你集中注意力!


CSS教學-display與visible屬性介紹


AI機器狗Aibo成最新愛寵 真狗會被取代嗎?


掌握這些小技巧,網頁前端輕鬆學!


前端工程師之Javascript入門第二十二課-數學物件


網頁前端偷吃步小技巧-display與visible屬性介紹

前端工程師偷吃步小技巧-CSS的定位元素

前端工程師偷吃步小技巧-CSS的定位元素
前端工程師偷吃步小技巧-CSS的定位元素

怎樣才能在前端工程師表現更得心應手?首先你應該要先認識CSS的定位元素!


為了要設計出更複雜的網頁前端版面,前端工程師都必須先知道 CSS 的所有「position 屬性」。如下所示,它有一大堆屬性值,這些屬性值不好理解同時也不好記憶,只要稍一設定不好,就會讓許多 CSS 區塊若入走鐘、重疊等窘境。這些屬性一個個介紹如下,也十分建議各位想當前端工程師的學員們把這頁加入網頁書籤中,以便日後隨時複習查詢。

See the Pen CSS:Position 範例 by Tedutw (@Tedutw) on CodePen.

CSS:Positioning Elements 定位元素

CSS 定位屬性(positioning properties)是用來定位元素使用。它可將一個元素置於另一個元素之後,還可以指定當某個元素的內容太大時該如何做。

所有的元素都可用 top(上)、bottom(下)、left(左) 與 right(右) 屬性來定位。但如果沒事先將「定位屬性」設置好的話,以上四種屬性(top、bottom、left 與 right)皆不起作用。它們亦會依照定位方法的不同,而以不同的方式呈現。

靜態定位(position: fixed)

「靜態定位(position: fixed)」是所有 HTML 元素的預設值。當元素為「靜態定位(position: fixed)」時,會遵循「Normal flow (指從左到右、上到下的常態佈局)」來排列。

靜態定位的元素不受 top、bottom、left 與 right 屬性的影響。如下例,儘管我們 CSS 設定為「top: 30px;right: 5px;」(上方距離30px、右側距離50px),被靜態定位的 HTML 元素,排版仍不受這些 CSS 影響。

See the Pen position_static by Tedutw (@Tedutw) on CodePen.

固定定位(position:fixed)

固定定位(position: fixed)的元素會相對於瀏覽器視窗來定位,這意味著即便頁面捲動,它還是會固定在相同的位置。

不同於靜態定位,固定定位(position: fixed)的元素可由 top、bottom、left 與 right 屬性的來指定位置。我們將上一段「靜態定位(position: fixed)」的範例,其中的 CSS 「position:static」改為「position:fixed」,則排版受到「top: 30px;right: 5px;」(上方距離30px、右側距離50px)的屬性影響,如下所示:

See the Pen position_fixed by Tedutw (@Tedutw) on CodePen.

固定定位(position: fixed)的元素會從「Normal flow (從左到右、上到下的排列)」的常態佈局中移除。所以其他未設定為「固定定位(position: fixed)」的元素,仍然依照「左到右、上到下」的排列,彷彿其中不存在固定定位的元素般。而 固定定位的元素可與其他的元素重疊。

相對定位(position:relative)

所謂的「相對」,是以原本正常的位置為中心點,依照元素偏移原本位置多少而定數值。相對定位(position:relative)的元素可以結合 top、bottom、left、right 等屬性,使其元素「相對地」偏移原本該出現的位置。

如以下的例子,我們在原本的位置安插粉紅色背景的文字(文字為「相對定位」)區塊,並且設定該區塊相對於原本該出現的區塊「上方留空間 5px(top: 5px;)、 左方留空間 5px(left: 5px;)」。

See the Pen position_relative by Tedutw (@Tedutw) on CodePen.

相對位置的元素內容可移動到指定位置、也可以與其他的元素重疊。但是該元素原本該出現的正常位置,會被保留而不會消失。

相對值不能用於 table cells、columns、column groups、rows、row groups 或是 captions。

絕對定位(position:absolute)

不得不說,絕對定位(position:absolute)是網頁前端比較弔詭的定位屬性。absolute 與 relative 的行為很像,不一樣的地方在於 absolute 元素的定位是相對於父層元素的位置、relative 元素則是相對於他本該出現的位置。

當元素的 position 設定為 absolute 後,它就會看它父層的元素是否有被設定為 relative、absolute 或是 fixed,若有,則以父元素為定位的基準點;若無,則以該網頁頁面(“body”)的左上角為定位點置,看起來就是這張網頁的絕對位置一樣。

以下的範例為兩個絕對定位(position:absolute)元素的範例,右上方的元素的父元素 position 沒有設定,因此被默認為「static」——也就是不屬於 relative、absolute、fixed 或是 inherit 的任一個,因此該元素會以整個網頁區域為定位點,從最上方往下移動 30 px、從最右方往左移動 30 px;而另一個元素的父元素 position 是 relative,因此會以父元素為定位點,從最上方往下移動 30 px、從最右方往左移動 30 px。

See the Pen position: absolute by Tedutw (@Tedutw) on CodePen.

同學們可以點擊以上範例中左上角的「HTML」與「CSS」按鈕來練習 coding。

其實所有的 CSS 版面配置:Positioning Elements 定位元素介紹到此結束。光看以上的解釋,會容易搞混。此時,不妨回到此章節的最前面的範例,點擊範例框左上角的「HTML 」與「CSS」按鈕來研究原始碼,並且親自練習一次這些 CSS 碼,試試各種不同的 position 屬性所呈現的效果。未來想要成為前端工程師的話,就請多練習幾遍。本系列「前端工程師課程」下一章即將介紹網頁 layout 基石之一——浮動(float)屬性

 

 

 

 

 

 

 

 

 

 

推薦文章:
AI人工智慧救地球!Google:AI 保護環境還比人類快 3000 倍


用Python寫出唐鳳「番茄鐘工作法」程式,讓AI幫你集中注意力!


CSS教學-display與visible屬性介紹


AI機器狗Aibo成最新愛寵 真狗會被取代嗎?


輕鬆轉行不卡卡!零基礎也能輕鬆學網頁前端!


只要5分鐘!讓你了解前端工程師跟後端工程師差別!


自學網頁前端筆記分享-display與visible屬性差異

自學網頁前端筆記分享-display與visible屬性差異

自學網頁前端筆記分享-display與visible屬性差異
自學網頁前端筆記分享-display與visible屬性差異

想要自學網頁前端嗎?本篇的分享就是要帶你認識display與visible屬性差異哦!

 本篇將會介紹網頁前端排版的兩個 CSS 屬性:display 屬性與 visibility 屬性。

CSS:display 屬性

display:block

對於 CSS 語法來說,網頁前端的每個元素都是一個矩形盒(rectangular box)模型。使用「display」屬性可以決定「盒(box)」的呈現方式。

又「區塊元素(block element)」則會佔用可用寬度的最大值,前後有換行符

以下的範例分別顯示了是否有將<span>元素顯示為區塊元素(block element)的結果。在下方的顯示視窗中,按「CSS」可以觀看 CSS 的語法如何設定。

See the Pen display: block by Tedutw (@Tedutw) on CodePen.

上述範例的網頁前端 CSS 語法設定如下:

span.block{
  display:block;
}

display:inline

inline 元素只佔用可用寬度的最大值,並不強制換行。

將上一段範例的<span>元素,CSS 換成「display: inline」的結果如下。跟上一個範例一樣,在下方的顯示視窗中,按「CSS」可以看出 CSS 的語法是如何設定的。

See the Pen display: block by Tedutw (@Tedutw) on CodePen.

上述範例的 CSS 語法設定如下:

span{
  display:inline;
}

display:none

「display:none」用來將元素隱藏使用,元素隱藏後就不佔用任何空間,在網頁前端頁面顯示時不會展現出來,就好像該元素不存在一樣。

以下範例中,我們將第 2、4 段設為「display:none」,其他設為「display:block」。

See the Pen display: none by Tedutw (@Tedutw) on CodePen.

上述介紹的「block」、「inline」、「none」都是最常用的 display 參數。display 還有很多其他次常用的參數值,如 list-item、table、table-cell、table-column、grid 等,會在往後的章節中一一介紹

visibility 屬性

visibility 屬性一般用於指定元素是可見的還是隱藏的。最常見的值是 visible 和 hidden

當我們想要隱藏園素食,有兩個方法可以執行:一是上一段介紹的,將「display」屬性設為「 none」參數;二是將「visibility」屬性設置為「hidden」來隱藏元素。

注意:以上兩個方法雖然都能將元素隱藏,但都呈現出不同的結果:

被「display:none」隱藏後的元素,就不會佔用任何的空間,就好像它從來都不存在一樣;而被「visibility:hidden」隱藏後的元素,雖然在網頁前端不會顯示,但仍佔用了對應的空間(就是被隱藏的元素有多大,網頁上空出來的空間就有多大),所以仍會影響排版。範例如下:

我們準備要將以下的例子,第一個<p>元素設為「visibility:hidden」、第二個<p>元素設為「display: none」。

See the Pen visible:hidden-before by Tedutw (@Tedutw) on CodePen.

將以上的第一個<p>元素設為「visibility:hidden」、第二個<p>元素設為「display: none」的結果如下:

See the Pen visible:hidden-after by Tedutw (@Tedutw) on CodePen.

由以上例子我們可知,同樣都是將元素隱藏,第一個<p>元素雖然被「visibility:hidden」隱藏了,但是仍遺留下空間;第二個被「display: none」隱藏的<p>元素則是完完整整的「被消失」,連原本的位置都不見了。

排版的另一個 CSS 屬性:Positioning Elements。網頁前端下一章我們將會一一介紹。

 

 

 

 

 

 

推薦文章:
AI機器狗Aibo成最新愛寵 真狗會被取代嗎?


用Python寫出唐鳳「番茄鐘工作法」程式,讓AI幫你集中注意力!


你是我的眼!Google AI 眼鏡助視障朋友「看見」世界


今年10月即將入手的新身分證,它的UI設計有啥亮點?


搞不懂Javascript變量命名?問前端工程師就對了!


網頁前端要成功關鍵,就是JavaScript!!


Javascript入門第十九課-方法