搞定SEO小妙招!教你五分鐘就能學會設定網頁!

搞定SEO小妙招!教你五分鐘就能學會設定網頁!
搞定SEO小妙招!教你五分鐘就能學會設定網頁!

要搞定SEO真的不能錯過本篇,只要五分鐘就能學會設定網頁!

 

圖片來源:seobility.net

目錄

1. 什麼狀況下該使用 robots meta 與 robots.txt

2. 如何設定網站 robots.txt

3. robots.txt-如何設定?

3-1. 如何設定網站 robots meta

 

什麼狀況下該使用 robots meta 與 robots.txt

robots meta 對 SEO 的操作上也是很重要。robots meta 與 robots.txt 都能向搜尋引擎宣告應該如何處理網頁。前者為阻止搜尋引擎索引你的頁面 (但搜尋引擎還是有抓取你的網站資料) ; robots.txt 則是全面阻止搜尋引擎抓取你的資料 (搜尋引擎會自動略過你指定的網站)。

 

當然,大多數的狀況,你不會讓 robots.txt 來阻止搜尋引擎抓取辛苦建立的網站。但是以如果這個網站對你的 SEO 有負面影響、或是私密性高的話,就可以用robots.txt 來阻擋搜尋引擎抓取,常見的情況如下所示:

1. 多年前有經過黑帽 SEO 手法,卻還沒處理的網頁、

2. 施工中未完成的網頁等

3. 網站或是公司內部系統的登入頁面

 

假設你只是希望這個網頁不要出現在搜尋引擎結果中的話,那只要用 robots meta 即可達到目的。

 

如何設定網站 robots.txt

1. 【檔案存取位置】robots.txt 位於網站的根目錄下

2. 【作用】告訴搜尋引擎哪些網站內容不要進行存取,並且可以指定 sitemap 的位置。

3. 【路徑】如果你有建立並使用 robots.txt,則他的位置會是 http://網址/robots.txt,如果這個檔案不存在,則代表沒有使用 robots.txt。

4. 【宣告類型】有五種,如下所示:

(1) User-agent
指定哪一種搜尋引擎的爬蟲,如 Google 的爬蟲 「googlebot」或是百度的爬蟲等等(* 號代表全部)

 

(2) Crawl-delay
限制爬蟲抓取每一頁的秒數限制,但是該設定會被 Google 跳過不處理。因為 Google 在網站管理員中,就有爬取頻率的設定。

 

(3) Disallow
輸入你不允許被爬取的 URL 路徑

 

(4) Allow
輸入你允許被爬取的 URL 路徑

 

(5) Sitemap
告知搜尋引擎的 Sitemap 網址

 

以上五種宣告類型如何編輯? 常見的如以下所示:

1. 拒絕所有的搜尋引擎爬蟲爬取你的網站:
User-agent:*
Disallow: /

 

2. 允許全部的搜尋引擎爬蟲爬取你的網站:
User-agent:*
Disallow: /

 

3. 拒絕 Google 的搜尋引擎爬蟲爬取 /wp-admin 目錄
User-agent:*
Disallow: /wp-admin/

 

4. 只拒絕百度的搜尋引擎爬蟲,卻允許其他搜尋引擎 (如 Google、Yahoo、Yandax等等) 爬取
User-agent:Baiduspider
Disallow: /
User-agent:*
Allow: /

 

5. 拒絕搜尋引擎爬取特定類型的檔案
User-agent:*
Disallow: /*.ini$
Disallow: /*.jpg$

 

6. 實際網站完整 robots.txt
User-agent:*
Crawl-delay: 7
Disallow: /wp-admin/
Disallow: /cgi-bin/
Disallow: /readme.html/
Disallow: /*.ini$ sitemap: http://codingbomb.com.tw/sitemap.xml

 

robots.txt-如何設定?

使用 Google Search Console 可以用來檢查 robots.txt 是否設定正確

 

舊版的 Google 網站管理員 Search Console 中,有 robots.txt 測試工具,他就會模擬 Google 搜尋引擎爬蟲來檢查你的 robots.txt 的正確性。

 

如何設定網站 robots meta

【檔案存取位置】robots meta 宣告置於網頁 HTML 的 <head>與</head>之間

 

【作用】宣告阻止搜尋引擎索引你的頁面 (但搜尋引擎還是有抓取你的網站資料) ,但是不提醒使用者瀏覽你的網頁

 

【語法】 <META NAME=”屬性值#1″ CONTENT=”屬性值#2″>

 

屬性值#1,為指定哪種搜尋,常用語法如下:

robots:所有搜尋引擎的爬蟲

googlebot:GOOGLE 搜尋引擎的爬蟲

bingbot:Bing 搜尋引擎的爬蟲

slurp:Yahoo 搜尋引擎的爬蟲

Baiduspider:百度搜尋引擎的爬蟲

AhrefsBot:Ahrefs.com的爬蟲

MJ12Bot:Majestic.com的爬蟲

 

屬性值#2,為指定處理方式,常見代碼如下

noindex:不要索引本網頁

nofollow:不要跟隨本網頁內的連結頁面

noarchive:不要儲存庫存網頁

nosnippet:不要在搜尋結果顯示描述或是快照

none:等於 noindex 與 nofollow

noimageindex:不要索引本網頁的圖片,只適用於 Google

unavailable_after:date:在指定日期後停止索引本頁

 

 

 

 

推薦文章:
元宇宙也有翻譯蒟蒻了!Meta推全球語言都可翻譯的人工智慧


Google提出Android隱私沙盒,標榜保護用戶資料安全


白帽SEO、黑帽SEO,到底差在哪?


RWD 和 AWD 的差異與優缺點


UI設計的圓角為何人人愛?卡通愛用連賈伯斯也瘋狂!(上)


程式語言Python再度奪冠!蟬聯TIOBE年度程式語言獎!


人工智慧技術導入煞車系統,讓你行車安全又放心!(上)

RWD和AWD好難選?免驚,分析後再選擇讓你無痛SEO!

RWD和AWD好難選?免驚,分析後再選擇讓你無痛SEO!
RWD和AWD好難選?免驚,分析後再選擇讓你無痛SEO!

RWD和AWD到底該怎麼選?先聽完分析再選擇才能夠無痛SEO!

目錄

1. 該選擇 RWD 還是 AWD ? 先看看自己的需求吧!

1-1. 評估現有的資源人力

1-2. 對網頁設計畫面要求較嚴謹的狀況下,就使用 AWD 吧!

2. AWD 要怎麼做才能對 SEO 無痛?

 

該選擇 RWD 還是 AWD ? 先看看自己的需求吧!

現今 RWD 正夯,但並不代表所有的網頁都適用於 RWD 技術。決策者必須先檢視網站的規模、內容、專案的需求以及人力,再決定使用 AWD 還是 RWD。至於哪一類的網站適合 RWD、哪一種的網站適合 AWD,簡單整理如下表所示:

 

 

以上分析建議仔細看過。 以下再作補充說明:

 

評估現有的資源人力

只需要寫一套 CSS 的 RWD 所耗的時間與成本絕對比 AWD 還快又省,適合小型網頁、新創產業或是各方面資源有限的狀況下。幾近客製化的 AWD 網頁雖然有利於做 UI / UX,但是需要前端工程師來撰寫判斷使用者來配對 CSS 的程式,且如果想要做 SEO 的話,也是需要前端工程師把多套 CSS 串在同一個 URL 的。

 

網頁設計畫面要求較嚴謹的狀況下,就使用 AWD 吧!

假使有足夠的預算,而且希望使用者不管使用手機、桌機、平板等尺寸不一的裝置都能擁有完美的網頁瀏覽體驗的狀況下,那麼就選擇 AWD 吧!往後在網頁維護上,前端工程師或是網頁設計師也更能找到對應的 CSS 檔來修改,且比較沒有如 RWD 般所有的樣式都塞在同一套 CSS 有 「牽一髮動全身」 的隱憂。 若硬要使用 RWD 也無非不可行,但是若 CSS 樣式寫得不夠嚴謹的話,則恐怕不同的裝置會寫到同一種 style,這時就需要花更多時間來修復,反而會浪費更多成本。

 

AWD 要怎麼做才能對 SEO 無痛?

很多人都說 AWD 對 SEO 不利。那是因為大多數的人會省去將 「行動版」 與 「桌機板」 串在同一個網址的流程,索性就把把網站做成兩個獨立的桌機版跟行動版兩個網站,再進行轉址,所以流量自然會分流,對 SEO 當然有負面影響!

 

觀察很多分成桌機版跟行動版的網站 (如 Momo 購物、Facebook 等等) 的 URL ,會發現行動版的網址前面多會有個 「m.」 的開頭,就是這樣的情況。

 

但我們先回到原點,弄懂 AWD 的基本原理,其實 AWD 只是分成桌機版與行動板等兩套 CSS (有時可能會多出其他的而有兩套以上的 CSS)。但是一個網站擁有多套 CSS 並不等於一定要分成兩個網站。工程師常見的做法是撰寫程式讓同一個 URL 之下,判斷裝置而吐出相對應的網站架構與 CSS 樣式。多了這個步驟,才可以集中流量在同一個網址中,對 SEO 或品牌辨識度都比較好,就不會有前面提到 「分流」 的問題,也不會影響到 SEO的成效囉。

 

所以不要再說 AWD 對 SEO 不利了!不利 SEO 的是把 「網站做成兩個獨立的桌機版跟行動版兩個網站,再進行轉址」 的作法。你所需要的,是要把行動版與桌機板使用同一個 URL就可以了。

 

 

 

 

 

 

推薦文章:
元宇宙也有翻譯蒟蒻了!Meta推全球語言都可翻譯的人工智慧


Google提出Android隱私沙盒,標榜保護用戶資料安全


所有的新創業者都需要SEO 的7 個理由!


SEO是什麼?跟AdWords差在哪?如何自學?


2022最佳職場出爐!臉書自改名Meta後爭議多排名還下滑!


行車安全就交給人工智慧!Brembo開發AI幫你踩煞車!(上)


澳洲醫生開發AI自殺艙,是否”該死”由人工智慧定義!(上)

 

網站想要經營好,首先必先了解RWD和AWD差異!

網站想要經營好,首先必先了解RWD和AWD差異!
網站想要經營好,首先必先了解RWD和AWD差異!

如果可以先了解RWD和AWD的差別,對於經營網站肯定有很大的幫助哦!

 

 

目錄

1. RWD 和 AWD 的差異與優缺點

2. RWD、AWD 的異同之處

2-1. 共同之處

2-2. 不同之處

2-2-1. RWD

2-2-2. AWD

3. RWD 的優點與缺點

3-1. 優點

3-2. 缺點

4. AWD 的優點與缺點

4-1. 優點

4-2. 缺點

5. 該選擇 RWD 還是 AWD ? 先看看自己的需求吧!

 

AWD 跟 RWD 的目的其實都算是一致的,主要都是希望能夠針對桌機、平板、手機等不同尺寸的裝置,而顯示出易於瀏覽的網站畫面。

 

在規劃網站時,相信有不少的 PM 在與前端工程師或是網頁前端設計師在溝通上遇到瓶頸,像是網站要使用 RWD 或是 AWD 等等。本篇就以未接觸過網頁設計、或是無任何技術背景的網頁規劃者為角度,講解 RWD 與 AWD 網站的差異,以及該如何規劃及選擇。

 

RWD 和 AWD 的差異與優缺點

 

在網頁上,RWD 是「Responsive Web Design (響應式網頁設計)」的縮寫;而 AWD 則是 「Adaptive Web Design (自適應式網頁設計)」的縮寫。RWD 與 AWD 是因為現今大多數人們習慣使用手機、平板等行動裝置上網而生的 CSS 寫法,讓網頁設計無論在桌機螢幕上、或是尺寸較小的行動裝置上,都能清楚的呈現,讓使用者能夠更舒服的瀏覽網頁。

 

RWD 與 AWD 的差異,簡單的來說,前者是無論行動裝置或是桌機,都使用同一套 CSS;而後者是針對各種裝置撰寫對應的 CSS,可以有多套 CSS,例如桌機有桌機的一套 CSS,手機有自己的一套 CSS。

 

RWD 與 AWD 的差異,簡單的來說,就是前者只有一套 CSS 檔案、後者卻有多套 CSS 檔案。詳述如下:

 

RWD 會把所有裝置的樣式都寫在同一套 CSS 中,因此無論行動裝置或是桌機,都是使用同一套 CSS 。當使用者打開了網頁,就能即時透過網頁的寬度,決定要套用到 CSS 中的哪一個樣式。

 

AWD 是針對各種裝置撰寫對應的 CSS,因此就會針對不同的裝置,而有多套的 CSS 樣式碼:例如桌機有桌機的一套 CSS,手機有自己的一套 CSS。AWD 的方式必須仰賴前端工程師撰寫的程式,來判斷使用者是使用哪種裝置開啟網頁,再自動匯入相應的 CSS 檔案:如程式判斷出某使用者是使用桌機瀏覽網頁的話,就會自動匯入桌機的 CSS 樣式檔案;如果是使用手機開網頁,就匯入手機的 CSS 樣式檔。

 

RWD、AWD 的異同之處

RWD 與 AWD 只是方式不同罷了,沒有所謂的哪個比較好,優缺點比較如下:

共同之處

RWD 與 AWD 都會判斷裝置,並且依照裝置顯示出對應的樣式。

 

不同之處

RWD

無論行動裝置或是桌機,都使用同一套 CSS
當使用者打開了網頁,就能偵測網頁的寬度而決定要套用哪些 CSS 樣式碼。

 

AWD

針對各種裝置撰寫對應的 CSS,因此會有多套 CSS,一般來說會有兩套 CSS:桌機專屬的一套 CSS,手機專屬的一套 CSS。
當使用者打開了網頁,程式就能自動偵測網頁的寬度而決定要套用哪個 CSS 檔案。

 

RWD 的優點與缺點

優點

1. 節省網站製作成本
因為無論是桌機、手機的樣式,全都只塞在同一套 CSS 檔案,所以開發成本較低,適合內容比較單純的網站、新創公司或是個人工作室使用。

 

2. SEO 更方便
因為同一個網頁、URL 也只有一個,所以更方便 SEO

 

缺點

1. 開發容易、維護耗時
全部的樣式碼都一窩蜂塞在同一套 CSS 裡面,所以在網頁維護上較不容易,常常需要大海撈針般找到對應的程式碼。如果遇到需要修改的狀況,很可能修改某個樣式碼,卻也影響到了其他不需修改的樣式碼,而導致網站 「跑山」 的窘境。

 

2. 行動裝置網頁載入恐會更慢
因為所有的裝置都使用同一個 CSS 碼,所以較無法針對行動裝置做圖片顯示的最佳化,加上 RWD 網頁的機制是將資訊先下載後,再根據裝置大小重新排列,所以會較慢。

 

AWD 的優點與缺點

優點

1. 網頁維護更分明,不怕樣式被吃到
雖然成本較 RWD 高,但是由於桌機與手機的 CSS 分別在不同的檔案,因此在維護上會比 RWD 更分明、更能清楚地找到對應的樣式碼,不需要大海撈針。而且也不會因為更改一個 CSS,而影響到不該改變的區塊,或style也改變的後顧之憂。

 

2. 有利於 UI/UX
假設對畫面顯示的要求較高,希望能在各種裝置上畫面都能完美呈現的場合、或是網站內容較多、圖文排版較複雜時,就適用 AWD,可針對不同的瀏覽介面而做出對應的 UI/UX,讓介面更美觀好用、給使用者更佳的網頁瀏覽體驗。

 

3. 行動裝置網頁載入更快
可針對行動裝置而做優化,將原本的大圖縮減成最合適的尺寸,減少不必要的大圖,就能加快行動裝置的網頁 loading。

 

缺點

1. 維護較容易,但開發成本高
一開始需要針對不同的裝置而寫出好幾套 CSS,耗時耗力,且還需工程師撰寫讓網頁自動感應載具而套用對應 CSS 的程式。若有 SEO 的需求,還需另請工程師將同一網頁的多套 CSS 串在同一個網址內,否則流量會自動被手機與桌機瓜分。

 

該選擇 RWD 還是 AWD ? 先看看自己的需求吧!

當下 RWD 正夯,只需要寫一套 CSS 的 RWD 所耗的時間與成本一定比 AWD 還快又省,適合小型網頁、新創產業或是各方面資源有限的狀況下。

 

即便如此,也並非所有的網頁都適用 RWD。若是對網頁設計畫面要求較嚴謹的狀況下,AWD 網頁在後續的維護上讓前端工程師、UI 設計師較能找到對應的 CSS 檔來修改,沒有如 RWD 般所有的樣式都塞在同一套 CSS 「牽一髮動全身」 的隱憂。

 

決策者必須先檢視網站的規模、內容、專案的需求以及現有的人力,再決定使用 AWD 還是 RWD。至於哪一類的網站適合 RWD、哪一種的網站適合 AWD,本篇文章「網頁一定得選擇 RWD 嗎?AWD 要怎麼做才能無痛SEO?」有進一步的分析與講解。

 

 

 

 

 

推薦文章:
元宇宙也有翻譯蒟蒻了!Meta推全球語言都可翻譯的人工智慧


Google提出Android隱私沙盒,標榜保護用戶資料安全


所有的新創業者都需要SEO 的7 個理由!


SEO是什麼?跟AdWords差在哪?如何自學?


LINE服務在地化,推出2項人工智慧服務,網友直呼好方便!


UI的圓角設計現正夯!卡通常用連賈伯斯愛不釋手!(上)


本年度最佳職場排行出爐!臉書改名Meta爭議多排名慘遭滑鐵盧!

 

人工智慧大突破!ReSkin讓你在元宇宙擁有觸覺!(下)

人工智慧大突破!ReSkin讓你在元宇宙擁有觸覺!(下)
人工智慧大突破!ReSkin讓你在元宇宙擁有觸覺!(下)

人工智慧真的又再度突破了!ReSkin竟然能讓你在元宇宙擁有觸覺?!(下)

 

本文為第三篇,上篇請看此連結

 

過往收集不到的觸覺,ReSkin 做到了!人工智慧發展大突破

Facebook為了展現 ReSkin 的實用性、並且展示它如何幫助研究人員,利用過往難以收集到的各種觸覺數據,藉以推進人工智慧發展的,Meta AI 在下列幾個不同的試驗中,展現 ReSkin 突出的實用性:

 

像人類般,完整拿取藍莓、葡萄等脆弱的水果

ReSkin 擁有絕佳的觸覺感知能力,可以用於研發「訓練機器人用鑰匙打開門、抓住葡萄或藍莓等精緻物體」的人工智慧。

 

上面影片是測試當機器夾爪抓起脆弱的藍莓時,無安裝 ReSkin 以及有安裝 ReSkin 的差異:

 

影片一開始是沒有裝 ReSkin 的對照組,單單僅透過夾爪的內建力道感應拿起藍莓,不但容易破壞水果,也無法完成採樣與評估力道;而影片的後半段顯示:只要透過 ReSkin,它就卻能夠好地感應力回饋以控制抓取力道。

 

ReSkin 做成狗鞋子,蒐集動物於野外活動的觸覺資料

ReSkin 製成狗的鞋子,蒐集狗在野外行走的觸覺資料。其感測器可追踪狗在休息、行走、跑步的施力大小與方向。

 

 

ReSkin 做成手套,捕捉人類用手接觸物品的力道

 

 

ReSkin 同時可用於感測人類與物體交互過程(例如用手拿起東西、或是推東西)中,所施予的力道大小。影片中,研究人員在右手食指放置了一張 ReSkin 皮膚和一塊電路板、並戴上橡膠手套製作紅豆麵包時。過程中,感測器測量、並輸出數據。

 

大範圍面積的接觸定位

 

ReSkin 還可以按比例放大,在更大的表面積上進行接觸定位。有些模型建構,是需要知道目標位置在哪裡的。例如:要訓練機器人靠近地面撿起物體,則需要知道它要從哪裡接觸物體、要用多少力道。而 ReSkin 可在大範圍面積上接觸定位的特性,有利於建構此類模型。

 

ReSkin 未來在人工智慧的應用

Meta AI 研發了具有細膩觸覺感知的 ReSkin,低成本、靈敏度高且能恆久使用。柔軟的外皮,像繃帶般容易更換,換後可以立即使用——這是一個強大的人工智慧工具,可以幫助研究人員建立多種人工智慧模型。

 

Meta AI 進一步表示:希望將觸覺感知作為人工智慧研究的一個領域,並大力推進。除了 ReSkin,他們還同時宣布處理物件觸覺的開源生態系統,包含高分辨率觸摸感應硬體 DIGIT 、模擬器 TACTO 、基準測試 PyTouch 和數據集等等。

 

Facebook團隊相信相關進展將能提升人工智慧的感知能力,使其不再僅僅侷限於視覺和聲音方面,從而提高觸覺感知的應用。另外,團隊非常期待研究界將如何利用所述工具以進一步推進人工智慧領域的發展。

 

結合人工智慧開發「ReSkin」皮膚實現觸覺的體驗,在接觸其他表面時,本身內嵌入的磁性顆粒產生成磁場,進而形成觸覺,感測器會記錄磁流量(magnetic flux)的變化,反饋數據傳輸給人工智慧軟體分析,幫助 AI 機器人辨識物體觸感、重量、溫度及狀態等。

 

Meta 研究科學家古普塔(Abhinav Gupta)10月29日曾經在記者電話會議表示,觀察 AI 人工智慧在過去十年的發展,可能發現電腦視覺雖然大有長進,包括聲音、語言也很有進展,在觸覺的開發過程,感測器數據取得不易以及耗費成本,因此在研究上有所限制。然而,人類從嬰兒到成人的學習經驗,歷經視覺、聲音、觸覺、味覺、嗅覺等感官學習建立對世界的理解。所以希望將觸覺融入 AI 人工智慧的模型,藉由真實般的觸摸感知,獲得更貼近人類生活的互動。

 

 

 

推薦文章:
臉書聊天AI再進化!牢記你說過的話、還會主動找答案


FB 用十億張照片讓 AI「SEER」自主學習!自監督學習大躍進


「超能力」具現化?臉書推手腕 AR 感測器 讓你隔空操縱介面


Google 開發編舞用人工智慧「FACT」,任何音樂都能生成對應舞蹈!


油價一直漲怎麼辦?人工智慧為你規劃最佳省油路線!


想要提升工作效率?人工智慧秒抓重點新功能絕對能幫到你!(上)


人工智慧醫療大突破!內視鏡AI檢測快又準,降低罹癌風險!

12個UI/UX設計工具神助攻,成為網頁設計大師真輕鬆!(4)

12個UI/UX設計工具神助攻,成為網頁設計大師真輕鬆!(4)
12個UI/UX設計工具神助攻,成為網頁設計大師真輕鬆!(4)

掌握好這12個超好用的UI/UX設計工具,要成為網頁設計大師真的超簡單啦!(4)

 

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

 

Origami Studio 打造出 FB 與 IG 的UIUX設計

臉書(Facebook)可說是用來打造Instagram的原型UI/UX設計工具。即使不會寫程式的設計師也能以最快速的速度建立App原型(Prototype),還可匯出原始碼給工程師使用,拉近設計師與工程師溝通的距離。臉書(Facebooke)旗下許多使用者介面是Origami Studio設計和建立而成,例如,Instagram、通訊軟體Messenger、社團功能Groups等。

 

臉書(Facebooke)在 2013 年推出了這個原型製作工具。起初建立在蘋果圖形視覺化應用程式Quartz Composer上的工具,是原生OS X的應用程式,但 Xcode 環境的那部分並不是最好的原型製作選擇。所以臉書(Facebooke)去年推出了 Origami Studio。

 

 

Marvel:產出APP的設計圖

設計者不需要會寫程式便能輕鬆製作「會動」的app,這裡的會動指的是能夠像真正的app那樣操作,但是只能呈現靜態的畫面,也無法在手機中真正運行,不過最大好處就是只要有設計圖,就能快速產生初版的Prototype,不需寫出真正的App就讓使用者體驗到UI/UX設計,如果想要修改畫面也能快速修改完成。

 

 

Justinmind 節省UI/UX設計的時間

快速一體化的原型UI/UX設計可以讓設計人員專注於用戶體驗。很容易與最廣泛使用的設計平台結合,包括Sketch和Photoshop,可從這些平台中、瀏覽器或檔案系統中來新增內容和影像,甚至可使用Justinmind建立自己的UI圖庫,並提供全套模板來創建高擬真原型。

 

 

上述任何一個設計平台,都很適合目前的UI/UX設計師,與其花時間思考使用哪一個平台時,仍還是需要思考問題的本質,「心態」材是最重要的,有健康的心,在面對挑戰時試著使用適合的工具找方法解決,讓這些平台為整個團隊工作,自己在使用上越駕輕就熟,就越有時間與團隊和諧地進行網站創建工作。

 

 

 

 

 

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


疫情加速電商衝擊店面!富比士:2021年5大UI/UX設計趨勢


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


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


心生病了該怎辦?人工智慧24小時待命為你的心治療!(上)


發明家不是人!人工智慧DABUS首位獲得發明專利AI!(上)


東奧與AI技術的完美結合!7個黑科技報你知!(1)

12個UI/UX設計工具神助攻,成為網頁設計大師真輕鬆!(3)

12個UI/UX設計工具神助攻,成為網頁設計大師真輕鬆!(3)
12個UI/UX設計工具神助攻,成為網頁設計大師真輕鬆!(3)

掌握好這12個超好用的UI/UX設計工具,要成為網頁設計大師真的超簡單啦!(3)

 

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

 

Claritee:不會設計仍可從零上手

一款智慧型線框圖UI/UX設計工具,可以將想法轉換為可視線框圖,可以說是產品開發的關鍵一步,因為它提供一種低成本的可視化方法,不管設計者只有完成單個頁面還是整個網站,都可以自動查看互動式原型。這種方法是可以有效讓團隊提前評估資源創建跟投入時間外,還可以在原型設計呈現前解決問題。

 

 

InVision:讓團隊不失去方向,保持工作進度

在繁雜的團隊工作中,日復一日,總是容易迷失與工作效率低落,藉由這一款強化團隊溝通互動的原型UI/UX設計平台,簡化工作流程、掌握整體專案進度,縮短工作的流程與溝通。InVision提供從線框圖轉換到UI設計所需的所有元素,輕鬆實現團隊合作的呈現和原型設計。同時支持即時設計修改和收集團隊的快速反饋,設計師通常也會用來管理自己的工作流程及進度。

 

 

Axure RP:我很醜,可是我有脈絡

有別於Sketch介面的美觀,Axure更專注在使用者互動上,兩者各有特點,但是剛開始學習UI/UX設計容易過於注重表面的視覺呈現 (Visual Design) 而非核心的使用者需求 (User Needs)。Axure 的簡陋反而讓使用者能夠在產品設計前期排除視覺紛擾、專注在真正重要的事情上,快速繪製低擬真 (low-fidelity) 的 Wireframe,同時也可以做到中高擬真 (mid- to high-fidelity) 的互動原型 (Prototype)。

 

Axure RP將 SVG 導入、Sketch 和Adob​​e XD集成與原型製作功能相結合,輕鬆的將Adob​​e XD和Draw共享Axure RP原型和畫板,並且在螢幕頂部收集輸入。可以檢查佈局介面、獲取CSS片段和下載,同時將靜態圖像轉換為動態Axure Cloud原型。Axure RP還增加綜合文檔、自動化紅線和更完整的移交給開發人員,無需程式語言。

 

 

Framer:解決溝通上的煩惱

製作UI/UX設計原型最重要的目的就是「溝通」,近年來許多設計流程裡,開始重視”原型”的重要性,使用Framer原型設計中,使用者可以基礎的想法驗證,再根據測試結果來修正設計方向。這樣的測試循環,可有效降低部分設計錯誤。Framer所撰寫的語言則是 CoffeeScript,因此它的程式語言可以說是非常接近口語。但是使用介面與工作流程對初學者會有點複雜,需要開發人員和設計師投入大量時間來學習他們的方法。

下篇請看此連結

 

 

 

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


疫情加速電商衝擊店面!富比士:2021年5大UI/UX設計趨勢


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


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


特斯拉研發高效能AI晶片D1,完整滿足人工智慧的訓練需求!


發明家不是人!人工智慧DABUS首位獲得發明專利AI!(上)


壓力大受不了?臉書聊天AI聽你訴苦還會記住你說過的事(上)

12個UI/UX設計工具神助攻,成為網頁設計大師真輕鬆!(2)

12個UI/UX設計工具神助攻,成為網頁設計大師真輕鬆!(2)
12個UI/UX設計工具神助攻,成為網頁設計大師真輕鬆!(2)

掌握好這12個超好用的UI/UX設計工具,要成為網頁設計大師真的超簡單啦!(2)

 

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

 

Figma:超人氣線上UI/UX設計

在和團隊討論進行時,腦袋靈光一現就可以立即記錄下來的線上工具,擁有自由拖曳的編輯器、框線創建,輕輕鬆鬆就將溝通內容即時落實在高擬真度的原型設計中!不僅如此,內建的動畫素材增添身歷其境的呈現效果。

 

Figma 從推出至今,愈來愈受到UI/UX設計師的青睞。這一款基於瀏覽器的協作式設計工具雖被廣泛稱為UX設計應用程式,但是也可使用於快速原型設計的軟體。其他功能包括 Figmotion 和 Autoflow 等外掛程式及Arc Tool和Vector Networks 的可用性。

 

 

Webflow:網站編輯,所見即所得

近年來流行的線上網頁架站平台,使用者大多介於「外行平面設計師」及「專業網站工程師」之間,即使不會 Coding 和切版,仍然可以輕鬆建置出個人風格強烈的網站。此平台提供乾淨、語意化的程式語言和設計可以有效加速開發人員的工作,內建程式為大眾皆可使用的零編碼,設計者便可直接創建網站的功能與版型,Webflow 會自動轉換為線上可使用的網站,因此不用等全部架構設計完成,便可以即時看見在網路上的呈現。

 

Sketch:歷久不衰的經典UI/UX設計工具

以簡單功能與UI設計專門為訴求,早期成為UI/UX設計師慣用軟體,較資深的設計者大多首選以此為主軸的設計流程。可以創建各種形式的使用者介面,例如瀏覽器、行動裝置或程式的按鍵執行,因此使用者目前已經達全球數百萬工程師。

 

Sketch提供流暢的設計介面與豐富的繪圖功能,設計師可以創建高質量圖像。強調介面性能的Sketch和可跨平台線上使用的Figma雖不同特點,但是能使設計者專注、快速的解決問題才是重點。

 

 

Mockplus:跨部門神器,讓不同團隊的人都看的懂!

簡潔易用並專注於原型設計的UI/UX設計軟體,非常適合跨團隊協作。可以有效幫助專案企劃有效的溝通網頁功能、軟體介面、App 互動,透過畫出原型,讓產品經理、設計師、程式開發、主管、客戶之間能夠了解產品本身的使用流程,把想像或文字化為具體可用的示範。

 

Mockplus支援不同平台 AxureSketchAdobe PhotoshopFigma and Adobe XD匯入原型設計。同時支援電腦版Windows和Mac的桌面應用程式及行動裝置系統iOS和Android應用程式,所有項目同步到 Mock PlusCloud,快速的組合中就能產生可以互動操作的原型圖。

 

下篇請看此連結

 

 

 

 

 

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


疫情加速電商衝擊店面!富比士:221年5大UI/UX設計趨勢


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


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


人工智慧也搞發明!還成為全球首例取得發明專利的AI?!(上)


超高效能人工智慧訓練晶片D1,竟出自特斯拉研究團隊?!


壓力大受不了?臉書聊天AI聽你訴苦還會記住你說過的事(上)

12個UI/UX設計工具神助攻,成為網頁設計大師真輕鬆!(1)

12個UI/UX設計工具神助攻,成為網頁設計大師真輕鬆!(1)
12個UI/UX設計工具神助攻,成為網頁設計大師真輕鬆!(1)

掌握好這12個超好用的UI/UX設計工具,要成為網頁設計大師真的超簡單啦!(1)



目錄

1. 網頁設計、網頁開發、UIUX是什麼?

1-1. 網頁設計 (Web Design) 

1-2. 網頁開發 (Web development) 

1-3. 使用者介面設計(UI設計,User Interface)

1-4. 使用者體驗設計(UX設計,User Experience)

2. Adobe XD:整合在雲端上的UI/UX設計

3. Figma:超人氣線上UI/UX設計

4. Webflow:網站編輯,所見即所得

5. Sketch:歷久不衰的經典UI/UX設計工具

6. Mockplus:跨部門神器,讓不同團隊的人都看的懂!

7. Claritee:不會設計仍可從零上手

8. InVision:讓團隊不失去方向,保持工作進度

9. Axure RP:我很醜,可是我有脈絡

10. Framer:解決溝通上的煩惱

11. Origami Studio 打造出 FB 與 IG 的UIUX設計

12. Marvel:產出APP的設計圖

13. Justinmind 節省UI/UX設計的時間

 

網頁設計、網頁開發、UIUX是什麼?

隨著科技的進步,手機介面也越做越人性化,美觀大方的頁面讓你一頁接著一頁的滑。這時你不禁會想:只要會做網站的話,就能輕鬆設計出這樣美觀的介面嗎?其實未必!網站設計與開發的領域其實可細分成使用者介面(UI)、使用者體驗(UX)、網頁設計(Web Design)和網頁開發(Web development)領域,簡介如下:

 

網頁設計 (Web Design) 

網頁設計是一個廣泛的類別總稱,涵蓋各種關於網站視覺效果、網站可用性的領域,包含UI/UX設計等。

 

網頁開發 (Web development) 

製作網站的技術端部分,專注於 coding,也就是擁有第一段所述「做網站」的能力。網站開發可以分為網頁「前端」和伺服器端的「後端」。

 

使用者介面設計(UI設計,User Interface)

網頁設計的項目之一,處理人們與網頁、app互動的元件如按鈕、手勢識別等。

 

使用者體驗設計(UX設計,User Experience)

另一個網頁設計的項目之一,處理用戶在使用網站或應用程序時的行為和感受。其實UX 設計的日常工作中,視覺表現只能算是其中的一個項目。他們需要針對用戶進行深度研究,可說是人類學、心理學、人因工程學等的跨領域學問。

 

一個手機版的網頁,為要兼顧兼顧便利及美觀,因此對於頁面的動線、順序、流程與使用細節上都需要重視。並確認UI所設計出來的視覺,能傳達UX設計師展示的路徑。簡單來說,UI設計傾向於眼睛所看見的「外在呈現」,UX則致力於使用者的「內在使用感受」。UI可以是將UX理念實踐的美學工程師,可以透過以下12款常見的原型設計平台來執行:

 

Adobe XD:整合在雲端上的UI/UX設計

全名為 Adobe Experience Design,是UI/UX設計師最常見的向量繪圖程式,如果原本在平面設計上習慣使用Adobe 出的 Photoshop或Illustrator等軟體,使用 Adobe XD 時對於其操作介面會更直觀、容易上手。

 

框線構成的形式,整合設計師的思維、現有的工作流程,設計出電腦版、行動裝置的網站介面,可以隨時將原型設計圖輸出,直接分享給其他人觀看與操作,即時接收回饋並且修改。

影片連結:https://youtu.be/h4D0GGlYL1o

 

 

下篇請看此連結

 

 

 

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


疫情加速電商衝擊店面!富比士:2021年5大UI/UX設計趨勢


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


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


蘋果靠AI偵測兒童情色照,卻讓人擔心隱私疑慮!(上)


沒人陪你聊心事?!臉書AI陪你談心還會記得你說的話!(上)


人工智慧技術大突破!冬奧將引AI裁判為選手評分?!

富比士提出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成效不彰?放心,谷歌正著手處理中!