الدَّلِيلُ الشَّامِلُ لِاسْتِخْدَامِ مَكْتَبَةِ الأَيْقُونَاتِ (الإِصْدَارُ الرَّابِعُ) فِي وَاجِهَاتِ المَوَاقِعِ
تَقْدِيمُ أَيْقُونَاتٍ وَاضِحَةٍ وَمُتَنَاسِقَةٍ فِي وَاجِهَاتِ المَوَاقِعِ يُضِيفُ سَلَاسَةً وَجَاذِبِيَّةً لِأَيِّ تَجْرِبَةِ مُسْتَخْدِمٍ (UX). يُقَدِّمُ هَذَا الدَّلِيلُ الشَّامِلُ طَرِيقَةً عَمَلِيَّةً لِاسْتِخْدَامِ مَكْتَبَةِ الأَيْقُونَاتِ بِالإِصْدَارِ الرَّابِعِ فِي صَفَحَاتِكَ، بِدَايَةً مِنْ رَبْطِ المَلَفِّ بِنُسْخَةٍ مُسْتَضَافَةٍ عَلَى شَبَكَةِ CDN، وُصُولًا إِلَى تَطْبِيقِ جَمِيعِ الأَنْمَاطِ الشَّائِعَةِ مِثْلَ التَّكْبِيرِ، الأَيْقُونَاتِ دَاخِلَ القَوَائِمِ، الإِطَارَاتِ وَالسَّحْبِ، الحَرَكَةِ، التَّدْوِيرِ وَالقَلْبِ، التَّكْدِيسِ، وَتَثْبِيتِ العَرْضِ، مَعَ لَمْسَةٍ مُهِمَّةٍ مُتَعَلِّقَةٍ بِتَوَافُقِ الوُصُولِ (Accessibility). الهَدَفُ أَنْ تَخْرُجَ مِنَ المَقَالِ وَأَمَامَكَ مَجْمُوعَةُ أَمْثِلَةٍ قَابِلَةٌ لِلتَّعْدِيلِ وَالنَّسْخِ فَوْرًا.
---أَوَّلًا: رَبْطُ الصَّفْحَةِ بِالمَكْتَبَةِ عَبْرَ CDN
أَسْهَلُ وَأَسْرَعُ طَرِيقَةٍ لِبَدْءِ اسْتِخْدَامِ الأَيْقُونَاتِ هِيَ
إِضَافَةُ سَطْرٍ وَاحِدٍ يُؤَدِّي إِلَى تَحْمِيلِ مَلَفِّ الأَنْمَاطِ مِنْ
شَبَكَةِ CDN. بِمُجَرَّدِ إِضَافَةِ هَذَا السَّطْرِ تَصْبَحُ
جَمِيعُ الفِئَاتِ (Classes) جَاهِزَةً لِاسْتِخْدَامِ بِلَا أَيِّ تَثْبِيتٍ
مَحَلِّيٍّ. يُفَضَّلُ وَضْعُ الرَّبْطِ قَبْلَ مَلَفَاتِ الأَنْمَاطِ الخَاصَّةِ
بِالمَشْرُوعِ عِنْدَ الحَاجَةِ لِلتَّصْحِيحِ أَوْ لِلسَّيْطَرَةِ عَلَى
الأَوْلَوِيَّاتِ. بَعْدَ الرَّبْطِ يُمْكِنُكَ إِدْرَاجُ أَيْقُونَةٍ
بِاسْتِخْدَامِ عُنْصُرِ <i> أَوْ
<span> وَإِسْنَادِ اسْمِ الفِئَةِ الخَاصَّةِ
بِالأَيْقُونَةِ المَطْلُوبَةِ.
<!-- كُودُ الرَّبْطِ المُرَادِ وَضْعُهُ فِي المَوْقِعِ --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <!-- مِثَالٌ سَرِيعٌ لِإِدْرَاجِ أَيْقُونَةٍ --> <i class="fa fa-car"></i>
يَتَأَثَّرُ لَوْنُ الأَيْقُونَةِ وَحَجْمُهَا بِكُلِّ مَا يُورَثُ مِنَ
الحَاوِيَةِ مِثْلَ font-size وَ color وَ
text-shadow. لِذَا يُمْكِنُكَ التَّحَكُّمُ بِهَا كَمَا لَوْ
كَانَتْ نَصًّا عَادِيًّا. فِي حَالَةِ ظُهُورِ قَطْعٍ بَسِيطٍ لِلْأَيْقُونَةِ
مِنَ الأَعْلَى أَوِ الأَسْفَلِ، يَكُونُ ذَلِكَ غَالِبًا لِارْتِفَاعِ
السَّطْرِ، وَيُمْكِنُ إِصْلَاحُهُ بِرَفْعِ قِيمَةِ
line-height فِي العُنْصُرِ الحَاوِي.
ثَانِيًا: تَكْبِيرُ الأَيْقُونَاتِ بِسُرْعَةٍ
عِنْدَمَا تَحْتَاجُ إِلَى إِبْرَازِ رَمْزٍ مُعَيَّنٍ، اسْتَخْدِمِ الفِئَاتِ الجَاهِزَةَ الَّتِي تَزِيدُ الحَجْمَ بِالنِّسْبَةِ إِلَى الحَاوِيَةِ. تَتَوَفَّرُ عِدَّةُ مُسْتَوَيَاتٍ تُلَبِّي مُعْظَمَ الِاحْتِيَاجَاتِ اليَوْمِيَّةِ. يَسْمَحُ ذَلِكَ بِالحِفَاظِ عَلَى تَنَاسُقِ الوَاجِهَةِ بِدُونِ كِتَابَةِ أَنْمَاطٍ مُخَصَّصَةٍ فِي كُلِّ مَرَّةٍ. تَذَكَّرْ أَنَّ التَّكْبِيرَ هُنَا نِسْبِيٌّ، مَا يَجْعَلُ التَّصْمِيمَ أَكْثَرَ مُرُونَةً عِنْدَ تَغْيِيرِ حَجْمِ الخَطِّ العَامِّ لِلْمَوْقِعِ.
<i class="fa fa-camera fa-lg"></i> <i class="fa fa-camera fa-2x"></i> <i class="fa fa-camera fa-3x"></i> <i class="fa fa-camera fa-4x"></i> <i class="fa fa-camera fa-5x"></i>
يُفَضَّلُ اخْتِيَارُ حَجْمٍ مُوَحَّدٍ لِعَنَاوِينِ الأَقْسَامِ وَالأَزْرَارِ
الأَسَاسِيَّةِ لِضَمَانِ التَّنَاسُقِ. أَمَّا دَاخِلَ النُّصُوصِ فَاخْتَرْ
حُجُومًا أَصْغَرَ لِتَجَنُّبِ تَشْتِيتِ الِانْتِبَاهِ. وَإِذَا لَاحَظْتَ
اخْتِلَافًا طَفِيفًا فِي خَطِّ الأَسَاسِ، يَكْفِي تَعْدِيلُ
line-height أَوْ vertical-align فِي السِّيَاقِ.
ثَالِثًا: تَحْوِيلُ القَوَائِمِ إِلَى قَوَائِمَ أَيْقُونِيَّةٍ
القَوَائِمُ الَّتِي تَسْتَخْدِمُ الأَيْقُونَاتِ بَدَلًا مِنَ النِّقَاطِ
العَادِيَّةِ تَكُونُ أَوْضَحَ بَصَرِيًّا وَأَسْهَلَ فِي المَسْحِ البَصَرِيِّ.
يَكْفِي تَعْرِيفُ القَائِمَةِ بِفِئَةٍ عَامَّةٍ مُخَصَّصَةٍ ثُمَّ وَضْعُ
أَيْقُونَةٍ لِكُلِّ عُنْصُرٍ دَاخِلَ <li>. يَضْمَنُ ذَلِكَ
مُحَاذَاةً مُتَنَاسِقَةً عَبْرَ عَنَاصِرِ القَائِمَةِ حَتَّى لَوْ اخْتَلَفَ
طُولُ النَّصِّ. يُمْكِنُ أَيْضًا خَلْطُ ذَلِكَ مَعَ الحَرَكَةِ لِكَشْفِ
حَالَةِ تَحْمِيلٍ أَوْ تَقَدُّمٍ.
<ul class="fa-ul"> <li><i class="fa-li fa fa-check-square"></i> تَمَّ الإِنْجَازُ بِالكَامِلِ</li> <li><i class="fa-li fa fa-spinner fa-spin"></i> جَارٍ التَّنْفِيذُ</li> <li><i class="fa-li fa fa-square"></i> لَمْ يَبْدَأْ بَعْدُ</li> </ul>
لِتَحْسِينِ القِرَاءَةِ، جَرِّبْ تَلْوِينَ أَيْقُونَاتِ الحَالَةِ (أَخْضَرُ لِلنَّجَاحِ، بُرْتُقَالِيٌّ لِلتَّقَدُّمِ، رَمَادِيٌّ لِغَيْرِ النَّشِطِ) مَعَ مُرَاعَاةِ تَبَايُنِ الأَلْوَانِ. وَإِذَا احْتَجْتَ انْتِظَامًا أَكْبَرَ، يُمْكِنُكَ إِضَافَةُ الفِئَةِ الخَاصَّةِ بِتَثْبِيتِ العَرْضِ عَلَى الأَيْقُونَاتِ دَاخِلَ العَنَاصِرِ.
---رَابِعًا: الإِطَارَاتُ وَالسَّحْبُ يَمِين/يَسَار
تُسْتَخْدَمُ الإِطَارَاتُ لِإِبْرَازِ أَيْقُونَةٍ دَاخِلَ فَقَرَةٍ أَوْ اقْتِبَاسٍ، بَيْنَمَا يُتِيحُ السَّحْبُ وَضْعَ الأَيْقُونَةِ بِمُحَاذَاةِ النَّصِّ لِلْيَمِينِ أَوِ اليَسَارِ بِحَسَبِ اتِّجَاهِ المُحْتَوَى. عِنْدَ اسْتِخْدَامِ السَّحْبِ دَاخِلَ حَاوِيَاتٍ ضَيِّقَةٍ، رَاقِبْ تَدَفُّقَ النَّصِّ وَتَأَكَّدْ مِنْ وُجُودِ مِسَاحَةٍ كَافِيَّةٍ حَتَّى لَا يَتَلَامَسَ النَّصُّ مَعَ الإِطَارِ. يُمْكِنُ أَيْضًا اسْتِخْدَامُ أَحْجَامٍ أَكْبَرَ لِلْأَيْقُونَةِ لِلْحُصُولِ عَلَى تَأْثِيرٍ بَصَرِيٍّ أَقْوَى.
<i class="fa fa-quote-left fa-3x fa-pull-left fa-border"></i> <p>فَقَرَةٌ تَوْضِيحِيَّةٌ بِجَانِبِ أَيْقُونَةِ الِاقْتِبَاسِ لِإِبْرَازِ المُحْتَوَى.</p>
إِذَا حَدَثَ تَدَاخُلٌ بَصَرِيٌّ، اسْتَخْدِمْ تِقْنِيَّةَ تَنْظِيفِ التَّدَفُّقِ (Clearfix) فِي الحَاوِيَةِ كَحَلٍّ سَرِيعٍ. كَمَا يُسْتَحْسَنُ ضَبْطُ مَسَافَاتِ الهَوَامِشِ (Margins) حَوْلَ الأَيْقُونَةِ لِتَفَادِي الِالْتِصَاقِ بِالنَّصِّ.
---خَامِسًا: الحَرَكَةُ لِلْأَيْقُونَاتِ
تُضِيفُ الحَرَكَةُ انْطِبَاعًا بِالحَيَوِيَّةِ، وَتُفِيدُ فِي عَرْضِ حَالَاتِ انْتِظَارٍ أَوْ تَحْمِيلٍ. يَتَوَفَّرُ أُسْلُوبَانِ أَسَاسِيَّانِ: دَوَرَانٌ مُسْتَمِرٌّ، أَوْ دَوَرَانٌ عَلَى خُطُوَاتٍ مُحَدَّدَةٍ يُعْطِي إِيحَاءً نَابِضًا. يُمْكِنُ دَمْجُ الحَرَكَةِ مَعَ حَجْمٍ أَكْبَرَ دَاخِلَ أَزْرَارِ الِانْتِظَارِ أَوْ فِي مُؤَشِّرَاتِ الشَّبَكَةِ.
<i class="fa fa-spinner fa-spin"></i> <i class="fa fa-circle-o-notch fa-spin"></i> <i class="fa fa-refresh fa-spin"></i> <i class="fa fa-cog fa-spin"></i> <i class="fa fa-spinner fa-pulse"></i>
لِلْحِفَاظِ عَلَى أَدَاءٍ جَيِّدٍ، لَا تُكْثِرْ مِنَ العَنَاصِرِ المُتَحَرِّكةِ فِي نَفْسِ الشَّاشَةِ. وَاحْرِصْ عَلَى دَلَالَةٍ وَاضِحَةٍ لِلْحَالَةِ حَتَّى لَا يَضِلَّ المُسْتَخْدِمُ بَيْنَ الحَرَكَةِ الزَّخْرُفِيَّةِ وَالحَرَكَةِ الوَظِيفِيَّةِ.
---سَادِسًا: تَدْوِيرُ وَقَلْبُ الأَيْقُونَاتِ
أَحْيَانًا تَحْتَاجُ إِلَى قَلْبِ اتِّجَاهِ السَّهْمِ أَوْ تَدْوِيرِ رَمْزٍ لِيَتَوَافَقَ مَعَ تَصْمِيمٍ مُعَيَّنٍ أَوْ اتِّجَاهِ لُغَةِ المُسْتَخْدِمِ (RTL). تُوَفِّرُ المَكْتَبَةُ قِيَمًا جَاهِزَةً لِلدَّوَرَانِ بِزَوَايَا شَائِعَةٍ وَالقَلْبِ أُفُقِيًّا أَوْ رَأْسِيًّا. جَدِيرٌ بِالذِّكْرِ أَنَّ التَّدْوِيرَ الشَّدِيدَ لِأَيْقُونَاتٍ غَيْرِ مُتَمَاثِلَةٍ قَدْ يُغَيِّرُ المَعْنَى البَصَرِيَّ، لِذَا اخْتَبِرِ الرَّمْزَ بَعْدَ التَّدْوِيرِ لِضَمَانِ دَلَالَتِهِ الصَّحِيحَةِ.
<i class="fa fa-arrow-right"></i> <i class="fa fa-arrow-right fa-rotate-90"></i> <i class="fa fa-arrow-right fa-rotate-180"></i> <i class="fa fa-arrow-right fa-rotate-270"></i> <i class="fa fa-flag fa-flip-horizontal"></i> <i class="fa fa-flag fa-flip-vertical"></i>
انْتَبِهْ عِنْدَ الجَمْعِ بَيْنَ تَدْوِيرِ وَقَلْبِ نَفْسِ الأَيْقُونَةِ؛ اخْتَبِرِ النَّتِيجَةَ بَصَرِيًّا وَلَا تَعْتَمِدْ عَلَى التَّوَقُّعِ فَقَطْ، لِأَنَّ بَعْضَ الأَشْكَالِ قَدْ تَفْقِدُ وُضُوحَهَا بَعْدَ التَّلَاعُبِ الزَّاوِيِّ.
---سَابِعًا: تَكْدِيسُ الأَيْقُونَاتِ (Stacked Icons)
يَفْتَحُ التَّكْدِيسُ مَجَالًا وَاسِعًا لِتَصْمِيمِ شَارَاتٍ وَرُمُوزٍ مُرَكَّبَةٍ بِسُهُولَةٍ، مِثْلَ وَضْعِ رَمْزِ شَبَكَةٍ اجْتِمَاعِيَّةٍ فَوْقَ دَائِرَةٍ، أَوْ وَضْعِ رَمْزِ مَنْعٍ فَوْقَ رَمْزِ كَامِيرَا. يُنْصَحُ بِاخْتِيَارِ أَلْوَانٍ عَالِيَةِ التَّبَايُنِ، وَتَحْدِيدِ حَجْمٍ مُنَاسِبٍ لِلْأَبِ لِلتَّحَكُّمِ بِسُرْعَةٍ فِي النَّتِيجَةِ النِّهَائِيَّةِ دُونَ تَعْدِيلِ كُلِّ طَبَقَةٍ عَلَى حِدَةٍ.
<span class="fa-stack fa-lg"> <i class="fa fa-circle fa-stack-2x"></i> <i class="fa fa-twitter fa-stack-1x fa-inverse"></i> </span> <span class="fa-stack fa-lg"> <i class="fa fa-camera fa-stack-1x"></i> <i class="fa fa-ban fa-stack-2x" style="color:red;"></i> </span>
IN حَالَةِ اسْتِخْدَامِ خَلْفِيَّةٍ رَقِيقَةٍ مِثْلَ دَائِرَةٍ مُجَوَّفَةٍ، تَأَكَّدْ مِنْ سَمَاكَةِ الحَدِّ وَاللَّوْنِ حَتَّى لَا يَضِيعَ الرَّمْزُ الأَمَامِيُّ عَلَى الخَلْفِيَّةِ.
---ثَامِنًا: تَثْبِيتُ عَرْضِ الأَيْقُونَاتِ (Fixed Width)
اخْتِلَافُ عَرْضِ الأَيْقُونَاتِ قَدْ يُسَبِّبُ اهْتِزَازًا بَصَرِيًّا فِي القَوَائِمِ وَالمِلَاحَةِ. تَثْبِيتُ العَرْضِ يَجْعَلُ كُلَّ الأَيْقُونَاتِ تَأْخُذُ المِسَاحَةَ نَفْسَهَا عَرْضًا، فَيَسْهُلُ مُحَاذَاةُ النُّصُوصِ المُجَاوِرَةِ وَتَصْبَحُ القَوَائِمُ أَكْثَرَ انْسِيَابِيَّةً. هَذَا مُفِيدٌ خُصُوصًا عِنْدَمَا تَتَجَاوَرُ رُمُوزٌ نَحِيفَةٌ مَعَ أُخْرَى عَرِيضَةٍ ضِمْنَ نَفْسِ العَمُودِ.
<i class="fa fa-home fa-fw"></i> الرَّئِيسِيَّةُ <i class="fa fa-book fa-fw"></i> المَكْتَبَةُ <i class="fa fa-cog fa-fw"></i> الإِعْدَادَاتُ
يُوصَى بِاسْتِخْدَامِ تَثْبِيتِ العَرْضِ فِي القَوَائِمِ الجَانِبِيَّةِ أَوْ عَنَاصِرِ التَّنَقُّلِ الرَّأْسِيَّةِ، كَمَا أَنَّهُ يُحَسِّنُ تَجْرِبَةِ القِرَاءَةِ عِنْدَ تَكْبِيرِ أَوْ تَصْغِيرِ حَجْمِ الخَطِّ العَامِّ لِلْمَوْقِعِ.
---تَاسِعًا: لَمْسَةُ وُصُولٍ لِلْأَيْقُونَاتِ الزَّخْرُفِيَّةِ (Accessibility)
عِنْدَمَا يَكُونُ دَوْرُ الأَيْقُونَةِ تَجْمِيلِيًّا فَقَطْ، يُفَضَّلُ إِخْفَاؤُهَا عَنْ قَارِئَاتِ الشَّاشَةِ حَتَّى لَا تُرْبِكَ المُسْتَخْدِمَ الَّذِي يَعْتَمِدُ عَلَى التِّقْنِيَّاتِ المُسَانِدَةِ. لِتَحْقِيقِ ذَلِكَ أَضِفْ سِمَةً تَجْعَلُ قَارِئَ الشَّاشَةِ يَتَجَاوَزُ الأَيْقُونَةَ. أَمَّا إِذَا كَانَتْ الأَيْقُونَةُ تَحْمِلُ مَعْنًى، فَاحْرِصْ عَلَى تَوْفِيرِ نَصٍّ بَدِيلٍ وَاضِحٍ بِجِوَارِهَا.
<i class="fa fa-home" aria-hidden="true"></i> <span class="sr-only">الرَّئِيسِيَّةُ</span>
بِذَلِكَ تَجْمَعُ بَيْنَ مَظْهَرٍ بَصَرِيٍّ جَذَّابٍ وَتَجْرِبَةِ وُصُولٍ سَلِيمَةٍ. حَاوِلْ دَوْمًا التَّمْيِيزَ بَيْنَ الأَيْقُونَاتِ الزَّخْرُفِيَّةِ وَالوَظِيفِيَّةِ لِتَقْدِيمِ تَجْرِبَةٍ مُحْتَرِفَةٍ لِكَافَّةِ المُسْتَخْدِمِينَ.
---الخُلَاصَةُ
بِاسْتِخْدَامِ هَذَا الدَّلِيلِ تَسْتَطِيعُ بِنَاءَ نِظَامِ أَيْقُونَاتٍ مُتَكَامِلٍ فِي دَقَائِقَ. اِبْدَأْ بِالرَّبْطِ مِنْ شَبَكَةِ CDN، ثُمَّ خَصِّصِ السُّلُوكَ البَصَرِيَّ بِاسْتِخْدَامِ التَّكْبِيرِ وَالحَرَكَةِ وَالتَّدْوِيرِ وَالتَّكْدِيسِ وَتَثْبِيتِ العَرْضِ، وَلَا تَنْسَ تَحْسِينَ الوُصُولِ. تَذَكَّرْ أَنَّ قُوَّةَ هَذِهِ المَكْتَبَةِ تَكْمُنُ فِي بَسَاطَتِهَا وَتَوَافُقِهَا مَعَ أَنْمَاطِ CSS العَادِيَّةِ؛ مَا يَمْنَحُكَ مُرُونَةً هَائِلَةً فِي التَّخْصِيصِ مَعَ احْتِفَاظِكَ بِأَفْضَلِ أَدَاءٍ وَتَجْرِبَةِ اسْتِخْدَامٍ مُمْكِنَةٍ.