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

 

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打造出史上最難玩俄羅斯方塊!

掌握好谷歌索引網頁訣竅!SEO就可以更有效率!

掌握好谷歌索引網頁訣竅!SEO就可以更有效率!
掌握好谷歌索引網頁訣竅!SEO就可以更有效率!

SEO要做好,首先你要先了解網頁是如何被谷歌索引!

 

目錄

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

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

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

4. Google 會避免索引哪些內容?

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

6. 結論:網站品質才是王道

 

網頁沒被索引,就不會出現在搜尋結果,更不會有排名!所以網頁上線後,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殺手-404與轉址式404錯誤(軟性404)解決方法


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


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


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


IC晶片只需6小時就能搞定?!原來最大功臣是AI!


人工智慧”虛擬電廠”,就算臨時停電也不怕!


高手必學SEO關鍵字(3)-關鍵字挑選五步驟

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

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

還在擔心軟404影響你SEO的成效嗎?不用擔心,谷歌已經開始介入處理囉!

 

 

目錄

1. 軟 404 是什麼?

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

2-1. 所造成的問題

2-2. 到底是怎麼一回事

3. 放心!Google 正在修復錯誤

 

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 注意到以下兩件事之一時,問題就浮現出來了:

使用 Google 搜尋引擎進行查詢時,發現 Google 沒有索引該頁面

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殺手-404與轉址式404錯誤(軟性404)解決方法


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


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


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


掌握SEO關鍵字有妙招(一)-關鍵字分類篇


擁有”超能力”不是夢?!臉書新推AR手腕感測器辦到了!(上)


人工智慧超強大,讓你線上會議超順暢!(下)