新網頁SEO需要多長時間?Google這樣回答~

新網頁SEO需要多長時間?Google這樣回答~
新網頁SEO需要多長時間?Google這樣回答~

總是好奇新網頁上架後多久才開始SEO嗎?要怎麼做才能讓網頁更快被索引?想知道這些答案就快往下閱讀文章吧!!

網頁沒被索引,就不會出現在搜尋結果,更不會有排名!所以網頁上線後,SEO 第一步就是讓自己的網頁被索引。那要讓 Google 索引我的網頁,需要多久時間?SEO 要怎麼做才會讓自己的網頁更快被索引?

Google 的搜尋關係代表(search relations representative,翻成白話文就是 Google 搜尋功能的窗口)John Mueller 日前針對一個問題「新網頁的 SEO 需要多久時間?(how long does SEO take for new pages?)」公佈了回答影片,如下所示:

John Mueller 以他的經典答案「視情況而定(it depends)」作為起頭,但是之後他也深入問題中的細節並回答:

要花多久時間,新網頁才會被 Google 索引(indexed)?

「要讓新網頁、或是更新內容的網頁被 Google 索引,需要花上『數個小時到數月』的時間」John Mueller 說。但是有時會因網頁本身存在的技術問題、或是 Google 爬蟲機器人(GoogleBot)忙著做其他的事(像是索引其他「更重要」的網站等),而需花更久時間來收錄你的網頁。

所以網頁被 Google 索引的所需時間會有所不同。像是新聞網站只在「數分鐘」之內,就能被 Google 收錄索引。

網站被 Google 索引,就等於被納入排名嗎?

網頁被 Google 索引,並不意味著它一定會被納入排名。
Google 公佈了各種免責聲明:表示強制將某些內容被索引,並不表示該頁面會突顯在 Google 搜尋中。

是否能確保我的網頁被 Google 索引?

無法保證你的網頁一定會被 Google 索引、也無法保證 Google 會索引網路上的所有內容。
事實上,無論是 Google 還是其他的搜尋引擎,都不會索引網路上的很多內容。

Google 會避免索引哪些內容?

Google 會盡可能不索引重複的、鏡像的內容,也會避開無用的、或是URL 帶有「無價值的網址參數」 等。

如何加速我的網頁被 Google 索引?

Google 官方列出了一些方法,有助於網站能盡快被 Google 索引:
1. 讓伺服器、網站的速度更快,以防止伺服器超載。
2. 以更顯眼的方式設定新網頁的連結:你可從網站首頁設連結到這些頁面。
3. 避免在網站上使用不必要的 URL,例如無限滾動日曆的 URL、分類頁面的篩選器等
4. 使用像 sitemap(針對個別網頁的 URL 檢查工具)的網址提交工具。

結論:網站品質才是王道

確保你的網站在技術、內容等方面都擁有好的品質,才會有機會被 Google 優先收錄至索引,並排名在較低品質的網站前面。如同 Google 所說:最重要的是,要讓網站變得「棒極了(fantastic)」——一個聽起來容易、執行起來卻困難重重的詞彙。

更多SEO相關文章請點閱下方連結~

 

 

 

其他閱讀

SEO殺手-404與轉址式404錯誤(軟性404)解決方法

「恐怕會助長歧視」WordPress 與多家瀏覽器對 Google FLoC 喊停!

Google更新影片SEO!讓影片搜尋最佳化的15種方法(上)

Google更新影片SEO!讓影片搜尋最佳化的15種方法(下)

SEO關鍵字小教室三:關鍵字挑選五步驟~

SEO人員注意!!五月後這些核心指標將成為排名主要因素~()

Google的這項最新人工智慧技術遭到質疑還進而被停用?()

SEO情報站:Google改變了處理軟404檢測和分類的方式

SEO情報站:Google改變了處理軟404檢測和分類的方式
SEO情報站:Google改變了處理軟404檢測和分類的方式

最新的SEO情報來啦!!想知道Google如何改變了處理軟404檢測和分類方式嗎?那千萬別錯過今天的文章喔!!

Google 的 John Mueller 七月九日證實 Google 改變處理「軟 404」檢測和分類的方式:Google 將依設備類型查看網站中的每個頁面,並可能將同一個 URL,依行動裝置和桌上型電腦上而分配不同的軟 404 分類。詳情如以下的影片的第 22 分鐘開始:

軟 404 是什麼?

軟 404」是指網頁返回的 HTTP 狀態代碼為 200 (代表網頁一切正常),但實際上該網頁並沒有載入內容或無法被找到,而應該回傳 404 「頁面不存在」的狀態。 當這種情況發生時,Google 會將這些頁面標記為「軟 404」,並將此 URL 視為真正的 404 頁面、不將該頁面編入索引。想要更深入了解軟 404 對 SEO 造成的影響,請看此篇

「軟 404」的處理,將依桌機或手機而有所不同

而今天 Google 說他們處理軟式 404 分類的方式改為「按設備類型」來查看 URL 。所以若 Google 看到一個 URL 並透過桌上型電腦訪問其 URL,然後再使用行動裝置訪問同一個 URL 的話,有可能會為桌上型電腦而非行動裝置回傳「軟 404」。簡而言之,Google 不只依照 URL 來檢測軟 404 狀態,現在也依設備種類而有所不同。依據國外 SEO 媒體的報導,這些改變其實早在一個月前就發生了⋯⋯

所造成的問題

當 SEO 注意到以下兩件事之一時,問題就浮現了:

  1. 使用 Google 搜尋引擎進行查詢時,發現 Google 沒有索引該頁面
  2. SEO 在 Search Console 中看見「軟 404」錯誤大幅增多,但在 Google 搜尋引擎卻沒有看到問題

到底是怎麼一回事

一個網頁在行動裝置中可以正常返回,並且不會在 Search Console 中顯示軟 404 錯誤。 Google 僅顯示基於行動裝置所抓到的軟 404 錯誤,因此若一個網頁能在行動裝置上正常運作的話,Search Console 就不會顯示錯誤——但 Google 可能會為同個頁面的桌機版本顯示軟 404 錯誤。在這種情況下,當你在桌上型電腦的 Google 搜尋時,可能就看不到這些頁面被編入索引並出現在搜尋結果中。 同時,Search Console 也會顯示一切正常——但僅限於行動裝置,在桌機上就不正常了。

放心!Google 正在修復錯誤

Google 團隊現在正致力於改善軟 404 分類的問題。如果你也在一個月前開始,開始注意到你網站的軟 404 錯誤大幅增加的話,則可能與這項改變有關。 請務必向 Google 提出問題、列出存在此問題的 URL,未來 Google 可望為你解決。 因為此次的變動可能會影響你網站的 SEO 成效,你可以至 Google Search Help Community 描述所遇到的問題,或是⋯⋯透過 Twitter 直接反映給 Google 的 John Mueller(@johnmu)。


參考資料:

  • https://searchengineland.com/google-now-does-soft-404-detection-by-device-type-350321
  • https://www.seroundtable.com/google-soft-404-31727.html

更多SEO相關文章請點閱下方連結~

 

 

 

其他閱讀

SEO殺手-404與轉址式404錯誤(軟性404)解決方法

「恐怕會助長歧視」WordPress 與多家瀏覽器對 Google FLoC 喊停!

Google更新影片SEO!讓影片搜尋最佳化的15種方法(上)

Google更新影片SEO!讓影片搜尋最佳化的15種方法(下)

SEO關鍵字小教室三:關鍵字挑選五步驟~

SEO人員注意!!五月後這些核心指標將成為排名主要因素~()

Google的這項最新人工智慧技術遭到質疑還進而被停用?()

蘋果這項最新功能遭到Facebook極力反對?!為什麼?

蘋果這項最新功能遭到Facebook極力反對?!為什麼?
蘋果這項最新功能遭到Facebook極力反對?!為什麼?

Facebook 這次公開反對蘋果最新功能—-APP追蹤透明度?!關心隱私權的你快來看看今天我們準備的文章吧!!

日前蘋果最新作業系統 iOS 14 正式上線,其中最受注目的更新莫過於「App 追蹤透明度」(App Tracking Transparency,ATT)功能,在正式上線前就引發許多討論,甚至讓另一科技巨頭 Facebook 直接公開反對。

與不斷而來的爭議不同,這項功能本身其實很單純:「實裝 App 追蹤透明度功能後,所有應用程式開發商都需要獲得用戶允許,才能追蹤用戶數據。」以使用者的立場而言,聽起來是件好事,為何會引來 Facebook 與許多廣告業者的劇烈抗議呢?

「數位隱私」成最新重要議題

過去,使用者的「數位足跡」(Digital footprint)──包含瀏覽習慣、偏好行為、停留時長、位置訊息,甚至連真實世界的年齡、性別、種族等資訊,都會在使用網際網路時被記錄下來,不知情的情況下被「出售」,供廣告商掌握後對特定使用者投放特定廣告。

而近年來,使用者於網路上的隱私問題越發受到重視,加上民眾資安意識的普及,許多人皆反對網站與 App 未經授權就取得使用者資料,甚至是賣給第三方廣告業者,謀取暴利。

輿論壓力使不少科技公司做出相應措施,如:Google 就宣布會逐漸淘汰第三方 Cookie,轉而採用其他的隱私保護技術。而蘋果選擇的方法是:將被追蹤與否的權利歸還到使用者本身!

兼顧個人隱私與用戶體驗

蘋果的每部 iOS 裝置上,都會有一個 IDFA(廣告識別碼),用以整合該裝置使用數據。廣告業者就是依此來收集、追蹤使用者的數據來進行廣告投放。

蘋果即是選擇更改 IDFA 的權限,將之交給使用者──iOS 14 要求應用程式開發者必須在追蹤、獲取使用者的 IDFA 時,要跳出詢問提示:「您允許讓我追蹤您的 IDFA 嗎?」除了之外,App Store 內的 App 也逐項列出將可能收集哪幾項使用者資料,讓「獲取用戶資料」這件事更加透明化。 

使用者可以自己決定是否要讓某一 App 追蹤自己的資料。

但對於 Facebook、Instagram 等 App來說,這就表示他們未來有可能無法在 iOS 裝置上直接收集到 IDFA,廣告的關鍵數據基本等於消失,未來將有一定數量的使用者無法被廣告商定位。這也將使 Facebook 的廣告聯播網服務「Audience Network」失去效果,大幅衝擊廣告收入。

因此,Facebook 公開登報表示:反對蘋果對 IDFA 和程式追蹤進行限制!

斷了千萬公司的財路?

Facebook 在《紐約時報》、《華盛頓郵報》和《華爾街日報》等媒體上刊登了「大字報」,標題也頗為聳動:「為了各地的小公司,我們決定站到蘋果的對立面。」表示他們要為所有中小型商家反抗蘋果。

Facebook 以報紙全版廣告批評蘋果決策。

Facebook 在文中表示,每個月都有超過千萬個小公司,會透過 Facebook 的廣告工具來獲取潛在客戶、招募員工或是觸及社群用戶。而蘋果在 iOS 上的新限制,會讓這些小公司無法精準地投放廣告,使得它們的的商業模式受到衝擊,損害中小企業的發展。

「根據 Deloitte 調查顯示,44%的中小型客戶在疫情衝擊下,開始在社群媒體上增加利用個人化廣告。」文中表示:「若沒有個人化廣告,Facebook 的數據顯示,普通小型企業花了同樣金額的廣到行銷,但銷售額減少了 60%以上。」

文末更號召廣大的商家參與活動,鼓勵大家分享 iOS 這次的更新對公司業務造成了哪些影響。

隱私是基本人權

面對這些抗議,蘋果表示:「隱私權是基本人權,也是我們的核心價值之一。你的資料,你有權選擇。」並在官方網站上發布《個人資料的一天》(A Day in the Life of Your Data)白皮書。

蘋果軟體工程副總裁 Craig Federighi 也表示:「顯然地,一些公司將竭盡所能阻止 App 追蹤透明功能。我們需要全世界看清爭論的本質——試圖厚顏無恥地維持侵犯隱私的現狀。」

蘋果在大批反對聲浪之中,依然堅持了其對數位隱私的變革,頗有「雖千萬人吾往矣」的氣魄。然而,任何革新都不是一蹴可幾的,網路時代科技巨頭之間牽一髮而動全身的局面,也讓隱私權的維護變得更加艱難。未來個人資料、隱私與商業考量之間,是否能有雙贏的解決辦法?還要繼續看下去。

更多隱私或科技相關文章請點閱下方連結~

其他閱讀

「恐怕會助長歧視」WordPress 與多家瀏覽器對 Google FLoC 喊停!

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

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

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

人工智慧自主學習新高度!!Seer打破你的認知!!

人工智慧醫療精準預測!!老人癡呆可以開始有效預防了嗎?

人工智慧再突破~與已故親人聊天不再是夢?!

別害怕重頭學習~前端工程師等你來轉職!!

別害怕重頭學習~前端工程師等你來轉職!!
別害怕重頭學習~前端工程師等你來轉職!!

想學習前端工程師課程卻擔心沒有相關背景嗎?快來看看親身實例怎麼說吧!!

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

 

【轉職前端工程師】測試工程師的微痛學習歷程,現在切版、網站開發一把罩!
 

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

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

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

非本科系的微痛學習歷程

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

前端工程師經驗滿一年

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

 

 

 

更多前端工程師或程式設計相關文章請點閱下方連結!!

 

 

 

其他閱讀

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

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

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

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

JK羅琳就快被人工智慧取代寫出最新一集的哈利波特!?

能篩檢出視網膜病變的人工智慧眼科輔助診斷軟體終於上線!!()

中研院研發讓交通執法運用人工智慧科技讓超速一秒現行?!()

 

 

UX,UI設計大解析:怎麼讓UX,UI相輔相成?

UX,UI設計大解析:怎麼讓UX,UI相輔相成?
UX,UI設計大解析:怎麼讓UX,UI相輔相成?

對UX設計和UI設計感興趣嗎?那千萬不能錯過這一系列文章!!系列最後一篇~怎麼讓UX,UI相輔相成?一定要知道~

本篇為【UX,UI設計大解析】系列的第 5 篇,完整連結如下:
UX,UI設計大解析:UX,UI不再傻傻分不清!!
UX,UI設計大解析:UI設計的優點有哪些?!
UX,UI設計大解析:UX設計的優點有哪些?!
UX,UI設計大解析:UX,UI都需要研究驗證?!
UX,UI設計大解析:怎麼讓UX,UI相輔相成?

結語:如何讓 UI/UX 相得益彰?

即使 UI 設計UX 設計是截然不同的專業、各自涉及迥異的技能,但它們都是彼此不可或缺的存在。

即使有精雕細琢的介面設計,也無法掩飾笨拙又難用的操作流程;而枯燥乏味的視覺設計也會無法吸引使用者、從而埋沒了出色的使用體驗。

UI 設計師確立使用者介面的外觀,而 UX 設計師安排使用者介面的運作。在 UX 設計師在鑽研如何用有限的篇幅、提供使用者最多又不會過多的資訊時,UI 設計師正在努力讓這些繁雜的訊息精美地呈現在螢幕上。這是一個非常需要合作的過程,也有賴雙方緊密且良好的溝通。

以行動號召按鈕(Call to Action,CTA)為例,看 UX 與 UI 的分工:

1.UX 設計

提出需要多增加一個按鈕、為何如此能讓使用者滿意、決定如何重新安放所有按鈕。

2.UI 設計

設計新按鈕的外觀,而其他按鈕也可能受影響而需重新調整如形狀、顏色、大小、特效等外觀。

3.UI、UX 設計師重疊的互動設計

當使用者點下按鈕後將會導向某個頁面,UI 著重在按鈕外觀的能見度與視覺導引;而 UX 則著重在導向的網頁是否能滿足使用者的期待。

如此這般,UI 設計UX 設計師需要不斷地溝通協作,才能確保彼此的設計都能完美執行、與使用者的期望完美地吻合,最終創造出優秀的使用者介面與體驗。

如果你正在規劃要朝 UI 還是 UX 領域邁進,那麼最重要的還是思考自己對哪種設計類型感興趣。如果還不熟悉設計領域,建議這兩個方面都可以嘗試一下,有了在這兩個領域的實際經驗,不僅可以更了解自己適合哪個領域,也可以使你無論最後選擇哪一個,都能成為更好的設計師!

 

 

更多UI設計相關文章請點閱下方連結~

 

 

 

其他閱讀

美女PM/UI設計師真實身分起底!二度就業婦女的斜槓人生

第一次上程式設計課程該選 Python 還是 Java?有什麼差別?

五部人工智慧電影告訴你:未來人類會與 AI 談戀愛⋯⋯還是被毀滅?

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

30個方法教你如何用A/B測試改善網站的UI設計!!(1)

AI人工智慧命名大走鐘:甜點篇

學Python課程找好工作:品保花了一年順利轉職程式設計師!!

UX,UI設計大解析:UX,UI都需要研究驗證?!

UX,UI設計大解析:UX,UI都需要研究驗證?!
UX,UI設計大解析:UX,UI都需要研究驗證?!

對UX設計和UI設計感興趣嗎?那千萬不能錯過這一系列文章!!這篇要來談的是UX,UI都需要研究驗證?!

本篇為【UX,UI設計大解析】系列的第 4 篇,完整連結如下:
UX,UI設計大解析:UX,UI不再傻傻分不清!!
UX,UI設計大解析:UI設計的優點有哪些?!
UX,UI設計大解析:UX設計的優點有哪些?!
UX,UI設計大解析:UX,UI都需要研究驗證?!
UX,UI設計大解析:怎麼讓UX,UI相輔相成?

研究是關鍵!無論 UIUX 都需要研究驗證

UIUX 若想要盡善盡美,最重要的的就是要做各種事前研究!

無論是 UI 設計UX 設計師,都必須先做各種功課——盡可能收集資料、行為數據以研究使用者的需求,思考、分析和預測使用者在當下可能的行為、行為背後的動機以及隨之而來的體驗感受。

而研究所得的數據資料將應用在初版設計上,接著有的 UIUX 設計師會透過真人測試或使用者訪談,取得使用者最直接的回饋、觀察並記錄使用者使用產品的整個過程、發現需求並構思解決方案,以確定設計能朝著正確的方向前進。

即使無法進行真人測試,也會透過 A/B 測試、易用性測試(Usability test)等方式在開發時就先測試找出問題,進一步對設計進行修改或優化。

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

而這樣「研究分析、設計開發、測試反饋、修改優化」的流程會重複多次,這樣的開發法又被稱為疊代式開發。與傳統的瀑布式開發相比,疊代式開發能降低風險、提早得到使用者反饋,也具有更高的效率和成功率。

採用這種方法,可以在完全確定設計需求之前就開始進行開發,在一次疊代中先完成一部分設計,再通過使用者的回饋來細化,再開始新一輪的疊代。

對於 UI 和 UX 設計師來說,事前研究都至關重要,也都使用類似的方法,以求規劃出得宜的設計。

 

本系列文章未完,下一篇請點UX,UI設計大解析:怎麼讓UX,UI相輔相成?

更多UI設計相關文章請點閱下方連結~

 

 

 

其他閱讀

美女PM/UI設計師真實身分起底!二度就業婦女的斜槓人生

第一次上程式設計課程該選 Python 還是 Java?有什麼差別?

五部人工智慧電影告訴你:未來人類會與 AI 談戀愛⋯⋯還是被毀滅?

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

30個方法教你如何用A/B測試改善網站的UI設計!!(1)

AI人工智慧命名大走鐘:甜點篇

學Python課程找好工作:品保花了一年順利轉職程式設計師!!

 

UX,UI設計大解析:UX設計的優點有哪些?!

UX,UI設計大解析:UX設計的優點有哪些?!
UX,UI設計大解析:UX設計的優點有哪些?!

UX 設計和UI設計感興趣嗎?那千萬不能錯過這一系列文章!!今天要來介紹UX設計的優點有哪些~

本篇為【UX,UI設計大解析】系列的第 3 篇,完整連結如下:
UX,UI設計大解析:UX,UI不再傻傻分不清!!
UX,UI設計大解析:UI設計的優點有哪些?!
UX,UI設計大解析:UX設計的優點有哪些?!
UX,UI設計大解析:UX,UI都需要研究驗證?!
UX,UI設計大解析:怎麼讓UX,UI相輔相成?

什麼是 UX 設計

UX 表示「使用者體驗」(User experience),顧名思義強調的是「使用者的感受」。

為了帶給人們良好的體驗,必須先進行使用者洞察、產品研究、市場趨勢研究,到建立資訊架構、規劃任務流程、繪製線框圖(Wireframe)和與 UI 設計師溝通互動設計與視覺設計間的怎麼互相調和,最後交棒給工程師。

而使用者會得到怎麼樣的體驗,取決他們如何與應用程式互動:希望體驗流暢、直觀?那導引要設計的合乎邏輯;想讓使用者覺得自己有效地完成任務、而不是在打一場戰爭?這都取決於 UX 設計師的功力。

▲ 設計思維是一種以人為本的創新方法,它汲取了設計師的靈感,將人的需求,技術的可能性以及業績成功的需求整合在一起(來源:Unsplash)

 

當然使用者介面和體驗有著相輔相成、缺一不可,因此 UX設計師會跟 UI 設計師密切合作,這也是為什麼許多人會混淆兩者。不同的是,UI 設計師的任務是確定使用者介面的外觀,而 UX 設計師負責確定使用者介面的結構、功能、操作方式和反饋體驗。

簡而言之,UX 如果設計良好、直觀又流暢,則使用者將獲得良好的體驗;反之則可能會把使用者趕跑,UX 設計師的工作就是努力避免出現第二種情況。那一個好的 UX 設計會具有哪些特色呢?

好的 UX 設計 會具有的優點:

身為 Mailchimp 使用者體驗設計總監的 Aarron Walter 在他的《為情感而設計》(Designing for Emotion)一書中,告訴讀者如何才能讓使用者愛上你的網頁、產品或應用程式。

此書中參考馬斯洛需求理論、提出「使用者需求理論」,成為 UX 設計師思考與決策的重要參考:

▲ 「使用者需求理論」金字塔從底層至頂層依序為:功能性、可靠性、實用性、趣味性

 

「使用者需求理論」金字塔從底層至頂層依序為:功能性、可靠性、實用性、趣味性。

從金字塔我們可以看出,產品所提供的「功能」是最基本需求;「可靠性」則是指在一定的條件、時間內穩定地達成使用者的需求;「實用性」表示使用者能順利透過產品完成他們的需求、並未來若有相同需求的時候,優先想到你的產品;最頂端的「趣味性」能滿足使用者的心理需求,作為與使用者的情感紐帶,讓使用者對產品產生好感與認同。

以上是 UI、UX 的差異分析與介紹,那它們兩者有什麼相同呢?又要如何才能相輔相成、成為完美的設計呢?

UX 設計人員也常會利用叠代式開發(iteration),即先製作其介面互動的線框稿,並以此獲得使用者的回饋,再將其整合到設計之中,獲得更好的版本。

 

本系列文章未完,下一篇請點UX,UI設計大解析:UX,UI都需要研究驗證?!

更多UI設計相關文章請點閱下方連結~

 

 

 

其他閱讀

美女PM/UI設計師真實身分起底!二度就業婦女的斜槓人生

第一次上程式設計課程該選 Python 還是 Java?有什麼差別?

五部人工智慧電影告訴你:未來人類會與 AI 談戀愛⋯⋯還是被毀滅?

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

30個方法教你如何用A/B測試改善網站的UI設計!!(1)

AI人工智慧命名大走鐘:甜點篇

學Python課程找好工作:品保花了一年順利轉職程式設計師!!

 

UX,UI設計大解析:UI設計的優點有哪些?!

UX,UI設計大解析:UI設計的優點有哪些?!
UX,UI設計大解析:UI設計的優點有哪些?!

對UX設計和UI 設計感興趣嗎?那千萬不能錯過這一系列文章!!今天要來介紹UI設計的優點有哪些~

本篇為【UX,UI設計大解析】系列的第 2 篇,完整連結如下:
UX,UI設計大解析:UX,UI不再傻傻分不清!!
UX,UI設計大解析:UI設計的優點有哪些?!
UX,UI設計大解析:UX設計的優點有哪些?!
UX,UI設計大解析:UX,UI都需要研究驗證?!
UX,UI設計大解析:怎麼讓UX,UI相輔相成?

但隨著對 UI、UX 的認識日漸普及,目前的分工也越來越明確了,接著讓我們來看看 UI 和 UX 究竟是什麼吧。

什麼是 UI 設計

UI 表示「使用者介面」(User Interface),無論是網頁、手機 APP 或是電腦軟體,只要眼睛所見的頁面都是 UI 設計的守備範圍。

從吸引使用者點擊的按鈕、閱讀的文字、文字輸入欄、空間配置、畫面排版、轉場和任何形式的視覺元素,一同組成一個龐大的視覺佈局。

▲ 這張照片是攝影師 Lubos Volkov 為 UX Store 拍攝的,同時提供了有關「如何成為更好的設計師」的提示。在你的技能達到一定的水平之後,就要不斷地學習新事物。(來源:Unsplash、uxstore.com)

 

除此之外,UI 也是人和電腦相遇的地方──電腦具備某種功能,人想要利用這些功能,需要進行「輸入」(inputs)和「輸出」(outputs)。介面就是輸入和輸出的規劃安排,讓人們得以應用電腦來創造出他們所需結果。

以上工作由 UI 設計師負責,他們選擇配色方案、按鈕形狀、線條的寬度和文字的字體,精心打磨每一處「眉角」。而一個好的 UI 設計通常具有以下特色……

好的 UI 設計 會具有的優點:

1. 清晰

介面的所有視覺元素皆脈絡分明、一目瞭然,使用者不需要刻意思考每個元素的含意。

2. 熟悉

使用者可以依照過往習慣操作你的介面,如:點擊一次為選取、點擊兩次則為打開該項目。

3. 一致性

保持整個介面的風格一致,這樣使用者可以習慣操作模式。

4. 防呆機制

一個好的使用者介面該避免使用者不小心犯錯。

5. 事半功倍

好的介面可以讓使用者以最少的「輸入」達成所需的「輸出」,還能讓有經驗的使用者更有效率操作。

▲ 一名設計師正在繪製 wireframe。(來源:Unsplash)

 

待設計完成後,UI 設計師會寫上標註和說明,轉交給工程師進行撰寫。因需要與工程師溝通配合,UI 設計師必須跟上科技的進步,對程式語言也要一定程度的了解,避免產生和工程師溝通不良的狀況。而帶有前端工程師及設計師雙技能的人會被稱為「介面工程師」(UI Developer),可以自己設計畫面也自己寫出網頁。

UI 設計師有時也會與「平面設計師」(Graphic designer)一同被討論,他們同樣關心美學、同樣要使介面充滿魅力、引人注目並切和主題,但平面設計師不需考慮「使用者怎麼操作」的問題,平面設計基本上也不需要被操作;而 UI 設計師則要思考如何引導使用者操作並完成任務,故兩者還是大不相同的。

 

本系列文章未完,下一篇請點UX,UI設計大解析:UX設計的優點有哪些?!

更多UI設計相關文章請點閱下方連結~

 

 

 

其他閱讀

美女PM/UI設計師真實身分起底!二度就業婦女的斜槓人生

第一次上程式設計課程該選 Python 還是 Java?有什麼差別?

五部人工智慧電影告訴你:未來人類會與 AI 談戀愛⋯⋯還是被毀滅?

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

30個方法教你如何用A/B測試改善網站的UI設計!!(1)

AI人工智慧命名大走鐘:甜點篇

學Python課程找好工作:品保花了一年順利轉職程式設計師!!

前端工程師必備的後端技能有哪些?一次教給你!!

前端工程師必備的後端技能有哪些?一次教給你!!
前端工程師必備的後端技能有哪些?一次教給你!!

你以為前端工程師只要會前端技能就好嗎?那你就錯了~快來看看那些後端技能非學不可呢!!

對於前端工程師來說,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;

▲ 在命令提示字元使用 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 混淆導致無法建表 (如下圖)。

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

 

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

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

▲ 在命令提示字元使用 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','資料庫');

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

 

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

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

 

UPDATE

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

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

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

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

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

 

DELETE

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

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

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

DELETE FROM FrontEndElements WHERE element='SQL';

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

 

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

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

SELECT

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

SELECT * FROM  FrontEndElements;

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

 

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

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

GRANT

授予權限

REVOKE

收回權限

上述的 MySQL 語句種類,前端工程師只須看得懂 DDL、DML 與 DQL 就好。下一篇文章會講述 MySQL 中文亂碼的解決方式。請想提升技能的前端工程師多多關注我們的知識庫和MySQL教學

 

 

更多前端工程師或其他程式語言相關文章請點閱下方連結!!

 

 

 

其他閱讀

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

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

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

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

Python課程超強大!讓非本科轉職為大醫院網站工程師!

半年Java課程讓他成功轉換跑道成為一名程式設計師!

進修Java課程只為從硬體工程師成功轉換跑道成為一名軟體工程師!

30個方法教你如何用A/B測試改善網站的UI設計!!(4)

30個方法教你如何用A/B測試改善網站的UI設計!!(3)
30個方法教你如何用A/B測試改善網站的UI設計!!(3)

身為UI 設計師~知道如何使用A/B測試來改善網頁設計嗎?今天的文章依次交給你!!(4)

本篇為第 4 篇,第 3 篇請點此30個方法教你如何用A/B測試改善網站的UI設計!!(3)

範例24:嘗試銷售「好處」而不是功能

克里斯‧古利博(Chris Guillebeau)在《100美元創業》(The $100 Startup)一書中寫道,人們真的很在乎愛情、金錢和自由,也希望同時能減少壓力、衝突和麻煩。

人們在挑選產品時,考慮的點除了性能外,更在乎這個產品能如何帶給他們好處 -- 例如若能同時幫他省錢又省力就太好了。而這就是產品能帶給顧客的價值所在,也是他們會掏錢的關鍵。所以網頁的說明別只向顧客說明產品或服務內容,說明能為顧客帶來哪些好處吧!

範例25:謹慎設計「沒有符合的產品」的網頁

如何在網頁上呈現數據是一套學問,只是許多 UI 設計擅長表現 1000 個以上的數據,結果卻忽略了「零數據」的情況--當使用者想搜尋符合特定條件的商品未果時,跳出的「搜尋到 0 個商品」。或者另一個情況:當初使用者查看您的網頁時,在沒有任何引導的情況下操作,導致顯示 0 數據,這會有讓使用者感覺被忽略的風險。

此時,有 sense 的 UI 設計師會使用「網頁使用教學」或提示來取代冰冷的「搜尋到 0 個商品」頁面,讓使用者感受這個網頁是有人性的,營造暖心的 UX 使用者體驗!

推薦閱讀:改變 UI/UX 竟讓友情加溫、麵包烤更香!Netflix 紀錄片揭露設計師巧思

範例26:讓使用者能選擇「不參加」

傳統行銷策略上,會只有一個寫著「我想要…」的方框(check box)以供勾選,若不想參加則可以不勾選。某些粗魯的行銷手段甚至會預設設為勾選,常讓使用者一不留意就「被答應」了 。

更好的做法是將正反向的選擇各放一個方框,告訴使用者「你可以要也可以不要」,然後再替使用者默選其中一項。

因為此舉可以減緩當使用者不想參與時的牴觸感,亦可可讓使用者潛意識產生「所有人都照原樣進行,那我也這樣做吧」的想法,進而讓我們的目的更容易達到,還不會引使用者的反感。畢竟行銷道德也會影響使用者對品牌的評價。

範例27:保持一致性,避免使用者重新學習

世紀最有影響力之一的設計師唐.諾曼在《設計的心理學》中闡述,產品設計的最終目的,是為了讓產品符合使用者的預期。這個概念也是人因工程的核心概念之一,也就是「一致性」。維持「一致性」的產品易學易用、錯誤較少,可以減少心智工作的負荷,可以說是人人都期望中的產品。

而網頁的一致性同樣能幫助使用者容易學習,若破壞一致性原則,使用者就得重新學習一次。在介面上,一致性可藉由如顏色、形狀、大小、標記或語言等方式完成。

不過,當有需凸顯的內容時,依然可以使用「不一致」的元素吸引使用者注意。

範例28:善用「自動填入」以避免使用者重複操作

UX 使用者體驗與轉換率的角度來看,最糟糕的事莫過於一遍遍地詢問人們已經提供的資料。提供預設值或自動填入之前填過的資料,再讓使用者檢查正確性,都比每次要他們重新輸入來的好。

盡量減少使用者的操作流程並節省他們的時間,絕對是有益處的。

範例29:UI 設計應要保留大多數人都習慣的操作方式

同樣是基於「一致性」原理,維持常見的操作習慣也是很重要的。如果在整個 UI 介面上保持慣常的操作模式,使用者自然不會遇到太困難的阻礙。如圖例,人們已經習慣在介面右上角會有表示關閉的「X」圖示,就如呼吸般自然。

當然,新的操作模式也許可以帶來耳目一新的感覺,但在推翻傳統,必須謹慎思索改革的目的與成效。

範例30:「做了能避免⋯⋯」的行動呼籲內容比「做了能得到⋯⋯」更好

損失規避理論(Loss aversion)指出,當人們面對同樣數量的收益和損失時,會認為損失更令他們難以忍受。也就是說,人們當然喜歡獲得,但更討厭失去!

這個理論可以套用在產品設計和使用者溝通。例如若產品的目的是保護客戶現有的財富或安全等等,比起推銷客戶還未擁有的東西更能說服客戶購買。

在上圖的網站 UI 設計 A/B 測試中,左側的行動呼籲是「請這樣做,以免失去你的健康、財富或朋友」;右側的則是「請這樣做,就可以增加你的健康、財富或朋友」。左側的「恐嚇式描述」會讓人聯想到事情發生時(如失去財富等)的嚴重性,就按下「Do This」按鈕以先預防,因此比起右側的敘述更有「讓人不敢拒絕」的說服力。

 

 

更多關於UI或其他類型文章請點閱下方連結~

 

 

 

其他閱讀

特效不夠AI 來湊!迪士尼換臉技術達百萬畫素

Google Analytics「工作階段」定義與範例一次解析!

亞馬遜人工智慧出包 搞混國會議員與罪犯

人工智慧再突破!史上最強解馬賽克技術 64倍解析度還原成無碼

為何各個UI設計師都愛用圓角矩形?真的有比較好?()

考取APCS認證非知不可的攻略秘笈就看這篇!!()

人工智慧也會騎重機飆車?!頂尖車手擔憂快失業!!