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

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

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

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

範例17:顯示出項目的即時動態

UI 設計中,常會以不同方式表現出項目的不同狀態,例如:E-mail 上可標記出未讀或已讀、帳單明細會顯示已繳清或未繳的帳目等。而向使用者顯示項目所處的狀態是提供反饋的好方法。

即時動態可以幫助消費者確認是否已經操作過了、操作是否成功、以及接下來應該進行什麼動作

範例18:把引導型按鈕的敘述改寫為「能帶給用戶哪些好處」

想像一下若是眼前的網頁上有兩個按鈕,其中一個標示「能替你省下一大筆錢!」,另一個寫著 「點這裡註冊」,肯定大部分使用者都會被前者吸引。

前者就是所謂「能帶來好處的按鈕」,能替使用者產生價值;而後者則是「任務導向的按鈕」,代表使用者耗費時間跟精力。而「能帶給使用者好處」的按鈕自然有較高的轉換率。

範例19:直接操作比多階層下拉式選單更直覺

直接處理畫面上的資訊,有時會比使用整合工具列還直覺,如多階層下拉式選單(context of button)雖然十分常見,但過多的階層可能會增加操作的步驟,所以下次設計時不妨考慮減少階層或直接操作的方法。

範例20:若當下就可以操作,就不要再多開分頁!

當我們希望使用者做有價值的動作,如:留下聯絡方式、基本資料等,最好把填寫用的欄位或表單放置本頁上。若能與頁面整合在同一層,會比讓使用者連結到別頁輸入資料來的好。

精簡流程、讓使用者花最少的時間就能了解頁面資訊,並將簡單易懂的表單放置於該頁面上。除了方便性,也可藉此讓使用者預估填寫所需的時間,會更加增加使用者填寫的意願。

範例21:以過渡形式表現操作導致的 UI 介面改動

當使用者在與 UI 介面互動時,UI 設計成能藉由隱藏、顯示、移動或調整大小等變化來回應使用者的行為,也能協助使用者理解介面的使用方式

其實在變化過程中增加一些動態變化,也能達到尊重使用者的效果:故意延遲、以過渡形式表現尺寸或位置的變化,能讓使用者有更多時間、更有餘裕地去理解網頁的變動。

但需要注意的是,動態效果的時間最好在0.5秒以下,過長就可能引起使用者的不悅——特別是想要快速完成流程的使用者。

範例22:讓先使用者漸進式參與,而不是先要求註冊

比起劈頭就要訪客馬上註冊,不如先讓訪客們有機會體驗產品,或至少讓訪客先觀看使用案例、過往客戶回饋或是介紹影片!在訪客還在建立第一印象時彰顯出產品的功效,亦可以表現出與他牌的不同。

一旦使用者看到您產品的價值、並體會到能帶來的價值,他們會更樂意接受您之後分享的其他訊息。「漸進式參與」即是一種盡可能推遲註冊過程,但依方面卻能增添使用者主動註冊動機的方法。

範例23:嘗試減少線框,不要浪費精力在分割框架

使用者的耐心與時間都有限,所以網頁如何爭分奪秒地抓住他們的注意力就十分重要。常見的設計會利用線框(border)來強調劃分不同內容,但也正是因為線條的明顯具體,反而導致使用者耗費更多專注力,因為線框區分出的區塊(box)若過多或安排不當,會讓人感覺雜亂不齊。

解決方法如:在設計之前就定義好內容與視覺之間的關係(例如色彩設計)、減少不必要的區塊、對齊不同的背景色,才能有效地減輕使用者的閱讀難度。

 

 

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

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

 

 

 

其他閱讀

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

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

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

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

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

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

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

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

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

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

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

範例9:清楚描述 TA (目標客群),而不是宣稱「適合所有人」

網站是瞄準特定族群還是面向普羅大眾?即使鎖定客群的策略有風險,讓網站在短期內失去一些潛在客戶,但誠實與公開透明才是與消費者信任的基礎。

網站清楚描述產品或服務的目標族群畫面,可以讓網站吸引到相似特質的使用者,同時透露出的「排他性」會讓使用者感到自己是被重視的,並建立出親近感。

範例10:不會有人被優柔寡斷吸引,多使用肯定語氣吧!

當你收到一封語句充滿「也許、可能、說不定」的信件,以及收到一封肯定且充滿信心語句的信件,哪個寄件人會讓你覺得比較能信任?相信大部分的人都會認為答案明確的信能讓人安心吧!

優柔寡斷會降低信任感,如果網頁上常使用問句或不確定性的字詞,例如:有興趣嗎?想購買嗎?會讓消費者覺得你對產品或服務信心不足,這時候可以使用更具權威性、專業性的語句,像是如何帶給顧客良好的產品或最佳的 UX 使用者體驗。

範例11:善用色彩對比度來凸顯號召性用語

醒目的行動呼籲性(CTA,Call-to-action)可以使你的 UI 介面更加強大。有多種方式能輕鬆提高 CTA:如透過深淺色調、陰影、漸層或對比色的手法來增加畫面上的對比性,提升被使用者注意到的機會。

範例12:標示出產品的原產地

為產品添加名稱、圖片與原產地標示都展現出獨特性方法。特別是提到國家、地區或城市,因為這正如人們自我介紹來自哪裡一樣,是一個非常人性化的交流方式,也會顯得更加友善。

另外,說明原產地故事也能讓產品與產地名聲達到雙贏。

範例13:別讓使用者填太長的表單

人類天生就牴觸勞動密集的行為,這個理論同樣適用於讓顧客填寫表單,每多一個表格就增加使訪客轉身放棄的風險!並不是每個人都能飛快地打字,更別說在移動裝置上打字仍然不輕鬆。檢視是否每個表格都有必要回答,並盡可能減少表格數量。

如果必填欄位真的為數眾多,可以嘗試讓最重要的資訊先讓使用者填寫完,提交後再出現一個單獨的頁面,請使用者繼續填寫第二重要的資訊。

範例14:別隱藏頁面上的選項,大方展現吧!

下拉式選單的優點在於可以增加頁面的空間,若是要選擇可預期、已熟悉或高度重複操作的項目(如:生日、日期或地區)那使用下拉式選單是個不錯的策略。

但對於使用者來說,下拉式選單隱藏了一組他們要努力去發現的選項。這些選項若是跟產品有關,而且是交易流程中必經的,那你可以考慮不要隱藏這些選項,這樣可以提升網頁著轉換率

範例15:別讓使用者覺得已經「滑到最底了」

長型的一頁式網站是趨勢,但若是 UI 設計不良、看到一半就讓使用者誤以為「已經滑到最底了」,這可是會大幅扼殺轉換率的。

UI 設計師可以建立一種固定的視覺模式或節奏,例如圖標或是小動畫,來引導使用者「網頁還沒看完,下面還有內容」。設計時也需注意欄位之間留白區域的尺寸:過大的空隙會讓人誤以為已經沒有內容了。

範例16:保持焦點,不要用連結淹沒使用者

為了滿足使用者可能的所有需求,有的網頁會在上下左右都貼上「連結」,但其實每多安插一個的連結(例如:「按這裡以了解更多」),就會增添讓使用者分心的風險,讓他們沒辦法滑到最後、看到你的 CTA(行動呼籲)。

附上連結不是錯誤,只是數量與位置都要妥善規劃。減少多餘的連結,可增加讓使用者注意到頁尾 CTA(行動呼籲)的機會。

 

 

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

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

 

 

 

其他閱讀

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

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

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

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

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

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

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

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

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

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

UI 設計的知識網站「GoodUI.org」整理分享了許多已經 A/B 測試的 UI 設計,先幫忙把常見的網頁排版都測完,幫助 UI 設計師/網頁設計師們省下許多功夫!

什麼是A/B測試

A/B 測試(A/B Test)運用了統計學的原理,顧名思義就是眼前有「A 版」與「B 版」兩種方法,為了測試哪種方法能獲得更好的市場反應,將 2 種版本同時上線,將消費者導入 A 或 B 版網頁做測試。

A/B 測試的優點在於可以得到實際的數據,而非依靠主觀意見來決定網站的架構與UI 設計,也能不落傳統思維的俗套。只是各個版本需運行一段時間,待累積足夠的數據,才能確保測試的準確性,也需耗費不少成本。

範例1:嘗試使用單欄排版取代多欄

多欄式排版的 UI 設計有分散頁面焦點的風險,而單欄式排版可以更好地安排內文敘述,同時從上而到下引導讀者的視覺動線也更加直覺,也能避免於閱覽者分心。最後可以安排醒目、富有號召力的內容做結尾。

範例2:在行動呼籲前先給予誘因

UI 排版上,先給予像是「送禮」等誘因,是一種基於互惠原則的有效說服策略,同時也是能優化 UX 使用者體驗、改變顧客想法的最簡單方式。即使聽起來似乎很理所當然,但嘗試表現出友善的態度,如一封感謝信、小紀念品等,也能讓網站受眾的 UX 體驗更佳。這個微小的 UI 調整,也許會在未來帶來出乎意料的好處。

範例3:嘗試合併類似功能的欄位,避免版面破碎化

 

 

範例4:讓社群證明價值,不要自吹自擂

社群的廣泛好評對於提高轉化率是很好的說服策略,當客戶看到其他用戶支持並討論您的產品服務,會增進他們想深入了解的動機。

嘗試蒐集過往客戶的推薦文、滿意度證明或各種可以佐證的數據證明,並放在網頁上吧!

範例5:不要害怕重複顯示引導指示,只要放在不同位置就好

在跨度大或多分頁的網站中,重複出現讓使用者點擊的行動呼籲是可行的,但當然不是指讓「購買」等按鈕在同一畫面重複顯示10次,這麼做肯定會惹惱使用者……。

重點在於合理規劃欄位分配,因長長的一頁式網頁已相當能被大眾接受,不需像過去一樣,把所有網頁元素都壓縮在一個螢幕大小。所以在一頁式網頁的最上方設置一個適中的點擊按鈕、最下方放置一個醒目的點擊按鈕,也是符合UX使用者體驗的原則。

根據 A/B 測試出來的使用者習慣,當使用者「滑」網頁到最底時,看到可點擊的按鍵,他們會停下來思考接下來要做什麼 —— 例如點下那個「購買」鍵。

範例6:讓「可點擊」和「可選擇」的外觀有差異

為了清楚的引導訪客使用網站介面,UI 設計師要明顯區分出「可點擊」(如連結或按鍵)、「可選擇」(如選單)和純文字的樣式,不只在設計上要有所區別,同時上方描述文字也必須簡潔清楚。可以利用視覺元素,例如:顏色、深淺和對比度等,來達到又美觀又可以區分的效用。

例如以圖例來看,設計師選擇「藍色」做為網站上可點擊按鍵的色調,而選擇「黑色」為當前所在頁面的名稱。簡明扼要的顏色應用就能達到不言而喻的效果。最重要的是:千萬別使用過多的顏色混淆使用者。

推薦閱讀:為落實“數位優先”的UI設計…Audi,福斯竟將LOGO壓扁了!

範例7:突顯最推薦的項目,避免讓所有項目都看起來相同

有心理學研究表示,當人們眼前的選擇越多,反而會陷入一種「分析癱瘓」的狀態,導致從選擇中挑選的機率越低。

UI 設計師為了避免這個困境,比起單純陳列所有的項目,強調突出最主要的商品或服務是更好的做法。

推薦閱讀:UI設計師的配色攻略:5個黑色的設計意義/用法

範例8:讓使用者主動選擇「復原」,而不是重複詢問意圖

想像一下,當按下按鍵或連結,網頁可能會出現兩種提示:第一種是在介面底部出現「復原」(undo)鍵,讓你回復至上一步;另一種則是跳出視窗要你「確認即將要進行的操作,確認後無法復原」。這兩者會帶給消費者什麼不同的使用者體驗 (UX)?

跳出視窗要你「確認自己在做什麼」會讓使用者覺得備受質疑,而「復原」提供使用者就算操作錯誤也可以回復到上一步的功能,則會讓人感到友善、包容與尊重。

另外,若使用者需重複的進行某項操作,網頁不斷跳出提示視窗,也讓使用者感到操作效率低下,產生不佳的 UX 體驗。

 

 

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

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

 

 

 

其他閱讀

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

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

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

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

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

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

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

SEO課程先修班:什麼是谷歌分析中的工作階段?(下)

SEO課程先修班:什麼是谷歌分析中的工作階段?(下)
SEO課程先修班:什麼是谷歌分析中的工作階段?(下)

各位想報名SEO 課程的同學們都知道谷哥分析中的工作階段是甚麼嗎?還不曉得的同學讓今天的先修班告訴你吧!!(下)

本篇為上篇,下篇請點此SEO課程先修班:什麼是谷歌分析中的工作階段?(上)

使用者因來源變更而結束工作階段

每次使用者的廣告活動來源變更時,Google Analytics 就會開啟新的工作階段。就算是廣告活動來源在現有工作階段仍為「開啟」狀態時 (意即經過的時間不到 30 分鐘) 半途變更,系統一樣會關閉原工作階段並開啟新的工作階段。

▲ 然訪客「未」關掉完成交易的頁面,但是又透過另一個來源(廣告活動)開啟同一個網站,因此新的工作階段啟動。(圖片來源:達內教育SEO 課程

 

承上述訪客 A 的例子,我們知道,最初他是藉由自然搜尋關鍵字「SEO課程」進入網站的。而現在時間是 13:01,現有的工作階段「Session#2」到期時間為 13:31。在 13:23 時,A又開啟了新視窗,在新視窗內搜尋關鍵字「網路行銷課程」並且在搜尋結果上看到你網站的關鍵字廣告連結。13:24 時,A 由此廣告連結點進你的網站。

雖然此時,現有的工作階段「Session#2」 仍為開啟狀態,且時間還沒滿 30 分鐘,但是因為 A 的行為等同是開啟了新的廣告活動來源,來源從「Google/自然搜尋」變更為「Google/付費搜尋」,所以 GA 系統一樣會關閉原工作階段「Session#2」,並開啟新的工作階段「Session#3」。「Session#3」由 13:24 開始計時,13:54 到期。

A 進行了 5 分鐘的網頁瀏覽互動後,又收到了友人的 Facebook 連結分享,點了連結赫然發現又再度連結進你的網站內!訪客 A 的來源將會從「Google/付費搜尋」變更為「Facebook」,並且重新計算為一個新的工作階段「Session#4」。

由此類推,假如 A 個動作在頻繁一點,就算是再短短的 5 分鐘內從 3 個不同來源一直連到你的網站,她就會在這 5 分鐘內造成 3 個工作階段。

註:直接來源 (direct traffic) 並不會更新工作階段的計算,也不會開啟一個新的廣告活動。

根據晚上 11 點 59 分結束工作階段

GA 預設於晚上的 11:59:59 秒工作階段將會逾時,並開始計算新的工作階段。若上例的 A 於晚上 11 點 59 分在網站內進行 3 分鐘的瀏覽行為,將會被計算為兩個工作階段。

SEO 能從工作階段看出什麼?

只要訪客一造訪網頁,則會開啟工作階段。只要訪客在 30 分鐘內跟此網頁有任何的互動,Google Analytics 都會從 0 秒開始從新計算 30 分鐘。除非他真的把網頁閒置在那邊超過 30 分鐘都沒有進行互動,否則會一直被計算為同一個工作階段。

工作階段可反應出訪客大略的回訪率。假設我網站今天的造訪人數只有 70,但工作階段卻有203 個,就代表平均每個人都回訪了 2 次至 3 次。

如何更改工作階段的設置

▲ Google Analytics 工作階段預設為30分鐘逾時,但透過此圖所示的步驟,SEO可以更改逾時時間(圖片來源:達內教育SEO 課程

 

位置:GA 左側點選「管理」,然後點擊「資源」下方的「追蹤資訊」打開選單,即可看到「工作階段設定」的選項(如上圖所示)。

從這裡可以更改工作階段逾時的時間設定,至於如何決定工作階段逾時時間,則要根據你的平均工作階段時間長度而定。例如訪客在你的網站平均瀏覽時間為 3-7 分鐘,那你可以將逾時時間設定為 7 分鐘。

 

 

更多關於SEO 教學相關介紹文章請到本部落格首頁搜尋喔~

 

 

 

其他閱讀

線上職訓正夯 從零開始花半年錄取軟體工程師

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

阿嬤也能coding了?2020人工智慧想對我們做什麼?

人工智慧,機器人,Python,大數據到底有什麼關係?

你家萌寵也能成為人工智慧機器人的訓練師~可能嗎?()

人工智慧不僅可以自動駕駛,現在還會打棒球?!()

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

SEO課程先修班:什麼是谷歌分析中的工作階段?(上)

SEO課程先修班:什麼是谷歌分析中的工作階段?(上)
SEO課程先修班:什麼是谷歌分析中的工作階段?(上)

各位想報名SEO 課程的同學們都知道谷哥分析中的工作階段是甚麼嗎?還不曉得的同學讓今天的先修班告訴你吧!!(上)

工作階段-GA (Google Analytics) 如何定義網頁?

對於 SEO 來說,GA (Google Analytics) 的「工作階段」可是非常重要的指標。因為 SEO 總是要了解究竟有多少訪客來到自己的網站、產生多少互動行為,而「工作階段」就是能真實反應訪客造訪你網站後「如何互動」的指標,比不重複瀏覽、新使用者等指標更容易反應「訪客如何使用你的網站」。

GA (Google Analytics) 如何定義網頁「工作階段」?

簡單來說,當只要有訪客開始瀏覽網頁時,即開啟了一個工作階段。

一個工作階段包含了各式各樣的使用者互動:如網頁瀏覽、任何事件的觸發、社交互動、線上交易等。

一個工作階段可以比喻成一個容器,容器內裝了各式各樣東西。每一樣東西,都代表使用者與網站的各種互動行為。

▲ 一個工作階段可以比喻成一個容器,容器內裝了各式各樣東西。每一樣東西,都代表使用者與網站的各種互動行為。(圖片來源:達內教育SEO教學

 

一個使用者可以開啟多個工作階段,多個工作階段可於一天內或是好幾天中發生。一個工作階段結束後,新的工作階段就會被開啟。結束一個工作階段的時間如下:

根據時間決定何時結束一個工作階段:

  1. 閒置(使用者網頁開者但是不跟網頁有任何互動)30 分鐘後
  2. 當天晚上 11 點 59 分 59 秒

根據來源變更而決定何時結束一個工作階段:

  1. 使用者透過某廣告/活動連到網站,離開之後又經由另一個廣告活動造訪該網站。

根據閒置時間結束工作階段

根據預設,一個工作階段會在閒置 30 分鐘後結束 (不過我們可以調整時間的長度,結尾會介紹如何調整)。若這 30 分鐘內,當你進行任何的網頁互動,Google Analytics 都會將此工作階段重新計算,也就是離逾時的時間再加 30 分鐘。

範例

假設你今天有一個販售網路行銷課程教材的網站,訪客 A 在 Google 搜尋頁面搜尋「SEO 課程書」,在搜尋結果上看到你的網站並點進你的網站,Google Analytics 就會開始計時,即開啟了一個工作階段「Session#1」。此時正是中午 12:00。假如 A 開啟網頁之後不久便開始午休(但是未關閉網頁),因此他與網站沒有任何互動,如此過了 30 分鐘(12:30)後,此工作階段「Session#1」就會結束,並於 12:31 時開啟一個新的工作階段「Session#2」。Session#2 預計將於 13:01 到期。

12:40 後,A 午休結束,開始與網站上的元素互動 (例如完成事件、進行社交互動或開啟新網頁)。每次互動發生時,Analytics (分析) 都會重設此工作階段的到期時間 (從互動發生時間開始往後推 30 分鐘)。

例如,12:41 時 A 點了該網頁的「產品頁面」連結,即開啟一個新的互動,導致該網頁的工作階段新設定一個 30 分鐘的期限。因此本來預計將於 13:01 到期的 Session#2,延至 13:11(12:41+0:30 = 13:11)到期。

12:55 時,A在頁面上看到了一款不錯的 SEO 教學書籍,並加入了購物車,又觸發了新的互動事件。由此類推,Session#2 到期的時間又延至 12:55+0:30 = 13:25 到期。13:01 時,A 完成交易,Session#2 到期的時間又從 13:25 延至 13:31。

▲ 此範例的整個過程,可簡化成此流程圖。第一個工作階段因為閒置時間超過 30 分鐘,超過 30 分鐘就到了第二個工作階段。第二個工作階段中包含了四個互動,每一次的互動都會將工作階段延後 30 分鐘。(圖片來源:達內教育SEO課程

 

使用者因來源變更而結束工作階段

每次使用者的廣告活動來源變更時,Google Analytics 就會開啟新的工作階段。就算是廣告活動來源在現有工作階段仍為「開啟」狀態時 (意即經過的時間不到 30 分鐘) 半途變更,系統一樣會關閉原工作階段並開啟新的工作階段。

▲ 然訪客「未」關掉完成交易的頁面,但是又透過另一個來源(廣告活動)開啟同一個網站,因此新的工作階段啟動。(圖片來源:達內教育SEO課程

 

 

 

本篇為上篇,下篇請點此SEO課程先修班:什麼是谷歌分析中的工作階段?(下)

更多關於SEO課程相關介紹文章請到本部落格首頁搜尋喔~

 

 

 

其他閱讀

線上職訓正夯 從零開始花半年錄取軟體工程師

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

阿嬤也能coding了?2020人工智慧想對我們做什麼?

人工智慧,機器人,Python,大數據到底有什麼關係?

你家萌寵也能成為人工智慧機器人的訓練師~可能嗎?()

人工智慧不僅可以自動駕駛,現在還會打棒球?!()

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

APCS程式檢定懶人包告訴你從哪下手最快狠準!!(下)

APCS程式檢定懶人包告訴你從哪下手最快狠準!!(下)
APCS程式檢定懶人包告訴你從哪下手最快狠準!!(下)

正在研究APCS認證的你看這篇就對了!!有了事半功倍懶人包就距離成功更進一步啦!!(下)

本篇為上篇,下篇請點此APCS程式檢定懶人包告訴你從哪下手最快狠準!!(上)

程式設計實作題

  • 題型:共計 4 個題組,以撰寫完整程式或副程式計分。
  • 檢測與計分方式:為單節次檢測 (測驗時間 140 分鐘),滿分 400 分

實作題例題

問題描述

一次考試中,於所有及格學生中獲取最低分數者最為幸運,反之,於所有不及格同學中,獲取最高分數者,可以說是最為不幸,而此二種分數,可以視為成績指標。請你設計一支程式,讀入全班成績(人數不固定),請對所有分數進行排序,並分別找出不及格中最高分數,以及及格中最低分數。當找不到最低及格分數,表示對於本次考試而言,這是一個不幸之班級,此時請你印出:「worst case」;反之,當找不到最高不及格分數時,請你印出「best case」。註:假設及格分數為 60,每筆測資皆為 0~100 間整數,且筆數未定。

輸入格式

第一行輸入學生人數,第二行為各學生分數(0~100 間),分數與分數之間以一個空白間格。每一筆測資的學生人數為 1~20 的整數。

輸出格式

每筆測資輸出三行。
第一行由小而大印出所有成績,兩數字之間以一個空白間格,最後一個數字後無空白;
第二行印出最高不及格分數,如果全數及格時,於此行印出 best case;
第三行印出最低及格分數,當全數不及格時,於此行印出 worst case。

範例一:輸入

10
0 11 22 33 55 66 77 99 88 44

範例一:正確輸出

0 11 22 33 44 55 66 77 88 99
55
66

(說明)不及格分數最高為 55,及格分數最低為 66。

範例二:輸入

1
13

範例二:正確輸出

13
13 worst case

(說明)由於找不到最低及格分,因此第三行須印出「worst case」。

範例三:輸入

2
73 65

範例三:正確輸出

65 73
best case
65

(說明)由於找不到不及格分,因此第二行須印出「best case」。

評分說明

輸入包含若干筆測試資料,每一筆測試資料的執行時間限制(time limit)均為 2 秒, 依正確通過測資筆數給分。

針對實作題,我們分別使用 C、PythonJava 來解題,語法如下:

實作題解法#1 – 使用 C 語言(最費時):

#include < stdio.h >
#include < stdbool.h >

int len;
int *scores;

main()
{
    int i, j, tmp, highestUnpass, lowestPass;
    bool best=false, worst=false;
    scanf("%d", &len);
    scores = (int *)malloc(sizeof(int) * len);
    for (i=0;i < len;i++)
        scanf("%d", &scores[i]);
    for (i=0;i < len-1;i++)
        for(j=i+1;j < len;j++)
            if (scores[i] > scores[j])
            {
                tmp = scores[i];
                scores[i] = scores[j];
                scores[j] = tmp;
            }
    for (i=0;i < len;i++)
    {
        printf("%d", scores[i]);
        if (i < len-1)
            printf(" ");        
    }
    printf("\n");
    if (scores[len-1] < 60)
    {
        worst = true;
        highestUnpass = scores[len-1];
    }
    if (scores[0] >= 60)
    {
        best = true;
        lowestPass = scores[0];
    }
    if (worst == false && best == false)
    for (i=0;i < len;i++)
        if (scores[i] >= 60)
        {
            highestUnpass = scores[i-1];
            lowestPass = scores[i];
            break;
        }
    if (best)
        printf("best case\n");
    else
        printf("%d\n",highestUnpass);
    if (worst)
        printf("worst case\n");
    else
        printf("%d\n",lowestPass);
}

實作題解法#2 – 使用 Python 語言(最省時):

nums = int(input())
strScores = input()
scores = strScores.split(" ")
for i in range(len(scores)):
    scores[i] = int(scores[i])
scores.sort()
for i in range(len(scores)):
    print(scores[i], end="")
    if i < len(scores)-1:
        print(" ", end="")
print()
best = False
worst = False
if scores[len(scores)-1] < 60:
    worst = True
    highestUnpass = scores[len(scores)-1]
if scores[0] >= 60:
    best = True
    lowestPass = scores[0]
if best==False and worst == False:
    for i in range(len(scores)):
        if scores[i] > 60:
            lowestPass = scores[i]
            highestUnpass = scores[i-1]
            break
if best:
    print("best case")
else:
    print(highestUnpass)
if worst:
    print("worst case")
else:
    print(lowestPass)

實作題解法#3 – 使用 Java 語言(所花時間適中):

import java.lang.reflect.Array;
import java.util.Arrays;
import java.util.Scanner;

public class T01 {

    public static void main(String[] args) {
        // TODO Auto-generated method stub
        Scanner scanner = new Scanner(System.in);
        
        String nouse = scanner.nextLine();
        String data = scanner.nextLine();
        String[] strScores = data.split(" ");
        int len = strScores.length;
        int [] intScores = new int[len];
        int i;
        for (i=0;i < len;i++)
        {
            intScores[i] = Integer.parseInt(strScores[i]);
        }
        Arrays.sort(intScores);
        boolean best=false, worst=false;
        int highestUnpass = 0, lowestPass = 0;
        if (intScores[0] >= 60)
        {
            best = true;
            lowestPass = intScores[0];
        }
        if (intScores[intScores.length-1] < 60)
        {
            worst = true;
            highestUnpass = intScores[intScores.length-1];
        }
        
        for (i=0;i < len;i++)
        {
            System.out.print(intScores[i]);
            if (i < len-1)
                System.out.print(" ");              
        }
        System.out.println();
        if (best == false && worst == false)
        {
            for (i=0;i < len;i++)
            {       
                if (intScores[i] > 60)
                {
                    highestUnpass = intScores[i];
                    lowestPass = intScores[i-1];
                    break;
                }           
            }
        }
        if (best)
        {
            System.out.println("best case");
        }
        else
        {
            System.out.println(highestUnpass);
        }
        if (worst)
        {
            System.out.println("worst case");           
        }
        else
        {
            System.out.println(lowestPass);
        }                
    }
}

總結一下綜合比較的部分:

  • 學習上手速度:Python > Java > C
    (但 Python 與其他兩者程式語言差異較大,若一開始就選擇從 Python 語言上手 ,還是必須多花不少時間理解 C 語言,才能解答觀念題。)
  • 實際作答速度:Python > Java > C
    (Python 與 Java 都具備函式庫,在實作題作答時會比 C 語言快速。)

APCS 短期衝刺,從 Java 著手 CP 值最高!

以學習效果與所花時間的比值來說,學習 Java 的 CP 值較高。以下說明為什麼:

雖然 Python 堪稱「程式語言的瑞士刀」,其語法直觀、編寫簡潔快速,比起 C , Java 更容易上手,但由於觀念題是由 C 語言出題,若學 Python 再接觸 C ,對於有時間與其他課業壓力的考生來說,是相當辛苦、費時的。

Java 本身是由 C / C++為概念改良而成的語言,在設計之初,考量重點之一便是簡潔,因此學習與 C 語言語法架構相似的 Java ,讓考生有操作基礎後再學習 C 語言,更能在檢測學習之路,更加如魚得水。

綜合以上觀點,投資在能兼顧「理論題」與「實務題」的 Java,才是事半功倍、投報率最高的首選!

最後貼心提醒:109 年第 2 次 APCS 檢測暫訂 2020 年 7 月 4 日!

各位考生可以開始逐步準備 APCS 檢測囉!

 

 

更多關於APCS的文章請點下方連結,或到本部落格首頁搜尋喔!!

 

 

 

其他閱讀

從哆啦A夢到 iPhone…為何 UI 設計用「圓角」就是比較討喜?

APCS 程式檢定,該從 CJava 還是 Python 下手?

【前端工程師CSS教學】float浮動屬性

AI人工智慧救地球!GoogleAI 保護環境還比人類快 3000

所有APCS認證要知道的事都在這!!()

前端工程師起步的t初學小課(22):數學物件

如何分辨全端,後端和前端工程師?還不知道的可是不行的喔~

APCS程式檢定懶人包告訴你從哪下手最快狠準!!(上)

APCS程式檢定懶人包告訴你從哪下手最快狠準!!(上)
APCS程式檢定懶人包告訴你從哪下手最快狠準!!(上)

正在研究APCS認證的你看這篇就對了!!有了事半功倍懶人包就距離成功更進一步啦!!(上)

第一次考 APCS 程式語言,從哪個程式語言下手才會事半功倍呢?

若是一開始就選到一個好上手、測驗時又好作答的程式語言,就可以減少準備時間和學習負擔!本篇文章將以三款詢問度較高的應考語言 C , Java , Python 來做解析、比較。

此篇你將了解…

  1. 1. APCS 檢測的規範與基礎
  2. 2. C , Java , Python – 哪個語言適合解題?

先來了解一下檢測內容的基礎概念,APCS 的兩大題組 【觀念題】與【實作題】

程式設計觀念題

  • 題型:單選題 (含題組),以運算思維、問題解決與程式設計概念測試為主。
  • 檢測與計分方式:分兩節次檢測 (單節測驗時間60分鐘), 檢測分數為合併計分,滿分100分

觀念題例題#1

1. 右側程式碼,執行時的輸出為何?

  1. (A) 0 2 4 6 8 10
  2. (B) 0 1 2 3 4 5 6 7 8 9 10
  3. (C) 0 1 3 5 7 9
  4. (D) 0 1 3 5 7 9 11
void main() {
    for (int i=0; i<=10; i=i+1) {
        printf ("%d ", i);
        i = i + 1;
    }
    printf ("\n");
}

(出自 105 年 3 月 5 日,理論題第 15 題)

這一題主要要測驗的內容,是考驗考生是否了解 C 語言當中, for 迴圈的結構。

以 for 迴圈來說,三的區段的值分別是初始值、條件值、運算值。

在這一題當中,第一次執行的時候 i 為 0 ,所以會先印出 0。

接下來,由於第四行 i=i+1 的關係, i 會變為 1 。但是執行迴圈時,回到了 for 的第三部分,這時候,還是另外一次的 i=i+1 ,所以 i 變為 2,然後進行驗證, i <= 10

根據這樣的執行邏輯, i 每印出一個就會 +2 一次,直到 i 超過 10 之後跳出迴圈。

Ans:所以會印出「0 2 4 6 8 10」

觀念題例題#2

2. 若以 f(22)呼叫右側 f()函式,
總共會印出多少數字?

  1. (A) 26
  2. (B) 22
  3. (C) 11
  4. (D) 15
void f(int n) {
    printf ("%d\n", n);
    while (n != 1) {
        if ((n%2)==1) {
            n = 3*n + 1;
        }
        else {
            n = n / 2;
        }
        printf ("%d\n", n);
    }
}

(出自 105 年 3 月 5 日,理論題第 21 題)

本題所考內容,是對於 while 與 if 的熟悉度。

傳入 22 進 function 之後,會先印出 22。

接下來進入 while 迴圈,如果 n 不是 1 ,那麼這個迴圈會一直執行。

while 當中, 如果 n 是奇數,則 n 會變成 3xn+1 ,如果 n 是偶數,那 n 會變成原來的一半。

所以整個流程會是「22➔11➔34➔17➔52➔26➔13➔40➔20➔10➔5➔16➔8➔4➔2➔1」。

Ans:所以答案是 16 個。

 

 

本篇為上篇,下篇請點此APCS程式檢定懶人包告訴你從哪下手最快狠準!!(下)

更多關於APCS的文章請點下方連結,或到本部落格首頁搜尋喔!!

 

 

 

其他閱讀

從哆啦A夢到 iPhone…為何 UI 設計用「圓角」就是比較討喜?

APCS 程式檢定,該從 CJava 還是 Python 下手?

【前端工程師CSS教學】float浮動屬性

AI人工智慧救地球!GoogleAI 保護環境還比人類快 3000

所有APCS認證要知道的事都在這!!()

前端工程師起步的t初學小課(22):數學物件

如何分辨全端,後端和前端工程師?還不知道的可是不行的喔~

 

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

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

想當UI設計的你不可不知圓角設計的秘密!!圓角設計真的有比較好嗎?(下)

本篇為上篇,下篇請點此為何各個UI設計師都愛用圓角矩形?真的有比較好?(上)

1. 認知負荷論(cognitive load theory)

認知負荷理論是由澳大利亞新南威爾士大學的認知心理學家 John Sweller 於1988 年提出,他假設人類的認知結構由工作記憶和長時記憶組成。其中工作記憶也可稱為短時記憶,容量十分有限,一次只能記下 5~9 條簡單的訊息。

著有《視知覺》(Visual Perception)的瑞士物理學家、藝術家 Jürg Nänni 也曾提出:視網膜中區處理「正圓形」是最快速的,而處理多稜角的形狀則較吃力,速度也較慢。

結合以上理論我們可以得知:「圓角」更容易被大腦處理,因為它能夠降低大腦的認知負荷,也有利於在同樣時間內接受更多資訊。故比起一般的矩形,人類的大腦更願意接納圓潤的圓角矩型。

2. 視覺動線論

視覺動線是指在讀取眼前資訊時,視覺移動時所構成的方向路徑。這表示視覺動線決定了設計的焦點所在、擺放的位置與順序。

人眼在擷取資訊時,通常不一定會意識到有視覺動線隱藏其中,但眼睛卻會自然而然地依照視覺動線的設計來移動。

而圓角的「曲線」能自然地、圓滑地帶動一般人的視覺動線,而不會感到突兀與刺眼。

3. 曲線偏坦論(Contour Bias)

以演化心理學的觀點來看,人在面臨可能造成危害的事物時,會湧現出恐懼、不安與抗拒的情緒,這是人類經歷長時間的演化後遺傳下來的「適應體」,目的是幫助我們存活,提高生存機會。

除了心理學,腦科學也指出當面對尖銳的物體時,大腦的杏仁核活性會增強。杏仁核是邊緣系統的皮質下中樞,有產生情緒的功能,能產生恐懼記憶並引發應急反應,讓身體能逃離危險。

所以,人類對於形狀銳利的物品往往有先天的排斥,如會連想到尖銳物的方角矩型;對於有曲線的圓融物體則會有較高的接納度,讓圓角矩型不被人腦淺意識抗拒。

圓角不是萬靈丹 善用不濫用才是好的 UI

我們已經知道了圓角佔有許多先天優勢,但並非一股腦地選擇圓角就是正確答案。

在 UI 設計的領域,需要考量的有品牌識別、選用字體、色彩配置以及邊緣線條的採用等等,今天企業若要一切都端正穩重,那圓角就不一定是最佳解答;並且若是矯枉過正,使用弧度過大的圓角可能會看起來不專業,造成反效果。

UI師能塑造出怎麼樣的品牌視覺,背後有許多的「眉眉角角」,需要不斷吸收新知、訓練思考,長時間累積自我的美學素養。

 

更多UI或其他程式語言相關文章請點下方連結!!

 

 

 

其他閱讀

AI人工智慧救地球!GoogleAI 保護環境還比人類快 3000

CSS教學-displayvisible屬性介紹

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

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

新式身分證今年要登場啦!UI人快來看看有何設計要點吧!()

不懂網站前端在做甚麼?零基礎學員非讀這篇不可!!

人工智慧狗狗Aibo超擬真!!真狗要被取代了嗎?()

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

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

想當UI設計的你不可不知圓角設計的秘密!!圓角設計真的有比較好嗎?(上)

「圓角矩形」是近年盡人皆知的 UI 設計優勢,自 iPhone 4 發售至今日,到處都可以看到這個乍看簡單、但其實富有深意的幾何圖形。

然而圓角矩形何以能擄獲 Steve Jobs 以至於世人芳心呢?箇中緣由,其實也藏在哆啦 A 夢身上!

「圓角矩形」在現代 UI 中代表簡約、清爽與和平易近人。這些印象是因幾何圖形能帶給人們的心理暗示,任何圖形設計元素如形狀、線條、顏色、紋理和圖案,都能淺移默化地影響人們的感官認知,從而讓平面圖形附上不同的喻意。

乍聽之下有點形而上學,但其實我們從童年開始就不斷在接收幾何圖形的心理暗示了——許多卡通動畫中的角色,也都被賦予了「幾何暗示」!

三角形的小夫、方形的胖虎……哆啦 A 夢中的幾何暗示


▲ 哆啦 A 夢中的五個角色造型都跟個性息息相關(圖片取自 flickr)
 

 

陪伴許多人長大的國民作品《哆啦 A 夢》(ドラえもん),其中的主要角色個個形象鮮明、深入人心,是運用幾何圖形設計角色的好範例:

自戀愛現、在狡猾的同時又常有鬼點子的小夫,從是身形、嘴形到髮型都呈現三角形;而個性粗暴、蠻不講理,但在緊要關頭時又展現了正直的胖虎,無論臉型與身體都呈現寬大的方型。

至於個性善良溫柔、富有同情心的靜香,臉型與整題造型都較圓潤,沒有稜角;至於最備受喜愛的哆啦 A 夢,整個角色從頭到手都是圓型設計。

▲藝術家實際示範如何以基礎的圓型、三角形與方形設計角色形象。

不只日本,歐美的畫家、藝術家、動畫師等角色設計專家們也時常以「幾何造型」為基底,藉此創造出引人入勝、個性鮮明的角色,足見一個好的幾何設計所具有的優勢。

卡通之外 賈伯斯也瘋狂的圓角設計

不只卡通動漫畫之外,許多商業產品也為了讓客戶留下良好的第一印象,採用親民的圓角設計。

話說從頭,要談圓角矩型,就不得不談它成為設計趨勢的轉折點——iPhone 的發布。Steve Jobs 認為:所有物件都有圓角,而且相較於圓形與橢圓形,圓角矩形設計在生活中其實更為常見。

▲ 2020 年發售的 iPhone SE 依然保留標誌性的圓角設計。

1981 年,Steve Jobs 要求當時任職蘋果的電腦工程師 Bill Atkinson 設計出可以快速畫出圓角矩形的方法。當時已能快速繪製出長方形、圓形與橢圓形的 Bill當下便反駁:「圓角的矩形很難用電腦技術畫出來,而且又不必要!」

Steve Jobs 二話不說便把 Bill 從座位上拉起來,指著房間內的白板、桌椅等所有圓角矩型的物品。更帶著他出門上街,指出大街小巷每個小角落的圓角矩形給他看:「你看,到處都有圓角矩形!」

最後,在一個「禁止停車」的圓角矩形路標牌被指出來後,Bill 認輸了。「好啦,我放棄。我回去看看是不是真的跟我想像的一樣困難。」

隔天下午,Bill 就研究出快速繪製圓角矩形的方法。如今在 iOS 系統裡,這個幾何圖形已經成為其 UI 介面傳承的一部分。

不只是「好看」 圓角設計的背後深意

近年 3C 產品硬體設計上都大量使用圓角,UI 介面設計也順其自然地大量採用圓角。除了是為了要「跟上潮流」,圓潤的造型也的確讓產品設計加分。舉凡服務性產品、企業官網、社群媒體、網路商店等,需要 UI 介面的地方全都導入圓角設計。但是圓角「好看」的背後,到底是什麼原因?

人們為何會熱愛圓角的科學根據尚未定論,大致有以下三種說法:

 

本篇為上篇,下篇請點此為何各個UI設計師都愛用圓角矩形?真的有比較好?(下)

更多UI或其他程式語言相關文章請點下方連結!!

 

 

 

其他閱讀

AI人工智慧救地球!GoogleAI 保護環境還比人類快 3000

CSS教學-displayvisible屬性介紹

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

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

新式身分證今年要登場啦!UI人快來看看有何設計要點吧!()

不懂網站前端在做甚麼?零基礎學員非讀這篇不可!!

人工智慧狗狗Aibo超擬真!!真狗要被取代了嗎?()

前端工程師必讀之新手上路(22):數學物件

前端工程師必讀之新手上路(22):數學物件
前端工程師必讀之新手上路(22):數學物件

想當前端工程師的你,時下最熱門的程式語言之一JavaScript開始學了嗎?先來看看我們為你準備的文章吧!!(22)

Math物件的屬性

Math 是 JavaScript 的原生物件,可進行多種數學運算。該物件不是用函式建構式來生成,所有的屬性和方法都必須在 Math 物件上呼叫。

Math 物件包含多種屬性,列舉如下表:

 

    1. 屬性
    2. 描述
    1. 歐拉常數,是自然對數函數的底數,約為 2.718。
    1. LN2
    2. 2 的自然對數
    1. LN10
    2. 10 的自然對數
    1. LOG2E
    2. 以 2 為底的歐拉常數(E),其值約為 1.442。
    1. LOG10E
    2. 以 10 為底的歐拉常數(E),其值約為 0.434。
    1. PI
    2. 圓周率,其值約為 3.14159
    1. SQRT2
    2. 2 的平方根,其值約為 2.414
    1. SQRT1_2
    2. 1/2 的平方根,其值約為 0.707

 

以上 Math 物件的屬性,範例如下:

See the Pen The Math object by Tedutw (@Tedutw) on CodePen.

Math物件的方法

Math 物件除了有許多屬性外,也有許多方法,列表如下:

 

    1. 方法
    2. 描述
    1. abs(x)
    2. 不用懷疑,就是回傳x的絕對值
    1. acos(x)
    2. 回傳x的反餘弦(三角函數,數學符號是arccos)
    1. asin(x)
    2. 回傳x的反正弦(反三角函數,數學符號是arcsin)
    1. atan(x)
    2. 回傳x的反正切(反三角函數,數學符號是arctan)
    1. ceil(x)
    2. 回傳離x最近的整數:若x為浮點數則向上取整數;x為整數擇取x本身
    1. cos(x)
    2. 回傳x的餘弦(三角函數,數學符號是cos)
    1. exp(x)
    2. 回傳值為以x指數的E
    1. floor(x)
    2. 回傳離x最近的整數:若x為浮點數則向下取整數;x為整數擇取x本身
    1. log(x)
    2. 回傳x的自然對數
    1. max(x,y,z…,n)
    2. 回傳最大值
    1. min(x,y,z…,n)
    2. 回傳最小值
    1. pow(x,y)
    2. 回傳值為x的y次方
    1. random()
    2. 隨機回傳0與1之間的任一數
    1. sin(x)
    2. 回傳x的正弦(三角函數,數學符號是sin)
    1. sqrt(x)
    2. 回傳值為x的平方根
    1. tan(x)
    2. 回傳x的正切(三角函數,數學符號是tan)

 

以上 Math 物件的方法,範例如下(不包含三角函數):

See the Pen The Math object-method by Tedutw (@Tedutw) on CodePen.

綜合練習

讓我們來撰寫一個 JavaScript 程式:省先彈出一個視窗,要求使用者輸入數字。使用者輸入數字後,即會出現警示視窗,顯示該數字的平方根。

var x = prompt("請輸入一個數字","");
var answer = Math.sqrt(x);
alert(x+" 的平方根是 "+ answer);

執行結果如下:

此時前端工程師輸入「64」,則會有以下結果:

JavaScript 的數學物件就介紹到此。若能善用數學物件,則可減省時間。不必自己寫函數。下一章我們將介紹另一個 JavaScript 的原生物件——日期物件。

 

更多關於前端工程師HTML的文章請到本部落格首頁搜尋喔!!

 

 

 

其他閱讀

達內教育評價:別再抱怨不景氣了!高中生靠SEM接案創業每月額外收入7

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

痛失英才!台灣人工智慧學校執行長陳昇瑋辭世

人生是自己的, 達內教育評價要靠自己來體驗!

Javascript新手上路(十九):Method

前端工程師一定要懂的JavaScript變數命名規範~

想學習網站前端的零基礎學員不可不知的新手常識!!